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
-
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
- método de inicio de sesión correo electrónico y contraseña
- lo activo
- javieriranzo@hotmail.com
- pelos678
- lo activo
- método de inicio de sesión correo electrónico y contraseña
-
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
-
protegido con contraseña
- la pantalla de inicio es pública pero el resto te lleva a la de login
-
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
- javieriranzo@hotmail.com
- nuevacontraseña
-
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
-
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
- javieriranzo@hotmail.com
- minimo
-
activo el método de inicio de sesión con email y contraseña pues es obligatorio
-
pero parece que no es tan sencillo
AUTENTICACIÓN
-
para seguir clonar este ejemplo de nuevo y hacer que funcione y se despliegue para luego copiar sus funcionalidades
-
un tutorial en castellano y su repositorio (https://github.com/juandc/platzi-firebase-simple-auth)
-
otro tutorial
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
- 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
- [sw-precache](https://codelabs.developers.google.com/codelabs/sw-precache/index.html? index=..%2F..%2Findex#2)
- en el directorio
C:\nube\MEGA\programacion\HtmlCssEstatico\firebase\airhorn
- para lanzar el servidor en python
C:\Bitnami\ghost-0.8.0-2\python\python -m SimpleHTTPServer 3000
OAUTH
- buenas guiás en castellano y es de google.
- más tutoriales sobre firebase y en general
TUTORIAL DE CHRIS BANES
- tutorial de chris banes
- uso simplicity-para-javier como sitio a desplegar
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 luegofirebase login
o confirebase 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 ….