Firebase es una plataforma de desarrollo de aplicaciones
de Google que ofrece herramientas y servicios para crear
y escalar aplicaciones. Incluye bases de datos en tiempo real,
autenticación, análisis y funciones de alojamiento. En este
curso, aprenderá a crear una aplicación móvil con HTML,
CSS, JavaScript y Google Firebase. Hola, campistas de código libre de alelos
y bienvenidos a mi curso Firebase totalmente interactivo
. En este curso, crearemos una aplicación móvil de lista de compras útil
, que puede usar solo o con otras personas con las que
vive.
Y, por supuesto, usaremos nuestro nuevo amigo
Firebase para conectar una base de datos en tiempo real a nuestra aplicación. Ahora, ¿qué
necesitas saber para tomar este curso? Bueno, debe
tener una comprensión básica de HTML, CSS y JavaScript.
Exactamente cuánto más sobre eso un poco más tarde. De acuerdo, una
cosa importante de este curso es que se
basa en desafíos, lo que significa que, en lugar de recostarse y simplemente
copiar el código que estoy escribiendo, le daré
un montón de desafíos para que los resuelva. Muy bien, hay dos
maneras de tomar este curso. La número uno, por supuesto, es
tomarlo aquí en YouTube. Y para eso, deberá configurar su
propio entorno local. Pero número dos, y mi
favorito personal, es hacer la versión interactiva en scrim BA.
Y si no has probado antes, oh, Dios mío, te
espera un regalo, encontrarás el enlace a la versión codificada en
la descripción a continuación. Bien, finalmente, si disfrutas de este
curso y regresas a esta parte del video,
entonces me encantaría.
Si pudieras dale me gusta a este video
. Y si tiene algún comentario para mí,
déjelo en los comentarios a continuación. O incluso mejor, comuníquese conmigo
en Twitter o LinkedIn. Y dicho todo esto, disfruta del
curso. Hola, bienvenidos a este nuevo curso de buceo en el que
crearemos una aplicación móvil con Firebase. ¿No le resulta
frustrante cuando quiere preparar algo para la cena y, en
medio de la cocina, se da cuenta de que se ha quedado sin un
ingrediente clave? Así que ahora tienes que vestirte bien e ir a la
tienda de comestibles. Pero espera, ¿qué otras cosas necesitabas conseguir de
nuevo? Sí, bueno, ves el problema aquí, ¿verdad? Este es
el problema para el 99,9 % de las personas : crear su propia aplicación
sería un sueño imposible, pero no para usted porque ahora es un
programador, lo que significa que puede usar sus superpoderes recién adquiridos
para resolver un problema en su vida. mediante la creación de su
propia aplicación. ¿Ahora que tan genial esta eso? Está bien, espero que estés tan
emocionado como yo.
Déjame mostrarte lo que construiremos al presentar
Add to Cart, una aplicación de lista de compras que te permite
realizar un seguimiento de lo que necesitas para tu hogar y te facilita ir a la
tienda de comestibles. Pan comido. Incluso puedes usar la aplicación con tu
pareja, familia o compañeros de piso. Incluso tenemos un testimonio aquí
de un fanático acérrimo. Ahora veamos cómo funciona. Muy bien,
esta es la pantalla de inicio. Y aquí es donde pones el nombre del
artículo que quieres conseguir, pongamos naranjas. Y luego
presionemos Agregar al carrito. Boom, ahí se suma Perfecto. Ahora
agreguemos algunos elementos más. Aquí vamos. Muy lindo. Ahora, cuando
vaya a la tienda de comestibles, puede abrir esta aplicación en su
teléfono y comenzar a marcar los artículos que ya ha puesto en su
carrito. Vamos a eliminar las naranjas haciendo clic en él
perfecto. Ahora, eso es de lo que estoy hablando.
Ahora, debo
mencionar en este punto que lo que construiremos no es
técnicamente una aplicación móvil nativa. Es una aplicación web disfrazada
de aplicación móvil. Pero al usar una técnica especial, nuestra aplicación se
verá y se sentirá como una aplicación móvil nativa. E incluso
podremos ponerlo en la pantalla de inicio de nuestros teléfonos, tanto iOS
como Android. Ahora la pregunta es, ¿qué necesitas saber
para tomar este curso? Bueno, definitivamente necesitas tener una
buena comprensión de HTML y CSS, qué bien lo preguntas, bueno,
debes poder codificar esto por ti mismo. Y si aún no sabes
cómo hacerlo, no te preocupes, te tengo cubierto. Si desea
comenzar con el curso gratuito de peras , aprender HTML y CSS,
puede acceder haciendo clic aquí.
Muy bien, ahora ¿qué pasa con
JavaScript? Ahora voy a mostrarte un montón de conceptos
relacionados con JavaScript. Ahora haga una pausa aquí y lea todo
esto cuidadosamente. Si te sientes cómodo con todos o la mayoría de
estos conceptos, entonces estás bien. Y si no, no se asuste,
porque puede aprender todo el JavaScript que necesita tomando un
curso gratuito de JavaScript en parejas sobre scramble, haga clic aquí para acceder a
él y luego puede volver a este. Muy bien, ahora que
tenemos todo eso cubierto, déjame presentarte al héroe
de este curso. Ah, [ __ ] imagen equivocada. Lo siento. Aquí vamos. En
este curso, aprenderemos cómo configurar nuestra propia
base de datos utilizando un servicio popular de Google llamado Firebase.
Muy rápidamente, ¿qué es Firebase? Bueno, Firebase tiene una base de datos, lo
que significa que los usuarios pueden guardar datos en Firebase, a la que se puede
acceder desde cualquier parte del mundo y que navegas cualquier día.
Firebase permite que la base de datos se actualice en
tiempo real.
Lo que significa que si realizo un cambio en la base de datos de mi
dispositivo, también será visible de inmediato para todos los que usen la
aplicación. Y finalmente, y mi favorito personal, Firebase es
muy fácil de usar, lo que lo convierte en la base de datos perfecta para
principiantes. Ahora, antes de comenzar este curso, siento que debemos
conocernos un poco mejor. Así que aquí hay un
poco sobre mí. Mi nombre es Rafa Nadal, súper fácil de
pronunciar. Lo sé, nací en India en 1991. Luego me mudé a
Noruega con mi familia cuando tenía cinco años.
Y vivo
aquí desde que Tres idiotas es una de mis películas favoritas.
En serio, si aún no lo has visto, tienes que verlo
. Adoro absolutamente el pollo con mantequilla con pan de ajo. Por
supuesto. Y finalmente, lo que más amo en este mundo,
además de mi esposa, por supuesto, es la tecnología, aprender sobre
ella y, sobre todo, compartir lo que sé con los demás. Así que espero que
estés listo para comenzar este curso conmigo, asegúrate de
tomar tu bebida favorita, yo haré lo mismo. Y comencemos a codificar. Bien, entonces, ¿ cuál es el primer paso?
De hecho, seguí adelante y configuré el HTML básico para que podamos
comenzar más rápido. Entonces tenemos un campo de entrada aquí con una identificación y
un marcador de posición. Y luego tenemos un botón aquí también, que
pueden ver aquí.
Vamos a ejecutar eso. Sí, eso está funcionando. Y
luego tenemos un poco de CSS aquí para cuidar
el margen y el relleno, echemos un vistazo al
archivo index.js. Así que aquí, ya tengo un desafío para
ti. Porque quiero que hagas que cada vez que escribas
algo aquí y presiones este botón, lo que hayas escrito
aquí se registre en la consola. Así que tómate una pausa aquí, pruébalo
por ti mismo y estaré contigo muy pronto. Buena suerte. Vale, espero que no haya sido tan malo.
Echémosle un vistazo juntos. Entonces, lo primero que queremos hacer,
por supuesto, es encontrar una forma de conectar lo que tenemos aquí, los
elementos HTML con JavaScript. Entonces, la forma en que queremos
hacerlo es usar const primero, y luego crear un campo de entrada, l,
lo llamaré la abreviatura de variable de elemento. Y aquí,
vamos a usar nuestro viejo y confiable documento de amigo, por supuesto, no obtener elemento por ID
. Y cuál fue la cosa que nombramos aquí,
echemos un vistazo aquí, campo de entrada. Así que diremos input en el
campo put aquí, perfecto.
La otra cosa, por supuesto,
será el botón de agregar L. Y diremos nuevamente, obtenga el elemento por
ID, y creo que solo fue un botón de agregar como este. Perfecto. ¿
Y qué es lo que hay que hacer clic antes de que
suceda algo? ese es el boton verdad? Así que adjuntemos un
detector de eventos al botón de agregar L que acabamos de crear. Así que
agreguemos el botón L y luego agreguemos el detector de eventos. Dentro de aquí,
por supuesto, queremos escuchar el evento de clic. ¿
Y qué es lo que queremos que suceda? Bien, hagamos la
función Primero, ábrala con corchetes. Y dentro
de aquí, siempre me gusta asegurarme de que las cosas
funcionan simplemente haciendo un registro de consola muy simple.
Probemos eso. Ahora. Ejecutar y hacer clic, funciona perfecto. Bien, ¿
cuál es el siguiente paso ahora? Así que tenemos que obtener cualquier valor
ingresado en el campo de entrada cuando se presiona el botón, está bien, así que
estoy seguro de que voy a necesitar esto porque aquí es
donde se guardan todos los datos, ¿ verdad? Así que voy a poner eso
aquí.
Y primero solo registre la consola que intentemos esa primera
ejecución y el registro de la consola, esa consola registra todo el HTML, ¿
verdad? Entonces, ¿qué es lo que queremos de eso? Bueno, no
queremos HTML, por supuesto, queremos el valor que se ingresa. Y
aquí, podemos usar valor de punto, este método que nos da el
valor. Así que intentémoslo. Ahora. ejecuta esto de nuevo. Y voy a
entrar aquí y decir perritos calientes. Y la consola de perritos calientes registró Perfecto.
Ahora, antes de que terminemos con esto, quiero agregar un poco más de
código aquí. Porque creo que es mucho mejor hacerlo de
esta manera. Deja que te enseñe. Así que aquí, voy a hacer una
variable. Y voy a decir que es un valor de entrada. Y
voy a establecer eso igual al valor del punto L del campo de entrada. Y luego
voy a usar esto en su lugar. Decir que voy a
registrar eso en la consola en su lugar.
Aquí vamos. Vaya, deshazte de eso. Ahí
estamos. Ahora, ¿por qué es esto mejor? Si bien hace lo mismo,
pero esto es mucho mejor, porque sabemos que queremos usar el
valor de entrada más adelante para escribir y es mucho mejor tenerlo
definido aquí una vez y luego usarlo en el resto del
código. Así que buen trabajo trabajando en el primer desafío, y nos
vemos en el próximo. Y ahora es el momento de que agregues el CSS
y aquí tienes. Así es como debería verse. Primero, obtuvimos
esta imagen realmente linda de un gato. Y luego viene el campo de entrada de texto
, y luego el botón. Y, por supuesto, desea escribir todo
el código CSS dentro del archivo index dot css. Y como
puede ver aquí, he agregado algunos comentarios aquí que le brindarán
la información que necesita, como la fuente de Google, el
color de fondo y todo eso.
Y ya seguí adelante y
agregué el código de Google Fonts aquí mismo. Ahora recuerda, este
es un desafío bastante grande. Así que da lo mejor de ti. Pero
no te preocupes demasiado si no lo haces exactamente bien. Así que
pausa la malla aquí, haz el desafío. Y volveré en
unos momentos. Buena suerte. Y estamos de vuelta. Espero que haya ido
bien. Echémosle un vistazo juntos. Entonces, lo primero que quiero
hacer aquí es dentro del archivo HTML de punto de índice, quiero
agregar un contenedor div para que todos los elementos estén dentro del
contenedor. Aquí vamos. Y luego queremos agregar una etiqueta de imagen, por
supuesto, para el gato, hagamos assets y luego cat dot png. ¿Está
funcionando? Echemos un vistazo. Y tenemos el gato aquí arriba. ¿
Perfecto o perfecto? ¿Consíguelo? Lo siento, por el mal chiste.
Vayamos al archivo CSS. Bien, vamos a descomentar todo esto
primero. Aquí vamos. Está bien, ya se ve mejor. Bien, entonces, ¿con
qué queremos empezar? De hecho, voy a comenzar con
el contenedor.
Hagamos un contenedor. Y quiero usar
Flexbox aquí. Así que voy a decir display flex de inmediato.
Aquí vamos. Y quiero establecer la dirección de flexión para que sea
columna. Perfecto. Y luego hagamos un ancho máximo de 320 píxeles. Ahora, ¿
por qué estoy haciendo esto con este ancho máximo? Bueno, resulta que
si configuramos el ancho máximo en 320 píxeles, básicamente todos los
dispositivos del mundo, especialmente los dispositivos móviles, podrán
mostrarlo sin problemas. Muy bien, entonces, ¿qué sigue? Centremos
este contenedor. Así que voy a usar el margen para eso. Hagamos un
margen de 20 píxeles, automático, tal vez, tal vez pongamos un poco
más allí. 30 píxeles Vale, me veo mejor. Ahora,
primero arreglemos esta imagen. Así que entremos aquí y apuntemos a la imagen.
Y luego lo vamos a hacer con 150 píxeles, mucho mejor. Y
luego, por supuesto, nuevamente, use el margen aquí para centrar eso
también.
Perfecto. Ahora cuidemos el campo de entrada y el
botón. Y como puedes ver aquí, ambos se ven muy similares. Entonces
podemos hacer algo de copiar y pegar aquí. Permítanme comenzar primero con el
campo de entrada de texto. Bien, primero eliminemos el borde
, cero, perfecto. Y luego agreguemos algo de relleno de 15
píxeles, tal vez. Bien, eso se ve bastante bien. Ahora,
también queremos un radio de borde. Y qué queremos hacer aquí
cinco, tal vez eso es un poco demasiado poco, y tal vez hacer ocho
en su lugar. Vale, me veo mejor. Ahora queremos aumentar el
tamaño de la fuente, así que hagamos el tamaño de la fuente. Voy a hacer 20 píxeles.
Muy bien, eso se ve bastante bien.
Ahora. Ahora que más
hay, queremos centrar el texto. Así que hagamos la alineación del texto
al centro. Y luego, por supuesto, queremos aplicar la fuente de Google
, tienes que hacerlo manualmente para el campo de entrada de texto
y el botón, no es lo suficientemente bueno como para ponerlo aquí. un rollo
Pero así es. Copiemos eso y pongámoslo
allí mismo. Impresionante. Bien, creo que se ve bastante bien. Así que voy
a seguir adelante y copiar todo esto, y pegarlo
aquí. Y, por supuesto, ahora se ve bastante
idéntico a esto. Ahora me voy a deshacer de estos dos. Y
ahí vamos. Mira, eso es todo lo que se necesitaba. Ahora, queremos
agregar algo de espacio aquí entre estos dos elementos. Y quizás
este elemento también. Entonces, ¿por qué no elegimos el elemento del medio,
que es el campo de entrada, por supuesto, y agregamos un poco de
margen, superior e inferior? Así que hagamos 10 píxeles. Sí, eso se
ve bastante bien. Ahora, hagámoslo un poco más pequeño
aquí y comparémoslo. ¿Se ve bien? Sí, se ve
bastante idéntico.
Tan impresionante trabajo. Ahora hemos terminado con la
mayor parte del CSS y podemos centrarnos en el JavaScript. Lo veré en
la próxima malla. Muy bien, en este scrim, vamos a
configurar nuestra primera base de datos en tiempo real de Firebase.
No sé sobre ti. Pero estoy súper emocionada con esto.
Debido a que aquí es donde llevamos nuestros proyectos al siguiente nivel,
una base de datos nos dará la capacidad de guardar datos a los que
puede acceder cualquier persona en el mundo. Entonces, el primer paso, por
supuesto, es dirigirse a la consola Firebase. Haz clic en este
enlace para abrirlo de tu lado. Una vez que esté allí, asegúrese
de iniciar sesión con su cuenta de Google. Si no
tienes uno, tienes que crear uno. De acuerdo, una vez que haya iniciado
sesión, verá esto, presione Crear un proyecto, luego puede nombrar el
área de juegos del proyecto, marque estas dos cosas y presione
Continuar.
No necesitamos Google Analytics para este proyecto.
Simplemente desactívelo y presione Crear proyecto, tomará un
par de segundos y configurará el proyecto por
usted. Una vez hecho esto, presione Continuar, lo llevará
a su consola. Ahora, en el lado izquierdo, verá la
base de datos en tiempo real, haga clic en eso, luego presione en crear base de datos, le
preguntará a qué ubicación desea ir, elija la
más cercana a usted, yo Voy a ir a Bélgica, luego
le preguntará si desea configurar la base de datos en
modo bloqueado o modo de prueba, vamos a ir al modo de prueba ahora.
Así que elige eso y presiona habilitar. Y ahí vamos, tenemos nuestra
configuración de base de datos en tiempo real. Ahora, el paso final es ir
aquí y presionar este ícono para copiar la URL de referencia de la base de datos,
que usaremos en un momento.
Muy bien,
déjame mostrarte la aplicación que tengo aquí. Esto se llama tiempo real.
Y es solo una aplicación de películas simple donde puedes agregar las películas
que quieres ver con alguien bastante estúpido,
lo sé. Pero ilustrará el punto. Entonces, lo primero que voy
a hacer es ir hasta aquí y hacer una const y decir,
configuración de la aplicación, voy a establecer esto igual para que sea un objeto.
Y
ahí, voy a decir la URL de la base de datos. Y voy a
configurar la cadena que acabo de copiar de Firebase, recuerde la
URL de referencia de su base de datos, péguela aquí,
minimicemos el navegador. Ahí estamos perfectos. Ahora, en el futuro,
debe asegurarse de que cada vez que le dé desafíos,
o esté ejecutando el código en su extremo, debe asegurarse de
que esto se reemplace con la URL de su base de datos específica;
de lo contrario, estará escribiendo a mi base de datos Y eso no es
algo bueno.
Porque imagina miles y miles de estudiantes
escribiendo en la misma pequeña base de datos, eso será
bastante caótico. Así que recuerda eso en el futuro. Bien, entonces, ¿
qué sigue? Ahora, para usar Firebase, necesitamos usar algún
código que viva en los servidores de Firebase. ¿Entonces cómo hacemos eso?
Exactamente. Entonces, veamos un ejemplo muy simple que he
configurado y luego volvamos a esto. Entonces, en el lado izquierdo,
notará que hice un archivo llamado functions.js. Vamos adentro de
ahí. Esto tiene una función muy simple que solo suma dos
números. Pero notará que tiene una palabra clave
delante de la exportación. ¿Qué significa eso? Bueno, imagina que quiero
usar esta función, no en este archivo, sino en un
archivo JavaScript diferente. ¿Como podría hacerlo? Bueno, el primer paso
sería escribir la función aquí y luego agregar exportar, para que
pueda exportarse a otro archivo. Y luego tienes que ir al archivo en el
que realmente quieres usarlo y usar la palabra clave Importar
primero importar, y luego lo que sea que queramos importar, tenemos que
ponerlo dentro de corchetes como este.
Entonces, ¿qué es lo que
queremos importar? Bueno, queremos usar la función de agregar. Así que
solo diremos agregar, solo esto aquí. Bien, ¿qué sigue? Ahora
hay que contarlo, ¿de dónde lo sacas? Así que va a
ser este archivo, ¿verdad? Entonces, ¿tenemos que decir importar esto de?
Y luego diremos functions.js. Entonces, ¿podemos comenzar a usar agregar aquí?
De hecho podemos, y quiero que te asegures de que así sea. Entonces, el
desafío es agregar el registro de la consola, usando solo dos números, haga una pausa
aquí y nos vemos en un momento.
Muy bien, espero que haya ido
bien. Probablemente tuviste algún problema con eso, no puedo
imaginarlo. Déjame mostrarte lo que quiero decir. Entremos aquí. Ahora, por
supuesto, pensarías bien, solo hagamos el registro de la consola. Y
hagamos un anuncio y luego uno y uno, correcto, así que esto debería
funcionar. Pero eso en realidad nos da un error, dice que no se puede usar la
declaración de importación fuera del módulo. Entonces, además de esto, en
realidad tenemos que ir dentro del punto de índice HTML. Y aquí,
tenemos que decir tipo y luego módulo. Esta es la única forma en que
funcionará. Ahora, hay una cosa más que olvidamos, en
realidad también tenemos que usar las funciones o el archivo js aquí. Así que
tenemos que decir functions.js. Y ambos deben configurarse en
módulo porque necesita módulo para poder exportarlo y
luego importarlo.
Por lo tanto, ambos deben establecerse en el módulo.
Probémoslo ahora. Ejecuta eso. Y ahora funcionó. Perfecto. Todo
bien de regreso a Firebase. Voy a deshacerme de esto. Y en
realidad vamos a importar una función de Firebase
llamada initialize app. ¿Y de dónde lo vamos a sacar?
Vamos a obtenerlo desde esta ubicación. Aquí vamos.
Y si desea ver qué contiene este código, siéntase libre de
copiarlo y abrirlo en una nueva pestaña. Allí verás todo el
código. Y queremos específicamente la función que es
inicializar la aplicación desde esta ubicación.
Muy bien, así que con
esa configuración, vayamos aquí y hagamos una constante y llámela aplicación.
Y para eso, vamos a usar la función Inicializar que
acabamos de importar. Y qué vamos a darle como argumento,
veremos la configuración de la aplicación aquí que tiene la URL de la base de datos específica
, este será el eslabón perdido, porque esta
información aquí conectará nuestro proyecto con el
proyecto que contiene esta base de datos. Así que hagamos eso. Ahora.
Entremos aquí. y ver la configuración de la aplicación. Aquí vamos. Y
queremos ver si esto está funcionando. Así que hagamos un registro de la consola.
Y solo usaremos la aplicación de registro de la consola, veremos qué obtenemos. No sé
lo que vamos a conseguir. Y obtenemos esto. Echemos un vistazo más de cerca,
abra la consola. ¿Qué vemos aquí? Vale, aplicación Firebase.
Muy bien, eso es bueno. Y obtenemos la URL de la base de datos. Y ese es el
que estamos usando. Perfecto. Parece que
ahora hay comunicación entre la base de datos de Firebase y nuestro
proyecto específico.
Muy bien, entonces , ¿qué sigue? Deshagámonos de la
consola y sigamos adelante. A continuación, voy a hacer otra const
aquí y la llamaré base de datos. Y de hecho, para esto, tenemos que
importar otra función de Firebase. Y entonces, esta vez,
quiero que importes eso. Así que es hora de otro desafío, importe
la base de datos get, la función Firebase desde este lugar
aquí, siguiendo el mismo principio que aquí, haga una pausa
aquí, pruébelo usted mismo.
Estaré contigo pronto. Buena
suerte. Muy bien, espero que haya ido bien. Voy a simplemente copiar
esta URL, deshacerme de esto. Y luego diga, importe, obtenga la base de datos
de este lugar aquí mismo. Y notará aquí que la única
diferencia entre estos dos es la aplicación y la base de datos.
Muy bien, con eso importante, volvamos aquí y digamos, Obtener
la base de datos. Ahora, de nuevo, tenemos que darle algo de información, correcto,
esa es la única forma en que esto va a funcionar. Entonces, alimentémoslo con
el objeto de la aplicación dentro de aquí. Aquí vamos. Ahora estamos
bastante cerca de terminar esto, solo hay una
pequeña cosa que nos falta. Así que echemos un vistazo más de cerca a
nuestra base de datos. Así que aquí es donde podemos empezar a enviar datos. Pero
antes de que podamos hacer eso, necesitamos crear algo llamado
referencia. Ahora bien, ¿qué es una referencia? Bueno, una referencia en
este caso es cualquier ubicación dentro de la base de datos.
Y como
aún no tiene ningún dato, vamos a crear una referencia aquí
llamada películas, donde todas las películas que se empujan usando este
campo de entrada y presionando este botón van a ir dentro de
esa referencia. Si eso fue un poco demasiado técnico para
ti. No se preocupe, hagamos que funcione. Y vamos a
escuchar la palabra a la que se hace referencia varias veces durante la
sección.
Bien, entonces hagamos otra variable aquí. Y
quiero llamar a estas películas en dB abreviatura de base de datos, por supuesto.
Y abramos eso. Y nuevamente, necesitamos usar otra
función, importarla desde este lugar aquí mismo. Así que subamos
aquí, digamos coma y luego ref. Abreviatura de referencia. Entremos
aquí y digamos, ref. Ahora el árbitro considera dos cosas diferentes. Primero, ¿con
qué base de datos estás trabajando ? Tienes que ver eso
explícitamente. Así que digamos base de datos, porque lo tenemos
aquí. ¿Bien? Así que sabe lo que eso significa. Ahora, el segundo
argumento será cómo se debe llamar la referencia.
Llamemos a eso películas. Está bien. Entonces, ¿va a funcionar?
A ver, si aquí ponemos algo y pulsamos esto, ¿crees que
va a pasar algo? Así que ya seguí adelante y agregué
este código, ¿verdad? El valor de entrada, y luego la consola registra, lo
que sea que ingrese, y dice agregado a la base de datos. Pero
no hay ningún código aquí que hayamos agregado que empuje específicamente esto a
la base de datos, vamos a hacer eso. Y para eso, por supuesto,
probablemente lo hayas adivinado, necesitamos otra función de Firebase.
Así que subamos aquí y digamos, empuja.
Ahora mira esto.
Entremos aquí y digamos, empuja. ¿Y qué queremos impulsar? Queremos
empujar el valor de entrada. ¿Pero es eso suficiente? No, porque necesitamos
decirle a esta función exactamente dónde queremos insertar esto en
la base de datos. Así que queremos darle la referencia primero. Así que
hagamos películas en dB para eso. Y ahora crucemos los dedos y
probemos. Ejecutemos esto. Y, por supuesto, primero deshazte de esta
cosa molesta. Ahora, voy a entrar en una película aquí,
digamos tres idiotas, presione. ¿ Eso funcionó? Sí lo hizo.
Echemos un vistazo.
Y lo agregó a la base de datos. Nuevamente, si
no funcionó para usted, asegúrese de cambiar esta URL a la
URL de su base de datos. Así que voy a agregar Shawshank Redemption. Y
voy a agregar otra película a School of Rock. ¿Y se
agregaron esos dos? De hecho lo hicieron. Y les conseguimos a los tres
su increíble trabajo, finalmente tenemos nuestra base de datos en tiempo real de Firebase
conectada a nuestro proyecto. Gran trabajo. Y
te veré en la próxima. Ahora. Finalmente es hora de que configuremos
Firebase para nuestro proyecto. Entremos en ello de inmediato. Así que
quiero comenzar con un gran desafío. Y aquí está.
Asegúrese de leer esto con mucho cuidado antes de comenzar. Y de
nuevo, este es uno grande. Así que, por favor, no te estreses demasiado si
no lo entiendes del todo. Y siéntete libre de regresar y
refrescar tu memoria si es necesario. Así que con eso, haz una pausa aquí y
pruébalo. Te deseo todo lo mejor y te veré en unos
momentos. Bien, ¿cómo te fue? Si logras hacer todos
esos 10 Bravo, echemos un vistazo juntos.
Entonces, lo primero que tenemos que
hacer, por supuesto, es dirigirnos a la
consola de Firebase, luego presionar Crear un proyecto, nombrarlo como
base de datos en tiempo real, marcar estas dos cosas, continuar, deshabilitar Google
Analytics continuar, proyecto completado, continuar. Ahora, en el
lado izquierdo, vayamos a la base de datos en tiempo real, cree una base de datos,
elija su ubicación más cercana, elija el modo de prueba y luego
habilite. Y aquí vamos. Tenemos nuestra configuración de base de datos, asegúrese de
copiar la URL de referencia de la base de datos.
Bien, vamos a sumergirnos en el código.
Así que vayamos a index.js. Y de hecho voy
a darte un desafío de nuevo. Entonces, quiero que primero importe
la aplicación de inicialización de la función Firebase desde este lugar y luego
obtenga la base de datos de este. Así que haz una pausa aquí, pruébalo. Y
vuelvo enseguida. Muy bien, espero que haya ido bien.
De hecho, voy a usar estos comentarios para hacer esto. Ver importación
allí. Y queremos asegurarnos de que estén dentro de
corchetes. Y ahí vamos. Eso es todo. La misma cosa. Aquí
importa. Perfecto. Bien, ahora puedes relajarte un
poco, porque te he dado dos desafíos seguidos. Déjame
tomar el control por un rato. Bien, volvamos a la consola de Firebase
y asegurémonos de copiar la URL de referencia de la base de datos. Una vez que
tengamos eso, regresemos aquí y digamos const. Y luego la
configuración de la aplicación, conviértalo en un objeto y diga la URL de la base de datos, y configúrelo
igual a esta URL de referencia de la base de datos.
Ahora, de nuevo,
tengo que reiterar que cada vez que interactúes con scrims
en esta sección, debes asegurarte de usar la URL de tu propia base de datos
. De lo contrario, como puedes imaginar, habrá
caos dentro de esta aplicación. Muy bien, entonces, ¿qué sigue?
Configuremos una variable de aplicación y pongámosla igual para inicializar la aplicación. Y
necesitamos darle algo de información, necesitamos darle
un argumento, esa será la configuración de la aplicación que hemos
configurado, correcto, que contiene la URL de la base de datos, que
será la clave que va a conectar nuestro proyecto con
Firebase.
Muy bien, entonces , ¿qué sigue? Vamos a configurar
una variable de base de datos. Eso, por supuesto, usa obtener base de datos. Y
aquí, vamos a pasar en la aplicación. Muy bien, una última cosa que
queda aquí. Y eso va a ser establecer la referencia.
Entonces, ¿cómo deberíamos llamar a esta cosa? Llamémoslo lista de la compra
en dB y pongámoslo igual a la ref. Ahora, por supuesto, tenemos que
recordar importar eso desde aquí arriba.
Así ref. Y, por supuesto,
las funciones ref incluyen dos cosas, primero, la base de datos. Y
luego tenemos que llamar a esta referencia de alguna manera.
Llamémoslo lista de la compra. Bien, detengámonos un poco aquí para
ver si esto funciona. Presionemos ejecutar. Y recibimos un
error que no puede usar la declaración de importación, nos olvidamos de hacer
esa cosa clave. Vayamos al punto de índice HTML. Y siempre tenemos que
recordar entrar aquí y decir tipo de módulo. ¿Cuándo
necesitamos hacer esto? En cualquier momento dentro de cualquier archivo JavaScript en el que
estemos usando Importar o Exportar, o ambos,
tenemos que establecerlo igual a módulo, de lo contrario, no
funcionará. Muy bien, vamos a probarlo de nuevo. Muy bien,
no recibimos un error. Así que espero que esté funcionando. Ahora, para
concluir este scrim, quiero darles un
desafío final que lo ponemos aquí.
Entonces, quiero que use la
función push de Firebase para enviar el valor de entrada a la base de datos.
Así que haga una pausa aquí, pruébelo usted mismo y vuelvo enseguida
. Bien, espero que haya ido bien. Hagámoslo juntos.
Hagamos un empujón. Y primero, tenemos que darle la referencia, que
en nuestro caso será la lista de la compra en dB. Y luego
le daremos un valor de entrada. Ahora, ¿esto va
a funcionar? Bueno, no exactamente porque todavía no hemos importado empuje
desde aquí. Muy bien, vamos a probarlo ahora. Así que voy a
presionar Ejecutar, abrir esto. Voy a poner naranjas aquí.
Crucemos los dedos y presionemos este botón. Y veo
que me funcionó. Excelente. Espero que también lo hayas conseguido para tu
lado. Trabajo asombroso. Y te veré en la próxima malla.
Solo un scrim muy rápido donde voy a cubrir algo
que pasé por alto en los dos scrims anteriores, y esas son las
reglas de seguridad. Ahora, si recuerda cuando creamos nuestra
base de datos en tiempo real, elegimos comenzar en modo de prueba.
Ahora bien, esta es
una forma perfectamente buena de empezar. Sin embargo, como puede ver, este
mensaje de aquí dice algo importante. Las
reglas de seguridad predeterminadas para el modo de prueba permiten que cualquier persona con la referencia de su base de datos
vea, edite y elimine todos los datos en su base de datos
durante los próximos 30 días. Ahora, lo que eso significa es que cualquier persona
puede leer y escribir en la base de datos desde el momento en que
creó la base de datos y hasta los próximos 30 días, lo que
significa que sea cual sea el momento, en este momento indicado por
ahora aquí Debe ser menos que este número largo y extraño.
Ahora,
esta es solo una forma de representar el tiempo en la programación.
Se llama tiempo de época de Unix. Y si desea jugar
con él, puede ir a epoch converter.com o hacer clic
aquí. Pero Firebase ha sido útil aquí y nos ha dado esto
como un comentario, que puede ver que es el 10 de febrero de 2023.
Aunque definitivamente ya pasó esa fecha, lo que significa que
no podremos leer ni escribir nada en la base de datos. .
Arreglemos eso. Así que volvamos a nuestra base de datos.
Y como puede ver
aquí arriba, verá las reglas en el menú. Hagamos clic en eso, ahí
vamos. Entonces, como puede ver aquí, hay dos reglas, una para
leer y otra para ahora, simplemente haga clic en cualquier lugar aquí para editar el
texto. Ahora desea continuar y cambiar ambos a verdadero,
recuerde la coma en el medio. Esto significa que cualquiera puede
leer y escribir en la base de datos.
Ahora, ¿es este un escenario perfecto?
Absolutamente no. Porque significa que, literalmente, cualquiera puede escribir
en su base de datos. Sin embargo, si solo está usando esta aplicación
solo o solo con un par de personas en su vida,
entonces no tiene por qué ser un problema, porque solo
compartirá la URL de su aplicación con esas personas. Así que sigamos adelante y
publiquemos los cambios.
Ahora verá este mensaje de advertencia que
dice exactamente lo que acabo de explicar. Pero para mi base de datos, en
realidad voy a establecer la regla de escritura en falso porque
quiero asegurarme de que mi base de datos no reciba spam, ya sabes
a lo que me refiero, por lo que también cada vez que ejecutas el
código en Scrum, pero durante este proyecto, no podrá
escribir nada en mi aplicación. Dicho esto, para esta malla, este
es en realidad un aspecto muy importante de Firebase. Y
algo que definitivamente cubriremos con mucha más profundidad en un
futuro curso de Firebase y que cubriremos en el siguiente.
Muy bien, antes de que podamos trabajar en obtener los elementos de la base de datos
de Firebase, primero debemos escribir el código que
realmente agregará el elemento al DOM. En otras palabras, necesitamos
escribir el JavaScript que agregará el HTML necesario
para mostrar los elementos aquí abajo. Entonces, en este punto, en
realidad ya lo ha hecho antes, ha estado usando
innerHTML para agregar elementos HTML usando JavaScript.
Así que
les voy a dar esta tarea como un desafío. Pero antes de eso,
agreguemos rápidamente el código HTML necesario que necesitamos. Aquí vamos.
Así que tenemos nuestra UL aquí mismo con la lista de compras de identificación. Y para Li es
que tengo como ejemplos aquí, naranjas y perritos calientes, que
seamos honestos, aquí son realmente las únicas cosas que necesitas para sobrevivir, ¿
no? Vamos a ver si eso funciona o no se ejecuta. Y los tenemos
perfectos. Bien, vayamos al archivo JavaScript. Así que tengo
el desafío escrito aquí mismo. Así que básicamente quieres
hacer que lo que sea que pongas aquí, y presiones el
botón, se agregue justo al final aquí. Así que haz una pausa aquí
y pruébalo tú mismo, y estaré contigo en unos
segundos. Y lo miraremos juntos. Ahora, antes de empezar.
Si no recuerda cómo hacer esto, siéntase libre de retroceder un
poco y refrescar su memoria. Bien, buena suerte. Vale, ¿lo conseguiste? Bueno,
veámoslo juntos.
Entonces, lo primero que pienso aquí es que
necesitamos conectar nuestro HTML y nuestro JavaScript. Y voy a hacer
eso aquí arriba. Así que hagamos const. Y haz un elemento de lista de compras
. Y, por supuesto, vamos a usar nuestro método favorito
aquí, obtener el elemento por ID y lo llamamos lista de compras. Aquí
vamos. Una vez hecho esto, puedo simplemente copiar esto, ponerlo
aquí. ¿Y qué queremos aplicar a esto? Bueno,
definitivamente queremos usar HTML interno. Y luego, por supuesto,
queremos decir más igual, y aquí es donde voy a
usar cadenas de plantilla, porque eso nos permitirá hacer esto
de una manera muy elegante. Así que vamos a hacer backticks. Y aquí adentro,
primero, abrámoslo con una etiqueta LI. Y luego vamos a
decir, valor de entrada. Cierre eso con un corchete y luego
ingrese esa cosa.
Aquí vamos. ¿ Eso funciona? Vamos a probarlo
. Abre esa cosa. E intentemos agregar un poco de chocolate
aquí. Chocolate, agrega al carrito y ahí mismo lo agregas.
Asombroso. ¿Lo agregó a la base de datos? Sí, también hizo eso.
Perfecto. Ahora, antes de que terminemos esta malla, noté algo
que realmente quiero arreglar. Es una cosa súper simple. ¿Pero te diste
cuenta de eso? ¿Notas que cuando ingresas algo
aquí y presionas el botón, no borra el campo de entrada?
Y eso es realmente molesto, porque queremos que esto sea
lo más fácil de usar posible. De hecho, ¿por qué no
continúas y agregas ese código? Haz una pausa aquí, pruébalo. Y
vuelvo enseguida. Bien, espero que haya ido bien. Entonces que
hacemos aqui? Así que definitivamente queremos comenzar a usar el
elemento de campo de entrada.
Copiemos eso aquí. Ahora, ¿qué es lo que
queremos hacerle? Bueno, el valor es esta cosa de aquí, ¿
verdad? Y eso es lo que queremos restablecer. ¿Y cómo podemos hacer
eso? Digamos que el valor debería ser igual a
la cadena vacía. Eso debería funcionar. Probemos, corre. Y
agregaré un Red Bull aquí y presionaré esto. Y ahí vamos, lo
despeja. Ahora observe que el chocolate desapareció. Y
eso es porque no hemos comenzado a obtener los elementos de la base de datos
de nuestra base de datos real.
Pero no te preocupes,
lo haremos muy pronto. Gran trabajo hasta ahora. Y sigamos. Bien, siento que tenemos que hacer una pequeña
pausa aquí, porque has estado haciendo un trabajo increíble.
En serio, solo piensa en cuando empezaste a aprender con
Scrimshaw. Estabas aprendiendo HTML y CSS simples no hace mucho tiempo
. Y ahora está creando su propia aplicación móvil y acaba de
conectar una base de datos real a su proyecto. ¿No es una locura?
Ahora, solo piensa en lo bueno que puedes llegar a ser si continúas
codificando, qué increíble ¿Vas a ser en tres meses, seis
meses, un año, cinco años? Verdaderamente increíble para pensar si
me preguntas. Entonces, con eso, echemos un vistazo a los
desafíos para el scrim.
Entonces, en este, vamos a
pasar un tiempo refactorizando nuestro código. Siempre es bueno hacer una
pausa de vez en cuando para reescribir el código. En una mejor
manera, esto se vuelve más y más importante cuanto más complejos
se vuelven sus proyectos. Y es especialmente importante cuando
trabaja con otros desarrolladores. Así que aquí están los dos desafíos que
tengo para ti. Así que toma esta línea de código y refactorízala,
lo que significa simplemente crear una nueva función para ella. Y lo mismo
con este. Así que tómate una pausa aquí, pruébalo por
ti mismo y estaré contigo en un momento. Buena suerte.
Muy bien, espero que haya ido bien. Entonces, ¿cómo pensamos acerca de
esto? Bueno, definitivamente quiero tomar la primera línea de código y
cortarla desde aquí.
Así que vamos a cortarlo desde aquí. Y eliminemos
esto también. Y luego vamos a bajar aquí, voy
a hacer una nueva función. Ahora, ¿cómo queremos llamar a esta
función? No sé. Permítanme darle un nombre temporal.
Vamos a llamarlo Hola. Y luego vamos a pegar
esa línea de código. Y ahora pensemos en un buen nombre para esta
función. Entonces, ¿qué está haciendo esta función? Bueno, está
tomando el elemento del campo de entrada y está configurando el valor para que sea
la cadena vacía.
Entonces es como borrar el campo de entrada, ¿
verdad? Lo está reseteando. Así que me gusta más la palabra claro. Entonces, ¿por qué
no llamamos a esto claro? ¿ campo de entrada? L? Tan claro. Tiene sentido, ¿
verdad? ¿Y qué es borrar el campo de entrada L, que es
exactamente como se llama esto también? Así que eso tiene
sentido, ¿verdad? Entonces, una vez que hayamos hecho esto, podemos tomar esta
función, copiarla y llamarla aquí. Así que en realidad se ejecuta. Así que
ese es el primero. ¿Qué pasa con el segundo? Así que empecemos de
la misma manera. Queremos cortarlo desde aquí, cortar eso y luego
eliminar esto. Y queremos hacer una función aquí abajo.
Una vez más, no estoy muy seguro de cómo debería llamarlo. Así que solo
voy a llamarlo hola por ahora. Y luego aquí, peguemos
la función. Aquí vamos. Vaya, ahí estamos. Ahora pensemos
en lo que está haciendo esta función . Entonces, este toma el
elemento de la lista de compras y usa el HTML interno para agregar el
valor de entrada en la parte inferior.
Bueno. Mmm. Bien, entonces, ¿qué elemento es el
que está cambiando? ¿Está cambiando la lista de compras?
Muy bien, entonces está agregando un nuevo artículo a la lista de compras L.
Escribamos eso. Así que voy a ir con un elemento pendiente
y voy a copiarlo y pegarlo allí. Y,
por supuesto, estamos usando camel case aquí. Así que quiero convertir
esto en una S mayúscula. Veamos cómo suena eso. Agregue el elemento a la
lista de compras L. ¿Es ese un nombre de función súper largo, algo así? ¿Es
eso un problema? No, realmente no veo ningún problema con esto.
Es un nombre de función bastante bueno . Si me preguntas. Vamos
con eso. Ahora, ¿esto va a funcionar? Copiemos esto aquí.
Y luego intenta ejecutarlo. Vamos a ejecutar eso.
A ver leer. ¿
Eso funciona? No está funcionando, porque nos está dando un
valor de entrada que no está definido. Por supuesto. ¿ Qué tenemos aquí? Tenemos
el valor de entrada. ¿Eso significa algo dentro de esta
función? No, esto viene de aquí arriba, ¿verdad? Ese es
. Así que tenemos que usar un parámetro en este caso. Entonces, ¿por qué
no entramos aquí y decimos que vamos a alimentarlo con el
valor de entrada, sea lo que sea? Y luego aquí,
vamos a crear un parámetro y lo llamaremos elemento de
valor.
Y voy a tomar ese en su lugar. Y usa eso
aquí. Muy bien, intentémoslo de nuevo. Ahora. Hagamos pan
una vez más. ¿Eso va a funcionar? Aquí vamos. Ahora funciona
perfecto. Ahora, a continuación, veremos cómo
obtener elementos de la base de datos y hacerlo en tiempo real.
Sin embargo, antes de que podamos hacer eso, necesitamos ir por una pequeña
tangente aquí, para que podamos aprender sobre algo que
realmente necesitamos saber. Y así es como tomar un objeto de JavaScript
y transformarlo en una matriz. Vale, nos vemos en la próxima.
Gran parte de la codificación se trata de convertir una pieza de datos en un
formato específico a otro formato. Como programadores, necesitamos
hacer eso todo el tiempo. Así que echemos un vistazo a qué tipo
de datos tenemos aquí. Así que aquí tenemos una variable let llamada
scramble users, que es un objeto que contiene tres
usuarios.
La clave es el ID del usuario. Y luego el valor es la
dirección de correo electrónico. Ahora, ¿qué pasaría si quisiéramos convertir este objeto en
una matriz? Ahora, es posible que se pregunte, ¿por qué
querríamos hacer eso en primer lugar? Bueno, piénsalo
, tal vez quieras escribir un bucle for y prefieras trabajar
con una carrera. Bien, entonces, ¿cómo haces eso? ¿Exactamente? Bueno, en este
caso, resulta que las increíbles personas que contribuyen
al lenguaje JavaScript ya pensaron en esto. En
JavaScript, tenemos un tipo de objeto, y puede llegar a él
escribiendo objeto con una O mayúscula.
Ahora, no necesitamos preocuparnos
demasiado sobre qué tipos son exactamente en este punto, lo que nos
interesa en este momento. es cómo usar un método en un objeto.
Entonces podemos convertir este objeto en una matriz. Muy bien, déjame
mostrarte. Entonces, lo que queremos hacer aquí es decir objeto y luego punto,
y luego voy a escribir valores. Bien, y este es un
método, por supuesto, así que tenemos que terminarlo con estos paréntesis.
Y también podemos alimentar el objeto que queremos usar aquí.
Así que voy a tomar esto, copiarlo y ponerlo aquí.
Ahora,
por supuesto, queremos registrar esto en la consola. Así que hagamos el
registro de la consola, aquí mismo. Y vamos a ver lo que podemos ejecutar. Y obtenemos una
matriz. Echemos un vistazo más de cerca. Sí, de hecho es una matriz y
obtenemos todas las direcciones de correo electrónico. Esto es perfecto. Ahora, ¿y si
quisieras las llaves en su lugar? ¿ Y si no quisieras los
valores sino las claves? Bueno, por supuesto, también tenemos eso. Entonces, para
eso, solo cambiamos los valores en claves. Vamos a ejecutar eso de nuevo. Y
ahí lo tienes, tienes las llaves. Y luego, por supuesto, naturalmente,
probablemente estés pensando, está bien, ¿y si quisiera ambos, mientras
ellos también pensaban en esto, por supuesto? Entonces, el
método final que les daré serán las entradas, y
esto les dará un arreglo un poco más complejo
. Echemos un vistazo. Y mira, te da una matriz que
contiene matrices que tienen dos cosas diferentes
primero, la clave y luego el valor. Entonces, en este caso, obtenemos
ambos. Muy bien, ahora antes de que terminemos la malla, quiero darte
tres desafíos para que practiques un poco con esto.
Así que voy
a quitar esto. Y aquí están los desafíos. Asegúrese de leerlos
cuidadosamente. Haga una pausa aquí, pruébelo usted mismo. Y vuelvo
enseguida. Buena suerte. Muy bien, espero que haya ido bien.
Echémosle un vistazo juntos. Entonces, primero, voy a ir por vamos
y luego codificaré los correos electrónicos de los usuarios, estableceré eso igual a objeto. Y
luego, por supuesto, el primero que aprendimos fue el de los valores
, ¿no? ¿Y qué se toma? Bueno, va a tener que tomar
este, eso es lo único que tenemos. Ese es el objeto. Entonces
esto juntos ahora nos devolverá una matriz.
Veamos si
ese es realmente el caso al iniciar sesión en la consola aquí.
registro de la consola, este, a ver agregado nos da los correos Perfecto. Ahora,
una vez que he hecho esto, el resto es bastante fácil. Así que voy a
copiar este y ponerlo aquí abajo. Reemplácelo ahora con
ID en su lugar. identificaciones Y qué queremos en este caso, no queremos
los valores, queremos las claves. Así que vamos a ver si eso funciona ahora.
Hermoso. Bien, el último, otra vez, copie este,
póngalo aquí. Y luego vamos por las entradas en su lugar esta vez. Y,
por supuesto, queremos usar entradas como esa. A ver si
eso nos da el definitivo. Y ahí vamos. Perfecto. Como dije
antes, esto es algo muy útil. Los programadores cambian
el formato de los datos todo el tiempo. Muy bien, gran trabajo con
este. En este sombrío, vamos a usar una
función mágica de Firebase que hará que sea muy fácil para nosotros
obtener exactamente lo que necesitamos de la base de datos siempre que cambie
de alguna manera.
Espero que estés listo para ello. Bien, dediquemos un
poco de tiempo a ver exactamente lo que
sucederá aquí. Así que esto de aquí es una
base de datos en tiempo real. Verá este tipo de icono con bastante frecuencia. Por
lo general, se usa para denotar una base de datos. Y aquí tenemos a una
persona que usa nuestra aplicación en su teléfono. Esta aplicación utiliza esta
base de datos para almacenar todos sus datos. Ahora, esta parte aquí
también se llama el cliente, si alguna vez has escuchado esa
palabra técnica antes. Ahora, por supuesto, el cliente podría estar usando cualquier dispositivo,
podría ser un iPad, otro tipo de tableta, computadora de escritorio, computadora,
computadora portátil, teléfono con Android, realmente no importa. Así que traigamos a
otro cliente aquí mismo. Ahora esta persona también está usando
la misma aplicación, que por supuesto también usa la misma base de datos.
Entonces, digamos que este cliente de aquí agrega algún valor
al campo de entrada y presiona este botón, momento en el que los
datos se guardan en la base de datos.
Ahora, ya hemos
hecho esto, pero aquí es donde ocurre la magia. Porque justo
después de que se haya llevado a cabo esta acción , la base de datos
envía inmediatamente una señal a todas partes diciendo que la base de datos se
ha actualizado. De hecho, hace algo aún mejor, en
realidad envía los nuevos datos de la base de datos a todos sus
clientes. Ahora, estos datos en este momento son algo a lo que
Firebase se refiere como una instantánea. Estaremos trabajando mucho
con instantáneas en este scrim, así que acostúmbrate a esa palabra.
Bien, ahora echemos un vistazo a la aplicación que configuré
aquí. Entonces, esta aplicación se llama los mejores REIT. Y se supone que debe
mostrar tus libros favoritos justo debajo de aquí. Ahora, ya
seguí adelante y escribí el HTML, CSS y la mayor parte del JavaScript
.
Ahora, antes de comenzar a agregar código aquí,
quiero mostrarle cómo puede agregar datos a la base de datos a través de la
consola Firebase. Entonces, si aún no lo tiene abierto,
permítame mostrarle un atajo sobre cómo hacerlo , puede copiar esta
URL para la base de datos, por supuesto, use la que está usando
y simplemente ábrala. en una nueva pestaña, lo llevará a
su Firebase Console a la base de datos en tiempo real. Muy bien,
tengo mi base de datos en tiempo real justo aquí. Lo
primero que queremos hacer es subir aquí y luego presionar
este botón más. Una vez que hayas hecho eso, aparecerá esto
, te pedirá una clave y un valor. Adelante,
escribe libros aquí mismo. Aquí vamos. Ahora, en lugar de
poner algo por el valor, vamos a seguir
adelante y presionar este botón más.
¿Y vio lo que
acaba de suceder allí? Esto ahora nos permite anidar los datos
dentro de los libros, que es exactamente lo que queremos. Bien,
sigamos adelante y agreguemos nuestro primer libro. Para la clave, vamos a
decir uno, y para el libro, voy a poner tiempo,
que es uno de mis libros favoritos. Una vez que haya terminado con
eso, continúe y presione Agregar, boom, tenemos el tiempo allí
perfecto. Ahora sigamos adelante y agreguemos otro libro, suba aquí y
presione el botón más nuevamente. Y, de nuevo, queremos poner
dos aquí. Y luego voy a poner una granja de animales una de mis
novelas favoritas de todos los tiempos, adelante y presione agregar. Y ahí vamos.
Tenemos dos artículos. Creo que eso es lo suficientemente bueno. Bien, ahora
volvamos al código. Entonces, ¿qué es lo primero que queremos hacer?
Bueno, para que podamos obtener los elementos de la base de datos de esa
manera mágica de la que estaba hablando , queremos usar la
función de valor.
Así que vayamos aquí e importémoslo. Primero,
vamos a ver el valor Perfecto. Ahora qué, bajemos aquí
y comencemos a usar esta función. Entonces, ¿cómo lo usamos exactamente?
Primero, siga adelante y simplemente escriba el valor. Y luego abramos
los paréntesis. Ahora, el primer argumento que queremos darle
será la referencia de donde queremos obtener los datos. ¿
Qué es eso? Bueno, ese va a ser este
de aquí, el de los libros, y ya lo tengo configurado
aquí. Está usando la función de referencia aquí. Así que voy a
seguir adelante y copiar esto y poner eso allí mismo. Bien,
ahora sabemos de dónde queremos obtener los datos.
Ahora, lo que sigue,
el siguiente argumento va a ser una función, que en
realidad contiene la instantánea, por lo que vamos a poder usar
la instantánea dentro de aquí. Bien, sigamos adelante y abramos
eso. Bueno. Entonces, como siempre, queremos hacer una prueba primero. Así que
sigamos adelante y hagamos una instantánea del registro de la consola solo para asegurarnos de que
todo funciona. Muy bien, sigamos y presionemos Ejecutar y
esperemos lo mejor. Y ahí vamos.
Los tenemos a los dos.
Perfecto. Ahora vamos a abrir la consola. Y notará aquí
que este es un objeto y realmente no queremos trabajar con
objetos. En este caso, queremos convertir esto en una matriz. Así que
sigamos adelante y hagamos eso. Bien, entonces hagamos un poco de espacio
aquí arriba. Y hagamos una variable izquierda y llamémosla
matriz de libros. Ahora, ¿cómo convertimos un objeto en una matriz? Bueno,
acabamos de aprender a hacer eso, ¿ verdad? Así que hagamos objetos y
luego valores. Y luego adentro es donde queremos poner la
instantánea. Bien, con suerte, esto va a funcionar. Así que ahora
registremos en la consola la matriz de libros , presione ejecutar nuevamente. Y nos
sale algo muy raro que no entiendo.
Parece una matriz, pero no está del todo bien.
El problema aquí es
que no queremos usar la instantánea directamente, queremos
decir instantánea, dot Val, lo que hará que funcione
ahora, con suerte, intentémoslo de nuevo. Correr. Y ahí vamos. Ahora
tenemos esa hermosa matriz con nuestros dos artículos en ella.
Perfecto. Bien, ahora aquí es donde quiero darte algo de trabajo que
hacer. Así que aquí está tu desafío al usar esta matriz que acabamos de
hacer.
Escriba un ciclo for donde la consola registre cada libro. Muy bien,
pausa aquí. Pruébalo tú solo y vuelvo
enseguida. Buena suerte Bueno, espero que haya ido bien. Hagámoslo juntos. Ahora vamos a
hacer para que i sea igual a cero. Y luego me arreglo más pequeño que los libros,
por supuesto, la longitud de eso. Y luego queremos hacer i plus
plus cosas súper estándar. Abramos eso. Y queremos hacer el
registro de la consola. Y luego queremos hacer esta matriz de libros, pero no
toda la matriz.
Queremos el artículo correcto. Y entonces podemos consolar el
registro de eso. Bien, entonces veamos si esto funciona. Ahora, Ron, ¿
lo entendemos? Sí, los dos los tenemos perfectos. Ahora, antes de que terminemos con
esto, quiero agregar algo aquí porque normalmente me gusta
hacerlo de esta manera, digamos el libro actual, y luego poner esto
allí primero. Una vez que tengamos eso, podemos usar el
libro actual aquí, poros, asegurémonos de que eso también
funcione. Por supuesto, eso nos dará exactamente lo mismo.
Perfecto. Muy bien, pero aún no hemos terminado. Como no
queremos registrar los libros en la consola, queremos mostrarlos
aquí. Y de hecho, seguí adelante y ya hice una
función aquí abajo llamada agregar libro a la lista de libros L.
Es un poco larga, pero use esta función dentro del ciclo
para que pueda mostrar los libros aquí.
Muy bien, así que
voy a poner el reto aquí. Así que haz una pausa aquí, pruébalo
por ti mismo. Y vuelvo enseguida. Está bien. Espero que haya ido
bien. Echémosle un vistazo juntos
ahora. Así que lo primero que voy a hacer es simplemente copiar todo
esto, porque eso es lo que queremos usar. Ponlo
aquí abajo. Entonces, ¿cuál es este valor contable aquí? Bueno, ese es el parámetro
de la función. Y realmente no tenemos eso dentro de aquí.
Así que tenemos un sustituido con algo. ¿Dónde está ese libro?
Bueno, el libro está aquí arriba, el libro actual. Así que copiemos
esto y pongamos eso allí. Y creo que eso es todo lo que tenemos que
hacer. Así que vamos a ver si eso funciona. Vamos a ejecutar eso. ¿Y
lo conseguimos? De hecho lo hacemos. Tenemos ambos de estos aquí. Hagámoslo un
poco más grande. Y ahí vamos. Perfecto. Ahora, en este punto,
podrías estar pensando que son geniales, hemos terminado.
No tan rapido. Porque
déjame mostrarte lo que puede pasar. Entonces, digamos que ingresa a
la base de datos y realiza un cambio. Digamos que queremos
cambiar el título de esto por hacer tiempo para hacer tiempo. Y
no sé por qué querrías hacer eso. Pero hagámoslo para
demostrar un punto aquí. Así que vamos a entrar en la base de datos.
Y lo que puedes hacer es seguir adelante y presionar esto,
y te permitirá editarlo. Así que voy a hacer eso en
mi lado A B, adelante y cámbialo. Ahora, antes de presionar enter
para que esto suceda. Vamos a ver qué pasa aquí ahora. De acuerdo, voy
a presionar enter en 321.
¿ Viste? Veamos lo que
acaba de suceder, no eliminó los primeros libros, los agregó
al final, esto es un problema, porque cada vez que la base de datos
es se actualizará, no se borrará ninguna de las primeras
cosas, solo se seguirá agregando, eso será súper
caótico. Y definitivamente no queremos eso. Entonces, en este punto,
quiero darles el último desafío de este scrim, que
es tratar de corregir este error.
Sin embargo, antes de continuar,
observe que hay una función de la que no hemos hablado.
Y esa es la lista clara de libros L que en realidad contiene la
funcionalidad que necesita. Ahora solo necesita colocarlo en
algún lugar dentro de esta función de valor. No sé
dónde es eso lo que se supone que debes averiguar. Así que haz una pausa
aquí, pruébalo tú mismo. Y estaré contigo en sólo un
par de segundos. Buena suerte. Bien, entonces, ¿cómo pensamos en
esto ahora? Bueno, así es como lo pienso.
Entonces, la
función de valor es esa función especial que se ejecuta cada vez que
hay una edición en la base de datos. Entonces, en este caso,
solo cambiamos ligeramente el título de esto . Y así ejecutó
todo el código. Ahora bien, esta es la parte del código del bucle for
que en realidad está agregando. Pero antes de eso
no estamos aclarando nada. Entonces, ¿por qué no
copiamos esto simple y llanamente? Y justo antes de que se ejecute el bucle, decimos Oye, asegúrate de que
si hay algo, bórralo antes de iniciar un
pendiente. Bien, veamos si esto funciona o no. Voy a ejecutar
esto de nuevo. Ahora. Bueno. Una vez más, tenemos los dos libros, ah,
espera justo ahí por un segundo. Este es el futuro significa
hablar contigo. Después de grabar la malla, me di cuenta de que, en este
punto, en realidad estoy viendo ambos libros de mi lado. Pero
en realidad estás viendo una página web en blanco en este momento con solo el encabezado de las mejores
lecturas. Ahora bien, esto se debe a un pequeño error con el
mini navegador codificado.
Pero quiero asegurarles que esto
realmente está funcionando. De hecho, para probarlo usted mismo, puede hacer
una pausa aquí e ingresar la URL de su base de datos aquí, y
luego presionar ejecutar. Y verás que funciona. Siéntase libre de hacer
ediciones a la base de datos. Y se va a actualizar aquí de nuevo.
Perdón por esto. Por supuesto, vamos a intentar arreglar esto
tan pronto como podamos. Pero hasta eso, espero que puedas perdonar este
error.
Así que sí, de hecho. Este código de aquí es lo que corrige ese error con el
que nos encontramos. Ahora, antes de que terminemos esta malla realmente larga.
Quiero darte un extra bien hecho. Logramos cubrir
mucho terreno en este. De acuerdo, así que está bien. Es hora
de que obtengamos los elementos de la base de datos en tiempo real.
Firebase es un regalo para el mundo en serio. Así que, ¿por qué no
empezamos el scrim con un desafío? Así que bajemos
aquí. Y les voy a dar un desafío aquí mismo. Así que
quiero que llames a la función on value ,
primero tendrás que importarla aquí, con la lista de la compra en dB como primer
argumento.
Y luego la instantánea de la función como segundo argumento,
esto nos ayudará a comenzar a construir nuestra propia función de valor.
Así que haz una pausa aquí, pruébalo tú mismo y vuelvo enseguida
. Buena suerte. Bien, espero que haya ido bien. Hagámoslo
juntos. Así que vamos a hacer en valor. Y luego ábralo y haga la
lista de compras en dB. Primero, primero tenemos que especificar la referencia
, para que sepa exactamente de dónde obtener los artículos. Y
luego hagamos esa función. Y luego, por supuesto, tenemos esta
instantánea aquí. Y luego abre esto. Ahí estamos. Muy
bien, es hora del siguiente desafío. Aquí está la consola,
registre la instantánea dot Val para mostrar todos los artículos dentro de la
lista de compras en la base de datos. Pausa aquí. Volveré enseguida.
Buena suerte. Bien, entonces veamos, desplacémonos
un poco hacia abajo. Y comencemos a hacer esto.
Así que hagamos el
registro de la consola y la instantánea dot Val. Veamos si eso funciona. Ejecuta eso. Y el
valor que tenemos no está definido, obviamente, porque olvidé lo
más básico, que sucede todo el tiempo. Así que voy a
subir aquí e importar eso. Espero que recuerdes hacer
eso. Aquí vamos. Vamos a ejecutarlo de nuevo. Y obtuvimos nuestro objeto
con todos nuestros artículos. Perfecto. Bien, ahora quiero darte el
desafío final para este scrim. Déjame deshacerme de esto primero.
Y aquí está. Utilice valores de punto de objeto para convertir el punto de instantánea
Mal de un objeto a una matriz. Y desea crear una
variable para esto. Y también asegúrese de registrar en la consola el resultado
solo para asegurarse de que en realidad es una matriz. Buena suerte,
pausa aquí. Volveré enseguida. Bien, hagamos esto.
Subamos aquí. Y diremos let una matriz de elementos. Y lo pondremos
igual a object. Y, por supuesto, queremos usar los valores de puntos del objeto
, correcto, eso nos da exactamente lo que necesitamos, en este
caso, instantánea, dot Val va allí. Y queremos
asegurarnos de que lo registremos en la consola solo para asegurarnos de que todo
funciona.
Como siempre, ejecutemos eso y veamos qué obtenemos.
Y obtuvimos esa hermosa variedad. Perfecto, gran trabajo trabajando en
los desafíos que veré en el próximo. Bien, ahora tenemos
la función de valor activado, que nos brinda la instantánea cada vez que se
actualiza la base de datos. Y luego lo convertimos en una matriz
aquí mismo. Entonces, por supuesto, el próximo desafío natural es que
escribas un ciclo for usando esta matriz de elementos. Así que ese es el
desafío. Haz una pausa aquí. Darle una oportunidad.
Y vuelvo
enseguida. Está bien, hagámoslo juntos. Así que vamos con cuatro
y dejemos que i sea igual a cero. I más pequeño que la matriz de elementos, la longitud de
eso, por supuesto, y luego i plus plus. Abramos eso. ¿Y
cómo obtenemos el elemento específico por iteración? Eso, por supuesto,
será una matriz de elementos, y luego el elemento IFE dentro de
eso, ¿verdad? Así que registremos eso en la consola. Y luego probaremos
esto. Vamos a ejecutar eso. Y ahí vamos. Tenemos una
lista completa.
Eso es perfecto. De acuerdo, mi próximo desafío para usted es
este: use la función Agregar elemento al elemento de la lista de compras
que hicimos antes dentro del ciclo para agregar cada elemento al
elemento de la lista de compras para cada iteración. Entonces, básicamente,
cuando ejecutas esto, todos los elementos deberían aparecer aquí. Bien,
buena suerte, haz una pausa aquí. Y estaré contigo en sólo un par de
segundos. Muy bien, espero que haya ido bien. Entonces, ¿qué hacemos
aquí? ¿Qué es lo primero que debemos hacer? Bueno,
definitivamente queremos usar esta función. Así que voy a
seguir adelante y copiar esto. Y luego pégalo aquí. Ahora
déjame deshacerme de este registro de la consola. ¿ Y tenemos algo dentro
de aquí llamado valor del artículo? Absolutamente no.
Ese es el
parámetro para esta función. Así que tenemos que sustituir eso con una
matriz de elementos, y luego el octavo elemento, por supuesto, ahí, a
la derecha. Así que vamos a ver si eso funciona. Ahora, ejecuta eso. ¿
Lo conseguimos? Si lo hicimos. Ahora parece que hay un pequeño problema
aquí porque estamos comprando naranjas y perritos calientes aquí.
Estos fueron solo ejemplos que agregamos al principio. Así que vamos a
eliminarlos ahora. Aquí vamos. Volvamos aquí de nuevo. Intenta
correr una vez más y luego, por alguna razón, obtendremos pan dos
veces. Me pregunto por qué es así. Pero el resto de ellos parecen tener
razón. De hecho, borra eso. Ese es mi mal. De hecho, fui yo
quien accidentalmente agregó dos panes a la base de datos.
Entonces,
eliminémoslo de la base de datos. Lo voy a hacer
desde la consola a ver si esto se arregla solo o no. Así que vamos a
ver aquí. Voy a borrar uno de ellos. Sí. Y ahí
vamos. Está bien, así que ahora lo hizo dos veces, a la derecha. Así que tenemos que arreglar
eso. Porque aquí lo tenemos todo. Y luego tenemos
todo una vez más. Ahora al menos solo tiene un pan. Así que
vamos a terminar este scrim aquí. Y arreglaremos este error en
el próximo. De acuerdo, entonces en el último análisis descubrimos que
había un gran error en nuestro código, cada vez que había un
cambio en la base de datos, algo no funcionaba, ¿verdad?
Mira, tenemos todos estos aquí. Entonces, ¿qué está pasando aquí? Bueno, ¿
puedes adivinar lo que voy a decir? ¿Ahora? Mientras que si adivinaste
que te desafiaré a corregir este error, entonces
tienes toda la razón. Haz una pausa aquí, trata de resolverlo por
ti mismo. Y vuelvo enseguida.
Buena suerte. Bien, ¿cómo te fue? Bueno, lo más importante
es que intentes pensarlo tú mismo. Bien, entonces
veamos el código juntos. Así que quiero ir inmediatamente a
la función de valor. Entonces, esta función se ejecuta
cada vez que hay un cambio en la base de datos, ¿verdad? ¿Y qué
hacemos aquí dentro? Estamos usando la instantánea para convertirla
en una matriz, de modo que podamos ejecutar un ciclo de cuatro en ella, ¿verdad? Entonces,
cada vez que esto sucede, este bucle for se está ejecutando, lo que
explica por qué continúa agregando elementos al final.
No vamos a liquidar los artículos antes de que eso suceda, ¿verdad? Así que
tenemos que hacer eso aquí arriba.
Entonces, ¿cómo podemos hacer eso? Bueno,
solo podemos decir, lista de compras, l innerHTML. es igual a y luego la
cadena vacía. Así que intentemos ejecutar eso ahora. De acuerdo, se ve bien
hasta ahora, déjame intentar agregar un nuevo elemento para probar esto ahora.
Café. Y tenemos un nuevo error. O al menos tal vez esto también estaba allí
antes. Pero aún no hemos arreglado todo.
Al
menos no estaba renderizando todos los elementos ahora, solo estaba
duplicando este el año pasado. Vale, duplicación. ¿Qué
significa eso? Para mí, eso dice, está bien, ¿hay algún lugar en el
código donde podemos eliminar algo que ya está
sucediendo? Bueno, este no lo podemos eliminar, porque es
lo más importante que debemos conservar. Pero si busca
aquí, verá que estamos ejecutando la misma función con
el valor de entrada. Así que lo estamos haciendo dos veces ahora. Así que
deshagámonos de esto. Y creo que eso va a resolver nuestro
problema.
Vamos a ejecutarlo una vez más. Y ahora agreguemos solo, que
es un refresco noruego que nos gusta aquí. Y ahora funciona perfecto.
Está bien, pero antes de que terminemos con este scrim, estoy mirando este
fragmento de código aquí mismo, en realidad quiero sacarlo
y refactorizarlo. Así que voy a copiar esto. Y en lugar de eso,
voy a decir, borre la lista de compras L. Y vamos a usar
esta aquí. Así que eliminemos esto de aquí, hagamos una nueva
función, borre compras, enumeremos L. Y luego, por supuesto,
vamos a pegar eso aquí mismo. Probemos de nuevo.
Aquí vamos. Y agreguemos algo saludable aquí.
Añadimos una ensalada, ahí estamos perfectos. Siempre aproveche la
oportunidad de refactorizar su código. Bien hecho.
Te veré en
la próxima. Entonces, hasta este punto, Flexbox nos ha hecho la
vida mucho más simple de lo que podría ser. Sin duda, es una de las
mejores cosas de CSS. Ahora, déjame presentarte
otra característica de Flexbox. Eso es simplemente increíble. Echemos un
vistazo a este sitio web aquí. Así que tengo algunos de mis
videos de YouTube favoritos de todos los tiempos que se muestran aquí. Hay un total de
12 miniaturas de video que se muestran aquí. Pero el problema es
que estas miniaturas continúan a lo largo de esta
línea horizontal, como puede ver al desplazarse. Ahora, por supuesto, esta
es una experiencia de usuario horrible. Entonces, arreglemos este problema
usando algo llamado envoltura flexible. Ahora, mira esto. Entonces,
todo lo que tengo que hacer es decirle a Flexbox que pague, tomar todos los elementos
dentro de este div principal y envolverlo alrededor del ancho máximo
del elemento principal.
Bien, hagámoslo ahora. Así que flexione la envoltura y
luego diremos que sí, por favor, queremos envolverla. Así que hagamos
eso. Y ahí vamos. ¿No es asombroso? ¿Ves lo
hermoso que se ve? Imagina cuánto más CSS necesitaríamos
para escribir sin el ajuste flexible. Ahora, antes de que terminemos la malla, déjame
mostrarte dos valores más que puedes poner aquí. Por lo tanto,
los demás no se ajustarían, lo que lo lleva de vuelta al
valor predeterminado.
Y luego está el ajuste inverso, que por supuesto
invierte el orden. Así que volvamos al rap. Y ahí
vamos. Hermoso. Así que aquí tenemos una de las
carátulas de álbum más icónicas, una de las mejores bandas de la historia escrita en HTML
y CSS, por supuesto, ahora actualmente, estamos usando el margen
aquí para crear un espacio entre las
imágenes de los Beatles. . Esto de aquí. Ahora que está bien, por
supuesto. Pero ahora conocemos Flexbox, lo que significa que existe una
forma mucho más limpia de lograr el mismo resultado. Entonces, en lugar de usar los
elementos individuales aquí para crear un margen, podemos
decirle al elemento principal que debe crear un espacio de,
digamos, 10 píxeles entre todos los elementos secundarios.
Deja que
te enseñe. Así que eliminemos esto. Aquí vamos. Y entremos aquí y
digamos, brecha. Y entonces, ¿cuánta brecha queremos? Hagamos 10 píxeles.
Y ahí tienes Eso es todo lo que hay. Ahora agreguemos un poco
más de espacio. Así que hagamos 20 píxeles. Ahora, por supuesto, eso es demasiado,
porque aquí tenemos un ancho máximo de 420. Podemos aumentar eso a
440, digamos y luego estamos de vuelta aquí. Perfecto. Ahora, ¿qué pasaría si
quisiera tener un espacio superior inferior diferente, luego izquierdo y
derecho? Bueno, también puedes hacer eso de una manera fácil aquí. Así que
digamos que entre aquí. Y hagamos 10 píxeles aquí. Así que aquí verás que la
izquierda, la derecha son 10 píxeles y la parte superior e inferior son 20 píxeles.
Así que
puedes controlar incluso eso, pero lo dejaré en 10
píxeles. Así que volvamos a eso. Bien, aquí es donde vamos a
tomarnos una pequeña pausa del trabajo en JavaScript por un
momento para que podamos agregar más CSS. Como puede ver, los
elementos de la lista se muestran así, que es la forma predeterminada,
pero queremos que se muestren así. Y ese
es su desafío a resolver. Ahora, antes de dejarte trabajar en
esto, debo mencionar aquí que quieres poner todo tu código
dentro del archivo CSS. De hecho, ya seguí adelante y
agregué todo esto para ti. Así que asegúrese de escribir su
código entre aquí y aquí. Y también hay un comentario CSS
aquí que incluye el color de fondo, el
color crema que puedes ver aquí, y también el código para las
sombras del cuadro aquí. Bien, entonces este es un gran desafío. Así que
tómate tu tiempo con esto. Y, por supuesto, si no
lo entiendes completamente, entonces está completamente bien. Lo más
importante es que lo intentes. Así que haz una pausa aquí y pruébalo
tú mismo.
Y estaré contigo en un rato. Buena
suerte. Bien, espero que haya ido bien. Echémosle
un vistazo juntos. Entonces, ¿qué es lo primero que notamos
aquí? Bueno, no sé ustedes. Pero noté que
no hay viñetas aquí. No tenemos eso. Así que
deshagámonos de eso. Y luego, por supuesto, los artículos se colocan uno al lado
del otro. Así que definitivamente queremos usar Flexbox. Y
luego queremos usar envoltura flexible para envolver los artículos.
Aquí también hay una pequeña brecha que queremos incluir.
Bien, comencemos.
Así que primero voy a entrar en la UL
y voy a usar el tipo de estilo de lista. Y voy a establecer
eso igual a ninguno. Y ahí vamos. Hermoso, todos los
círculos se han ido. Bien, ¿qué sigue? Definitivamente quiero
deshacerme de este espacio justo aquí. Creo que ese es el relleno.
Vamos a ver. El relleno es igual a cero. Perfecto. Bien, a continuación, hagamos
display flex. Aquí vamos. Muy lindo. Luego hagamos flex wrap
y establezcamos eso igual a wrap. Impresionante. Bien, dejémoslo
así por ahora. Y bajemos aquí ahora. Y voy a
descomentar esto primero. Aquí vamos. Muy lindo. Eliminemos
esta línea y agreguemos algo de relleno aquí. ¿Cuánto relleno debemos
agregar? Voy a probar con 10 píxeles. Primero. Veamos cómo se ve eso.
Luciendo bastante bien. Pero creo que quiero aumentarlo a 15.
De hecho, ahí vamos mucho mejor. Bien, también tenemos un
radio de borde aquí, por supuesto, como todo lo demás. Así que
sigamos adelante y añadamos eso aquí debajo.
Radio de borde.
También quiero hacer esos ocho píxeles como los demás. Entonces,
busquemos ocho píxeles allí mismo. Ahora, ¿hay algo que nos
falte? Como puede ver aquí, los elementos están un poco
apretados. Así que definitivamente queremos darle un
espacio. Hagamos un espacio de 10 píxeles. Bien, eso es bastante bueno. Pero
aun así, podemos ver que había un poco de espacio aquí
en el lado derecho para este artículo de Red Bull.
Y quiero que estos se
estiren tanto como sea posible. Vamos a usar flex
grow para esto. Así que vamos a decir que el crecimiento flexible es igual a uno, y
eso debería solucionarlo perfectamente. ¿ Hay algo más que nos
falte aquí? Es un poco difícil de ver. Pero puede
ver que el texto no está del todo alineado con el centro. Arreglemos
ese centro de alineación de texto. Y sabes qué, creo que esto se ve
bastante idéntico a esto ahora. Impresionante. Ahora hay una
cosa que también quiero cambiar, puedo ver que el
tamaño de fuente aquí es más pequeño que el de aquí. Quiero ver
si se ve mejor si lo cambio al mismo tamaño de fuente que el
resto. Intentemos eso aquí arriba. Copiémoslo desde aquí,
tamaño de fuente y definámoslo explícitamente aquí. Así que establezcamos el tamaño de fuente
en 20 píxeles.
En mi opinión, esto se ve mejor. Ahora, por supuesto,
depende de ti lo que te guste más, siéntete libre de hacer
cambios cuando lo creas conveniente. Bien, echemos un vistazo final
. Ejecutemos la aplicación. Vamos a estirarlo un poco.
Dios mío, esto se ve tan bien. Esto realmente se parece a
una aplicación que descargaría de la App Store. ¿Eso es una
locura? ¿O estoy un poco delirando? ¿No crees que esto se
ve muy bien? Bueno, esa es mi opinión. Por supuesto, esto
definitivamente se ve bastante dulce. Bien, buen trabajo hasta ahora.
Avancemos. Bien, ahora a nuestra aplicación solo le falta una
característica. Y esa es la función de eliminación. Así que queríamos hacer
que cada vez que presione cualquiera de estos elementos, se
elimine del carrito, lo que significa que se elimine de la base de datos.
Bien. Ahora, para hacer eso, necesitamos entender algo
muy importante en el desarrollo de software. Y ese es el
concepto de una identificación única, echemos un vistazo a nuestra base de datos. Así que
aquí vemos todos nuestros artículos enumerados aquí dentro de la
lista de compras.
Tenga en cuenta que cada elemento se enumera con una clave y un
valor exactamente igual que en un objeto de JavaScript.
Ahora, ¿qué es esta cosa rara aquí? Bueno, si te fijas,
todos estos son diferentes entre sí, lo que significa que
es un identificador único. Ahora, ¿ por qué tenemos que tener
esto en primer lugar? Bueno, piensalo. Si desea
eliminar un elemento específico de la base de datos, ¿no necesita saber
exactamente qué elemento es? Y luego podría pensar, bueno, ¿
no tiene ya el nombre del elemento aquí? Si
seguro.
Pero, ¿qué sucede si alguien pregunta el mismo elemento
dos veces de la forma en que lo programamos? Eso definitivamente está permitido.
Entonces necesitamos tener un identificador único. Y es por eso que
tenemos esta identificación. Ahora, por suerte, estamos usando Firebase. Por lo tanto, no debemos
preocuparnos por crear esta identificación para nosotros mismos. Firebase
lo hace automáticamente. Sin embargo, necesitamos encontrar una manera de
obtener la identificación de alguna manera dentro de nuestro código, porque esa es la única
forma en que podemos decirle a Firebase que elimine un elemento por nosotros.
Bien,
volvamos al código. Está bien, voy a entrar
aquí. Y voy a usar el viejo truco de registro de la consola. Y
voy a decir snapshot dot Val. Eso es con lo que empezamos. ¿
Bien? Así que hagamos eso. De nuevo. Ejecutemos eso y veamos qué
obtenemos. Bien, excelente. Esos son todos los elementos de nuestra base de datos. Y
observe que aquí tenemos tanto la identificación como los artículos. Bien, entonces lo que
estamos haciendo aquí es que aquí mismo en la matriz de elementos, estamos
usando valores de punto de objeto, para convertirlos en solo los
valores.
Me pregunto si hay otro método que podamos usar
en un objeto que nos dé ambos. ¿ Puedes pensar en algo? ¿
Puede hacer una pausa aquí y ponerlo aquí? Estaré contigo en
unos segundos. Vale, ¿lo recordabas? Mientras recuerda,
podemos usar valores, pero también podemos usar claves. Recuerde, eso
solo nos dará las identificaciones. Probemos eso mediante la
matriz de elementos de registro de la consola. Vamos a ejecutar eso. Ahora solo obtenemos las identificaciones. Pero
recuerda, había una tercera llamada entradas. Probemos
ese. Ahora.
¿Qué obtenemos ahora? Ahora obtenemos una matriz con matrices más pequeñas
dentro que contienen tanto el ID como el valor. Esto
es perfecto para nosotros. Bien, entonces, ¿qué hacemos ahora? Bueno, queremos
acceder a estas cosas dentro del ciclo aquí. Así que voy
a seguir adelante y hacer lo que siempre me gusta hacer, que
es crear una variable aquí para el elemento actual. Y aquí,
voy a decir matriz de elementos, y luego el elemento if. Entonces podemos
usar el elemento actual aquí. Bien, entonces tenemos el artículo actual.
Veamos qué obtenemos. Ahora. Abramos esto. Ah, ¿ves? Ahora
esto se está congestionando bastante, pero obtuvimos tanto la
ID como el valor. Bien, esto se ve bastante bien. Ahora tengo
un desafío para usted, porque quiero que use el elemento actual,
pero cree dos nuevas variables, llámelo ID de elemento actual y
valor de elemento actual y use el elemento actual para establecer ambos iguales a los
valores correctos. Bien, pausa aquí, pruébalo por ti mismo.
Y estaremos de regreso. Bien, espero que uno bien, hagámoslo
juntos ahora. ID del artículo actual. Y ese va a ser el
artículo actual.
Recuerde, esta es una matriz con dos cosas dentro. ¿
Cuál va a ser el ID? Bueno, ese es el primero o más bien
el cero de uno porque estamos tratando con arreglos. Así que
voy a decir cero aquí. Del mismo modo, vamos a decir el
valor actual del artículo. Y aquí lo vamos a poner igual a
uno. Probémoslo. Ahora. Primero, veamos cómo se ve eso
. ¿Acabamos de obtener la identificación? De hecho, lo hacemos. Perfecto.
Hagámoslo por el valor ahora. Ejecute y ahora volvemos a obtener el
valor solamente. Perfecto. Ahora tenemos la información que necesitamos.
Bien hecho. Bien, ahora tenemos un pequeño problema aquí. ¿
Cómo estamos agregando un nuevo artículo al elemento de la lista de compras? Bueno,
actualmente estamos usando innerHTML con cadenas de plantilla.
Y si bien
eso funciona en muchos casos simples, ya no funcionará para
nosotros. ¿Por qué? Porque necesitamos hacerlo para que podamos adjuntar
un detector de eventos a todos estos elementos, y debemos
hacerlo para que podamos ejecutar una función cada vez que el usuario
haga clic en cualquiera de estos elementos. Y eso no es posible de
esta manera. Entonces, lo que necesitamos es Crear Elemento. Y
de hecho ya lo has visto, aunque muy brevemente en una
práctica anterior. Sin embargo, en este, vamos a profundizar mucho
más en él. Ahora tengo que darte un pequeño descargo de responsabilidad aquí,
crear un elemento puede ser una de esas cosas, eso es bastante
confuso de entender, al menos al principio, así que
haré todo lo posible para explicártelo de una manera intuitiva.
De acuerdo, como probablemente pueda adivinar, por el nombre, Crear
elemento es una función que le permite crear un elemento, por
supuesto, pero es un método que debe aplicarse al
objeto del documento.
Entonces puedes decir document dot Create Element. Y
luego tienes que tomar una decisión sobre qué elemento quieres
hacer, si quieres hacer un h1, una etiqueta de párrafo, un div, puedes
hacer cualquier cosa. Y en nuestro caso, queremos crear un nuevo elemento de lista.
Y li Ese es el primer paso. El segundo paso es darle a su
elemento recién creado algo de contenido de texto. Y en nuestro caso, ese
será el nombre del elemento. Muy bien, descargue el paso dos, el
último paso es colocar el elemento recién creado en su
elemento principal. Y en nuestro caso, ese será el elemento de la lista de compras
, la URL. Bien, retrocedamos un poco y comencemos
con el paso número uno.
Así que voy a bajar aquí. Y por
ahora, solo comentaremos esta línea. Entonces, lo primero que tenemos que
hacer es crear una variable, y la
llamaré nueva L. Y la igualaré al documento dot
Create Element. Bien, dentro de aquí, tenemos que darle ¿qué es lo
que queremos hacer? En nuestro caso, queremos hacer un
elemento de lista. Ese es el paso uno completado. Bien, entonces, ¿cuál es el paso dos? Bueno,
eso es poner algo de texto entre las etiquetas, ¿verdad? Entonces,
bajemos aquí y digamos: Oye, nueva L, quiero agregarte algo de contenido de texto
. Y quiero que eso sea algo que arreglaremos más tarde.
Solo pondremos una cadena aquí para probarlo primero. Muy bien, ¿
cuál es el último paso? El último paso es tomar esto que
acabamos de hacer y colocarlo dentro del elemento principal.
Y para eso, ¿dónde está nuestro elemento padre? Bueno,
subamos aquí y echemos un vistazo. Esa va a ser nuestra lista de compras L
correcto. Así que copiemos eso. Baja aquí. Y diga, comience con
eso.
Y luego anexar. Estamos usando un método llamado append. ¿
Qué queremos agregar? Bueno, queremos agregar una nueva L al
final. Así que vamos a poner eso aquí. Y con suerte, cuando ejecute
esto ahora en el mini navegador, eliminará todos los
nombres de los elementos y nos mostrará un montón de elementos que
dicen algo. Veamos si eso funciona. Ejecutemos esto ahora. Y
ahí vamos. Funciona perfecto. Bien, ahora, aquí es donde quiero
darle un desafío, haga una pausa aquí y cambie el código para que
realmente muestre el nombre de los elementos en lugar de algo
para todo. Así que haz una pausa aquí, pruébalo. Y vuelvo
enseguida. Bien, espero que haya ido bien. Así es como
lo pienso. Ya tenemos el valor del artículo aquí como
parámetro, a la derecha. Así que podemos usar esto. Y en realidad
lo estamos alimentando aquí usando los valores de los elementos actuales. Así que eso
debería darnos lo que estamos buscando. Así que entremos
aquí y digamos Valor del artículo, simplemente cópielo desde aquí y
reemplácelo aquí. Y ahora intentemos ejecutarlo, veamos qué obtenemos.
Y
conseguimos todos los artículos. Asombroso. Bien, antes de que terminemos con la
malla, quiero hacer una cosa más, porque aunque
obtengamos el valor de los artículos aquí, está bien. Pero
también nos gustaría el ID, porque recordad, queremos hacerlo más adelante
para poder borrar estos elementos pulsando sobre ellos.
Y para eso vamos a necesitar el DNI. Así que hagámoslo ahora. Entonces, ¿
cómo se supone que vamos a hacer eso ahora? Bueno, estamos obteniendo el
valor del artículo aquí, ¿verdad? Pero si miras aquí, aquí es donde
realmente estamos usando esta función.
Y le estamos dando de comer
a esta cosa. ¿Por qué no lo alimentamos con el elemento actual, que
contiene ambas piezas de información, y luego nos
ocupamos de eso aquí abajo? Hagamos eso ahora. Así que hagamos el
elemento actual, póngalo aquí. Y luego vamos a entrar aquí. Y
diremos let y luego hagamos item ID, item y luego cero.
Y luego diremos liderar de nuevo. Y luego diremos el valor del artículo.
Y luego diremos item. Y luego, por supuesto, queremos obtener
el primero, ¿verdad? Así que ahora podemos eliminar esto. Y
eliminemos esto también. Y cambiemos esto para que sea solo un artículo
en lugar de un valor del artículo. Y creo que eso debería funcionar.
Ejecutémoslo ahora. Esto, por supuesto, aún muestra los nombres de los elementos,
lo cual es bueno. Cambiemos esto ahora a ID de artículo solo para asegurarnos
de que funciona para que funcione y los consigamos hermosos,
perfectos.
Así que voy a reemplazarlo nuevamente con el valor del artículo
. Y ahí vamos. Bien hecho. Conseguimos mucho en la
malla. Te veré en la próxima . Bien, entonces, ¿cómo hacemos para
eliminar elementos de nuestra base de datos en tiempo real de Firebase? Echemos un
vistazo a este proyecto que he creado aquí. Así que aquí tenemos
los malos tiempos de scrim, una publicación que se publica desde 2016.
¿
Cuál es su ventanilla única para las noticias de scrim y más? En realidad,
me gusta ir tan lejos como para decir que es la publicación más confiable
en tecnología. Pero desafortunadamente, eso no es cierto.
Mira, con el surgimiento de scrim BA, hemos recibido muchos más
contribuyentes a los tiempos de scrim. Y eso es algo bueno, ¿verdad?
Bueno, no siempre, porque a veces acabamos publicando
fake news, que por supuesto, es muy malo. Y eso no es
algo que queramos respaldar. Entonces, para combatir
este problema, hemos contratado noticias falsas a los líderes, sí, en
realidad tenemos que contratar personas para detectar las noticias falsas y
eliminarlas. Entonces, para que estas personas hagan su trabajo, necesitamos
crear la funcionalidad para ellos.
Entonces, ¿cómo funcionaría eso?
Exactamente. Aquí, básicamente seguí adelante y escribí todo
el código para esto, casi todo el código y aquí pueden ver que
tenemos algunas historias, tres por fila. Y por eso queremos hacer
que estas noticias falsas, los líderes puedan hacer doble clic en cualquiera de
estos elementos y eliminarlos de la base de datos. Muy bien, entonces, ¿
dónde exactamente se supone que debemos escribir el código? Vamos a desplazarnos hacia
abajo aquí. Y escribir aquí es donde escribiremos la
mayor parte de nuestro código.
Como puede ver, tenemos un evento de doble clic
aquí, tenemos una función que se ejecutará
cada vez que se haga clic en cualquiera de estos . Entonces, ¿cuál es el primer
paso? ¿Cómo hacemos para hacer esto? Echemos un vistazo a la
base de datos. Aquí tenemos la base de datos con todas las historias
y las identificaciones para ello. En este caso, agregué manualmente el IDS
solo para hacerlo un poco más simple para nosotros. Pero
funcionaría exactamente igual con los ID de Firebase generados automáticamente
. De acuerdo, entonces si queremos decirle a Firebase que elimine esta
historia aquí mismo, debemos decirle que elimine la historia que
tiene el ID n s cero. Eso tiene sentido porque es una
identificación única, ¿verdad? Entonces, hagamos el primer paso, que sería
literalmente registrar en la consola esa ID. Hagamos el registro de la consola. ¿Y
dónde está esa identificación? ¿Podemos verlo en cualquier lugar? Ahí está.
ID de historia,
intentémoslo. Pon esto aquí, ejecuta esto. Y si hacemos doble
clic en alguno de estos, obtenemos el ID perfecto. ¿Funciona para todos
ellos? Lo parece. Asombroso. Está bien. Entonces, ¿cuál es el siguiente
paso? Bueno, el siguiente paso es un poco más complicado, porque
para eliminar esta historia con esta identificación, debemos darle
la ubicación exacta. Así que no es sólo la identificación. Pero el hecho de que
esté dentro de las nuevas historias dentro de la base de datos, necesitamos
darle la ruta completa a eso. Así que recuerda, referencias,
la función ref que usamos antes, eso es lo que vamos a
usar. Así que hagamos eso aquí abajo. Entonces, eliminemos esto
ahora. Y voy a hacer una variable para esto, llamémosla
ubicación exacta de la historia en dB, e igualemos eso para que sea ref primero,
y luego siempre, primero tenemos que proporcionarle la base de datos
. Así que hagamos la base de datos. Y luego aquí es donde tenemos que
señalar la ubicación.
Así que aquí, vamos a necesitar la
identificación. Pero antes de eso, también vamos a necesitar este de
aquí, la referencia a las noticias. Y entonces, vamos a
poner eso ahí. Hagamos nuevas historias. Y luego hagamos una
de estas identificaciones. Ahora, vamos a probarlo. Ahora, con n s cero,
veo si eso funciona o no, y S cero, está bien, ¿esto por sí solo
va a hacer algo? No, esta es solo la ubicación,
en realidad tenemos que eliminarla de la base de datos. Y para eso,
necesitamos la función Eliminar, que es bastante simple de usar. Entonces,
solo vamos a subir aquí e importarlo desde Firebase
primero, eliminarlo, bajemos aquí nuevamente. Y vamos a
eliminar y literalmente solo vamos a alimentarlo con todo esto
que contiene todo lo que necesita. Entonces, en este punto,
si ejecutamos esto ahora y hacemos doble clic en cualquiera de las nuevas historias,
esta primera historia debería eliminarse.
Probemos eso.
De acuerdo, es la primera historia de noticias falsas que
Microsoft adquiere por 11 mil millones. Eso es definitivamente una noticia falsa. Eso es
muy poco dinero para el buceo. Así que vamos a eliminar ese
doble clic y eliminarlo. Perfecto. Funciona. Bien, ¿
cuál es el último paso ahora? Bueno, nos aseguraremos de que
esta identificación se reemplace con cualquier identificación que vayamos a
usar para esa noticia específica. Entonces, usemos
cadenas de plantilla para esto, baje aquí, conviértalo en un acento grave.
Y
luego vamos a decir ¿cuál queremos usar? Queremos
usar este ID correctamente. Así que vamos a reemplazarlo allí. Bien,
espero que funcione ahora. Así que ejecutemos esto de nuevo y eliminemos todas
las noticias falsas. Está bien, vamos a ver. ¿ Qué tenemos aquí? 89
años se convierte en el estudiante de Scramble de mayor edad en ser contratado. Eso
definitivamente no es una noticia falsa.
Esa es una noticia asombrosa. scrambler lanza el
primer curso completamente hecho por AI. Definitivamente noticias falsas. Hagamos
doble clic en eso. Elon Musk da la bienvenida al mundo a su 16º hijo.
Esa no es una noticia falsa. Esta es que las noticias falsas ahora tampoco son
noticias falsas. Y esto tampoco es una noticia falsa. Creo que
estamos bien ahora. Muy bien, solo para recapitular muy rápidamente, las dos
cosas principales que teníamos que hacer eran obtener la ubicación exacta
del elemento que queríamos eliminar de la base de datos, y
luego enviar esa información a la función Remove Firebase,
y luego se encarga del resto.
¿Y cómo se actualiza
instantáneamente? Bueno, recuerda que estamos usando la función on value
que se ocupa de eso porque comer
algo de la base de datos también lo actualiza, lo que significa que on
value obtiene nueva información, que ejecuta. Bien, espero que
haya sido claro. Te veré en la próxima. Muy bien, esto es
emocionante porque finalmente estamos listos para agregar el código que
elimina elementos de la base de datos cuando hacemos clic en ellos en la aplicación.
Bien, ya sabemos que la información clave que necesitamos es
la identificación del artículo en la base de datos. Así que déjame
darte un desafío. Desplácese hacia abajo hasta esta función
aquí.
Y justo aquí es donde quiero que agregue un
detector de eventos a la nueva L, para que pueda registrar el elemento en la consola cuando
se presione cualquiera de estos botones . Ese es el primer paso. Haga
una pausa aquí, pruébelo usted mismo. Y vuelvo
enseguida. Buena suerte. Bien, ¿cómo te fue? Intentémoslo
juntos. Entonces, comencemos con la nueva L. Y luego queremos agregar un
detector de eventos. Hemos hecho esto un millón de veces antes. Primero,
por supuesto, está el evento que estamos escuchando,
será un clic, y luego tenemos que escribir la función
aquí. Abramos eso. Y, por supuesto, el primer paso siempre es
simplemente iniciar sesión en la consola, personalmente creo que es el más fácil para empezar
. Entonces, ¿qué queríamos poner aquí? ¿El ID del
artículo? ¿Ya tenemos eso? De hecho, lo tenemos
aquí arriba. Así que solo copiemos eso y pongámoslo aquí. Y
ejecutemos esto ahora para probarlo. Vale, ¿qué queremos
eliminar de aquí? Retiramos la ensalada. Haga clic y obtendremos
este registro de la consola. ¿Es ese el mismo? Sí, ese es el mismo
de aquí.
P y B es en lo que terminó. Así que sabemos que es
correcto. Perfecto. Bien hecho. Bien, ¿ qué sigue? Así que entremos
aquí adentro. Y aquí es donde realmente quiero darte el
segundo desafío. Y eso es hacer una variable principal y llamarla
ubicación exacta del artículo en dB. Y ponerlo igual a la ref. Esa es
la función que estamos importando aquí arriba. Ya
lo hemos usado aquí antes. Y por eso queremos usarlo nuevamente,
porque queremos obtener la ubicación exacta del elemento antes de
poder ejecutar la función Eliminar en él. Así que quieres establecerlo igual
a esto. Y luego, primero, por supuesto, esta base de datos como siempre,
y luego hay algo y se supone que debes descubrir
qué se supone que es ese algo . Así que haga una pausa aquí, pruébelo
usted mismo y estaré con usted en solo un segundo.
Bien, espero
que haya ido bien, hagámoslo juntos. Ahora, entremos aquí
y digamos la ubicación exacta del elemento en dB, configúrelo igual a la referencia.
Y, por supuesto, ref siempre requiere que especifique la
base de datos. Así que hagamos la base de datos. Y luego aquí, ¿qué se
supone que debemos poner aquí? Bueno, echemos un vistazo a nuestra
base de datos ahora mismo. Ahora mismo hemos especificado que esta es la
base de datos con la que estamos tratando . Ahora, ¿qué otras cosas que
necesitamos especificar? Bueno, primero debemos decir que estamos dentro
de la lista de compras. Y adentro, esta es la identificación que
queremos quitar, o esta, o esta, o cualquiera en la
que estemos haciendo clic, ¿verdad? Así que vamos a empezar con
esto primero. Así que entremos aquí, y voy a usar acentos graves.
Comencemos con eso. Y luego hacer la lista de compras. Y luego
queremos hacer solo una barra y luego aquí es donde va la identificación. Ahora
tenemos la identificación de nuevo, la tenemos porque acabamos de
usarla aquí.
Copiemos eso y colóquelo
aquí, por supuesto, usando el signo de dólar aquí. Y ahí vamos.
Creo que esto va a funcionar. Lo último que tenemos que hacer es
usar la función Eliminar. Y ahí es donde
entra usted. Debido a que este será su último desafío para
este scrim, use la función Eliminar para eliminar el elemento de
la base de datos, haga una pausa aquí, pruébelo usted mismo. Y vuelvo
enseguida. Buena suerte. Muy bien, antes de que podamos usar esta
función, tenemos que importarla desde aquí arriba. Así que sigamos adelante
y digamos Quitar. Y luego bajaremos aquí. Y tenemos que
llamarlo así. Y todo lo que se necesita es la ubicación exacta
del elemento en la base de datos, que ya tenemos. Así que solo
vamos a alimentarlo con esa información. Y eso debería
solucionarlo. Así que ejecutemos esto ahora y pruébelo.
Intentemos borrar algo, ¿o deberíamos borrarlo? Sigamos adelante
y eliminemos la ensalada. haga clic y elimínelo desaparecido. Perfecto, gran
trabajo. Así que no sé si te has dado cuenta, pero hay un gran error
que aún no hemos visto.
Intente pausar la pantalla
aquí para averiguarlo. Aquí hay una pista. Tiene algo que ver
con los elementos de la base de datos. Así que intente eliminar los elementos de la
base de datos. Te veré pronto. Entonces, ¿lo notaste? Echémosle un
vistazo juntos. Entonces, comencemos eliminando los
elementos de la base de datos uno por uno. Está bien, estamos bien hasta ahora. Continuemos
Bien, ahora llegamos al
último elemento. Hagamos clic en él. Uh, ja, tenemos un error.
Echemos un vistazo más de cerca a eso. Bien, minimicemos el
navegador mínimo, tenemos una gran advertencia aquí. Y luego dice que aquí
no se puede convertir indefinido o nulo en objeto. Hmm, ¿qué está pasando
aquí? Cerremos la consola. Y quiero que hagas una pausa en la
malla aquí mismo, otra vez, para tratar de pensarlo por ti mismo.
Antes de que lo veamos juntos. ¿ Qué está pasando aquí realmente?
Bien, pausa aquí. Y te veré en un segundo. Muy bien, tenemos que hacer un
trabajo de detective aquí. En primer lugar, ¿qué código se está ejecutando cada vez que
presionamos el botón para eliminarlo de la base de datos? Bueno, ese
será, por supuesto, este código de aquí, ¿verdad? Recuerde,
cada vez que la base de datos ha cambiado, esto se ejecuta siempre,
pero en este caso, si realmente se ejecutó, nos dio un error.
Y lo
hizo en el último elemento. Lo que tiene de especial eso
, lo veremos cuando eliminamos el último elemento, Red Bull en este
caso, con él también eliminamos la referencia a la lista de la compra. Y
cuando la referencia ya no existe, esta función de valor impar
falla, lo que significa que en ese momento no obtenemos una
instantánea, porque no existe ninguna instantánea. Bien, entonces, ¿cómo
manejamos eso? Bueno, puedo decirle que no necesita
estresarse por esto en absoluto, porque la increíble gente de
Firebase, por supuesto, ya pensó en esto, por lo que
nos proporcionaron un método llamado snapshot dot exist,
que devuelve un valor booleano verdadero o falso basado en si
hay una instantánea o no. De acuerdo, armado con este método, quiero
desafiarlo, cambie el código de valor activado, de modo que
use el punto de instantánea existente para mostrar los elementos cuando hay elementos
en la base de datos. Y si no hay elementos, debería mostrar el
texto, no hay elementos aquí, punto, punto, punto todavía. Bien, pausa aquí,
pruébalo por ti mismo.
Y estaré contigo en unos momentos.
Buena suerte. De acuerdo, espero que uno, bueno, echemos
un vistazo juntos. Bien, estamos usando el método de instantánea,
que devuelve un valor verdadero o falso. Cada vez que escucho
eso, inmediatamente pienso en una declaración if. Comencemos con
eso. Subamos aquí. Y digamos que existe un punto de instantánea,
está bien, esto nos devolverá verdadero o falso. En el caso de
verdadero, eso significa que hay una instantánea, lo que significa que
hay al menos un elemento en la base de datos. Así que voy a abrir
esta cosa aquí arriba. Y voy a poner todo este código
dentro de ahí. Así que cortemos desde aquí y pongámoslo
aquí. Asegurémonos de sangrar correctamente.
Aquí vamos.
Ahora, la cláusula else, por supuesto, será cuando sea falsa,
lo que significa que no hay elementos en la base de datos. Y entonces, en ese
caso, ¿qué queremos hacer? Bueno, queremos mostrar el texto,
no hay elementos aquí todavía. Bueno. Entonces, ¿ qué elemento es el que queremos
cambiar? Subamos aquí está en esa lista de compras L Esa es
la que está mostrando todos los elementos. Así que solo
copiemos ese y póngalo aquí. Y aquí, podemos
usar innerHTML. Eso va a ser lo más fácil. Y
digamos que no hay artículos aquí, punto punto punto todavía. Bien, ejecutemos esto ahora.
Y ahora muestra esto perfecto. Ahora probemos agregando
otro elemento aquí. Agreguemos un poco de miel. Y ahí vamos.
Hermoso. Borrémoslo de nuevo. Y volvemos. Perfecto,
gran trabajo. Entonces, una vez más, tenemos que hacer una pequeña pausa aquí
para que pueda reconocer lo increíble que eres.
En serio,
has estado haciendo un trabajo increíble. Y estamos tan cerca de
terminar. Y no puedo esperar a ver tu proyecto cuando esté terminado. Entonces
ahora solo necesitamos agregar un poco de CSS para terminar nuestra aplicación.
Ahora, por supuesto, tendremos que hacer un par de cosas más antes de que
finalmente terminemos. Pero en lo que respecta al código central de la aplicación
, esto es todo. Así que aquí está mi próximo desafío para agregar
estos dos efectos de desplazamiento. Cuando pasa el cursor sobre el botón Agregar al carrito
y todos los artículos aquí. Otra cosa es que cuando
pasas el cursor por encima ves como se convierte en un Cursor de Mickey Mouse
.
Haz que eso suceda también. Ahora echemos un vistazo al
archivo CSS porque necesitará dos códigos hexadecimales de color, uno
para agregar al carrito y otro para los artículos. Y los he incluido a
ambos aquí. Ahora, una cosa que quiero hacer antes de dejarte
comenzar este desafío es: ¿ Ves cómo los colores de estos artículos son
negros y no marrones oscuros? Cambiemos eso. Me olvidé de hacer eso
antes. Aquí vamos. Perfecto. Así que haz una pausa aquí y haz que esto
suceda. Buena suerte. Muy bien, espero que haya ido bien. Comencemos con el
primero.
Así que voy a copiar esta cosa. Voy a todo el
camino hasta aquí. Y debajo del botón. Voy a decir botón cuando
esté en estado de desplazamiento. ¿Qué queremos hacer? Queremos cambiar
el color de fondo a este. Y luego queremos hacer el
puntero del cursor también. Veamos si eso funciona. Pase el cursor y
hermoso funciona perfectamente. Hagamos lo mismo con el
otro. Cópielo Desde aquí arriba, baje a la UL. Y Li, este es
el indicado, pero queremos hacerlo cuando se cierne. Pase el cursor, y
luego otra vez, ponga esto aquí, y luego otra vez, el cursor y el
puntero. Deberias hacer eso. Vamos a ver. Y funciona increíble,
gran trabajo. Cuanto más profundices en el desarrollo, más
te darás cuenta de que, como codificador, literalmente tienes que pensar
en todo, incluso en las cosas más pequeñas. Dejame darte
un ejemplo. Aquí, tenemos un proyecto simple que muestra
cuántas cookies le ha dado al monstruo de las galletas en un
momento dado.
Así que vamos a ejecutar esta cosa. Así que comienza con un
plato vacío. Y para darle galletas, solo presiona este
texto, aquí vamos, vamos a darle un par. Mira, todo está
bien cuando vas despacio. Pero lo que sucede inevitablemente cuando le pasas
esto a una persona real es que comienza a ir súper
rápido. Y cuando haces eso, sucede esto, ves, comienzas a
seleccionar y seleccionas el texto.
Y en algunos casos,
incluso puede seleccionar todo como este. Bien, entonces, ¿cómo arreglamos
esto? Bueno, resulta que hay una propiedad CSS que
soluciona esto, vayamos al archivo CSS, esta propiedad se
llama selección de usuario. Y es súper simple de usar, puedes
decirle que seleccione nada o todo. Así que
entremos al h1 y dígale que no seleccione nada, digamos que el usuario
seleccione y luego ninguno. Bien, vamos a probarlo de nuevo. Bien,
presionando súper rápido ahora ves, no es capaz de seleccionar el texto.
Ahora, esto es lo que pasa con la selección del usuario, puede tenerlo
dentro del h1, o puede ponerlo dentro del
contenedor, o incluso el HTML en el cuerpo.
Entonces, en este punto,
aún puede seleccionar y anular la selección de la imagen. Entonces, lo que normalmente me
gusta hacer es simplemente poner esta cosa dentro de aquí, y eso se
encarga de todo. Pero para que lo sepas, puedes
reducirlo a lo que quieras. Bien, intentémoslo una vez
más. Hermoso. Bueno, es hora de una pequeña historia. Y para esta
historia, necesitamos entrar al DeLorean. Viajemos
a principios de los 2000. Eran tiempos más simples, la adopción de Internet
estaba creciendo increíblemente rápido. Fue un momento emocionante para estar
vivo.
No había YouTube, Spotify o Facebook. como que
extrañaba esos tiempos. Pero lo que definitivamente no existía en ese
entonces era esta cosa aquí? No. En aquel entonces, si quería
conectarse a Internet, prácticamente solo podía hacerlo
desde una computadora de escritorio. Existían computadoras portátiles, pero no eran tan
poderosas. Entonces, las personas que crean aplicaciones y sitios web
sabían que sus proyectos se utilizarían en un tipo de
pantalla.
¿Simple verdad? Ahora volvamos a nuestro tiempo. ¿Cómo es
para nosotros ahora? Bueno, ahora que tenemos tantos dispositivos diferentes, es
difícil hacer un seguimiento de todos ellos. Y todos ellos tienen
diferentes tamaños. Mira, las personas que escribieron HTML en su día
no pensaron en esto. Entonces, lo que decidieron hacer es que
si un sitio web se mostrara en una pantalla más pequeña, simplemente
reducirían el tamaño del sitio web para que se ajustara a la pantalla, como aquí. Y si bien
esto funciona para pantallas de monitores, se descompone por completo si
está en una pantalla móvil, porque este sitio web se verá
así en un teléfono. Bien, entonces, ¿ cómo arreglamos esto? Afortunadamente,
hay una manera muy fácil de arreglar esto, solo necesitamos
decirle explícitamente al navegador que no reduzca el tamaño del sitio web, sino que use el
ancho de algo llamado ventana gráfica para que sea el ancho del dispositivo
.
Si desea leer más sobre esto, no dude en hacer
clic en este enlace. Así que no tengo mucho que
mostrarles en esta malla. Todo lo que tenemos que hacer es entrar aquí y
pegar este código. Ahora me gustaría enlazar a este excelente
video de YouTube de Kevin Powell. Si desea una mejor
comprensión de esto, le recomiendo que vea este
video, puede hacer clic en este para abrirlo en una nueva pestaña. Y eso
es todo por este. Vale, estamos en la recta final. Ahora en
este, queremos hacer dos cosas. En primer lugar, lo que puede pasar
a veces es que si pulsamos demasiado rápido en la pantalla, podemos
seleccionar accidentalmente un texto o incluso la imagen. Ahora, este es un
problema común que sucede. Pero afortunadamente, hay una solución simple
para esto.
De hecho, ese es mi desafío para que lo haga de modo
que no pueda seleccionar nada en la aplicación, haga una pausa aquí,
pruébelo usted mismo y volveré enseguida. Bien, espero que
haya ido bien. Voy a entrar aquí y solo diré usuario,
seleccione Ninguno. Y ahí tienes Véalo eliminado de aquí. Así que
ahora puedes probar todo lo que quieras, pero no puedes seleccionar
nada.
Perfecto. Bien, ¿qué sigue? Bueno, esto no es algo
que podamos recrear en el mininavegador codificado
. Pero lo que sucede es que, a menos que agreguemos un
código muy importante dentro de nuestra etiqueta principal, esta aplicación no se
verá muy bien en un dispositivo móvil. Va a ser el
Ranking, que es algo que obviamente tenemos que arreglar. Ahora,
parece que nunca recuerdo el código exacto para esto. Así que siempre
lo busco en Google. Así que déjenme darles un desafío aquí mismo.
Entonces, el desafío es agregar ese código que hace que esta aplicación se vea
bien en una pantalla móvil. Haz una pausa aquí, a ver si puedes
resolverlo. Y estaré contigo. Bien, espero que hayas entendido eso. Así que en realidad fui a
Google y encontré la página de las tres escuelas de W. Y acabo de
copiar el código de allí. Y lo voy a pegar aquí mismo
. Aquí vamos. Ese es el que está bien hecho.
Te veré en
la próxima. ¿Alguna vez has notado que cuando usas un
navegador, cada sitio web tiene un ícono aquí arriba? Sí, bueno, eso se
llama ícono favorito. Y definitivamente es algo en lo que
debería dedicar tiempo para agregar a su sitio web. Bien, primero
debes asegurarte de tener un ícono. Esta es una linda
imagen que encontré que podemos usar como ejemplo. Y un ícono en este
caso es realmente solo una imagen. Ahora asegúrese de que sea una
imagen cuadrada. Y también asegúrese de que esté en formato PNG, he
incluido esta imagen para usted dentro de la carpeta de activos, para que
pueda probarla usted mismo. Ahora, una vez que tenga su imagen
lista, debe dirigirse a fab icon.io y presionar el
botón PNG a Ico, simplemente presione esta imagen para acceder al sitio web,
luego desea arrastrar y soltar su imagen aquí.
. Aquí
vamos. Aparece aquí, luego continúe y presione el
botón Descargar, que descargará un archivo zip, que puede descomprimir,
y allí encontrará todos los archivos que necesitará. Ya
seguí adelante y agregué esos archivos a nuestro proyecto aquí. Y ahora
vamos a necesitar instalar esto en nuestro sitio web, lo que
en realidad solo significa copiar este código y pegarlo en la
etiqueta principal de nuestro HTML. Así que adelante, copia esto. Y desea pegar
esto dentro del archivo HTML de punto de índice y colocarlo debajo de
la etiqueta de título. Ahora, técnicamente, mientras lo tengas dentro de
las etiquetas de la cabeza en cualquier lugar, estará bien. Ahora, desafortunadamente,
debido a las limitaciones de Skyrim, pero realmente no puedo mostrarles
cómo se ve esto en este sombrío. Pero si está haciendo esto
localmente, puede obtener una vista previa del sitio web en un navegador y
verá los resultados. Bien, ahora mira esto.
Este servicio
le ofrece algunas opciones adicionales. Tenemos algunas variaciones de la
imagen, notará que tenemos varios archivos de imagen que
hemos descargado. Ahora, ¿por qué es eso? Bueno, esto es solo para que
la calidad de la imagen sea la mejor posible en diferentes
dispositivos. Bueno. Y luego podría preguntarse, ¿qué es este
archivo que se encuentra aquí ? Bueno, este es el
archivo mágico que nos permitirá mostrar nuestro ícono en la
pantalla de inicio de nuestros teléfonos, como si nuestra aplicación web fuera en realidad una
aplicación móvil nativa. Pero más sobre eso en otra malla.
Estamos tan
cerca de terminar esto. Ahora, debemos asegurarnos de que
esta aplicación tenga un ícono, para que podamos verlo en el encabezado de una pestaña en un
navegador. Pero lo que es más importante, para que podamos poner ese ícono en la
pantalla de inicio de nuestro teléfono para iniciar la aplicación. Esta es la imagen
que usaremos. Y de hecho he incluido esto dentro de
la carpeta de activos, agregar al carrito punto png, ahora no vamos a
usar esa imagen directamente, en realidad vamos a usar el
servicio fab icon.io para generar todas las cosas que necesidad. Así que
ábrelo de tu lado, vas a presionar esta imagen para abrir
la página web, y luego presionar el convertidor de PNG a OACI,
luego simplemente arrastrar y soltar la imagen aquí, y luego
continuar y presionar el Botón de descarga, que descargará
un archivo zip, que desea descomprimir, y encontrará todos los
archivos que necesitará allí. De hecho, ya seguí adelante
y los agregué a nuestro proyecto aquí. Ahora, lo último que
debemos hacer es desplazarnos un poco hacia abajo en la página y copiar este
código aquí para instalarlo .
Así que sigamos adelante y agreguemos
eso justo dentro de la etiqueta principal, sangremos esa cosa, perfecto.
Ahora, debido a cómo funciona Scribble, realmente no puedo mostrarte
cómo se ve esto. Pero verá la diferencia si está trabajando
localmente en su navegador. Ahora puede notar que
aquí también hay un archivo site dot web manifest. Vamos a
hablar de eso en un momento. Así que recuerda, cuando creaste
una extensión de Chrome con ped anteriormente en este módulo, ¿recuerdas que
había un archivo manifest.js? Vamos a tirar de eso. Ahora, ¿qué
es exactamente esta cosa? Bueno, en el caso de una extensión de Chrome,
este archivo le dice a Chrome la información que necesita para conectar
este programa a Chrome.
Entonces, cosas como el nombre, el
número de versión, el ícono, la descripción. Ahora todos estos datos
se convierten en esto dentro del Administrador de extensiones en Chrome.
Ahora, de manera similar, hay un archivo de manifiesto web que podemos crear
cuando queremos convertir nuestra aplicación web en algo que se vea y
se sienta como una aplicación móvil. Ahora, la palabra elegante para esto es PWA, o
una aplicación web progresiva. Ahora vamos a entrar en el proyecto para echar un
vistazo más de cerca.
Así que aquí tengo un proyecto configurado que se llama la
aplicación del gato. Y todo lo que hace cuando lo ejecutas es mostrar una
imagen aleatoria de un gato. Y estas imágenes en realidad son generadas
por una IA, por lo que todas estas imágenes se obtienen de este
sitio web llamado este gato no existe
. aquí afuera. Ahora
mira esto, esto parece completamente desordenado. Pero la
única razón para eso es porque no hay espacio ni
sangría. Así que ahora tengo un desafío para que pauses
la pantalla aquí y agregues el espacio y
la sangría apropiados para que se vea más como un objeto de JavaScript,
algo a lo que estás acostumbrado. Bien, buena suerte. Volveré
enseguida. Muy bien, espero que haya ido bien. Solo voy a
pegar la solución aquí. Aquí vamos. Esto se ve mucho mejor.
Ahora, ¿qué tenemos aquí? Así que primero, tenemos el nombre.
Y luego tenemos el nombre corto. Entremos y digamos aplicación de gato para
ambas aplicaciones de gato. Y luego aquí tenemos los íconos, esto es lo
que aparecerá en nuestra pantalla de inicio. Estas son imágenes
que ya tenemos en nuestro proyecto, por supuesto, generadas por
ese servicio de cinco icon.io.
Y luego tenemos el color del tema.
Ahora bien, este color de aquí es algo que puedes controlar.
Y déjame mostrarte dónde es visible. Así que ese color
aparecerá justo en la parte superior aquí. No me he vuelto
rojo, por lo que es fácilmente visible. Así que me gusta configurar este color
para que sea el color de fondo que estamos usando en la aplicación. Bien,
ahora, ¿cuál es este color de fondo? Bueno, este es el color
que será visible antes de que se carguen los estilos para su
aplicación web. Entonces, si toma un tiempo cargarlos, esto
es lo que se mostrará, está bien, finalmente, ¿qué es esta
pantalla? Está configurada para ser independiente. Y esto hará que la
aplicación parezca una aplicación independiente. Entonces, cualquier cosa adicional
que tenga el navegador lo eliminará. Por lo tanto, se ve y
se siente como una aplicación móvil nativa.
Ahora, en realidad hay mucho más
en el archivo de manifiesto web de lo que les mostré. No puedo cubrir
todo en esta malla, siéntase libre de hacer clic en esta página
aquí y leer más sobre todas las cosas que son posibles. Pero
para nuestro caso de uso, esto es suficiente. Finalmente estamos listos para
el último paso. ¿Puedes creerlo? ¿Llegaste aquí?
Una pequeña cosita, y vamos a terminar con este
chico malo. tan emocionante Bien, hagamos esto. Entonces, abramos el
archivo de manifiesto web del sitio. Y quiero presentarles un desafío aquí mismo,
pausar la malla y arreglar esto . Así se ve mejor.
Eso significa agregar espaciado y sangría. Te esperaré. Bien, espero que haya ido bien. Solo
voy a pegar esto. Ahí vamos mucho mejor. Comencemos a
completar la información aquí.
Entonces, el nombre, por supuesto,
será Agregar al carrito. Y vamos a copiar esto y pegarlo
aquí. Los íconos ya tienen configurado el color del tema que
queremos configurar como color de fondo aquí. Así que busquemos
eso del CSS. Vayamos aquí y copiemos este de aquí.
Pondremos eso para ambos colores del tema. Y en realidad el
color de fondo también. Ahí vamos y mostramos. Queremos
seguir solos. Y finalmente hemos terminado. ¿Puedes creerlo?
Acabas de terminar de crear tu primera aplicación. Dios mío, espero que
estés orgulloso de ti mismo. Porque ciertamente lo soy.
En serio, tómate un momento y date una palmadita en la espalda.
Además, asegúrese de celebrar este momento tan especial.
Espero que estés más emocionado que este tipo.
Hablando en serio.
Excelente trabajo. Ahora lo único que le queda por
hacer es implementar su proyecto usando Netlify. Y vamos
a hacer eso en la próxima malla. Pero antes de continuar e
implementar la aplicación, quiero hacer una pequeña pausa aquí para
hablar brevemente sobre algo muy importante. Y es que
debería dedicar un poco de tiempo a personalizar su aplicación,
porque de lo contrario su aplicación se verá exactamente igual que la
mía, y probablemente igual que muchos otros estudiantes que califican.
Ahora déjame mostrarte lo fácil que puede ser darle a tu aplicación un
toque personal. Así que esto es lo que tenemos bien. Ahora vamos a cambiar
la imagen del gato. Eso se ve bastante bien. Hagamos
otro. Está bien, no del todo todavía. Aquí vamos. Ese es
. Bien, ¿qué pasa con la fuente? Vamos a cambiarlo por otro
. Está bien, sigamos.
Uno mas. Y ahí está. Muy
bien, ¿qué pasa con los colores? Cambiémoslo un poco. Está bien,
se ve bastante bien. ¿Qué tal si agregamos un poco de contraste?
Ahí vamos. Vea cómo solo unos pocos cambios menores pueden hacer que estos dos
se vean bastante diferentes. Así que asegúrese de personalizar su aplicación para
que realmente sienta que la aplicación muestra quién es usted. Y
sé que lleva un poco de tiempo hacer esto. Pero agrega
ese pequeño extra que sabes.
Redoble de tambores, porque
finalmente es hora de que implementemos nuestra aplicación para anularla,
comencemos de inmediato. Entonces, por supuesto, lo primero que debemos
hacer es asegurarnos de que todos los archivos del proyecto estén dentro
de una carpeta en nuestra máquina. Entonces, si me ha estado siguiendo
en scrim todo este tiempo, entonces desea continuar
y descargar los archivos como un zip y probablemente ya sepa
cómo hacerlo. Pero en caso de que lo hayas olvidado, debes presionar
este botón aquí mismo. Y luego queremos subir aquí para
descargar un zip press sobre eso.
Y ahí vamos. Estamos
descargando el archivo zip en nuestra máquina, luego, por supuesto, desea
continuar y descomprimir ese archivo en su computadora. En ese momento,
obtendrá esta carpeta con un nombre muy extraño donde
están todos sus archivos, ahora desea continuar y cambiarle el nombre a
algo como agregar al carrito Ahí vamos. Ahora, si ha estado
siguiendo en su máquina local todo este tiempo, entonces,
por supuesto, ya tiene una carpeta de proyecto. Muy bien, esta
parte está hecha. Ahora, ahora tenemos que dirigirnos para anular, puede
continuar y presionar la captura de pantalla si desea
abrir Netlify en su extremo, está bien, voy a subir rápidamente aquí
e iniciar sesión, voy a use el correo electrónico para iniciar sesión. Pero siéntase
libre de usar la cuenta que sea mejor para usted. Y para muchos de
ustedes, esa será probablemente su cuenta de GitHub. De acuerdo,
sigamos adelante e iniciemos sesión. Y luego debería ver algo como
esto. Ahora queremos desplazarnos un poco hacia abajo hasta que veamos esto.
Ahora aquí abajo es donde dice que puede arrastrar y soltar su
carpeta, que es exactamente lo que vamos a hacer.
Así que
adelante, arrastre y suelte su carpeta aquí. Aquí vamos. Ahora
va a tomar un par de segundos, y luego boom, está
hecho. Ahora, quiero tomarme un poco de tiempo para apreciar
este momento, porque he estado implementando mis proyectos durante mucho
tiempo. Y recuerdo una época en que todo este proceso
tomaba varias horas, a veces incluso varios días. Y
acabamos de hacer todo eso con un simple arrastrar y soltar
verdaderamente mágico.
Bien, de todos modos, ahora nuestra aplicación finalmente se implementó. Ahora
queremos ir a la configuración del sitio para cambiar el nombre de nuestra aplicación. Así que
solo presiona aquí. Y luego queremos desplazarnos un poco hacia abajo
, ahí vamos. Y luego presione cambiar el nombre del sitio. Así que voy
a cambiarlo de este nombre muy aleatorio a algo un
poco más apropiado. Ahí vamos mucho mejor, entonces sigue
adelante y presiona guardar. Perfecto. Y eso es. Ahora podemos
continuar y presionar esta URL para abrirla en una nueva pestaña.
Oh, sí,
mira esa belleza. Esa es nuestra aplicación, que ahora está disponible para
todo el mundo, al igual que ese trabajo increíble. Ahora, en la siguiente
pantalla, vamos a dar el paso final, que es poner a
este chico malo en las pantallas de inicio de nuestro teléfono. Nos vemos en un
momento. Finalmente, es hora de que pongamos nuestra hermosa creación en
nuestro precioso teléfono. Bien, entremos en ello. Así que esta malla se
va a dividir en dos. Primero, le mostraré los
pasos sobre cómo poner su aplicación en su teléfono. Si tienes un
Android, entonces haremos el iPhone. Bien, lo primero que
debe hacer es abrir el navegador predeterminado en su teléfono,
que para Android, por supuesto, es Google Chrome. Una vez que haya
abierto Chrome, querrá anotar la URL de Netlify exacta
para su aplicación. Aquí vamos. Y ahí está. Ahora continúe y
presione este botón para abrir el menú, luego desea ir
hasta donde dice Agregar a la pantalla de inicio.
Presione
eso, luego le preguntará si desea cambiar el
nombre para mostrar, no quiero hacer eso. Así que voy a seguir
adelante y presionar Agregar, y boom, la aplicación ahora se agrega a la
última posición de todas las aplicaciones. Entonces, si tiene muchas aplicaciones en
su teléfono, solo tiene que ir a la última página. Ahí está
justo ahí. Una vez que haya encontrado la aplicación, simplemente muévala a una
posición más apropiada. Voy a moverlo a mi primera pantalla.
Perfecto. Ahora finalmente abrámoslo. Dios mío, ¿ves que se
ve exactamente como una aplicación nativa? Adelante, pruébalo. Muy
bien, hagámoslo ahora por la gente de Apple. Entonces, nuevamente, queremos
abrir el navegador predeterminado del sistema, que en el caso de
Apple es Safari, luego queremos ingresar la URL de la aplicación
aquí. Aquí vamos. Y ahí está. Y luego queremos presionar
este botón aquí mismo, va a abrir el menú,
queremos ir a donde dice Agregar a la pantalla de inicio.
Presiona
eso. Y luego nos pedirá que configuremos el nombre para mostrar de
esto, lo mantendré para agregar al carrito, presione Agregar y
boom, ahí vamos. Ahí está. Bien, ahora para el momento de la
verdad. Vamos a abrirlo. Y ahí vamos. ¿Ves que se ve
y se siente exactamente como una aplicación móvil? Y ahí lo tienes, ese
fue el último paso que diste. Sabes que la mejor parte de
terminar un proyecto es poder compartirlo con el mundo. Y
eso es exactamente lo que quiero que hagas si te sientes cómodo con
ello. Por supuesto. Ahora hay dos plataformas que son perfectas para
compartir este tipo de cosas, Twitter y LinkedIn.
Entonces, lo
primero que necesita es obtener una excelente captura de pantalla de su aplicación
como esta, mejor para hacerlo desde su teléfono. Y si desea
pasar el tiempo adicional, incluso puede hacer un video o un GIF, luego
simplemente escriba un tweet o una publicación sobre cómo terminó este curso. Y
mostrando su increíble creación como lo ha hecho Brian
aquí con una malla de proyecto que terminó en LinkedIn.
Este es de James. Y este es de Bianca.
Esta es la
aplicación finalizada de los Oscar en Twitter. Este es de So Sean. Y
aquí hay otro. Ahora, aparte de poder compartir tus
creaciones con otras personas, lo que más me gusta de esto es
que estás documentando algo que hiciste en tu
vida. Imagina lo bien que te sentirás al mirar hacia atrás
en tres, cinco o 10 años, especialmente en comparación con el tipo
de material duro en el que estarás trabajando en ese momento.
Así que
definitivamente comparte tus victorias con el mundo. Y recuerda
etiquetarme y deslizarte de esa manera. Voy a recibir una dulce
notificación. Y puedo darte un Me gusta y un comentario para
mostrarte un poco de amor. Muy bien, lo último que quiero decir es
esto. Si tienes algún comentario para mí, entonces me encantaría
escucharlo. Este es el primer curso de chrimbus en Firebase. Pero creemos que
es una tecnología asombrosa. Y nos encantaría crear más cursos
en el futuro. Entonces, si tiene algo que compartir al
respecto, hágamelo saber, la mejor manera de comunicarse conmigo es twittearme o
enviarme un mensaje privado en Twitter. O también puedes enviarme un mensaje en
LinkedIn. Eso es todo por este . Muchas gracias por
escuchar. ¿ Puedes creerlo? ¿Lo hiciste? ¿ Acabas de terminar todo este
proyecto? Estoy tan tan tan feliz por ti en este momento. En serio,
asegúrate de hacer algo muy bueno por ti mismo después de que
termines de ver este scrim porque lo que acabas de lograr no es
poca cosa.
Impresionante, increíble trabajo. Está bien, tenemos que hacer un pequeño
resumen antes de que te deje ir. Así que lo primero que vimos fue
importar. ¿Qué fue eso? Así que queríamos cierta funcionalidad
de Firebase, que acabamos de importar en forma de
funciones. Estas son las cosas que importamos de
esta ubicación. Y luego aquí, aquí es donde estaba todo el código
.
Y solo obtuvimos ciertas cosas que necesitábamos. Y luego
cubrimos la función Inicializar aplicación de Firebase, que
usamos aquí abajo para inicializar la aplicación usando la URL de la base de datos. Y
eso es solo para que tengamos un objeto de aplicación con el que trabajar en nuestro
proyecto, esto es lo que configura todo, luego usamos la
función de obtener base de datos aquí mismo , cuando creamos el
objeto de base de datos usando la función de obtener base de datos y lo alimentamos con
objeto de aplicación que acabamos de crear. Esto sigue siendo parte de la configuración
que hicimos. Y luego usamos la función de referencia.
Recuerde, en
una base de datos en tiempo real de Firebase, todo es una referencia.
Entonces, necesitábamos hacer una referencia de la lista de compras donde se
guardarían todos los elementos de la lista de compras , luego usamos la
función de inserción de Firebase, que era una función súper simple
aquí para decir primero que queríamos impulsar algo nuevo en
esta referencia. Y luego le dimos el valor. Y eso fue todo
. Y finalmente llegamos a la función mágica en value,
que es donde escribimos gran parte del código. Entonces, esta función de valor
solo se sienta aquí y escucha los cambios en la
base de datos. Y cada vez que ocurre un cambio , obtiene una nueva instantánea,
que usa para ejecutar este código nuevamente. Y esa fue
la instantánea, por supuesto. Y luego hablamos un poco
sobre las identificaciones, porque en el desarrollo de software las identificaciones son muy
importantes. Y así, como vimos en nuestra base de datos en tiempo real, cada
elemento debe tener una identificación única, luego, usando esa identificación única,
podríamos eliminar un elemento de la base de datos, que es lo que hicimos aquí,
obtuvimos la ubicación exacta del elemento.
en la base de datos, y luego
simplemente ejecutamos la función Eliminar en él. También vimos cómo
podemos transformar objetos en arreglos, que es lo que necesitábamos
hacer dentro de la función de valor, para poder
escribir un bucle for en el arreglo. Eso es lo que hicimos
aquí arriba. Y luego, por supuesto, usamos Create Element en lugar de
innerHTML. Porque nos dimos cuenta de que innerHTML no era lo suficientemente poderoso
para hacer lo que queríamos que hiciera, por eso escribimos esta
función, donde creamos un nuevo elemento y luego le dimos
algo de contenido de texto.
Y luego nos aseguramos de ejecutar algún código
cada vez que presionas ese botón, y luego lo agregamos
al elemento principal. Y luego, por supuesto, analizamos la
función Flex Wrap de Flexbox, que nos permite envolver estos elementos de
esta manera. Y también analizamos la función GAP en
Flexbox, que nos permite crear fácilmente este espacio entre los
elementos. Luego usamos la selección del usuario para que el usuario
no pudiera seleccionar partes de la aplicación sin querer, lo que es simplemente
una experiencia de usuario mucho mejor. Luego agregamos una línea crucial de
HTML para configurar la ventana gráfica, esta aquí, lo que hizo
que el ancho de la aplicación fuera correcto en los dispositivos móviles.
Luego, por supuesto, agregamos un ícono de cinco usando ese servicio fav
icon.io. Agregó todas estas imágenes también.
Y luego, por
supuesto, lo último fue el archivo de manifiesto de la aplicación web
aquí mismo, que nos permitió transformar nuestra
aplicación web para que pareciera una aplicación nativa en nuestros teléfonos.
Vaya, cuando lo enumeras así, parece un montón de
cosas. Y finalmente, me gustaría decir que bien hecho por completar
esta sección..