Bienvenida e Introducci贸n

1

Qu茅 aprender谩s sobre las firebase cloud functions

2

Qu茅 es firebase y las cloud functions

Consola web de administraci贸n

3

Consola de administraci贸n y documentaci贸n

4

Creaci贸n del proyecto de Cloud Functions

Extendiendo la Gesti贸n de Usuarios con Cloud Functions.

5

Creaci贸n de las cloud functions de autenticaci贸n

6

Probando y desplegando las Cloud Functions de autenticaci贸n

Extendiendo Firestore con Cloud Functions.

7

Creaci贸n de las cloud functions de Firestore

8

Probando y desplegando las cloud functions de Firestore

Extendiendo el Almacenamiento con Cloud Functions.

9

Creaci贸n de las cloud functions para el storage

10

Terminando de crear cloud functions para el storage y probando su funcionamiento

11

Probando y desplegando las cloud functions de almacenamiento con Firestore

Creando Cloud Functions HTTPS

12

Creaci贸n de la cloud function HTTPS

13

Bonus: Construyendo un controlador para la funci贸n HTTP

14

Probando y desplegando las cloud function HTTPS

Extendiendo el Hosting con Cloud Functions.

15

Usando las firebase cloud functions desde el hosting

Extendiendo crashlytics con Cloud Functions.

16

Creaci贸n de las cloud functions de Crashlytics

17

Probando y desplegando la cloud function de Crashlytics

Extendiendo Analytics con Cloud Functions.

18

Creaci贸n de las cloud functions cuando se registra un evento en las anal铆ticas de Firebase

19

Probando y desplegando la cloud function de anal铆ticas

Creaci贸n de pruebas unitarias a las Cloud Functions.

20

Creando pruebas unitarias en Firebase Cloud Functions

Optimizando las Cloud Functions.

21

Buenas practicas para las cloud functions

Cierre

22

Conclusiones finales y cierre

Curso de Firebase Cloud Functions 2019

Curso de Firebase Cloud Functions 2019

Juan Guillermo G贸mez Torres

Juan Guillermo G贸mez Torres

Usando las firebase cloud functions desde el hosting

15/22

Lectura

Firebase hosting permite usar las cloud functions para procesamiento al lado del servidor. Esto permite que puedas generar contenido din谩mico para tu sitio alojado en el hosting de firebase. Adem谩s puedes hacer:

  • Pre-render de tus SPA (Single Page Application) para mejorar el SEO: esto permite crear din谩micos tag de 鈥榤eta鈥 que mejoran el SEO en redes sociales o buscadores.
  • Brindar contenido din谩mico: No solo puedes brindar contenido est谩tico, tambi茅n es posible a partir una URL llamar una funci贸n que consulte algunos datos o los procese y con ello brindar un contenido din谩mico a las p谩ginas

驴C贸mo lo haces? Primero creas una funci贸n, ejemplo:

exports.renderPost = functions.https.onRequest((req, resp) => {
 console.log(req.query.idPost)
 return admin
   .firestore()
   .collection('posts')
   .doc(req.query.idPost)
   .get()
   .then(post => {
     return resp.status(200).send(`<!doctype html>
       <head>
         <title>Post</title>
       </head>
       <body>
           <article>
             <div>
                 <h2>${post.data().titulo}</h2>
             </div>
             <div>
                 <iframe type="text/html" width="500" height="385" src='${
                     post.data().videoLink}'
                     frameborder="0"></iframe>
             </div>
             <div>
                 Video
             </div>
             <div>
                 <p>${post.data().descripcion}</p>
             </div>
           </article>
       </body>
     </html>`)
   })
})

Ahora agregamos una configuraci贸n de rewrite en el archivo firebase.json:

{
   "hosting": {
     "public": "public",
      
     "rewrites": [ {
       "source": "/post", 
  "function": "renderPost"
     } ]
   }
}

Desplegamos la funci贸n y la aplicaci贸n web a firebase y probamos con las URL

https://your-firebase-project-id.firebaseapp.com/post?idPost=ID_POST

Veremos que nos muestra una p谩gina con el contenido HTML definido en la funci贸n.

Adem谩s para mejorar el rendimiento al momento de renderizar la p谩gina podemos usar el cach茅 de HTTP tanto el de los CDNs (Content Delivery Network) como el del browser. Esto lo puedes hacer de la siguiente forma:

resp.set('Cache-Control', 'public, max-age=300, s-maxage=600');

En esta l铆nea estamos modificando el cache, asignado un tiempo de cach茅 al browser de 5 minutos por medio del max-age y un tiempo de cach茅 al CDN de 10 minutos por medio del s-maxage.

Enlace sugerido:

https://firebase.google.com/docs/hosting/functions

Aportes 3

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Me gustar铆a ver un ejemplo con react 馃槃

Suena interesante habria que tomarse un tiempo para realizarlo con detalle

Nice!