firebase

PROPÓSITO

  • explorar firebase como opción de despliegue y hosting aunque es bastante más que eso.

  • lo descubro cuando estaba con los cambios en aerobatic

  • página principal

  • el plan spark (chispa) es como llaman al plan free

  • tiene un límite de proyectos que no queda claro cual es pero que se puede aumentar solicitándolo

Quota Request
Quota Granted
Dear Developer,
We have approved your request for additional quota for non-paid Cloud Services. Your new quota should take effect within one hour of receiving this message.

GO TO MY CONSOLE
Sincerely,
Google Cloud Platform Trust & Safety

INSTALACIÓN

  • es necesario tener node instalado
npm install -g firebase-tools
C:\proyectos\firebase\minimo>npm install -g firebase-tools
C:\Users\Usuario\AppData\Roaming\npm\firebase -> C:\Users\Usuario\AppData\Roaming\npm\node_modules\firebase-tools\lib\bin\firebase.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\firebase-tools\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ firebase-tools@7.7.0
added 419 packages in 79.308s


   ╭──────────────────────────────────────╮
   │                                      │
   │   Update available 5.6.0 → 6.13.0    │
   │       Run npm i npm to update        │
   │                                      │
   ╰──────────────────────────────────────╯

firebase --version
7.7.0

TUTORIALES

  • tutorial de platzi bastante bueno que completa la información de firebase pues es super clara

  • ver esta wiki del IES San Clemente con un buen ejemplo en firebase

  • para la base de datos es necesario crearla antes como RealTimeDataBase con el nombre de productos

  • editar las reglas para que se pueda acceder

