Aprende a programar: creación de una Todo App con Angular y Firebase

1. Introducción: Hola y bienvenidos a mi primer curso en mi Serie Let's Code. Mi nombre es Stefan Omerovic, y soy desarrollador web autodidacta y también soy profesor en línea. Este curso es para ti que apenas estás empezando con Angular, o para ti que estás dispuesto a actualizar tus habilidades a un siguiente nivel. Como puedes ver a través de este curso, crearemos app de tareas pendientes con Angular y Firebase. El curso es bastante simple para que puedas codificar junto a mí y de esa manera crear tu primera aplicación de tareas pendientes. En la sección Proyecto de este curso, encontrarás, toda esta app en vivo en Firebase Hosting. Para que pudieras echar un vistazo, qué vas a crear a través de este curso, en vivo. App tendrá paquetes integrados como Bootstrap y Font Awesome. Pero también trabajaremos con componentes Angulares, enrutamiento de servicios a través de este curso. Entonces también trabajaremos con nuestra Firebase, nuestra base de datos. Ahí crearemos nuestra nube firestore, nuestra colección de tareas pendientes, y el render nuestras tareas pendientes en nuestra pantalla. También podremos modificar esas tareas pendientes, sumar las, eliminarlas como queramos. Y para el final de este curso, aprenderás cómo podrías desplegar tu app de tareas pendientes en Firebase Hosting y ver tu app en vivo ya que trabajaremos a través de este curso con Angular, Firebase e incluso un poco de bootstrap, sería bueno que conozcas al menos los fundamentos de esos. No es muy necesario, aún podrás trabajar a través de este curso, pero te será más sencillo dar seguimiento al curso. Veamos ahora qué es Angular y cómo podríamos usarlo? 2. ¿Qué es angular y cómo utilizarlo?: Entonces como estamos empezando ahora mismo, veamos primero qué es Angular. Por lo que Angular es un framework JavaScript para unas aplicaciones de una sola página. Podemos usar Angular para desarrollar aplicaciones a través de la web, móviles e incluso escritorios. Velocidad, rendimiento y gestión de proyectos de Angular es bien conocido en comunidad. También hay razones por las que Angular está en la parte superior junto a Vue y React.js, como marco JavaScript por supuesto. Angular tiene también un par de herramientas únicas y además viene con características ya integradas como RxJS, que es tema avanzado, pero trabajaremos con observables de esas a través de este pequeño curso. Por lo que conseguirás al menos agarrarlo. Angular también tiene su propia herramienta para gestionar los módulos llamados Ivy. También tiene y soporta enrutamiento, como se puede ver aquí, enrutamiento y navegación, HTTP e inyecciones. Podemos utilizar servicios en Angular para inyectar y compartir más fácilmente nuestros datos a través de nuestras páginas y componentes, los cuales verán en varios videos. Angular también tiene su propia documentación, la cual está abierta aquí mismo. Esta documentación está bien escrita y honestamente mucho para leer, sobre todo para un principiante. Algo bueno ahí con la documentación. Ahí está todo un proyecto, Tutorial Project con él. Por lo que actualmente estoy en página de introducción de los Docs Angulares. Y aquí hay un Hello World. Y si hago click aquí puedes ver tour de héroes tutorial. Si hiciera clic en eso, comenzaría a crear la aplicación Angular llamada Tour of heroes y con ella, podrás crear toda la aplicación, proyecto entero con Angular. Angular tiene un gran equipo también detrás de él. Es desarrollado por Google y a menudo se está actualizando y actualizando. Para ser precisos, alrededor de cada seis meses, Angular sale con una nueva versión. Por eso estamos creando esta app en Angular 10. Si me desplaza por aquí, déjame cerrar esto. Verás que el desvío es estable. Si yo iría, es 10.1 y la siguiente versión será la undécima versión. Y se puede ver que ya tenemos versión 10 de Angular. A través de estas versiones, habrá cambios, pero la ninguna de esas es crucial. Son en su mayoría para acelerar la codificación, paquetes empaquetados más pequeños y tal vez nueva característica. El único gran cambio que sucedió fue de Angular JS a la versión Angular 2, que es marco totalmente diferente en este punto. Podría hablar de Angular durante horas y aún así tendré algo que decir. Entonces creo que lo mejor, lo mejor para nosotros es solo saltar al código y simplemente crear nuestra app. Puedes seguir conmigo paso a paso. Y para el final de este curso, crearás app de tareas pendientes con Angular y Firebase. Vamos a Código. 3. Crear una aplicación: Por lo que a través de este video, crearemos nuestra app. Para hacer eso. Necesitas primero tener CLI Angular en tu máquina. Entonces ve a cli.angular.io. Aquí tienes un script para instalar CLI para Angular. Simplemente puedes ejecutar este npm install g flag para globalmente @angular /cli. Cuando esto haya terminado, instalaste CLI con éxito y podrás usarla. Ahora, aquí también, se ve este ng nuevo my-dream-app, Esto es, primer uso de Angular CLI. Con esto, podemos generar nuestra app. Por lo que ahora estoy en mi consola. Puedes abrir tu terminal o un emulador de consola como tengo aquí. Por lo que podría simplemente ejecutar, por ejemplo, ng nueva aplicación de tareas pendientes como esta. Si golpeara Enter, mi aplicación empezaría a crearse por sí misma. Primero me preguntará, ¿me gustaría agregar enrutamiento angular? Podría pasar. Sí aquí, para que el enrutamiento angular se genere automáticamente para mí. Entonces como vamos a utilizar un poco el enrutamiento en este curso, necesitaría eso. También me preguntará qué formato de hoja de estilo me gustaría usar? Por lo que tengo CSS, SCSS, SASS, Menos o Estilos. Yo usaría CSS, solo uno simple para este curso. Ahora la app comenzó a instalarse, y una vez que todo esté terminado, seguiremos con nuestro trabajo. Sólo espera un poco. Por lo que ahora creé con éxito mi app de tareas pendientes. Y ahora lo siguiente sería este cd my-dream-app, básicamente cd, luego aplicación de tareas pendientes, luego nombre de nuestra app. Por lo que voy a ejecutar cd to-do app. Y de esa manera estoy actualmente en mi app de tareas pendientes en mi terminal. Entonces déjame correr claro para despejar un poco esto. Y en este punto que estamos en nuestra app, podríamos simplemente ejecutar ng serve. Y ng serve servirá nuestra aplicación en localhost 4200. Entonces cuando ejecuto este ng servir así, una vez que esto esté terminado, puedo abrir mi localhost 4200 y voy a ver mi app que fue generada por Angular CLI. Entonces todo está terminado. Voy a copiar este localhost e ir a mi, google, pegarlo en mi URL así. Y aquí estamos. Obviamente mi app tiene un poco de contenido aquí, así que solo te mostraré dónde está este contenido por ahora y pasaré un poco por la app. Tenemos algún contenido en nuestra app, obviamente, abrí mi app con código de Visual Studio. Si iría al archivo fuente y a mi index.html, este índice HTML servirá a mi aplicación completamente. Se ve este tipo de raíz App de elemento HTML aquí. Esto básicamente renderizará toda mi aplicación dinámicamente en base a mis componentes, módulos, servicios, etc. Si fuéramos a esta carpeta de aplicaciones aquí tendríamos esta app.component.html. Ábrela. Y aquí puedes ver que ya tenemos algún contenido dentro, ¿verdad? Entonces si yo controlaría un, alland borrar. Y en este punto podría escribir, por ejemplo, H1 y escribir Hello World así. Control S para guardar, mi app se recargará automáticamente ya que nuestra app sigue ejecutándose en el localhost 4200. Y ahora en mi pantalla solo pude ver el texto Hello World, que viene de mi etiqueta H1. Entonces básicamente todo el contenido que teníamos estaba en ese archivo de componente de la app. Y ahora estamos empezando claro. Eliminamos el contenido angular predeterminado y estamos aquí solo con nuestro contenido. Entonces ahora que creamos con éxito la app, es momento de instalar todas las dependencias que necesitaremos a través de esta app. Instalemos esos. 4. Instalación de las dependencias: Entonces plan para este video es instalar todas las dependencias que necesitaremos y usaremos a través de nuestro curso y nuestra app, obviamente. No estamos instalando RxJS, ni HTTP ni alguna otra dependencia. Esas dependencias principalmente ya están funcionando y funcionando con el angular. Usaremos Bootstrap y el Bootstrap usaremos jQuery. También usaremos iconos de Font Awesome. Por lo que necesitaremos instalar esos para usarlo. Y si te preguntas como ¿podríamos simplemente importar los de nuestro archivo principal, nuestro archivo HTML índice? Sí, podemos, pero te mostraré manera más amigable para que Angular haga esto y no para poblar nuestro archivo index.html. También necesitaremos dependencias firebase, pero las instalaremos un poco más tarde cuando realmente iniciemos nuestro trabajo con Firebase. Entonces en mi consola, si yo Control C primero para evitar que mi servidor local se ejecute. Ahora, podría ejecutar, por ejemplo, npm install —save para guardar esa dependencia, bootstrap, luego jQuery y Font Awesome. Si golpeara Enter, oh, lo siento. Escribo mal Font Awesome. Al igual que esto. Si golpeara enter en este punto, mis dependencias comenzarían a instalarse. Y al final, tendría instalado Bootstrap cuarta versión. Como puedes ver, se agrega 4.5.2, luego también se agrega jQuery, y Font Awesome también se agrega a mi proyecto. Por lo que agregamos exitosamente esas dependencias a nuestro proyecto, pero aún así no estamos usando esas. Con sólo instalar, Angular no sabrá que necesita usar esos. Entonces, ¿dónde deberíamos usar esas dependencias si no estamos usando las del archivo index.html. Abajo, tendrá este archivo JSON de datos angulares. Si abriera eso. Aquí hay un esquema completo con respecto a esta aplicación Angular que tenemos abajo, se ve la matriz de estilos, estos estilos array es básicamente array que contiene nuestro CSS, iconos o cosas por el estilo. Y estos scripts array es lo que está sosteniendo nuestros scripts, nuestros archivos JavaScript. Por lo que podríamos simplemente importar los de aquí y no importar los de nuestro archivo index.html. Y una vez que instalamos bootstrap, jQuery, font-awesome, aquí en un nodo módulos, si abriría eso, si me desplaza un poco aquí abajo es Bootstrap. Si abriera esto aquí como lo instalé, lo tengo aquí en mi proyecto. Tengo carpeta dist. Tengo css por ejemplo, y tengo archivo bootstrap.min.css que simplemente podría importar a mi aplicación. Y lo haremos ahora mismo. Entonces déjame cerrar esto ahora. Este nodo módulos, sí. Y en mis estilos al lado de mi fuente, styles.css, este archivo es básicamente este archivo en el mismo nivel de carpeta de nivel que mi index.html. Este es el archivo styles.CSS base y global utilizado a través de la aplicación. Entonces justo debajo de él, podría usar coma aquí y agregar una importación más. Por ejemplo, los módulos de nodo slash bootstrap, slash dist slash CSS y slash bootstrap. .min es archivo minificado, .css. Y por esto importamos Bootstrap. Y también necesitamos importar Font Awesome. Entonces para eso una coma más y abajo, módulos de nodo, slash Font Awesome, slash CSS slash Font Awesome, .min.css. Y sí, ahora tenemos un Css para nuestros iconos y también nuestro framework bootstrap. Por lo que ahora agreguemos scripts para Bootstrap y jQuery. Entonces aquí en mi matriz de scripts, simplemente agregaré nodo, módulos de nodo slash jQuery slash dist para distribución y jQuery, archivo.min.js. Y esto es importante antes de importar nuestro Bootstrap. También debemos importar primero nuestro jQuery. Entonces se cargará jQuery primero y Bootstrap sabrá usarlo en ese punto. Y ahora para importar el bootstrap. Así módulos de nodo slash bootstrap slash JavaScript slash no JavaScript, lo siento, slash dist, luego slash JavaScript y slash bootstrap.minified que js. Y esto es todo. Entonces ahora podría simplemente volver a ejecutar mi localhost o 4200. Por lo que correré ng servir —abrir. Esta bandera abierta aquí, abrirá automáticamente mi una aplicación en, 00:05:12 .185 —> 00:05:13 .025 Like this. Se puede ver que mi tagat H1 este punto no se ve tan básico ya que tiene estilos predeterminados de Bootstrap. Si iría a mi componente de aplicación en este punto, y añadiría el yo con la clase de font-awesome, fa. Compruebe por ejemplo, guardar, en mi anfitrión local. Verás este cartel de cheques aquí. Déjame acercarlo un poco. Sí, éste, básicamente viene de Font Awesome. Por lo que tenemos un bootstrap y peleamos impresionante, importado con éxito a nuestra app. Y este punto podríamos crear nuestro primer componente. 5. Primer componente: componente del encabezado de cabeza: Por lo que ahora en este video, Plan es crear nuestro primer componente. Crearemos componente de cabecera, esa barra de navegación que siempre estará en la parte superior de nuestra aplicación. También crearemos toda la interfaz de usuario para ese componente. Entonces empecemos. Podríamos crear componente por nuestra cuenta, pero hay una forma mejor y más rápida de hacerlo. Podría ir a mi terminal ya que estoy aquí y aquí de mi lado. Por el lado derecho, no necesito hacer esto en mi terminal principal donde estoy ejecutando localhost. Todavía podría ejecutar localhost y ejecutar este script que necesito. Angular CLI nos dará un poco más de funcionalidad y podríamos con eso también generar nuestro componente. Por lo que podría escribir algo como esto, ng g c cabecera. Por lo que este G significa generar. Por lo que podría tipo de generación en lugar no g, y este C significa componente. Por lo que podría escribir completamente componente, pero esta es una taquigrafía y el encabezado será el nombre del componente. Entonces si golpeo Entrar aquí, después de algún tiempo, verán que angular creó un nuevo componente para mí. Componente de encabezado archivo HTML, archivo spec.ts, que es un archivo de prueba, que hablaré un poco más tarde, archivo mecanografiado y archivo CSS para nosotros en mi código de Visual Studio que se ve así. Junto a mi componente de aplicación, tendría esta carpeta de encabezado. Entonces si abro eso, tendría mi archivo HTML para mi encabezado aquí. Por lo que obviamente como angular generado este componente de cabecera, también agregó este encabezado de párrafo funciona para nosotros. Entonces con esto, podríamos simplemente comprobar si esto realmente funciona. Entonces aquí en mi archivo mecanografiado de encabezado, tengo aquí selector, cabecera de aplicación. Básicamente se trata de un selector. ¿ Cómo podría usar este componente en mi HTML También hay otras importaciones como URL de plantilla, que está usando encabezado componente HTML, que es básicamente parte HTML para este componente y estilo para este componente es header.css estilo. Entonces si copiaría esto aquí, y voy a mi componente de aplicación, componente principal de mi aplicación, Eliminar contenido actual. Y solo usaré mi encabezado de aplicación así, guarde mi archivo, en mi navegador, deberíamos ver algo diferente. Entonces ahora en mi navegador, no tengas esas etiquetas H1 y ese icono de cheque, podría acercar esto un poco. Tengo este párrafo con trabajos de cabecera. Por lo que básicamente mi componente se implementa con éxito en nuestra aplicación y se utiliza en este punto. Por lo que ahora deseo codificar el contenido para este componente. Tan baciosamente voy a codificar esa barra de navegación con el bootstrap. Entonces espero que conozcas al menos los conceptos básicos de Bootstrap, pero también te será fácil dar seguimiento. con ella. En mi lado izquierdo tendré mi código y en el lado derecho tendremos una vista previa en vivo de ese código. Entonces aquí cerraré todos mis editores que he abierto y abriremos justo mi componente de cabecera así. Voy a eliminar este párrafo, guardar. Y del lado derecho, no vemos ese párrafo, así que podríamos empezar a codificar nuestra barra de navegación. Por lo que voy a crear el, déjenme primero poner el comentario de barra de navegación. Y voy a abajo crear nav, nav elemento HTML5, voy a añadir la clase en él. Para navbar. Entonces navbar expande lg, luego una barra de navegación oscura. Y me vendría bien bg dark también. Así que ahorra. Y se puede ver este tipo de línea gris. Entonces para ti que no conoce el Bootstrap, Bootstrap es básicamente HTML y CSS, y también un framework JavaScript que también ha creado, ya creó clases para que usemos. Por lo que esta barra de navegación básicamente creará la barra de navegación para nosotros. Esta barra de navegación expandir lg. Ampliaremos nuestra barra de navegación para ocupar pantalla completa en dispositivos más grandes, pero en un dispositivo más pequeño es el contenido para nuestra barra de navegación no será visible, pero tendrá que ser cambiada, será al botón que verás pronto suficiente. A navbar dark, coloreará nuestro color de fondo de la barra de navegación a color oscuro como este, gris, gris oscuro, y bgdark. Estamos en especie de reconocer que la barra de navegación es oscura y básicamente poner el texto a la luz, a la luz básicamente para ser texto blanco. Tan buen contraste. Entonces, en primer lugar, permítanme crear ese logotipo que usualmente tenemos en la barra de navegación. Por lo que crearé esta etiqueta ancla y para mi href, solo pasaré este hashtag. Necesito tener clase. Y esta clase será de la marca navbar, que es de cristal para crear el logotipo dentro de la barra de navegación con Bootstrap. Y voy a añadir el texto para que esto sea una app de tareas pendientes guardar. Y aquí se puede ver este logo a la derecha, ya se ve muy bien. Entonces ahora vamos a crear el ese botón abajo abajo. Este botón, básicamente será el botón para esta barra de navegación conmutada en dispositivos más pequeños. Entonces botón, sí. Y el tipo de botón? tipo debe ser un botón. Y clase, hay una clase ya creada para nosotros llamada navbar toggler así. Y podría usar el botón de datos para ser colapso. Déjame ALT Z eso. Por lo que se podía ver todo el contenido aquí. Estos data-toggle collapse es básicamente trabajo de Bootstrap para combinar JavaScript con el HTML y de esa manera va a crear esta animación de colapso para nosotros. También necesitaríamos objetivo de datos. Entonces, básicamente, ¿qué tipo de contenido se va a cambiar con este botón? Y yo usaría la identificación aquí, res_nav. por ejemplo, como un nav sensible de navegación. Crearemos pronto sección con este ID, pero también necesitamos el contenido para nuestro botón. Entonces crearé un elemento span como este, y usaré una clase de navbar. toggler, sí, necesito usar dos g. e Icon aquí. Entonces ya del lado derecho, puedes ver este ícono no se ve bien, ¿verdad? Su ícono blanco. Entonces si vendría a este toggler navbar y pasaría una clase más llamada bg dark. Tendría ícono oscuro ahora aquí. Entonces ahora para crear esta navegación responsive para nosotros, así que después de nuestro botón, crearía un div con la clase del colapso y el colapso de la barra de navegación, esta clase, estas clases son las clases que están definiendo todo este sección para ser plegable con nuestro botón. Y yo debería crear el ID aquí de res_nav. Al igual que esto. Por lo que nuestro botón podría apuntar a eso. Por lo que dentro voy a tener sólo mis enlaces, Enlaces que, tipo de enlaces de navegación obviamente. Y para eso usaría lista desordenada. Pasaría la clase aquí de navbar nav, y también ml alto. Por lo que básicamente pondrá el margen en el lado izquierdo, auto, automáticamente. Por lo que moverá mi contenido al lado derecho con esto, entonces necesito crear un elemento de lista. Como saben, las listas suelen tener ítems de lista. Por lo que el elemento de lista tendrá una clase de artículo de navegación. Y por dentro podría crear un enlace como este. Href podría ser solo el hashtag. Este enlace me llevaría a una página de inicio. También debería crear una clase aquí de nav link save, y no la vemos en el lado derecho. Pero si me encogiera mi, mi contenido un poco, todavía nada. Aquí está. Por lo que incluso en un dispositivo de pantalla grande, tenemos este tipo de botones aquí. Hicimos algo mal. Obviamente, lo que hicimos mal es que esta clase navbar-toggler debería tener dos gs como este. Y ahora mi barra de navegación no tendrá ese botón en dispositivos de pantalla más grande. Pero si esperara mi elemento, y, vamos a moverlo al iPhone X. Tendremos este botón aquí. Y si hago clic en él, simplemente colapsará ese div con icono de colapso sobre él. Contraer clase sobre ello, lo siento. Entonces déjame mover esto hacia atrás y volver a mi código. Y ahora en mi código podría crear otros elementos en mi lista. Por lo que copiaría esto dos veces, 1, 2 y podría, Para este uso sobre y todos, que será toda la página para nuestras tareas pendientes. Y ahora tenemos este hogar alrededor y a los que no son para nada utilizables, obviamente. Y aún no tenemos el contenido para esos. Pero ahora creamos completamente nuestro componente de cabecera. Podemos ver cómo esto también se verá en dispositivos de una pantalla más pequeña. Si esperara mi elemento, abre la vista de iPhone. Sí, ya se ve bien. Y ahora que ya sabes crear un componente y usarlo, vamos a crear ahora nuestros otros componentes que usaremos a través de este curso. 6. Componentes de casa, Acerca y todos y todos los: Entonces ahora que creaste el componente de cabecera, deberías saber cómo pudiste crear los otros. Entonces esto es bueno para que te pruebes a ti mismo. Necesitaremos casa, sobre y sobre página de tareas pendientes. Por lo que será bueno si generarías componentes para esas páginas también. Entonces estoy de vuelta en mi terminal y aquí en mi lado derecho de la terminal, sigo corriendo mi localhost. Voy a ejecutar ng generar componente y casa así. Pero ahora pasaría, — y SkipTests como este. Esto salta pruebas, básicamente no generará el archivo de prueba para mí, ya que tipo de no necesitamos los archivos de prueba para esta sencilla aplicación pequeña, crearía lo mismo, pero ahora será el componente sobre. Y ves que está generando y creando nuestros componentes de inmediato. Y por último, como este to-dos. Sí, así que ahora en nuestro código junto a nuestro componente de cabecera, tenemos sobre el hogar y el componente de tareas pendientes. Y todos esos componentes, si fueras a los archivos HTML de los suyos, es sólo su nombre y funciona palabra. Por lo que en este punto iría a mi componente de aplicación HTML aquí. Y debajo de mi encabezado de aplicación, usaría App. Y se puede ver que aquí me podría usar ya casa así y Control S Para que esto lo guarde. Y vamos a verlo en nuestro anfitrión local. Puedes ver debajo de mi cabecera, hay un componente de casa, ¿verdad? Para este tipo de, nuestro componente de cabecera es compartible a través de otros componentes, ¿no? Por lo que una vez que estemos sobre página, todavía veremos estos componentes aquí, pero aquí el contenido cambiará. Estas obras domiciliarias serán sobre obras, serán trabajos de tareas pendientes, ¿verdad? Y para eso, usamos el enrutamiento en Angular para cambiar esos, básicamente para cambiar esas rutas, para cambiar esas páginas, usamos un enrutamiento que ya está implementado en Angular. Entonces usemos eso en nuestro próximo video. 7. Entorno angular: Por lo que en este video, configuraremos rutas para nuestra app. También crearemos enlaces que una vez que hacemos clic en esos, nos llevan a la página que necesitamos en base a esa ruta. Esas páginas también mostrarán justo el contenido que deberían mostrar para esa página desde ese componente básicamente, empecemos. Por lo que en mi proyecto, podría entrar en mi fuente aquí y app. Y podría ir aquí al módulo de enrutamiento App. Si recuerdas cuando generamos la app Angular, también pregunta, nos preguntó, ¿deseamos integrar el enrutamiento a la app? Por eso creó también este módulo de enrutamiento de aplicaciones para nosotros. Entonces en este módulo, tenemos esta const de rutas, y aquí es donde básicamente configuramos nuestras rutas para nuestra app. Entonces aquí, solo usaré mis llaves y para configurar la ruta, necesito pasar primero el camino. El camino será el camino para esa ruta y voy a teclear casa aquí. Y después de eso, necesito también configurar componente, componente que deseo usar, ¿no? Por lo que componente será componente de casa, un segundo componente que ya tenemos instalado en nuestro proyecto. Entonces así es básicamente como se ve una ruta en Angular. Tenemos que tener sobre y Para hacer eso más. Entonces aquí abajo, usaría sobre así. Y el componente será sobre componente. Y también usaré a dos ruta, a dos. Y el componente será a dos componente, correcto, así. Además, si el usuario visita la ruta vacía, deberíamos redirigirlo al componente home yo creo, así que aquí arriba, añadiré una ruta más, esa ruta. Y que ponga una coma aquí. Esa ruta tendrá un camino de vacío. Y en lugar de componente, usaré ReDirectto y usaré casa aquí. Deseo redirigir a componente de casa. Además, necesito pasar partido de ruta. Deseo igualar plenamente mi camino. Tan lleno aquí, y esto es todo. Entonces ahora que estoy en mi propia app, podría refrescar mi localhost aquí, y verás que me llevará a la página de inicio. Además, si hago clic aquí casa, nada funciona bien? Acerca también, todo va a la página de inicio. Por lo que necesitamos configurar estos clics para llevarnos a las páginas correctas como home about y to-dos. Para ello, abriré aquí mi componente HTML de encabezado. Por lo que para configurar nuestro componente de inicio para que nos lleve a la página principal, necesitamos usar estas llaves y el enlace del router. El enlace del router también me podría llevar. Página de inicio como esta. Copiaré esto y lo pegaré dos veces más para aproximadamente y tareas pendientes. Por lo que aquí debe ser sobre página y a dos página como esta. Por lo que en mi propia app, si hago click sobre ella me llevará a la página sobre, si hago clic en casa, me llevará a la página de inicio. Si haces click en a dos, me llevará a dos ruta, ¿verdad? Además, debería configurar la clase activa para que la ruta está actualmente activa en mis enlaces. Para ello, podemos usar algo llamado enlace del router, activo. Enlace de router activo viene de Angular y podríamos simplemente pasar a esa clase. Y sabes que Bootstrap ya tiene su clase activa y podemos usar eso. Pero también puedes crear tu propia clase activa personalizada y configurarla aquí. Por lo que router link activo para cada uno de los elementos de enlace aquí, usaré para estar actuando. Por lo que ahora puedes ver la hora actualmente en mi ruta de hacer y mi enlace de tareas pendientes está activo. Si cambio a alrededor, va a estar activo, cambio a casa, va a estar activo. Pero también hay un problema. Estamos cambiando la ruta obviamente, pero el contenido en sí se queda para obras caseras. Tenemos que cambiar el contenido también. Entonces solo configurando nuestra barra de navegación y nuestro enrutamiento, el contenido en sí no cambiará para eso donde implementamos el componente home aquí en nuestra app component.html pudimos eliminarlo ahora mismo y usar algo llamado toma de enrutador. Salida del router renderizará el contenido en función de la ruta, basado en el componente de esa ruta. Y ahora se puede ver que estoy en mi sobre ruta y dice de obras. Permítanme también acercar un poco esto. Por lo que podías ver si cambio esto a un hogar, verás trabajos caseros a dos, a dos obras. Por lo que nuestro enrutamiento está configurado completamente, y ahora deberíamos tener al menos parte del contenido para nuestras páginas aquí. Entonces, empecemos a trabajar con esos. 8. Contenido para el hogar y la página: Por lo que ahora deseamos crear algún contenido para nuestras páginas. Empezaremos con el hogar y sobre las páginas para mi página de inicio. Primero cerraré aquí todos mis archivos abiertos, e iré solo al HTML de inicio aquí. Pondré aquí primero el comentario de casa, lo siento, contenido de la página de inicio mal escrito. Y podríamos empezar a crear nuestro contenido aquí. No voy a hacer nada grande al igual que un pequeño contenido para home y sobre page. Entonces div, ya que estamos especie de no enfocarnos en los de este curso. Por lo que fin del contenido de la página principal y las clases para mi div serían jumbotron y también centro de texto. Estas clases provienen obviamente de un Bootstrap. Jumbotron es una gran sección de un bootstrap. Entonces usaré H1 y usaré una clase en ella display-4. Al igual que esto. Será como un, usará la etiqueta H1, pero lo mostrará como un cuatro por tamaño y, Hello World será un texto para eso. Entonces podría usar un párrafo aquí con una clase de plomo, lo que significa que este párrafo será más visible, párrafo más grande ya que es un párrafo que lleva a la página. Y solo dirá, bienvenido a nuestra app de tareas pendientes con Angular y Firebase. Eso es todo. También podríamos añadir un botón aquí. Entonces botón como este voy a añadir un tipo para el botón será sólo el tipo de botón. Y también las clases serán btn, btn-rimary, y btn-lg para botón grande y primaria lo coloreará, coloreará al color primario de bootstrap, que es de color azul. Y aquí usaré un to-dos como este. Este botón me llevará a la página de tareas pendientes. Por lo que podría usar aquí también enlace router. Y se configurará para que me lleve a tareas como esta. Esto debe estar también entre comillas, comillas simples. Eso es todo en mi página principal. Ahora puedes ver este Hello World. Bienvenido a nuestra app para dos con texto Angular y Firebase y a dos texto Quiero usar texto de tareas aquí, voy a configurar, ir a tareas pendientes Like this. Y ahora, si diera clic en este botón, se puede ver que me llevará a página de tareas pendientes, ¿verdad? Entonces ahora vamos a crear algún contenido también para la página Acerca. Para sobre página abriré mi sobre HTML. Por lo que primero pondré comentario sobre el contenido de la página. Y aquí voy a crear un div. Permítanme también poner fin comentario, fin de sobre contenido de página. Y ahora podría usar aquí contenedor, clase, contenedor y centro de texto bueno. Dentro usaré mi H1 con la clase de margen top a 5. Moverá mi H1 por cinco espacios de Bootstrap. Dentro pasaré Acerca de página como esta. Y agreguemos también un párrafo. El párrafo también podría ser un párrafo principal. Por lo que sumaré la clase principal. El texto dentro será, vamos a codificar nuestra aplicación de tareas pendientes. Y permítanme añadir un párrafo más. Este será párrafo normal y usaré app se desarrollará completamente con Angular y Firebase como una base de datos como esta. Entonces ahora en mi página sobre, tengo contenido como este que se parece a la página principal, pero sin ese jumbotron. Por lo que es lo suficientemente bueno para estas dos páginas. Deberíamos centrarnos ahora en la página de tareas pendientes básicamente. Y vamos a codificar que el siguiente video. 9. Contenido de la página de la página: Entonces mi principal objetivo aquí en página de tareas pendientes es tener una sección aquí en el tipo superior de sección de encabezado donde podré agregar nuestras tareas pendientes. Y abajo, deberíamos tener dos listas, una para las tareas pendientes y una para las tareas pendientes terminadas, esas tareas pendientes que ya estamos hechas. Entonces cerraré mis archivos que abrí en mi Visual Studio Code, y abriré el componente HTML de tareas pendientes. Entonces aquí podría escribir primero comentario, encabezado de tareas pendientes, agregar un div, y también agregar el final comentario final del encabezado de tareas pendientes. Y este encabezado tendrá un par de clases. Primero usaré una clase de jumbotron, y centro de texto. Centro así. Y dentro podría curar mi clase de contenedor, luego dentro de ese contenedor, podríamos tener un div más con la clase de fila. Y para el corredor de la muerte, podríamos tener una grilla dentro. Por lo que voy a añadir un div con la clase de columnas dispositivos pequeños 2 y dispositivos medios de columna 3 como este. Esto sólo servirá, como espaciado, solo moverá mi sección principal de un encabezado hacia el centro de mi pantalla. Por lo que tendré dos o tres columnas en un lado izquierdo vacías. Y en sí mismo, ese contenido de cabecera en sí tendrá clases de columna sm de ocho y columna md de seis. Entonces lo que significa que en dispositivos más pequeños del lado izquierdo dos de columnas estarán vacías, entonces ocupará ocho columnas del ancho, y al final dos de columnas volverán a estar vacías ya que Bootstrap tiene 12 columnas. Entonces 2 más 8 es 10 y 2 columnas vacías, que es 12. Entonces aquí también podría agregar comentarios para fin de contenedor, fin de fila y fin de contenido como este y el interior mi contenido aquí, primero podría agregar H1 agregar una clase de display 4 y encabezado solo dirá Todos como esto. Y aquí podría tener la entrada. Grupo de entrada con la entrada y el botón para agregar de mis tareas pendientes. Por lo que agregaré un div con la clase de grupo de entrada, que es la clase para definir el grupo de entrada. Y dentro añadiré mi campo de entrada, que es un tipo de texto. Y las clases serán control de forma, que es la clase a tipo de estilo un poco más nuestra entrada, no solo tienes esa básica. Y el positor será todo título. Eso es todo. Y también debería tener un botón aquí, pero añadiré este botón a mi campo de entrada. Entonces esos son un poco apilados juntos. Y podría usar un grupo de entrada y anexar clase en Bootstrap para eso. Entonces la clase div es grupo de entrada anexar. Y dentro tendré un botón justo. Este botón será un tipo de botón. Y tendremos un Clases de btn, btn esbozo éxito, que es lo suficientemente bueno. También solo dirá agregar todo, eso es todo. Por lo que en mi página puedes ver cómo se ve esto. Tengo un título de todo encabezado por hacer, campo de entrada y botón de agregar tareas pendientes, que es un poco enlazar aquí al campo de entrada. Ahora vamos a crear nuestra primera lista de nuestras tareas pendientes. Por eso. Justo debajo de mi rubro, cabecera. Añadiré una lista de tareas pendientes agregar el div. Añadiré aquí fin de tareas pendientes. Y este primer div debería ser el contenedor. Por lo que clase será Contenedor. Entonces tendría div id, clase de fila. Entonces tendré un div con clase de columna sm dos y columna md tree, que acaba de volver a espaciar como tenemos en nuestro encabezado de tareas pendientes. Y un div más con una clase de columna sm ocho y columna md seis, que es lo mismo que usamos aquí en nuestro encabezado, ¿verdad? Por lo que como desee agregar listas de tareas pendientes, sólo vamos a añadir un grupo de lista desde aquí. Por lo que la lista desordenada tendrá una clase de grupo de lista como esta. Y dentro debería tener, en mis artículos dentro debería tener este tipo de caja que podría estar marcado para especie de terminar nuestras tareas pendientes y también los títulos para nuestras tareas pendientes. Por lo que voy a añadir un elemento de lista, debería tener una clase de elemento de grupo de lista como este. Y por dentro, como mencioné, tendré mi ícono. Entonces clase será Font, Awesome, Font Awesome square o. usaré esa. Y debajo de mi ícono, tendré un título. Que podría ser ir a caminar así. Permítanme también agregar dos más a los de aquí para que pudiéramos tener algo que mostrar. Entonces ve a Walk, aprende codificación. No lo sé. Bebe tres galones de agua. Sí. De acuerdo, entonces por esto ahora, podemos ir a nuestro navegador y aquí dentro verás esa lista ¿verdad? Posteriormente. Podremos marcar esos y trasladarlos a las tareas pendientes terminadas. Y esto también debería renderizarse dinámicamente aquí, no para tan solo estáticamente como esto aquí. Pero por ahora agreguemos una lista más abajo para terminadas a esas. Entonces aquí, donde tengo fin de lista de tareas pendientes, podría copiar esto por completo. Pega aquí abajo, y voy a añadir comentario de tareas terminadas. Fin de, tareas terminadas así. Y voy a tener un contenedor, voy a sumar a este margen superior a cinco para moverlo un poco de arriba, fila, está bien. Este div espaciado aquí está bien. Entonces tengo mi contenido div, que está bien. Justo encima de mi lista desordenada, sumaré H4 con la clase de centro de texto para moverlo en un centro. Y sólo dirá tareas terminadas como esta. Grupo de lista podría tener, no sé, artículos como comprar una Camiseta. Y eso podría estar bien. Podría eliminar estos dos elementos de la lista, pero los íconos mismos, no tendré icono cuadrado vacío aquí. Tendré font-awesome, check square o icon. Y después de mi título aquí, tendré un ícono también llamado déjame agregarlo. Puedo ser Font Awesome Font Impresionante papelera, icono, icono de basura o podría usar, que usará básicamente se usará para eliminar nuestras tareas pendientes. Y voy a flotar eso a lado derecho. Por lo que voy a añadir el flotador clase derecha y margen superior a 1. Esto es todo. Por lo que ahora en mi página se puede ver esta lista de tareas pendientes terminadas, que es una compra una camiseta, obviamente marcó cuadrado aquí y este ícono aquí que se podría hacer clic más tarde, que se hará clic más tarde para eliminar las tareas pendientes. Por lo que podremos confirmar nuestras tareas pendientes para terminar esas y se trasladarán de inmediato a la lista de abajo. Y también podremos, un todo nuestras tareas pendientes y se trasladarán a la lista sobre. Por lo que nuestra página de tareas pendientes también está totalmente terminada ahora, pero es solo parte de la interfaz de usuario. Todavía necesitaríamos agregar funcionalidad. Lo bueno es que toda nuestra aplicación todavía se ve muy bien en equipos de escritorio y dispositivos más pequeños. Para que pudiéramos comprobar eso. Podría abrir dispositivos más pequeños aquí, y se puede ver que la página de tareas pendientes de aplicación se ve genial. Acerca de la página también, homepage también, ¿no? Entonces ve a esos. Genial. Entonces vamos a configurar ahora nuestra Firebase. 10. Base de fuegos y instalación: De acuerdo, así que ahora es el momento de hablar un poco Firebase y también de configurar nuestra Firebase para nuestra aplicación. Firebase es esta plataforma de desarrollo con varias características que podríamos utilizar para el desarrollo móvil y web. Es desarrollado por Google y nos ayuda a construir y hacer crecer nuestras aplicaciones. A través de este curso, utilizaremos la base de datos en la nube de Firebase. Con Firebase, no solo necesitas usar una base de datos en la nube, sino que también hay una base de datos en tiempo real. Firebase también soporta otras características como autenticación, almacenamiento, hosting, funciones, análisis y más. Al final de este curso, trabajaremos también con Firebase Hosting e implementaremos nuestra aplicación en Firebase. Si ya tienes la cuenta. Estás mirando la misma pantalla que yo. Esta es básicamente la consola de nuestra Firebase y la parte principal para mí aquí, si no tienes la cuenta ve al proceso de registrarte ya que es solo lo básico y sencillo. Por lo que aquí vamos a sumar el nuevo proyecto. Por lo que voy a dar clic en esta pantalla grande aquí. Y primero necesitamos crear el nombre de nuestro proyecto. Entonces eso sería hacer app. Firebase también generará un par de personajes al final. Por lo que podríamos tener un identificador único para nuestro proyecto. Por lo que ahora podría ir a continuar y nos preguntará primero sobre Google Analytics. ¿ Deseamos integrar eso a nuestro proyecto? No hay necesidad de eso. Ya que este proyecto no utilizará ningún tipo de análisis. Entonces crea el proyecto. Firebase ahora está creando nuestro proyecto y configurando todo para nosotros. Una vez terminada, seremos redirigidos a la plataforma, al tablero de nuestro proyecto. Por lo que nuestro nuevo proyecto está listo para que pudiéramos dar clic en continuar, Y nos está redirigiendo hacia el proyecto en sí. Entonces este es nuestro panel de control. Aquí de lado se pueden ver características que Firebase soporta como autenticación, cloud firestore, base de datos en tiempo real, almacenamiento, hosting, funciones, machine learning. También, hay una prueba de igualdad de la aplicación, analítica completa y cómo hacer crecer la aplicación con diferentes tipos de pruebas, enlaces, etcétera. Aquí en la parte superior, puedes ver que para empezar agregando Firebase a tu app, lo haremos primero, si no lo ves aquí en la parte superior, puedes hacer clic aquí en un icono de engranaje e ir a la configuración del proyecto. Y lo verás aquí en la sección de tu app abajo. Entonces espero que recuerden que mencioné primero que instalaremos dependencias para Firebase. Por lo que necesitamos instalar 2 dependencias. Por lo que ejecutaré npm install, —save, firestore, y angularfire2. Tienda de bomberos es las dependencias que nos conectarán a la, a nuestra Firebase y fuego angular 2 voluntad, nos ayudan a trabajar con ella para que solo pudiera presionar Enter y esperar a que se instale. Por lo que una vez que esto termine, volveré a mi vista Firebase aquí. Y se puede ver que podría integrar mi proyecto desde Firebase a iOS, android, unity, y también aplicaciones web. Por lo que voy a dar clic en aplicaciones web y lo primero que tengo que hacer es registrar la app. Así que un poco para crear el nombre de la app. Por lo que crearé un nombre de aplicación pendiente, que usaremos más adelante en nuestro proyecto Angular para conectar ambos juntos. También nos está preguntando sobre el hosting de Firebase. No vamos a integrar aquí. Posteriormente nos integraremos cuando estemos... un poco manualmente. Para que puedas ver toda la configuración. Por lo que regístrate app aquí. Y nos va a devolver el SDK que podríamos conectar a nuestra app. Podría simplemente seguir consolando aquí. Y voy a ver que SDK también aquí. Esta configuración de Firebase es el objeto que un poco necesitamos. Por lo que necesitamos integrar eso en nuestra aplicación, en nuestro entorno de nuestra aplicación. Y con eso podríamos trabajar con otras cosas de Firebase. Por lo que ahora en mi terminal, iré a fuente. Y aquí entornos carpeta. Hay ambiente Ts. Esta es la carpeta para la puesta en escena, para probar o codificar este archivo de entorno. Pude escuchar solo usar coma y pegar ese objeto de configuración de Firebase. No será igual sino dos puntos, y eliminaré aquí esta línea final. Y también voy a arreglar rápidamente esto para ser cotizaciones, no comillas dobles. Arreglo solo por 1, 1 segundo, lo arreglaré para todos, sí. Entonces por esto, nuestra aplicación, cuando impactemos esta clave API o el dominio, URL de base de datos, sabrá cómo trabajar con esos. También hay un cubo de almacenamiento que podríamos usar, un identificador de mensajería y aplicación que podríamos usar desde nuestra Firebase. También, voy a copiar ahora este objeto y voy a ir al archivo de Producción de Medio Ambiente y voy a pegar lo mismo allí. En su mayoría tendrás unas cosas diferentes de para tu producción y tu puesta en escena, tu base de datos será diferente, tu entorno de pruebas será diferente. Probablemente un repositorio, tendrás diferentes esos también. Entonces aquí solo estoy usando lo mismo para el propósito de este curso, pero mayormente no lo usarás así, ¿verdad? Entonces también ahora que tenemos, esta configuración en nuestra aplicación, aún necesitamos configurar esas dependencias que instalamos. Entonces para esos, entraré aquí al módulo app y app. Por lo que necesito importar mis dependencias aquí. Por lo que importaré módulo de fuego angular así. Esto se importará automáticamente desde Fuego angular 2. Y este módulo, nos conectará a nuestra Firebase. Entonces aquí usaré inicializar el método de aplicación que tiene este modelo. Y en ella pasaré mi configuración desde archivo de entorno que tengo. Por lo que necesito también importar ese archivo de entorno. Por lo que aquí en la parte superior, voy a importar entorno desde la carpeta de este entorno y el archivo Environment. Entonces aquí ahora podría pasar mi entorno. y en medio ambiente tengo Firebase config aquí, ¿verdad? Este objeto. Sí. Y con esto, estamos pasando un poco nuestra configuración Firebase a este módulo angular de fuego. Pero aún así tenemos que decir explícitamente, decirle como qué aplicación es. Entonces aquí sólo pasaré el nombre de la app, que es hacer. Al igual que esto. Y con esto, importamos con éxito, un poco conectamos nuestra Firebase con nuestra aplicación. También ahora importaré aquí un módulo más como Angular Fire store module como este. Este no se importará automáticamente, así que lo importaré aquí en la parte superior. Por lo que importa el módulo Angular Firestore, de, angularfire2/firestore, así. Con esto, conectamos totalmente nuestra aplicación con nuestra Firebase y podemos trabajar con ella en este momento. En primer lugar, volvamos a nuestra Firebase y creemos allí nuestra base de datos en la nube. También deberíamos crear colección de tareas pendientes en esa base de datos y un poco crear un par de tareas pendientes allí. 11. Colección con la Cloud Firestore - todos: Por lo que ahora estoy de vuelta en mi Firebase. Aquí, puedes ver que dice que tengo una aplicación que app de tareas pendientes, que es correcta. Deseo crear Cloud firestore ahora para mi aplicación, así que iré aquí en cloud firestore. Y básicamente me ofrecerá crear esta base de datos de la tienda de incendios en la nube. Para que puedan ver el video sobre la tienda de bomberos en la nube, pero de inmediato iré a crear mi base de datos aquí. Podría crear uno para el modo de producción y otro para el modo de prueba. El modo de prueba básicamente me permitirá leer los datos, escribir datos y eliminar datos de ellos. No solo yo, sino cualquiera que se conecte a mi app y modo de producción solo dará el permiso a los usuarios que tengan ese permiso. Por lo que solo abriré esto para no trabajar con el modo de producción por ahora. Entonces el modo de prueba está bien. Este modo de prueba, sólo duraremos 30 días. Entonces, después de 30 días, volverá al modo bloqueado a un poco de producción, así que a continuación. Y también necesito pasar la ubicación. Entonces pasa como Europa Oeste, eso no es un problema para mí como estoy en Europa y un poco en Europa Este, pero Europa Oeste es más, es la única que podría elegir aquí. Por lo que ahora que todo está creado, soy redirigido a mi tienda de bomberos en la nube. A mi base de datos.. Aquí ahora, se puede ver esta aplicación de tareas pendientes y ese tipo de par de personajes que se generaron. Entonces eso es correcto. Por lo que ahora podría crear mi colección. Si hago clic aquí en iniciar colección, podría pasar ID de cobranza. Este DNI será solo el nombre de la colección. Aquí puedes ver el ejemplo, Usuarios de la colección. Entonces si estamos creando la aplicación que contiene a los usuarios, tendríamos colección de usuarios, pero estamos creando colección de tareas pendientes. Por lo que pasaré aquí todo-dos identificación de cobranza. Entonces si voy a seguir ahora, también me ofrecerá agregar aquí mi primer documento. Así que un poco primero todo. Por lo que para el ID del documento, autogeneraré ese ID. Por lo que este ID se generará desde Firebase y campo, por lo que los campos que nosotros, que nuestros to-dos tendrán es el título para todos, ¿no? Y el valor podría ser ir a tienda así. Añadiré un campo más, que se completará campo. Y este campo no será tipo de String, tipo de Boolean, y será falso inicialmente. Así que ahorra. Ahora, puedes ver que aquí tengo mi colección de tareas pendientes. Tengo un documento aquí por el ID y los valores de documento aquí en el lado derecho. Déjame crear dos documentos más. Por lo que como documento auto generado, el título de campo ID será comprar una camiseta, por ejemplo. Permítanme poner el s también en mayúscula y el campo de agregar. Ahora usaré campo completado con el tipo de booleano y será cierto. Guardar. Y ahora un documento más, autogenerar ID. Campo, título. El tipo es cadena, lo cual es cierto y valor para ese título será lavar un auto. Después agrega un campo. Concluido. El tipo es booleano, el valor es falso. Guardar. Por lo que ahora tenemos al menos nuestros datos en nuestra base de datos. Por lo que podríamos ahora en el siguiente video, meter esos datos en nuestra aplicación. 12. Servicio e inyecciones angulares e inyecciones angulares: Por lo que para sacar datos de Firebase y trabajar con los datos utilizaremos el servicio Angular. Servicio en Angular es el tipo de archivos que podríamos utilizar para compartir nuestros datos a través de componentes. Crearemos uno ahora y lo usaremos para comunicarnos con nuestra Firebase y pegar esos datos desde firestore hasta nuestros componentes hasta nuestro componente de tareas pendientes aquí. Los servicios son características inyectables por lo que podrían inyectarse en componentes, Otros servicios, guardias de ruta, directivas, y por eso los usamos para esos. Por lo que ahora podría correr aquí ng generar servicio. Generaré servicio en carpeta de servicios y el nombre será servicio de to-dos. También usaré la bandera SkipTests aquí, por lo que no genera el archivo de prueba para este servicio ya que no necesito uno. Por lo que ahora como estoy terminado con esto, podría volver a mi servicio. Por lo que en mi servicio aquí, así voy a ir a la app de origen y voy a tener carpeta de servicios y servicio de tareas a dos se genera servicio. Y lo primero que puedes ver es este inyectable. Este inyectable se proporciona básicamente en una raíz. Entonces lo que significa que estos servicios prestados en la raíz de nuestra aplicación, por lo que se puede compartir a través de todos los módulos y componentes que tenemos. Para trabajar con la Firebase y firestore. También necesitamos importar el par de módulos de Angular fire 2 aquí. Por lo que en la parte superior voy a escribir importación. Y ahora angular firestore, que funcionará directamente y nos conectará a nuestro firestore, y luego a la colección de la tienda de incendios Angular, que básicamente funcionará con nuestra colección de to-dos y documento de la tienda de fuego angular, que trabajará para, con cada documento de esa colección. Y voy a importar eso de fuego angular a/tienda de bomberos así. Por lo que ahora usaré mi tienda de fuegos angulares primero. Aquí en constructor, necesito pasar esa tienda angular de incendios. Por lo que usaré fs privados para tienda de bomberos. Y lo usaré para que se establezca al tipo de Angular firestore. Entonces con esto, podemos trabajar con la tienda de bomberos con este fs true a través de nuestro servicio. Y por eso podríamos seleccionar nuestra colección y hacer un par de cosas más. Y ahora en el siguiente video, usaremos esos y trabajaremos con nuestro firestore para recuperar nuestros datos. 13. Cómo conseguir todos desde Firebase: Entonces plan aquí es usar nuestro firestore angular firestore en mi servicio y recuperar mis datos de mi firestore en la nube que tengo. Por lo que primero crearé un par de variables. Entonces colección to-dos, ya que tiraremos la colección de a dos, a esas colecciones será el tipo de colección Angular firestore como esta. Y esta colección firestore tendrá el tipo de tareas pendientes. Todavía no creamos este tipo. Por lo que este tipo de cosas pendientes será el modelo de nuestros datos. Entonces voy a crear ese modelo ahora mismo. Iré aquí en mi app y crearé carpeta en ella, llamada modelos. Y en modelos voy a crear tareas de hacer. modal. ts. Por lo que ahora en este archivo, podría exportar mi interfaz de tareas pendientes, que será un poco modelo para mis datos. Y este modelo para mis datos tendrá una identificación. Pero este DNI no será un poco requerido. Lo recuperaremos, pero realmente no necesitamos enviar el ID para crear los datos en sí. Por lo que ID será tipo de cadena. Entonces el título, como saben, será tipo de cadena. Y también habremos concluido, que es tipo de booleano. Entonces por esto ahora, podría importar mi modelo de tareas pendientes en mi servicio aquí. Entonces por hacer, lo importaré en la parte superior, aquí. Y ahora podría usar este modelo para modelar mis datos a través del servicio. Como tengo que dos colección. Ahora voy a crear también para hacer doc. Para hacer doc básicamente será tipo de documento de la tienda de incendios angular, y también será el tipo de a hacer. Este sería cada documento individual en el que trabajaremos tipo de editarlo, borrado o actualizado de algún tipo de manera, ¿verdad? Y también necesitaré dos, toda mi matriz de tareas pendientes mis datos principales. Entonces los to-dos, que serán el tipo de observables como este, que necesita ser importado de RxJS aquí en la parte superior. El observable, hablaré de ello en un segundo. El observable también tendrá el tipo de hacer, pero será hacer array como básicamente, it, esto to dos sostendrá la matriz de nuestros to-dos. Entonces mi observable aquí, observable es básicamente el envoltorio para mis datos. Entonces un poco, estoy envolviendo mis datos de tareas pendientes a dos datos. Y en esos, podría usar diferentes métodos, que verán en un segundo. Pero también podría suscribirme a esos datos, obtener los datos correctamente y como Angular con la Firebase me devolverá el tipo de datos observables. Yo lo haré, será mucho más fácil para mí trabajar con esos y el mango los de mi lado. Entonces ahora en constructor aquí, podría establecer mis datos, establecer datos aquí básicamente. Entonces usaré esta. colección to-dos para ser igual a este tipo este. fs que mencioné, fs como este. Y en FS, tengo un método llamado colección. Este método de colección básicamente tirará de la colección que tengo en mi Firebase. Entonces la colección es nombre de to-dos ya que espero que recuerden esto. Por lo que ahora que tengo mi colección a mi servicio, puedo sacar los datos, cada documento de la propia colección. Necesito guardar esos datos en mi quehacer. Por lo que voy a poner esto. tareas pendientes para ser iguales. A esto. colección to-dos. Esta colección que puse aquí de la tienda de bomberos. Y usaré. cambios de instantáneas. Cambios de instantáneas en esto. Básicamente, podría usar no solo los cambios de instantáneas, sino también los cambios de valor. Los cambios de valor sólo me devolverán los datos y sólo me devolverán estos datos de documentos, ¿verdad? No necesitaba pasar ninguna funcionalidad adicional para devolverme datos, pero no obtendré el ID con cambios de valor. Para obtener el ID, necesito usar una instantánea cambia y un poco agregar algunas funcionalidades adicionales. Los cambios de valor están regresando un poco solo los datos de este lado derecho. Y se puede ver que el DNI del documento no está en el, en el lado derecho de su pantalla, ¿verdad? Por lo que está un poco en este nivel de documento principal. Y para devolver ese ID, necesito un poco para usar también los cambios de instantáneas para echar un vistazo profundamente al documento en sí y también para enlazar ese ID al documento en sí y luego devolver el documento completo y guardarlo en mi matriz . Tal vez suene complicado, pero no lo es obviamente. Entonces aquí, ahora podría usar un método de tubería método de tubería me permitirá enlazar a estos cambios de instantáneas. Pareja de métodos. No voy a usar, par de esos usaré solo uno. Usaré el método de mapa aquí. Por lo que el mapa mismo necesita ser importado. Por lo que importaré mapa de Rxjs/operadores. Para que veas que como mis datos son observables, puedo trabajar con un mapa en él. Entonces este mapa me dará algunos cambios de mis datos a partir de una instantánea cambia, ¿verdad? Entonces como tengo algunos cambios, usaré un método aquí, función de flecha aquí, mal escrito eso, ok. Y aquí te devolveré mis cambios, pero también usaré mapa en esos. Necesito mapear a través de esos cambios para ver los datos de esos. Entonces como estoy mapeando a esos, tendré un documento en sí. Entonces documento me vendría bien una x aquí. No es un problema. Entonces ahora que tengo este documento por su cuenta, Permítanme usar señal cerrada aquí. Ahora que tengo este documento por sí mismo, podría pasar por ese documento y ponerlo igual a los datos que necesito. Por lo que voy a crear esa const de datos aquí. Y ponerlo igual al presente documento. y este documento tendrá la carga útil sobre sí mismo. Entonces carga útil. de nuevo, y el documento ahora por su cuenta y. datos. Entonces esto básicamente significa que devolveré estos datos de un documento como un dato de tareas pendientes para ser el modelo de tareas pendientes. Entonces básicamente ahora, estos datos serán iguales a ese lado derecho en mi nube firestore. Entonces estoy tirando de los datos correctos hacia atrás, pero aún así, no tengo el DNI para conseguir el DNI. Ahora que tengo estos datos, usaremos datos. ID aquí para ser igual a la x. otra vez a mi documento carga útil. doc como este. Y ahora. aquí sólo quiero tener los datos, pero también voy a tener el DNI, que se puede ver aquí. Entonces. ID como esta. Y ahora que tengo estos datos en su totalidad, sólo devolveré los datos. Y con esto, mis tareas pendientes tendrán datos correctos los cuales conservarán el título de ID y los valores completados. Y como necesito llegar a esto en mi componente, crearé el método ahora después de mi constructor aquí abajo, pondré el comentario de llegar a dos, y crearé un método de llegar a dos. Aquí. Simplemente voy a devolver esto. a dos atrás. Por lo que usaré más adelante este método en mi componente. Entonces vamos en nuestro componente ahora. Aquí en to-dos, entraré en el propio componente. Y en primer lugar, como trabajaré con el servicio en mi componente, debería importar ese servicio. Por lo que en mi constructor usaré servicio privado a dos para ser tipo de servicio de tareas pendientes como este. Voy a auto importarlo en la parte superior ya que mi servicio es función inyectable, puedo importarlo en, inyectarlo básicamente en componentes. Por lo que aquí ahora tendré mi método de llegar a dos. Voy a llegar a dos. Será el método que usará un poco mi servicio de tareas pendientes con esto. a dos servicio como este y on to dos service, tengo mi método llamado get to dos como este. Y como mis datos son datos observables, podría suscribirme a ella, así que suscríbete así. Y voy a recuperar una respuesta de mi para mis datos. Y esa es la respuesta será el tipo de tarea por hacer, pero para hacer array. Por lo que ahora usaré el método de flecha aquí, y se puede ver la línea roja aquí. No importé mi modelo de tareas pendientes aquí, así que solo lo importaré en la parte superior. Eso es oaky. Y aquí, ahora que me he suscrito a mi get to dos, podría consolar. log to dos, respuesta así. A ver lo que recuperamos. Voy a copiar esto, llegar a dos método completamente y simplemente pegarlo aquí con esto. get to-dos. Entonces una vez cargado este componente, una vez que estemos en la página de tareas pendientes, se ejecutará este ngoninIt, y se ejecutará este get to hacer's. Este get to dos correrá método get to dos en mi servicio todos. Y esto llegó a dos me devolverá este dato, que previamente obtuve de mi colección de tareas pendientes de mi Angular firestore. Se puede ver cómo todo está conectado entre sí aquí. Entonces ahora que tengo todo aquí, podría usar clear aqui y correr ng serve de mi lado y ejecutar mi app localmente para revisar todo. Ahora que mi servidor está en funcionamiento, puedo copiar este host local 4200 y volver a mi navegador, pegar aquí este host local. Por cierto, si eres fan de Naruto, Esto es dolor básicamente, y estoy de vuelta en mi app. Por lo que inspeccionaré mi app aquí. Iré a consola aquí, y entraré a página de todos, una vez que esté ahí. Se puede ver este registro desde tareas pendientes. Y ahí están nuestros datos. Tenemos tres a dos. Cada uno de los datos tiene el id, título, y los valores completados. Entonces ahora que sacamos con éxito los datos de nuestra tienda de bomberos, tienda de incendios en la nube, podemos enlazar datos de datos aquí en nuestras listas, en nuestra página de tareas pendientes. 14. Mostrando todos en la aplicación web web: Por lo que ahora es el momento de renderizar nuestros datos desde nuestro componente de tareas pendientes. Entonces obtenemos los datos aquí. Crearé aquí variable de tareas pendientes, que será el tipo de matriz de tareas pendientes como esta. Y ahora aquí en llegar a dos, usaré esto. para dos y vincularlo a respuesta que regresemos. También tendré un terminado a dos. Así que termina a dos que será de nuevo, el tipo de matriz de tareas pendientes. Y será lo mismo. esto. terminado a dos iguales a respuesta. Sí, pero recuerdas cómo nuestras tareas pendientes, tendrán dos listas diferentes. Uno es para terminado a dos y el segundo es solo para todos que aún no están terminados. Entonces filtremos nuestros datos de inmediato aquí mismo. Entonces mi respuesta para mis tareas pendientes, he usado un filtro en esas y voy a llegar a hacer de vuelta de cada a dos que estoy filtrando. Por lo que regresaré aquí sólo la tarea de hacer. completada, pero que no está terminada, que tiene que hacer completada, completada como falsa. Entonces básicamente cada uno para hacer que no se complete estará en a dos array. Voy a copiar esto ahora este filtro completamente y cada todo lo que se complete estará en matriz de tareas pendientes terminadas. Entonces ahora en mi HTML fuera de mis tareas pendientes, puedo trabajar con eso. Voy aquí en mi lista de tareas pendientes, eliminaré estos dos ítems de lista. Y aquí en el ítem de lista, usaré Directiva ngfor, que es básicamente para bucle para mis tareas pendientes. Por lo que voy a recorrer los to-dos y usaré un let todo de todos. Entonces mientras estoy dando un bucle a través de las tareas pendientes, me está dando cada tarea de vuelta. Entonces aquí puedo usar en lugar de ir a caminar, podría usar aquí todo. title. Sí. Por lo que básicamente bucle a través de tareas pendientes y renderizará tantos elementos de lista como necesito tanto como todos, tanto tareas pendientes como tengo. Por lo que usaré copia esto así. No hagamos eso ya que tengo un par de otros iconos aquí. Por lo que usaré aquí otra vez ngfor loop. Y voy a atar esto para dejar que todo de acabadoTodos ahora. Y esto terminó de hacer. Básicamente vamos a hacer lo mismo que voy a renderizar para hacer. título aquí. Y con esto, estamos totalmente terminados. Si vuelvo a mi solicitud, se puede ver que ahora tengo dos a dos que no están terminados en la parte superior y uno para hacer eso está terminado en la parte inferior. Por lo que los datos están ahí y se renderizan con éxito en la pantalla. Todavía no puedo actualizar los datos ni eliminar los datos. Ni siquiera puedo agregar datos a, agregar nuevas tareas pendientes en mi lista de tareas pendientes. Entonces vamos a trabajar primero con la adición de los datos. 15. Functionality para añadir los todos todos: Por lo que para agregar nuestro to dos usaremos sección en la parte superior de nuestra página de tareas pendientes. Por lo que un poco escuchar en el encabezado, vamos a agregar el título para hacer aquí en un campo de entrada y en un clic de botón agregar tareas pendientes, vamos a agregar tareas a nuestra matriz abajo de esta lista. Y también se guardará en nuestra base de datos. Por lo que para trabajar con la adición de tareas pendientes, entraré en componente de tareas pendientes aquí. Y debajo de mis get to-dos, crearé un método add to do do, así que add to do será un método básicamente. Y debería obtener un título de ese campo de entrada. Por lo que el título será tipo de cadena. Entonces ahora vamos en nuestro HTML y pasemos ese título. Entonces aquí en el encabezado, tenemos este campo de entrada y un botón. Por lo que podría utilizar aquí clic evento. Y en un click, deseo agregar método de tarea a esta tarea de hacer. Debería pasar un título. Por lo que debería obtener el título de mi campo de entrada aquí. Para obtener este título, utilizaré una referencia local de título de tarea pendiente. Para poner una referencia local, solo usamos un hash. Y luego para hacer título con esta referencia local, tenemos una referencia a toda la entrada. Entonces aquí ahora puedo pasar un título por hacer como este, . y valorarlo. También al final aquí usaré un; y pondré este título por hacer . valor para ser igual a una cadena vacía. Lo que significa, permítanme también refactorizar un poco esto. Para que se pudiera ver todo. Lo que significa básicamente, una vez que haga clic en este botón, agregará un título, agregará cosas por hacer básicamente, pero también después de que ese método esté terminado. Este campo de entrada de título por hacer, devolverá su valor a la cadena vacía. Volverá a estar vacío, por lo que podríamos añadir otro. Entonces ahora en mis tareas pendientes aquí. En add to-do, primero debería comprobar si este título está vacío. Si este título está vacío, simplemente debería evitar que mi código se ejecute. Entonces correré. Si título es igual a una cadena vacía, simplemente volveré aquí. Entonces todo lo demás que si el título es correcto, ese código estará abajo. Ahora para agregar mi tarea de hacer, también debería crear esta tarea de hacer con este título. Por lo que voy a crear un const de tareas pendientes para ser igual de, objetos como este. Tendrá un título y este const por hacer debe ser tipo de tarea como este. Y tendrá un título que es título desde un top. Y también habrá concluido, lo cual es falso. Una vez que añadimos eso a hacer, siempre será falso como su todavía no terminado. Y finalmente, una vez que creé esto, podría golpear mi servicio ahora. Entonces esto. servicio de to-dos. y todavía no tengo ese método add to-do aquí, pero lo usaré, add to do do asi. Y en ella pasaré a hacer de aquí que creé. Entonces ahora entremos a nuestro servicio y creemos este método AddTODO. Entonces en servicios aquí para hacer servicio, justo debajo de mi get to dos crearé add to-dos y add to-do, singular. Y voy a crear un método add todo, que va a llegar a hacer por sí mismo, que es tipo de tarea pendiente. Y este será un método. Entonces, ¿cómo podría agregar este todo a mi Firebase, a mi colección? Entonces solo usaré esto. colección to-dos aquí y usaré. hay método add en él. Podría usar el método de agregar y solo podría pasar todo aquí. Por lo que ahora abriré aquí mi tienda de bomberos en la nube, y verán mis tareas pendientes que tengo por ahora. Volveré a mi app y refrescaré un poco. Añadamos una nueva tarea pendiente. Por lo que hacer será ir a una clase, hit enter. Ahí está. Está abajo. Si reviso mi nube firestore, podría ver un ir a una clase como un nuevo que hacer. Entonces. Ahora si refresco la página, siempre me va a devolver eso para hacer como se guarda con éxito en nuestra base de datos. Veamos ahora cómo podríamos eliminar nuestras tareas pendientes terminadas en un clic de un icono de basura aquí, a la derecha. 16. Deleting de todos los: Entonces, idealmente, eliminar nuestras tareas pendientes debería funcionar así. Una vez que haga clic en este icono de basura, debería pasar los datos de esta tarea pendiente. Y en base a esos datos más adelante, lo eliminaré, lo eliminaré de mi base de datos. Esos datos deben ser para hacer ID, ya que eso siempre es un poco único. Por lo que ahora en mi todos HTML, podría ir a terminar a dos. Y en un clic de este icono de basura, podría ejecutar click, click event, ¿verdad? Y voy a ejecutar un método llamado delete todo. A esto, debería pasar mi tarea por sí misma. Todavía no creé esta eliminación para hacer. Entonces iré a mi componente de tareas pendientes, y aquí abajo, correré delete to do do here. Y voy a conseguir que eso haga, que es tipo de tarea. Y ahora podría eliminar mis datos. Aquí en mi componente, este no es tipo de tareas pendientes, sino que hacer ahora en mi componente aquí, volveré a contactar con servicio. Entonces esto. servicio de tareas a hacer, . borrar a hacer. Por lo que aún no tengo esto que hacer. Por lo que sólo pasaré a hacer a mi delete para hacer, ya que todavía no lo tengo. Entonces vayamos al servicio y creemos uno. Entonces después de mi add to do do en mi servicio, crearé un delete para hacer aquí, y usaré este delete para hacer eso copié. Y aquí voy a llegar a hacer, que es tipo de tarea. Y aquí ahora podría ejecutar lógica para borrar mi tarea pendiente. Como necesito borrar mi tarea pendiente por una identificación, me pondré en contacto, ahora utilizaré esto para hacer documento. Entonces aquí usaré esto. para hacer documento que será igual a esto, . tienda de bomberos., en tienda de bomberos. Tengo método de documento. Por lo que este método de documento se pondrá en contacto con la colección que deseo en base una identificación del documento y me va a devolver ese documento totalmente. Por lo que aquí usaré unas garrapatas traseras y nombre de colección es todos/. Y usaré un placeholder aquí desde JavaScript, y usaré para hacer eso pasé aquí.id así. Entonces ahora se reconoce mi documento de tareas pendientes ¿verdad? Entonces ahora solo podría usar esto.todo documento Dot, y en él tengo un método de eliminación y eso debería ser todo. Por lo que estoy en mi página de tareas pendientes, tengo una compra una Camiseta terminada para hacer. Entonces si encuentro aquí compro una playera, y si iría a mi página y hago click en mi icono, se puede ver eso, ese tipo de ya desapareció. Entonces si refresco la página, no está ahí. También en mi base de datos , no está ahí. Se trata de un lavado un auto. Este es ir a tienda y esto va a una clase. Y con esto solo tenemos una funcionalidad más que hacer aquí, y esas serían nuestras actualizaciones. Por lo que una vez que haga clic en esta caja vacía, terminará mis tareas pendientes y las moverá a matriz de todos terminados. 17. Actualización de todos: Por lo que volveré a mi todos HTML aquí. Y una vez que haga clic aquí en mi icono de plaza, ejecutaré un escucha de eventos click. Ese oyente de eventos, ejecutará un método de edición que hacer, y pasará a hacer al mismo. Debería crear un este método ahora en mi componente. Entonces aquí, editar para hacer, está llegando a hacer desde mi HTML que es tipo de tarea pendiente. Nuevamente, escribo a dos, para hacer así. Y ahora podría revertir su valor terminado. Por lo tanto, punto completado será igual a revertir hacer, punto, completado así. Por cierto, volveré a entrar en mi HTML. Debería poder también dar click en Finalizar a doshere. 00:00:49 .940 —> 00:00:54 .185 Y muévalos de nuevo a inconclusas a dos. Entonces tengo mi lógica para revertir eso. Ahora es momento de contactar de nuevo a mi servicio. Entonces este punto a dos service dot edit to do do do do do, que aun no creé. Y voy a pasar esto para hacer a ese método. Entonces vamos a crear este método. Aquí usaré Editar todo comentario. El método se llama editar para hacerlo está obteniendo todo de mi componente. Y estos a hacer serán tipo de tarea pendiente. Y por dentro, usaré lo mismo que en mi borrado. Por lo que podría copiar esto desde arriba, aquí. Por lo que debería obtener mi documento de tareas pendientes de mi colección de tareas de la tienda de bomberos. Y eso lo estoy consiguiendo en base a la identificación del todo. Pero ahora en lugar de eliminar tareas pendientes, debería pasar aquí para hacer actualización de punto de documento, y debería pasar mi nuevo para hacer aquí. Entonces como estoy en mi componente cambiando los datos para revertir los datos. En mi servicio, estoy un poco enviando eso a ver con revertido los datos. Por lo que guardará manera incorrecta en mi base de datos. Entonces ahora si actualizo una pantalla y traté de probar eso, vaya a un click de tienda. Está en mi terminado a dos. Si refresco la página , sigue en mi terminado a esos. Si encuentro mi ir a una tienda, y aquí está, ir a una tienda ya ha completado un conjunto a verdadero. Por lo que básicamente funciona. Entonces si vuelvo a actualizar la página, siempre tirará que vaya a almacenar como un valor verdadero como valor terminado. Para que pudiera volver a poner, lavar un auto como acabado, volver atrás, encontrar que lava tu auto. Se puede ver que es cierto. Podría volver atrás y poner estos meta para almacenar de nuevo a la lista de tareas de la ONU. Entonces es aquí ahora, ¿verdad? Por lo que de vuelta, ir a tienda se ha completado de falso. Entonces todo funciona bien. 18. Qué aprendemos y probamos: Por lo que creamos completamente nuestra aplicación en este momento. Tenemos nuestros componentes aquí. Contamos con un ruteo el cual está totalmente integrado. Tenemos un dato de nuestra Firebase el cual está funcionando. Podríamos agregar un nuevo dato, nuevos datos, agregar, se agrega, podríamos completar nuestra tarea de hacer. Podríamos eliminar nuestra tarea de hacer. Podríamos volver a casa, ir a tareas pendientes, nuestro enrutamiento está funcionando completamente, y nuestra app de todo. Si voy a la visión general del proyecto, está totalmente configurado en una Firebase y está totalmente conectado a nuestra app para hacer en nuestro lado Angular. Ahora, sólo hay una cosa por terminar. Ahora podemos trabajar en Firebase Hosting y empujar nuestra, toda nuestra app al hosting en Firebase y verlo en vivo. 19. ¿Cómo implementar la aplicación a Firebase?: Por lo que para empezar con nuestro hosting ahora mismo, voy a dar clic aquí en empezar. Yo estoy por cierto, en sección de hosting de mi Firebase. Así que empieza. Entonces aquí está. Primero necesitamos instalar herramientas de Firebase a nivel mundial. Entonces solo puedo copiar esto, bonita animación aquí. Y podría entrar a mi consola. Entonces en mi consola, déjame aclararlo un poco, aquí. Podría instalar globalmente herramientas Firebase. Yo por cierto, ya tengo esto instalado, pero lo instalaré junto con ustedes para que pudieran ver todo el procedimiento de despliegue a una Firebase. Una vez que esto esté instalado, puedo volver a mi hosting Firebase aquí, y podría ir al siguiente paso. Entonces, en primer lugar, deberíamos iniciar sesión con nuestra cuenta firebase. Entonces vamos a copiar aquí este inicio de sesión de Firebase y pegarlo así. Ya debería estar conectado, así que ya estoy ingresado, pero estoy ingresado con cuenta diferente. Por lo que voy a cerrar sesión como este firebase, y voy a iniciar sesión, iniciar sesión, volver a iniciar sesión. Entonces me va a preguntar un par de cosas. Simplemente permitiré esos. Me moverá de inmediato al inicio de sesión de una cuenta de Google. Por lo que voy a iniciar sesión, con mi correo electrónico, aquí. Me va a pedir un par de accesos. Voy a dar eso y Firebase CLI login exitosamente como puedes ver. Entonces lo siguiente, podría usar Firebase en ella. Por lo que necesito inicializar mi aplicación como aplicación en mi Firebase. Entonces aquí déjame también aclarar un poco esto. Por lo que Firebase inicializa y simplemente inicializará toda la aplicación. Entonces antes que nada, me preguntará si estoy listo para proceder. Sí, lo soy. Aquí, elegiré qué futuro deseo usar de Firebase y que es hosting. Por lo que vengo a hospedar espacio y entrar. Por lo que me pedirá crear un nuevo proyecto o usar el existente. Por lo que usaré proyecto existente, Me traerá de vuelta mi proyecto. Por lo que usaré mi proyecto de app de tareas pendientes aquí, así. Entonces necesitamos pasar, ¿qué deseamos utilizar como nuestro directorio público? Entonces aquí usaremos la carpeta dist así. Y como vamos a construir nuestra aplicación en carpeta dist, así que pulsa Enter. Nos preguntará si deseamos configurar esta aplicación como una aplicación de una sola página, Angular crea las aplicaciones de una sola página, así que sí, para esto también, y se puede ver que Firebase está terminada como si estuviera terminada. Por lo que ahora podríamos armar todo lo demás. Entonces con esto, podemos ejecutar Firebase deploy, pero antes de eso, necesitamos construir nuestro proyecto. Entonces para un edificio iré primero a Angular JSON aquí, se puede ver que la ruta de salida de un edificio de un constructor será dist/todo app. Y recuerdas que pasamos esto, dist justo como la carpeta dist. Entonces 1 segundo para comprobar, si tengo todo configurado correctamente, sí. Y ahora podríamos construir nuestra aplicación. Entonces ahora aquí podría despejar un poco esto y usar ng build —prod. No necesitas usar —prod, pero construiré mi aplicación para el entorno de producción ya que es el mismo entorno que mi entorno de puesta en escena, mi entorno de pruebas, codificación. Entonces esta construida tomará un par de minutos pero, Ahora ¿qué está haciendo? Se está compilando todo lo que tenemos. Angular en sí, está compilando todo lo que tenemos y va a construir toda la aplicación para nosotros, para ser utilizada como una aplicación JavaScript. Básicamente, como sabes que Angular es un framework JavaScript. Por lo que una vez que esto esté terminado, estaré de vuelta. Entonces todo está terminado. Contamos con nuestros archivos JavaScript, que son paquetes de nuestra aplicación angular. Y ahora podríamos ejecutar sólo Firebase, desplegar así. Tomará algún tiempo, pero agarrará nuestra aplicación y desplegará completamente en nuestro hosting que ya configuramos. Ya está terminado. Ahora podríamos ir a nuestra URL de hosting. Por lo que voy a golpear Control y hacer clic aquí, y debería llevarme a hosting URL. Por lo que aquí, ya se puede ver que actualmente estoy en mi URL de hosting. No estoy en mi anfitrión local, ¿verdad? Para que yo pudiera ir a cerca, eso es para lo que tenemos. Esto es a dos. Y se puede ver que nuestro hosting está totalmente conectado. Por lo que un poco implementamos nuestra aplicación al hosting de Firebase y está funcionando completamente con base de datos en la nube de Firebase. Entonces aquí ahora, como terminamos con hosting, podríamos simplemente continuar a una consola y ahora en un hosting, no tendremos esa parte de configuración, pero tendremos nuestro hosting en sí. Para que puedas ver cómo estoy conectado, current_user. También hay aplicación que se debe visitar, eso es todo básicamente que ya tenemos. Y eso sería todo. Aquí puedes agregar tu dominio personalizado si tienes uno y trabajar con eso. un poco también. 20. Gracias y despedida: Entonces aquí estamos. Enhorabuena a usted. Crearás con éxito tu app de tareas pendientes con Firebase y Angular. Usted entonces cómo podría usar Angular, sus componentes, servicios, y enrutamiento. También configuras tu Firebase, Cloud Fire Store para tu base de datos en Firebase. Creaste allí tu colección Todos. Has renderizado esos todos en tu app. Y además pudiste agregar, eliminar y modificar datos de esos todos. Y por último, pudiste implementar toda tu aplicación en Firebase Hosting. Nota importante, en el futuro, se puede esperar más, vamos a codificar cursos en esta serie de mi parte. Así que prepárate, en cuanto consigas otra en vivo. Para éste, podrías hacerme saber lo que te gustó y lo que no te gustó a través de este curso. Incluso podrías dejar tu crítica honesta para este curso. Y de esa manera ayúdame en la creación de próxima, vamos a codificar cursos en mi serie. Una vez más, gracias y adiós.