Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Curso de Firebase 5 para Web

Curso de Firebase 5 para Web

Juan Guillermo G贸mez Torres

Juan Guillermo G贸mez Torres

Configuraci贸n de Firebase en el proyecto

5/32
Recursos

Vamos a crear nuestro proyecto sin ning煤n framework de JavaScript, solo un archivo index.html, los estilos de la aplicaci贸n con CSS y algunos archivos de configuraci贸n para crear un servidor local mientras subimos el proyecto a un servidor de verdad. Toda la l贸gica de nuestra aplicaci贸n esta lista, as铆 que podemos concentrarnos en construir la conexi贸n Firebase y terminar algunas funcionalidades.

Lo primero que debemos a帽adir para crear nuestros proyectos son los archivos de Firebase, uno con el c贸digo base de la librer铆a y otro para cada servicio que utilizamos en nuestra aplicaci贸n. Gracias a esta divisi贸n nuestra aplicaci贸n puede cargar menos archivos y funcionar mucho m谩s r谩pido.

Aportes 37

Preguntas 21

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

馃憖 Si dominan GIT podemos hacer fork del proyecto en Github y seguir el curso desde este commit para escribir todo el c贸digo de la aplicaci贸n paso a paso 馃憤:

Alguien mas corre el video a 1.5x?

Como la carpeta config tiene el archivo con los datos del proyecto, por lo tanto al subir los archivos a github, no es bueno que vaya ese archivo all铆 y que lo vean los dem谩s, por eso se agrega ese archivo a .gitignore

驴El archivo ConfigFirebase.js puede ser le铆do por el cliente?
驴Qu茅 pasa si alguien lo descubre y lo usa en su app?

No me qued贸 claro eso.

驴Cu谩l es la extensi贸n de VSCode que utiliza el profe para lanzar ese mini efecto de fuego cada vez que editamos el c贸digo? 馃槏馃敟

Tengo que poner velocidad 2X porque aveces no entiendo que dice con tanta pausa, parecido a cuando habla AMLO.

Cuando se haga el deploy de la app en el hosting de firebase esos archivos js seran visibles desde el F12 en el navegador? Cualquiera podria ver mi config de conexion.

El proyecto est谩 en alg煤n repositorio?

Muchas gracias, pero ya encontre que es lo que tiene de diferente, Firebase solo actializao su interfaz.

A los nuevos estudiantes les comento que si quieren segir el paso de copiar el c贸digo para la web, Firebase solo te solicita que registre tu app nuevamente con el nombre y despues todo ya es igual.

Espero les sirva

Se debe crear dentro de la carpeta js, la carpeta con nombre config y adentro el archivo ConfigFirebase.js

A la fecha de este comentario, cambi贸 el nombre de la variable config por firebaseConfig, en la documentaci贸n de Firebase.

Si hace falta una actualizacion por ejemplo Gulp 鈥 ya tenemos LiveServer 馃槈

Como creaste ese proyecto O.o?!

Tengo una duda, actualmente estoy usando Nuxt para crear aplicaciones SSR, y quisiera hacer deploy en Firebase hosting, pero me preocupa de si este hosting + firebase functions puedan subir mucho los costos a largo plazo, incluso mas que hacer deploy en otras plataformas con bandwidth ilimitado, que tan recomendable es usar firebase hosting para una gran cantidad de usuarios?

Deberian actualizar este curso, hay muchas cosas en firebase y el codigo que no concuerdan con el video

Hola alguien sabe como agregar firebase a un proyecto de react ?

acabo de realizar este paso y no me aparece esa pantalla me aparece esta. me podr铆an ayudar por favor, 驴Que es lo que procede?

1.- 驴Registro el mismo nombre de mi proyecto?
2.- 驴Registro otro nombre?

Comentas que el archivo de configuraci贸n es privado pero si se a帽ade en como script de front en el index.html con que me meta en el browser puedo ver ese archivo y sus api keys. No entiendo entonces 驴Es privado ese archivo?

Como aclaraci贸n, yo me preocupe cuando el profesor mensiona que los datos de la configuracion son privados, me gener贸 la duda de como protegerlos (al final lo hice con variables de entorno) pero de igual forma al investigar un poco encontr茅 lo siguiente en la documentaci贸n de Firebase:
Nota: El objeto de configuraci贸n de Firebase contiene identificadores 煤nicos, pero no secretos, para tu proyecto.
Consulta la Informaci贸n sobre los proyectos de Firebase para obtener m谩s detalles sobre este objeto de configuraci贸n.

Link
Ac谩 les dejo el enlance, indican que los valores de este archivo realmente son pubicos, textual indican:
El contenido del archivo de configuraci贸n de Firebase se considera p煤blico, incluido el ID espec铆fico de la plataforma (que ingresaste en el flujo de trabajo de configuraci贸n de Firebase console) y los valores espec铆ficos de tu proyecto de Firebase, como la clave de API, la URL de Realtime Database y el nombre del dep贸sito de Storage. Por ello debes usar reglas de seguridad para proteger los datos y los archivos que almacenas en Realtime Database, Cloud Firestore y Cloud Storage.