{
  /* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
  "rules": {
    ".read": true,
    ".write": true
  }
}

COMANDOS

  • firebase login
  • firebase logout
  • firebase projects:list
    • para sacar la lista de proyectos
  • firebase init
  • firebase deploy
  • firebase serve
  • firebase use --add
    • para añadir un hosting a un proyecto

JAVIER-PUBLICO

  • creo un proyecto nuevo después de borrar uno anterior pues superaba el límite para la opción gratuita

  • tengo el límite asignado completo y no me deja crear un proyecto nuevo así que modifico holajavier para que sea javier-publico

  • inicializo firebase en el directorio firebase\javier-publico y lo despliego lo que provoca que ya no se vea el proyecto anterior sino la página de bienvenida

  • clono el proyecto tema-simple-hugo-demo y dejo todo en el directorio raíz

  • creo la carpeta themes y clono el tema en esa carpeta

  • autenticación

  • añado una aplicación web al proyecto

    • aplicacion-javier-publico
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/7.6.0/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#AVAILABLE-LIBRARIES -->

<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "AIzaSyAopZuztAPJEbcihbgAcRj_43EW4WZW9dk",
    authDomain: "holajavier-6d145.firebaseapp.com",
    databaseURL: "https://holajavier-6d145.firebaseio.com",
    projectId: "holajavier-6d145",
    storageBucket: "holajavier-6d145.appspot.com",
    messagingSenderId: "45432724672",
    appId: "1:45432724672:web:58d262f1bc060d5e2e6125"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>
  • segunda sesión de trabajo

  • del tema modifico el archivo themes\tema-simple-hugo\layouts\_default\baseof.html y en el directorio static meto los js, css y img que necesito.

  • añado un login.md

  • al entrar me lleva a ese login y una vez validado ya tengo el usuario

  • para eliminar el usuario puedo hacerlo desde las herramientas de desarrollo Storage\Local Storage donde hay una entrada con el usuario

  • al logear se queda en la pantalla de login

    • ya no
  • despliego y el resultado es el mismo en esta url

SITIO EN MARCHA 2019-12-11 23:36:29

  • sitio en marcha

  • protegido con contraseña

    • la pantalla de inicio es pública pero el resto te lleva a la de login
  • javieriranzo3@gmail.com

  • pelos678

  • sobre este ejemplo hacer uno con hugo que se llame javier-publico que sera donde poco a poco pase lo que quiero tener en la web

EJEMPLO WIKI IES SANCLEMENTE

  • la aplicación en el proyecto firebase\wikiiessanclemente
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#AVAILABLE-LIBRARIES -->
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "AIzaSyAr5hFAzoI3JBU3zelvN904G5J0Ft68Yu8",
    authDomain: "wikiiessanclemente.firebaseapp.com",
    databaseURL: "https://wikiiessanclemente.firebaseio.com",
    projectId: "wikiiessanclemente",
    storageBucket: "wikiiessanclemente.appspot.com",
    messagingSenderId: "1088821154395",
    appId: "1:1088821154395:web:0cbd1fd762baf5001d657e",
    measurementId: "G-LYEYYZZH5D"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

2019-11-19 19:10:37 CON AUTENTICACIÓN

  • sigo este ejemplo de platzi

  • javier-firebase-simple-auth

  • Habilitar Google Analytics en este proyecto

    • esta vez si Recomendado
    • cuenta de javier
  • creo la aplicación aplicacion-javier-firebase-simple-auth y me da el codigo que necesito

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.4.0/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#AVAILABLE-LIBRARIES -->
<script src="https://www.gstatic.com/firebasejs/7.4.0/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "AIzaSyDqtw68juac5vgJg79j1euVKL1WaStb3Po",
    authDomain: "javier-firebase-simple-auth.firebaseapp.com",
    databaseURL: "https://javier-firebase-simple-auth.firebaseio.com",
    projectId: "javier-firebase-simple-auth",
    storageBucket: "javier-firebase-simple-auth.appspot.com",
    messagingSenderId: "727853749847",
    appId: "1:727853749847:web:25f106ffb1740d2342b512",
    measurementId: "G-DDVPYLXTFT"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>
  • usuario y contraseña dada de alta en la consola de firebase en la web

  • en el directorio nuevo copio el directorio public cambiando las claves y hago un deploy

  • la url

  • funciona con la contraseña

  • desde la aplicación lanzada en local creo un nuevo usuario

  • javieriranzo3@gmail.com

  • patata

  • y lo veo en la consola de firebase

  • concretar esto y borrar proyectos que no me sirven

2019-11-17 18:10:23

  • copio el contenido de public del proyecto de hugo minimo a la carpeta de proyectos/firebase/minimo
  • nuevo proyecto minimo
    • con google analitycs con el usuario javier
  • añado la aplicacion
Antes de utilizar cualquier servicio de Firebase, copia y pega estas secuencias de comandos en la parte inferior de la etiqueta <body>:

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/7.4.0/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#AVAILABLE-LIBRARIES -->
<script src="/__/firebase/7.4.0/firebase-analytics.js"></script>

<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>
  • pero no lo hago a la espera de ver que pasa

  • me muevo al directorio public que es el que quiero desplegar

  • inicio sesión , inicio proyecto y lo despliego

firebase login
-- se abre un navegador para autenticarme con javieriranzo3@gmail.com
-- concedo permisos y me conecto exitosamente

C:\proyectos\firebase\minimo\public>firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  C:\proyectos\firebase\minimo\public

Before we get started, keep in mind:

  * You are currently outside your home directory

? Are you ready to proceed? (Y/n) y
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.
 ( ) Database: Deploy Firebase Realtime Database Rules
 ( ) Firestore: Deploy rules and create indexes for Firestore
 ( ) Functions: Configure and deploy Cloud Functions
>(*) Hosting: Configure and deploy Firebase Hosting sites
 ( ) Storage: Deploy Cloud Storage security rules
=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: (Use arrow keys)
> Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

? Select a default Firebase project for this directory:
  friendlychat-5a02c (FriendlyChat)
  holaburriel (holaburriel)
  holairanzo (holairanzo)
  holajavier-6d145 (holajavier)
> minimo-b0b98 (minimo)
  mooc-notas-2c63a (MOOC-notas)
  tienda-polymer (tienda-polymer)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? (public)

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) n

? Configure as a single-page app (rewrite all urls to /index.html)? No
+  Wrote public/404.html
+  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

+  Firebase initialization complete!

C:\proyectos\firebase\minimo\public>firebase deploy

=== Deploying to 'minimo-b0b98'...

i  deploying hosting
i  hosting[minimo-b0b98]: beginning deploy...
i  hosting[minimo-b0b98]: found 2 files in public
+  hosting[minimo-b0b98]: file upload complete
i  hosting[minimo-b0b98]: finalizing version...
+  hosting[minimo-b0b98]: version finalized
i  hosting[minimo-b0b98]: releasing new version...
+  hosting[minimo-b0b98]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/minimo-b0b98/overview
Hosting URL: https://minimo-b0b98.firebaseapp.com

You're about to initialize a Firebase project in this directory:

  C:\proyectos\firebase\minimo

Before we get started, keep in mind:

  * You are currently outside your home directory

? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ( ) Database: Deploy Firebase Realtime Database Rules
 ( ) Firestore: Deploy rules and create indexes for Firestore
 ( ) Functions: Configure and deploy Cloud Functions
>( ) Hosting: Configure and deploy Firebase Hosting sites
 ( ) Storage: Deploy Cloud Storage security rules
firebasel deploy
  • se añade el proyecto en el directorio C:\proyectos\firebase\minimo\public\public
    • copio el contenido en ese directorio y vuelvo a desplegar
C:\proyectos\firebase\minimo\public>firebase deploy

=== Deploying to 'minimo-b0b98'...

i  deploying hosting
i  hosting[minimo-b0b98]: beginning deploy...
i  hosting[minimo-b0b98]: found 129 files in public
+  hosting[minimo-b0b98]: file upload complete
i  hosting[minimo-b0b98]: finalizing version...
+  hosting[minimo-b0b98]: version finalized
i  hosting[minimo-b0b98]: releasing new version...
+  hosting[minimo-b0b98]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/minimo-b0b98/overview
Hosting URL: https://minimo-b0b98.firebaseapp.com
  • ahora se ve el sitio correctamente

  • para dar de alta la usuario

  • activo el método de inicio de sesión con email y contraseña pues es obligatorio

  • pero parece que no es tan sencillo

  • instrucciones

AUTENTICACIÓN

EMPIEZO CON UN PROYECTO WEB DE EJEMPLO FRIENDLYCHAT

  • en el directorio C:\nube\MEGA\programacion\HtmlCssEstatico\firebase\friendlychat\web
  • esta implementado por codelabs
  • clono el ejemplo que se llama FriendlyChat
  • creo el proyecto en el panel web
  • habilito la autenticacion
  • firebase ya lo tengo instalado
C:\nube\MEGA\programacion\HtmlCssEstatico\firebase>firebase version
3.2.2
  • versión 3.2.2 de firebase
C:\nube\MEGA\programacion\HtmlCssEstatico\firebase\friendlychat\web-start>firebase login

Already logged in as javieriranzo3@gmail.com

C:\nube\MEGA\programacion\HtmlCssEstatico\firebase\friendlychat\web-start>firebase use --add
? Which project do you want to add? friendlychat-5a02c
? What alias do you want to use for this project? (e.g. staging) chat

Created alias chat for friendlychat-5a02c.
Now using alias chat (friendlychat-5a02c)
  • lanzo el servidor
C:\nube\MEGA\programacion\HtmlCssEstatico\firebase\friendlychat\web-start>firebase serve
Starting Firebase development server...

Project Directory: C:\nube\MEGA\programacion\HtmlCssEstatico\firebase\friendlychat\web-start
Public Directory: ./

Server listening at: http://localhost:5000
  • y esto es lo que veo

chat con firebase

  • sigo con el tutorial con el uso de la base de datos la autenticación y modifican las reglas de uso
C:\nube\MEGA\programacion\HtmlCssEstatico\firebase\friendlychat\web-start>firebase deploy

=== Deploying to 'friendlychat-5a02c'...

i  deploying hosting
*  database: rules ready to deploy.
i  hosting: preparing ./ directory for upload...
*  hosting: ./ folder uploaded successfully
*  hosting: 8 files uploaded successfully
i  starting release process (may take several minutes)...

*  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-5a02c/overview
Hosting URL: https://friendlychat-5a02c.firebaseapp.com

OTRO EJEMPLO

OAUTH

oauth_firebase

TUTORIAL DE CHRIS BANES

PROBLEMAS

FIREBASE LOGOUT

  • da un error de permisos a pesar de decir que estoy con el usuario correcto
C:\Proyectos\hugo\javier-programacion>firebase deploy

Error: Failed to get Firebase project javier-programacion. Please make sure the project exists and your account has permission to access it.
  • se soluciona con un firebase logout y luego firebase login o con firebase login --reauth pues parece que el token expira

ASSERTION FAILED

  • al hacer firebase deploy a veces sale este error
C:\proyectos\hugo\javier-programacion>firebase deploy
Assertion failed: new_time >= loop->time, file c:\ws\deps\uv\src\win\core.c, line 309
  • la siguiente vez se ejecuta bien
  • parece que tiene que ver con el reloj del sistema ….