Quien puede aclarare cual es el nombre del servidor local que nombro el profesor? no se lo entiendo bien.

Acabo de crear una aplicaci贸n IONIC con REACT y la mayor铆a de configuraci贸n actual a fecha de 21/03/2020, si alguien le interesa compartir alg煤n consejo o pedirlo solo debe contactarme v铆a twitter, la verdad que es incre铆ble la de cosas que ofrece ahora mismo Firebase, y si te interesa el potencial de todas las opciones de configuraci贸n para aprenderlas , cuenta con mi ayuda!!

Lo que he entendido hasta ahora es que Firebase es un backend gestionado, le quedar铆a a uno hacer el front end. Con qu茅 herramienta se puede hacer el front end r谩pidamente?

Los que no les salga igual al profesor debemos:

  1. crear la carpeta config dentro de JS y nombrarla como ConfigFirebase.js
  2. en firebase: en configuracion/general/tus aplicaciones/firebase SDK snippet nos sale por defecto en Automatico, lo colocamos en RED CDN aqui ya encontramos la variable firebaseConfig, OJO! nuestra variable tiene un nombre diferente a la del profesor (seguro esto sera importante mas adelante ) para que tengamos presente

Yo estoy haciendo este curso con NextJs y aqui dejo mi commit

https://github.com/jlbousing/nextjs-firebase-practica/commit/78de0139ad4ffe6913c53a3b4938344ce62dd1a2

Para hacer el equivalente de lo que se hizo aqu铆 en Next, primero se necesita importar un m贸dulo utilizando firebase. Eso se logra con lo siguiente:

npm install firebase

y en el archivo de configuraci贸n, se hace lo mismo que el profe hizo. Se copia el mismo json pero la diferencia es que en nuestro caso se debe exportar la configuraci贸n para utilizarla en otras p谩ginas o componentes de NextJs. Justo asi:


import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "AIzaSyDcozaEYbaLxHhZ_haJJVGIZCIy7Ai8YRE",
  authDomain: "blogeekplatzi-9d7b3.firebaseapp.com",
  projectId: "blogeekplatzi-9d7b3",
  storageBucket: "blogeekplatzi-9d7b3.appspot.com",
  messagingSenderId: "68896446890",
  appId: "1:68896446890:web:60c48ee8cf52d30d86b3d3",
  measureme ntId: "G-7WBKKRZSFP"
};

// Initialize Firebase
export const app = initializeApp(firebaseConfig);

Por cierto, las configuraciones pueden ser publicas sin ningun problema. Firebase utiliza las reglas para impedir acceso u operaciones indeseadas en la base de datos. Muy seguramente en futuras lecciones de este curso veremos esto.

Alguien mas noto que cuando se realiza el c贸digo en el archivo
de la ruta js/config/ConfigFirebase.js se nombra el objeto como : VarConfig

const varConfig={
...
}

y al inicializarlo en el js/util/general.js inicializa firebase con el objeto config en ves del objeto VarConfig declarado previamente?

Y si utilizo algun framework como funcionaria? jaja

hay algun problema de seguridad en q el archivo de configuraci贸n quede en el lado del cliente

Me estaba rayando porque el proyecto no inclu铆a el archivo de configuraci贸n, luego vi el gitiginore, simplemente hay que crear este archivo ya:D

驴C贸mo cre贸 el proyecto? us贸 node?

Simon solo descarga el repo y con un reset --hard al ultimo commit. y dawn listo!

A alguien m谩s no le dan el url de su storageBucket en el script? Alguien sabe el por que?

驴Qu茅 pasa con el script src=鈥https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js鈥 , se supone que es el m谩s importante ya que exporta la coleccion completa de firebase , pero no lo encuentro en el proyecto jeje 馃槃?

Hola, estoy apenas tomando el curso y veo muchos cambios de lo que dice el video, en mi consola me dice que instale 鈥渇irebase cli鈥 en el curso no se contempla nada de esto, alguien tiene esto actualizado?? el firebase cli debe instalarse en c: directamente?

Todas esas carpetas en js, las creo el profesor? o las copio de alguna parte?

Existe algun paqueta donde vengan todos estos archivos ya configurados por defecto como los tiene el profesor?

tengo una pregunta ahora se crean sdk?

para a帽adirle firebase eso es cierto sirve?

En un proyecto donde yo creo mi frontend y uso firebase como backend (no nodejs) al publicar mis datos de configuracion (id y project) que impide que usuarios tomen esos datos y hagan hit a el api de auth para crear/crack/bruteforce usuarios validos y una vez que lo consigan, tener acceso a mi base de datos?