Node. js Backend para principiantes de Flutter

1. Introducción al curso: ¿Eres un desarrollador de flutter que busca llevar tus habilidades al siguiente nivel, presentando sin back-end GAS para principiantes de flutter La deuda guía definitiva te introducirá en el mundo de la construcción de back-ends personalizados. En este curso, aprenderá a construir potentes sistemas back-end utilizando los nuevos GS y Mongo DB, liberándose de las limitaciones de la base de fuego y evitando el costoso bloqueo del proveedor Desde escribir código de servidor hasta dominar las operaciones de cred, y finalmente implementarlo usando la aplicación ferroviaria, obtendrá experiencia práctica en la creación de arquitectura back-end personalizada al desarrollar una aplicación básica revestida al final del curso También para garantizar una gestión estatal sin fisuras, utilizaremos el popular paquete de proveedores. Este curso definitivamente te ayudará a adelantarte a la mayoría de los desarrolladores que no saben cómo crear su propio back-end y están atrapados solo con las chimeneas. Así que sin perder más tiempo. Empecemos. 2. Configurar un proyecto de Node js: Hola. Bienvenido al primer video del curso, donde aprenderemos a construir una costumbre de nuevo usando No JS y Mongo DV para nuestra aplicación más plana. Entonces, lo primero que tenemos que hacer es instalar ningún GS en su sistema. Así que ve a tu navegador y escribe nos.org. Y desde aquí, solo puedes descargarla e instalarla. Estoy usando un sistema max, pero si estás en windows, entonces puedes simplemente cambiarlo a través de descargas e instalador de windows. Entonces como pueden ver, solo escribiré V, y tengo la versión. Entonces después de la instalación, si puedes ver esta versión en tu línea de comandos, eso significa que has instalado correctamente no es. Y NPM se instalará automáticamente sin Jaz, así que no tenemos que pensar Si escribo versión NPM. Así que también tengo NPM. Después de instalar node js, tenemos que crear un proyecto JS de nodo. Así que ve a tu directorio deseado y crea una nueva carpeta. Voy a llamarlo Nodes app. Dentro de la aplicación Nodes, crea otra carpeta, nombra back end. En esta carpeta, todo el código del lado del servidor estará ahí. Y más adelante, crearemos otra carpeta llamada front end, que consistirá en todo el código de flutter Entonces ahora necesitaremos un punto de entrada para nuestro servidor. Al igual que en el aleteo, es el archivo punto punto principal Entonces dentro de la carpeta back end, crea un nuevo archivo JS, y será archivo cual solo lo abriré código VS. Carpeta abierta. Aquí, estoy abriendo este back end y aquí voy a crear un nuevo servidor de archivos. Así. Si quieres, puedes nombrarlo index do chase también, pero solo lo estoy nombrando server do chase Ahora, abra una nueva terminal en esta carpeta de back end e inicialice NPM escribiendo NPM en Y. Así es como inicializa un paquete MT Se puede ver que el archivo de entrada principal es server dot S. Pero si no creaste el archivo server dot JS, entonces habría tomado en la S como archivo principal. Y todos los paquetes o dependencias externas se mostrarán en este archivo Ahora, cuando hablamos de paquetes, el primer paquete que necesitamos es el paquete express. Express JS es un framework que funciona sobre la funcionalidad del servidor web net JS para simplificar sus API y agregar nuevas características útiles. Hace que sea más fácil organizar la funcionalidad de nuestras aplicaciones con middlewares y enrutamiento Así que aquí en el pool back end en el terminal simp NPM instalar express así También puedes ir a npmjsen.com, y ahí también puedes buscar el paquete express si quieres saber más el paquete express si quieres saber más al respecto Así como se puede ver en las dependencias, tengo el paquete express Ahora vamos a crear un servidor express. En primer lugar, tenemos que decirle a nuestro proyecto que usaremos express. Vamos a importar o se puede decir, requieren el paquete express en la parte superior. Simplemente escribir const Express es volver a expresar, y luego tenemos que crear una instancia u objeto del expreso Estoy dando el nombre de la app. Este es un proceso estándar, y luego escribiré el código para iniciar el servidor. Es decir, lo voy a escuchar en el bote tres que y después de que tenga éxito, voy a consola de registro. Registro de consola aquí. Voy a escribir servidor que se ejecuta en el puerto 3,000. Bien, guárdala. Y luego tratar de ejecutar el servidor escribiendo en el nodo terminal y el servidor de nombres final y presentado. Se servidor que se ejecuta en ese es nuestro servidor se está ejecutando. Si vas a tu navegador, y escribes host local 3,000. Entonces aquí se puede ver que no se puede obtener slash. Esa es la ruta de origen. Pero al menos no está mostrando ningún otro error, esa es la página no una respuesta o el servidor no está disponible así. Esto implica que el servidor se está ejecutando con éxito. En el siguiente video, crearemos pocas rutas para nuestro servidor. Gracias. 3. Creación de rutas: Hola. Bienvenido de nuevo. Ahora, vamos a dar salida a algunos datos en la ruta del host local 3,000. Para ello, tenemos que configurar la solicitud GT para la ruta slash Vayamos a nuestro código aquí arriba de la aplicación Escuchar. Escribiré app GT. Y entonces qué ruta queremos. Queremos la ruta del slash. Y siempre que se llame a la ruta de slash, queremos que se ejecute esta función Solicitar respuesta. Nos da solicitud y respuesta. Entonces estos son los fundamentos del marco expreso. Entonces debes conocerlo. O bien, simplemente puedes ir y construir la aplicación, y finalmente entiendes los conceptos. Entonces aquí, solo puedes entender. Solicitud es lo que enviamos desde el front-end al servidor. Entonces supongamos que una persona está enviando algunos datos de contraseña de correo electrónico. Por lo que vamos a buscar esa información a través de esta variable de solicitud Lo que sea desde el front end, estamos enviando, podemos meternos en la solicitud. Y de igual manera, la respuesta es lo que enviamos del servidor al front-end. Entonces obviamente, tenemos cuando el fronten está pidiendo algún dato alguno Lo enviaremos con esta variable de respuesta. Entonces aquí escribiremos respuesta dot send. Y esta es la página de inicio. Esto es solo un dato ficticio por ahora. Obviamente, no estaremos enviando datos directamente en el formato de cadena. Sólo para hacerte entender. Ahora, tenemos que detener el servidor, así que solo controla C, y luego iniciarlo de nuevo para que este código se actualice. Ahora si voy a refrescar C, esta es la página de inicio. Eso significa nuestro corte. Siempre que vamos a nuestro corte local de Hos Fit Hus, obtenemos esta respuesta Pero si vamos a cualquier otro nodo similar, entonces obviamente no se pueden obtener nodos. Ahora vamos a crear la ruta de las notas. Dado que nuestra aplicación será una aplicación de nodo, tenemos que crear una ruta para los nodos. Golpe d es la ruta de origen, consigue Entonces aquí las notas de corte Entonces otra vez, una función se llamará solicitud respuesta solicitud respuesta y voy a enviar respuesta. Esta es la página de notas. Guárdalo. De nuevo, ve y detiene el servidor. Lo he guardado y lo vuelvo a empezar. Entonces ahora si voy a la ruta de las notas de slash, vea, esta es la página de notas Y si voy a simplemente slash, entonces esta es la página de inicio Entonces así es como se crean rutas. Y asegúrate de que entiendo que esto es para las rutas GT. Hay un tipo diferente de solicitudes, es decir g post así, lo entenderás, pero esta es la básica, esa es la petición GT. En el siguiente video, trabajaremos en la configuración de Mongo DB Database. Gracias. 4. Configurar MongoDB Atlas: Hola, bienvenido de nuevo. Ahora, vamos a configurar nuestra base de datos Mongo DB. Para ello utilizaremos el servicio Atlas Cloud. Así que simplemente abre tu navegador y ve a Mongo DB Atlas. Aquí, luego haga clic en el primer enlace. Después inicia sesión o regístrate con tu cuenta de Google. Ya tengo una cuenta, así que solo voy a iniciar sesión. Si eres un usuario nuevo, entonces puedes darle cualquier nombre a tu organización y seleccionar las opciones de Mongo DB Atlas Ya que solo estoy iniciando sesión, no voy a estar viendo esas cosas, pero en tu caso, solo será dar el nombre de tu organización. Y luego seleccione la opción Mongo Atlas. Ahora, después de iniciar sesión, vea, tengo esta organización de nombre, Rahul Agrawal Y si estás en esta página, entonces lo primero que tienes que hacer es crear un nuevo proyecto. Entonces, ya tengo este proyecto, pero en tu dashboard, no vas a estar viendo el nombre de este proyecto obviamente. Así que simplemente haz clic en Crear Nuevo Proyecto. Y aquí, dale un nombre de proyecto. Voy a escribir notas app. Después haga clic en siguiente. Aquí, propietario del proyecto crear proyecto. Y después de que se cree el proyecto, tenemos que construir una base de datos. Simplemente haga clic en él. Después selecciona la llanta libre que sea cero. Obviamente, más adelante, se puede ir por servidores y este tipo de cosas. Entonces el proveedor es AWS y la región se cierra a usted. Así que elige donde quiera que vivas. Y puedes dar el nombre de tu clúster. Simplemente lo dejaré por defecto. Es el clúster cero. Y haz clic en Crear. El It's Caps y todo. Motocicleta. Después de eso, estamos poniendo toques finales. Después de eso, tienes que crear nombre de usuario y contraseña. Solo recuerda estos detalles. Voy a estar usando una contraseña muy simple por ahora. Yo lo recordaré. Haga clic en crear er. Entonces donde te gustaría conectarte desde el entorno Cloud, elige esto. Y entonces ya tengo mi dirección IP. Acabo de agregar mi dirección IP actual. Entonces tengo mi IP aquí. Y luego solo termina y cierra y ve a Tababase. M. Bien. Ahora, el siguiente paso es permitir el acceso desde cualquier lugar. Como puede ver, le damos nuestra dirección IP, eso significa que solo este sistema será accesible para ese servidor. Pero queremos que otros usen nuestra aplicación también en la vida real. Vaya a acceso a la red aquí, haga clic en la dirección IP del anuncio y haga clic en permitir acceso en cualquier lugar. S y luego confirmar. Se encuentra en estado de dependencia. Se está llevando algún tiempo. Estamos desplegando tus cambios acción actual configurando Mongo Como se puede decir está tomando tiempo. Está bien. L et's Vamos a decir esto después de unos minutos antes de que abra un código VS. Y obviamente, tenemos que conectar este nodo a Mongo dV. Para eso, usaremos otro paquete conocido como Mo. En esa terminal, simplemente lo detendré y escribiré NPM install Mo y presionaré enter En el paquete de servicio que Jason presentó, se puede ver que Mongo's está ahí Y creo que nuestra base de datos también está configurada. Entonces en el siguiente video, estableceremos la conexión entre la NA y esta base de datos. Gracias. 5. Conectar la aplicación Node a MongoDB: I. En el próximo paso, necesitaremos una cadena de conexión para conectar nuestra aplicación a la base de datos Mongo DV Para eso, ve a ese último panel de control, y aquí, da clic en el botón Conectar al clúster. Así que aquí, solo haz clic en Conectar. Entonces hay muchas opciones. Voy a elegir Mongo DB para el código VS. Y luego simplemente copia esta cadena de conexión. Reemplazaremos la contraseña por nuestra propia contraseña. Abra el código VS, y en el servidor, establezcamos una conexión. Simplemente, antes que nada, importar el paquete Mangosta Mangosta igual a requerir Entonces escribe mangosta conectar. Aquí tenemos que dar la cuerda. Esa es la cadena de conexión. Y simplemente reemplace la contraseña y también elimine esta que menos que simplemente escribir la contraseña. Yo le di 12345. Y al final, escribiré también el nombre de la base de datos. Eso es Nodos DV. Esto era solo un clúster, y este es el nombre de la base de datos. Nodos DV. Y cuando la conexión sea exitosa, entonces entonces dispararé esta función. Que tendrá todas las rutas. Eso significa que me aseguraré de que las rutas sean accesibles solo si la conexión es exitosa. Simplemente corté y pego todas las rutas dentro de la conexión Mangoose Y este appleion estará afuera. Entonces necesitamos una herramienta para probar las APIs. Para realizar operaciones crud en un servidor o base de datos, necesitamos un cliente o front-end En este momento, no tenemos la aplicación de aleteo. Entonces, para simular o enviar solicitudes falsas, usaremos Postman para probar la API Así que simplemente ve a un navegador y solo escribe cartero y luego aquí, ya tengo esta configuración, pero asegúrate de crear una cuenta y descargar el software Tengo a este cartero aquí ya instalado. Lote de rutas anteriores. Aquí, antes que nada, inicia de nuevo tu servidor. El servidor se está ejecutando. Eso significa que supongo que no hay error con el Mongo. Enviemos una solicitud G. Esta es la solicitud Get, y escribiré HTTP luego host local 3,000 notas de barra diagonal Y si envío una solicitud de GT aquí, vea, esta es la página de notas. Eso significa que nuestra respuesta está ahí y el servidor está funcionando perfectamente. Y este cartero es muy necesario. Espero que también lo hayas instalado. Antes de hacer cualquier otra cosa, hasta ahora, siempre que hagamos algún cambio en el código, entonces tenemos que detener el servidor y volver a reiniciarlo. Esta no es una buena experiencia de desarrollo. Para resolver esto, utilizaremos un paquete conocido como Nudmon. Permitirá la actualización en vivo del servidor. Es decir cuando hacemos cambios y lo guardamos, reiniciará el propio servidor y reflejará los cambios. Nuevamente, detenga el servidor y escriba NPM instalar nodo global M. Así que ate este código Instalaremos este paquete globalmente en el sistema para que en futuros proyectos, no tengas que instalarlo una y otra vez. Así que simplemente presiona enter. Ya tengo Node Ml instalado globalmente. Por lo que esto lo instalará en su sistema. Y después de eso, en el archivo JS de paquetes, crear un nuevo script. Abajo start, solo escribe D y escribe el script nodemon server do chase Esto es sólo cuando se encuentra en la fase de desarrollo. En el servidor en vivo, automáticamente tomará el servidor nodo do chase. Guárdalo. A partir de ahora, escribiremos NPM run Dv, y veremos que se inicia el servidor Nod Mon Entonces eso significa que a partir de ahora la experiencia de desarrollo será un poco mejor. Eso es todo para este video. En el siguiente video, comenzaremos a trabajar en la creación de modelos para nuestro. Gracias. 6. Creación de modelos de notas: Hola. Bienvenido de nuevo. Entonces, antes de seguir adelante, me gustaría estructurar nuestro proyecto en archivos y carpetas de manera organizada. Entonces antes que nada, voy a detener el servidor. Después dentro de la carpeta backend, voy a crear una nueva carpeta llamada SRC Y mover mover el archivo JS punto servidor dentro de la carpeta ***. Ahora tengo que hacer algunos cambios en el paquete hacer archivo SN también. Aquí. Cuando estoy haciendo el script de inicio, voy a escribir fuente sla server do JS y también en el nodemon Ese es el script D también porque el archivo no está en el directorio raíz. Entonces eso es todo. Ahora, vamos a crear algunos modelos. Para nuestros datos de nodo. Los modelos son la estructura de cualquier dato en nuestra aplicación. Guardaremos esa estructura de datos en nuestra base de datos Mongo DB Mongoose ayudará a guardar los datos así como a crear modelos También, podemos usar ese modelo para realizar operaciones de multitudes en la base de datos. Entonces estos están todos conectados al paquete Mongoose. Entonces debes conocer los fundamentos de la misma. Dentro como carpeta, crea una nueva carpeta y nombra modelos. Dentro del modelo, cree un nuevo archivo JS. Note Js así. Bien. Ahora, hay algunos pasos para crear un modelo. El primer paso es requerir el paquete de mangosta. El primero, vamos a requerir el paquete de mangosta. Entonces tenemos que definir esquema. Eso es detalles de los datos. En nuestros datos de nodo , tendrá contenido de título de ID como este. ¿Cuáles son los rellenos almacenados en esos datos? Vamos a crear el esquema const es igual al esquema de Mongo Aquí, tenemos el paréntesis. El primer relleno será ID, y ahora analiza las propiedades. Tipo, será cadena, único será verdadero, es decir todo el ID debe ser único y requerido. Es decir este campo es obligatorio, no se puede dejar vacío en la base de datos. Entonces el siguiente será ID de usuario, tipo será st y re es cierto. Porque obviamente el usuario puede tener múltiples nodos, por lo que el ID de usuario no puede ser único. Entonces title que es title de la cadena de tipo nodo re entonces tendrá tipo de contenido string. Eso es no se requiere. Por último, hemos agregado. Es tipo será. Así y por defecto será el enseñado ahora. Si no se dan datos, entonces el valor predeterminado estará ahí. Así que hemos importado a los Mongos. Hemos definido un esquema. Ahora tenemos que crear modelo. Para eso, tenemos que dar un nombre de modelo y un esquema. Entonces, simplemente escribe el modelo de punto Mongos. El nombre del modelo será Nodo, y el esquema es esquema de nota. El paso final es exportar el modelo. Simplemente al inicio de este modelo, exportaciones de módulos de escritura son iguales al modelo Mongoose Como puedes ver, este es el código modelo Node de cuatro horas. Entonces espero que hayas entendido tan bien como conozcas los conceptos. Porque obviamente, este es el concepto del paquete de Mongo y Mongo DB también Entonces eso es todo. En los próximos videos, también crearemos algunas rutas nuevas. Gracias. 7. Ruta para agregar notas: Hola, usemos el modelo de nota para recuperar todas las notas de la base de datos y enviarlas como respuesta JCN Entonces en el archivo JS del servidor, voy a cambiar este slash notes a sns do list Y aquí escribiré R. Al principio en la parte superior, tengo que requerir el modelo. Sólo escribe nodo es igual a re modelos nodo. Entonces aquí voy a escribir nodos es igual a un nodo bien. Eso significa obtener todos los nodos de la base de datos, y es una función síncrona, así que tenemos que hacerla una sincronización. Y luego en la respuesta, sólo voy a enviar res JS y notas. No estoy envolviendo estas notas entre paréntesis porque estas notas estarán automáticamente en el formato JCN Voy a guardarlo ejecutar el servidor. Y si voy a este punto final, esa es la lista de notas. Entonces mira estoy recibiendo una matriz vacía. Eso significa que no hay notas insertadas, obviamente, pero no hay ningún error. Ahora, vamos a crear ruta para agregar una nota. Debajo de esta ruta de lista, cree una ruta GT por ahora anuncio de app.gs notes Será una función de sincronización. Solicitar respuesta. Ahora, tenemos que crear una instancia del modelo de nodo. Entonces para ese nuevo nodo, es igual a la nueva instancia de nodo. Como sabes qué datos tes, tomará una identificación. Voy a codificar los datos por ahora. Posteriormente, cambiaremos esta ruta para publicar así como rea del usuario. Yo solo escribiré 0001, entonces el ID de usuario será rahle atmail.com, después el título será primero la nota me y el contenido será, este es Cuando tenemos esta instancia de nodo con los datos, tenemos que guardar los datos del modelo en la base de datos. Y esto es muy sencillo. Simplemente use esta nueva variable de nota y escriba save. Eso es. Este código guardará estos datos en la base de datos. Entonces como puedes ver, Mongo lo pone muy fácil. Después crea una variable de respuesta en formato CN, y voy a enviar un mensaje nuevo nodo creado. Al final, solo escribiré Response No Jason y enviaré esta variable de respuesta así. Eso es. Guárdalo. Ahora, vamos a probar esta API. El punto final APA es nodo ad node. Mensaje de Lash ad C, se crea nueva nota, y lo haré, si voy y ahora escribo lista L et's veo supongo porque sé cuál es el error. Sí. Tengo que cambiar estas cosas. Ahora si voy y enumero, pues vea, tengo esto, que inserté ID, título de ID de usuario. Porque no era único, por lo que estaba dando error. De todos modos, no vamos a ser valores de código duros como este. Pero como puede ver, se insertan datos. Si voy y agrego esto también, y luego con el tercer ID, usaré un ID de usuario diferente, John, y esta será su mi primera nota ficticio como esta, y si escribe agrega también, en ese caso, si voy y escribo lista, entonces las tres notas estarán ahí Ese es Johns y yo ge Johns tienen tres, cuatro k Obviamente, el último también se insertó. Como dije, Este anuncio de slash tiene algo cuando estamos podría haber ingresado dos veces Esa es la cosa. Pero está bien. La API está funcionando a la perfección. Entonces en el siguiente video, trabajaremos en la ruta para obtener notas solo por ID de usuario, obviamente, no queremos esta lista que se vayan a buscar todas las notas de todos los usuarios. No quiero que otros usuarios vean la publicación del otro. También, puedo ver que tengo este tipo de ácaro está bien. Sólo guárdala. Y eso es todo para este video. Gracias. 8. Obtén notas por identificación de usuario: Hola. Bienvenida de nuevo. Entonces, como puede ver, podemos recuperar todas las notas en la ruta de la lista de nodos slash Pero obviamente, solo queremos que el usuario pueda ver sus propios datos en la aplicación. Para ello, pasaremos el ID de usuario como parámetro mientras se llama a la ruta. Entonces cambiemos esta ruta que está después de esta lista, aceptaré una variable de ID de usuario. Eso significa que al llamar a esta ruta, la persona tiene que enviar estos datos. Y luego usaré estos datos para filtrar el hallazgo. Es decir aquí, voy a sólo voy a filtrar donde ID de usuario es igual a solicitar PMs hacer ID de usuario Eso es esto es un parámetro, es decir PMs. Entonces de esta manera, solo se mostrarán los nodos de ese usuario en particular. Así que vamos a probarlo. Sí, solo usaré a Postman para esto. Ahora, voy a escribir rah en el gmail.com. Este es un ID de usuario. Tengo esta solicitud de GAT. Si lo envío, entonces solo veo los dos datos, que son míos ahora están mostrando. Entonces eso significa que esto está funcionando perfectamente. Lo siguiente que tenemos que hacer es que tenemos que instalar un paquete porque cuando enviamos datos vía post request, nuestro servidor de nodos no podrá entenderlo por defecto. Es decir, supongamos aquí cuando hagamos las peticiones de post y en el cuerpo, enviaremos los datos del nodo porque obviamente, aquí solo estamos codificando duro los datos del nodo, pero más adelante, le pediremos estos datos al usuario. Y en ese caso, tenemos que asegurarnos de que nuestro servidor sea capaz de entender esos datos. Para eso, usaremos paquete de transeúnte corporal. Entonces solo usaré Control C para detener mi servidor y escribir NPM install body passer así Convertirá los datos JC, los cuales enviaremos desde el front-end y los hará legibles por nuestro servidor Eso es. Y para que funcione. Tenemos que usarlo como middleware. Aquí en la parte superior. En primer lugar, lo importaré que es body parser es igual a requerir y luego body parser Después de eso, tengo que escribir app e body parcel URL codificada, extended es igual a false, y luego tengo que usar app dot use body parser, Jason Aquí, extendido es falso. Ya que no vamos a enviar ningún dato anidado en el cuerpo. Key no tendrá ningún dato JCN como valores. Es decir, como puedes ver aquí, todos los datos todos los valores son solo cadenas simples. Pero supongamos que tenemos algún tipo de etiquetas, y será una matriz de cadenas. En ese caso, hay que hacerlo cierto, extendido. Entonces, como se puede ver, y luego esta línea apenas la hace va convertir los datos JN para que sean legibles. Eso es Ahora, trabajemos en nuestra ruta add note. Anteriormente, hicimos una ruta para agregar una nota, pero solo estaba almacenando datos ficticios como este Ahora, trabajemos en ello para que podamos recuperar datos del cuerpo de la solicitud, ese es éste y almacenarlos en la base de datos. En primer lugar, tenemos que convertirlo en una solicitud de publicación, en lugar de Y recuerda, este post solicita no se puede probar en el navegador. Entonces usaremos cartero a partir de ahora hasta que construyamos un front end Ahora, Aquí, en lugar de codificación dura, solicitaré el ID de punto del cuerpo del punto. Es decir, los datos estarán en formato JCN, y el ID será su clave Voy a usar esto para simplemente imprimir el valor. De igual manera, se solicitará ID de usuario con cuerpo de punto. Que sea grande. Solicitar ID de usuario. Voy a solicitar dot body dot title. Y el contenido se solicitará el contenido del cuerpo del punto. Bien. Aparte de eso, no lo creo. Esta es la s. Y aquí solo escribiré el mensaje con la interpolación de cadenas Nuevo nodo creado con ID, y luego simplemente voy a escribir solicitud tercer cuerpo punto ID. Simplemente esta es la respuesta. Quiero a Sy. Entonces iniciemos de nuevo nuestro servidor. Y ahora pruébalo. Aquí, antes que nada, se agrega la ruta. Recuerda, esta será una ruta posterior. Ahora para enviar datos del cuerpo, primero da click en este cuerpo y luego e Raw y asegúrate inst de texto, escribes JS porque te enviaremos a Jsta Aquí, escribamos la identificación será 005. Porque en estos momentos hay cuatro notas. Yo lo sé. El ID de usuario será mil título mil título será Duro la nota M. Y el contenido será Este es el contenido. Ahora, vamos a intentarlo. Simplemente lo publicaremos y veremos nuevo nodo creado con ID 005. Y esto es 005, me olvidé. Así que sea t cero, pero está bien. Si voy si escribo lista, y luego escribo le a gmail.com, y va a obtener solicitud Entonces puedes ver el último aquí. Y si voy también a la base de datos y la refresco , ya pueden ver. 001-00-2003, todos los datos están ahí. A ver si sólo puedo cambiar este 210 más y actualizar. Eso es 005. Y si solo lo vuelvo a hacer, a ver. Sólo puedo enumerar solo las notas de R da idea. Entonces, eso es todo. Para este video, nos vemos en el siguiente video. Gracias. 9. Ruta para actualizar y eliminar: Hola, bienvenido de nuevo. Ahora es el momento de crear ruta para actualizar una nota también. Entonces a continuación se agrega ruta. Rite app Tot. Y como es concerniente sobre updation, usaremos put Esta es una solicitud STP a la actualización, y voy a dar el nombre de la ruta es notas Será función de sincronización, que dará respuesta a la solicitud. Bien. Ahora la forma en que lo hacemos es que escribiremos R nota de actualización es igual a un peso entonces nuestro modelo de nota punto. Esta vez vamos a escribir no encontrar, vamos a escribir bien uno y ya ver, tenemos reemplazar eliminar eliminar, y vamos a utilizar actualización así. Y ahora aquí, La forma en que lo hacemos es primero escribimos la condición en este paréntesis o llaves La condición es ID debe ser igual a solicitar ID de punto cuerpo de punto. Por lo que enviaremos la identificación a través del cuerpo. Entonces, ¿qué queremos actualizar? Queremos actualizar el campo title al value request dot b dot title y el campo content al value request dot body dot content. Entonces esta es la condición Esto es lo que campos queremos actualizar y a qué datos y el final, vamos a escribir neu es igual a verdadero. Eso significa que esta consulta devuelve los datos. Si no escribimos neu es igual a true, devolverá los datos anteriores, no los datos actualizados. Por eso, simplemente devuelve los datos actualizados, los cuales serán almacenados en esta variable de actualización. Así que solo recuerda este encuentra uno y actualiza. Esta es la forma de hacerlo, y devuelve los datos actualizados. Ahora, después de esto, crearemos una variable de respuesta. Aquí, vamos a escribir mensaje será Nota se ha actualizado con ID. Y el ID se solicitará ID del cuerpo del punto. Y luego también enviaremos esa nota los datos que se nota de actualización como esta. Eso significa que también estamos devolviendo los datos. Para verlo en la consola. Eso es. Nada más. Resto Json que es respuesta punto Jason y le enviaremos la variable de respuesta, así. Vamos a probarlo como puedes ver aquí. En el ID cinco. Voy a actualizar los datos. Aquí. Será El nombre de la ruta es Lista notas fecha. Se debe poner. Recuerda. ID es 005 título. Este es mi contenido así. No quiero cambiar ninguna otra cosa. Yo solo Y veamos qué pasó. Hubo algún error, creo, pero ¿por qué? No. Yo no cambié. He dejado que vuelva a comprobarlo. Notas, actualización. Entonces tengo que encontrar uno y actualizar ID de cuerpo solicitado. E ID aquí. Bien, la identificación estaba equivocada, obviamente. Yo lo cambio. Ahora si escribo poner C, este es mi contenido actualizado. Y si voy a la base de datos, y si la actualizo, se puede decir que este es mi contenido actualizado. Otros detalles seguirán siendo los mismos. Bien. Por lo que la ruta de actualización también está funcionando. Ahora la siguiente ruta que queremos es la ruta diaria. Para actualizar, utilizamos la solicitud Put ruta put. Aquí usaremos esa eliminación. Eso es ab Dot delete. Aquí puedes ver que tenemos Abdo get post Poner y eliminar. La ruta será notas, eliminar, luego un punch de sincronización. Solicitar respuesta. La consulta será eliminar nota es igual a un peso. Tenga en cuenta que elimine uno. Entonces aquí voy a usar eliminar uno porque obviamente, solo estoy borrando uno, y la condición será ID sho ser igual a solicitar punto b ID Entonces voy a crear una respuesta voy a escribir mensaje es igual a Nota ha sido eliminada con ID. Entonces solicitarás ID de body dot. Y recuerda aquí, no va a estar dando los datos. Simplemente va a escribir, s eliminado está hecho, algo así. Verás en la respuesta, pero esto no devuelve los datos eliminados así. Entonces solo voy a escribir respuesta punto C tiene. Voy a escribir pons aquí. Guardar. Ahora probemos esta ruta también. Y ahora voy a eliminar la ruta actualizada. Éste. Voy a usar delete, antes que nada aquí, luego cambiaré el nombre de la ruta para eliminar. Y aquí, no tengo que mandar todas estas cosas. Sólo si acabo de enviar identificación, entonces también está bien. Si envío todos estos datos, entonces también está bien. Por lo que sólo voy a escribir la n y ver nota ha sido eliminada, reconocido T eliminado Cuenta uno. Entonces esta fue la respuesta del servidor. Y si voy ahí y re entonces esto esté ahí. Esto no debería estar en la base de datos. Vamos a refrescarlo. Veamos 005 está ahí o no. S. El último es 00004. Este es el último. Por lo que todas nuestras rutas han sido escritas y están funcionando a la perfección. En el siguiente video, simplemente organizaremos nuestras rutas de cierta manera. Gracias. 10. Organizar nuestras rutas: H i. Escribimos todas nuestras rutas en el archivo JS del servidor. Si quieres, puedes hacerlo, pero a mí me gusta hacerlo más organizado. Ya que en aplicaciones más grandes, tendrás muchas más rutas que manejar. Como puedes ver, tenemos cuatro rutas para administrar nodos. Esos son estos cuatro. Entonces separémoslos en un archivo diferente. No estoy hablando de esta ruta. Estoy hablando de estas cuatro rutas. Así que primero vamos a encabezar el servidor. Dentro de la carpeta afirma, crea una nueva carpeta rutas y dentro de ella, crea un nuevo archivo Nodo tos. Es decir este será el nodo de ruta. Aquí, antes que nada, inp express es igual a requerir Express entonces aquí, usaremos router de la biblioteca Express, es router Express así y nos aseguramos de exportar este router para que podamos importarlo en el archivo JS del servidor más adelante Después de eso, vaya a Servidores Aquí, servidor JS archivo. Y cortar las cuatro rutas excepto la ruta local. Aquí desde la app dot, este gat post pone y borra, córtalo, ve a estas rutas aquí y simplemente pégalo así. Ahora, en lugar de esta app.gg, usaremos Router Y también recuerda importar el modelo de nodo. Entonces este nodo const derecho es igual a requerir Esto será fuera de los modelos nota así, y aquí solo escribo router Aquí también. Ya que se puede decir que este es nuestro propio archivo de enrutador. Eso es que estamos usando este router router express. Y puede eliminar las notas de la diagonal del nombre del enrutador. Porque esto es común en las cuatro rutas. Usaremos esto en el servidor el archivo JS para conectarlo con nuestras propias rutas. Entenderás, antes que nada, solo quita las rutas que la raya señala aquí también Y aquí también, guárdala. Ahora, finalmente, dígale al servidor el archivo JS que use esas rutas que están escritas en el archivo separado. Aquí, antes que nada, archivo de ruta mp. Aquí lo importaremos aquí. C Nota router es requerir la perdón, esto debería ser rutas slash note Y luego solo lo usaré como una aplicación de middleware punto e. una solicitud que tiene notas de slash en ella, e el enrutador de nodo Entonces, si entiendes eso, agregará las rutas automáticamente Eso es slash notes slash ad o slash notes slash update Entonces cualquier solicitud que venga a esto, es decir tiene los noes slash Detectará, luego iremos y solo veremos, agregaremos llamada, actualizaremos esta llamada o eliminaremos esta llamada así. Esta es una manera más limpia. También. No es importante, pero como todos los datos vienen en JCN, también voy a escuchar Sen respuesta a JCN el mensaje, solo voy a escribir API API funciona así. Y obviamente, ahora no uso estos comentarios. Sé lo que son las peticiones. Sé lo que es la respuesta. Entonces si solo tengo que probarlo, solo voy a escribir terminal y P. Es list s mail.com Será Obtener solicitud. Veamos, y veamos. Ahora también funcionan las rutas. Tengo dos rutas aquí. Tengo dos notas. S. Y si escribo a John, entonces, tengo todas las notas de Juan que son tres y cuatro. Entonces nuestro servidor está terminado. En el siguiente video, desplegaremos este servidor a app ferroviaria para que esté en vivo. Gracias. 11. Código push para Github: H i. Nuestro back end está terminado. Ahora es el momento de implementarlo desde casa local a un servidor remoto que todos puedan acceder a él. Utilizaremos plataforma ferroviaria para el despliegue en lugar de Heroku, ya que no requiere tarjeta de crédito para comenzar Antes de eso, hagamos un pequeño cambio en nuestro código. Tenemos que cambiar el bote. Ya que tenemos la olla dada tenemos que usar la olla dada por ferrocarril en la variable de entorno en lugar de una olla estática. Aquí, solo escribe constante pon dos procesos Env pot y si no está ahí, entonces solo usa 3,000 Y aquí poner así. Entonces este es el único código requerido y aquí puedo usar simplemente puedo usar este puesto así. Bien, la configuración está hecha, solo puedo detener el servidor por ahora. Para desplegar código a, supongo, esto es que estamos usando ferrocarril o render o cualquier plataforma. Primero tenemos que empujar nuestro código a Github. Así que ve a tu cuenta de Github él inicia sesión en tu cuenta de Getab, y tienes que crear un nuevo repositorio Simplemente escribe nuevo entonces lo nombraré notas app API, luego hazlo público. Puedes eliminar el archivo léeme y simplemente dar clic en Crear reposite tres Y después de eso, tenemos que inicializar Git en nuestro proyecto. Aquí, simplemente escribe Git en él, luego escribe Git add dot luego escribe get commit com Solo estoy escribiendo primero commit presentador Después consigue la rama principal. Espero que conozcas el código G. Eso es que estas son solo conseguir líneas, y puedes ver todas estas líneas aquí también. Después simplemente lo copian y lo pegan y finalmente obtienen origen principal. Así. S. Vayamos a verificar si nuestro código es empujado o no. Yo sólo lo refrescaré. Y ver. Tenemos el código back end aquí, entonces, modelos, es. Todo está ahí. Y también, he empujado estos módulos de nodo también, pero no es necesario que sea que se puedan ignorar estos módulos de nodo así como cualquier archivo NV punto. Entonces eso es todo para el primer paso en el siguiente video, iniciaremos sesión en ferrocarril e implementaremos nuestro servidor ahí. Gracias. 12. Implementa tu repositorio: H i. Ahora, vayamos a la app railway dot. Es la aplicación ferroviaria correcta como esta, presentador. Ya puedes ver, trae tu código. Nosotros nos encargaremos del resto todas estas cosas. Entonces esta es la plataforma ferroviaria. A mí más o menos me gusta. También puedes crear una base de datos. Así como subir cualquier código serviit. Simplemente haga clic en Iniciar sesión. Inicia sesión con Github. Y ver. Y porque ya ya inicié sesión con mi cuenta guitub antes Entonces supongo que es por eso que envió directamente aquí sin pedir autenticarse Pero definitivamente necesitarás autenticarte a través de tu cuenta de guitab Entonces después de iniciar sesión Aquí, simplemente cree un nuevo proyecto. Entonces puedes ver que hay un montón de opciones implementar desde Gitab po, implementar una plantilla estática También puedes crear la base de datos aquí porque ver puedes usar Mongo DB aquí Entonces puedes usar ese enlace en tu servidor si no estás usando Atlas. Entonces depende de ti. Voy a simplemente desplegar desde Github po. Entonces ya me he autenticado con mi Github. Pero quizá no veas todas estas cosas. Tienes que configurar la app Github y así. Así que simplemente puedes hacer clic en él y simplemente ingresar una contraseña. Entonces aquí, voy a utilizar esta API de notas. Y también, recuerdo ahí tienes la opción autorizar el acceso a todos los repositorios o a ciertos. Entonces he dado todos los repositorios porque depende de ti. Haga clic en notas, API. Entonces si tienes alguna variable de entorno, puedes agregarlas aquí o después también. Pero solo voy a hacer clic en desplegar ahora. Por lo que se hará dentro de unos segundos. Pero como puedes ver, es muy fácil implementar nuestro servidor. No tienes que hacer tanta configuración y ahora puedes ver que esto es un éxito. Lo último que tenemos que hacer es crear un dominio. Ese es el punto final de nuestra API, que puede ser utilizada desde el cliente para acceder a este servidor. Obviamente, necesitamos algún tipo de URL. Ve a ajustes aquí. Simplemente haga clic en generar dominio. Está generando nuestro servidor API URL y C. Podemos ver nuestra API. Y yo solo hago clic si solo hago clic en él, entonces ahora nuestra ruta de origen está mostrando el resultado. Es API está funcionando. Como recuerdas, esta era la ruta de origen. Ahora, probemos esta APA también en cartero. Yo sólo lo voy a copiar. Saquen al cartero. Aquí. En lugar de este anfitrión local, usaré el Voy a usar Notas. Al principio, tengo que escribir HTTPS, y después columna. Ahora, solo consigue todo para Ravel, envía y mira, aquí tenemos las rutas Ahora si trato de agregar una ruta y darle un post, y creo que esta fue eliminada y este es el contenido. Creo que 005 no está ahí. Vamos a publicarlo. S, nuevo nodo creado. Y ahora ilist@gmail.com y consígalo dale Obtener solicitud. Entonces puedo ver mis últimos datos de nodo aquí. Eso significa que nuestra API se ha implementado con éxito y está funcionando perfectamente. Entonces todo el código del lado del servidor está hecho. En el siguiente video, comenzaremos a trabajar en nuestra aplicación de aleteo Gracias. 13. Crea un proyecto de Flutter: Hola, bienvenidos de nuevo a un nuevo video. Ahora es el momento de que trabajemos en nuestro front end. Lo primero que hay que hacer es crear un nuevo proyecto de flutter. Estoy asumiendo que ya tiene instalado el sistema Flutter S DCNO Ahora, como pueden ver, ya tenemos este back end. Ahora aquí, eso está en la app de Notas abre una terminal. Abra una terminal. Y asegúrate de tener instalado el aleteo. S. Cuando escribo versión flutter, puedo ver la versión Flutter 3.10 Ahora aquí, he abierto el terminal aquí porque ya creamos el desarrollo de back end en esta carpeta. Aquí solo voy a escribir carta, crear front end así. Vamos a crearlo. usar cualquier nombre de proyecto o cualquier ubicación. Yo sólo lo prefiero de esta manera. Y después de esto, puedes ver el front-end aquí, eliminaré la carpeta windows windows, luego web, luego Linux, luego macOS, y luego probaré. Ya que no voy a estar construyendo para esas plataformas. Ahora abre este proyecto en código. Como este front end. No ejecutes la app ahora. Simplemente iré y cambiaré el nombre de la aplicación en este archivo principal de manifiesto de Android. Espero que sepas que aquí, solo voy a escribir notas app. Entonces, cada vez que construyas esta aplicación en tu móvil, el nombre de la aplicación será Notes app en lugar de front-end. Y también puedes hacerlo capital, también puedes darle espacio. Depende de ti. Este era solo el nombre. Ahora. Vamos a crear una página de inicio porque obviamente sé que no voy a usar este código ficticio Dentro de ib, crear una carpeta conocida como páginas, y dentro de ella, crear página de inicio punto punto. Ahora, crearemos un presupuesto completo estatal para pantalla de inicio con una barra de aplicaciones y un botón de acción flotante por ahora. El primero de todos, importar paquete de material, luego crear un widget completo de estado, nombrarlo página de inicio. Entonces aquí, voy a devolver un andamio luego la app. Todos estos son widgets de aleteo. Estoy asumiendo que tienes los conocimientos básicos de aleteo. La app de notas de texto Entonces el título centrado es igual a true. Después de la barra a, solo escribe el botón de acción flotante, luego el botón de acción flotante aquí al presionar, déjalo vacío por ahora y en el icono const hijo los iconos agregan Así, guárdala. Después en el archivo d principal, retire esta página de inicio ficticia Ese es el predeterminado. Entonces también eliminaré estos comentarios. Sólo lo estoy escribiendo aleteo de notas. Y aquí en el hogar. Voy a escribir la página de inicio. Bien, guárdala. Ahora, voy a iniciar el emulador Pixel five. Puedes usar emulador, o también puedes conectar tu propio dispositivo real porque sé que este estudio de Android es un gran software y también puede retardar tu sistema. Después de esto, simplli en ejecución, empieza a depurar. Tomará tiempo, espéralo. Pero ya sabemos que nuestro servidor, es decir el back end está funcionando perfectamente. Simplemente conectarlo con el front-end es relativamente fácil porque la mayor parte de la lógica principal estaba en el lado del servidor. Estará ahí. Entonces si veo esta app ferroviaria, asegúrate de conocer más sobre esta plataforma ferroviaria porque definitivamente es muy útil. Tienes tantas cosas que es producción, desarrollo, también puedes dar ambientes. Porque con la práctica, entenderás y asegurarás de que este plan de puesta en marcha tenga un límite. Pero obviamente, cuando eres principiante, no podrás agotar este límite porque esto es solo para fines de prueba. Puedes desplegarlo y mostrar tus proyectos ante los empleadores. Depende de ti. Bien. Entonces aquí creo que el servidor está funcionando y vemos, tenemos la app de notas. Simplemente eliminaré este banner de depuración. El show debug banners cae. Bien. Entonces eso es todo para este video. S en los próximos videos. Gracias. 14. Crea un modelo de Note: En nuestra app, estaremos tratando con datos de nodos. Es muy importante tener un modelo para eso. Usamos modelos para dar una estructura predefinida a nuestros datos en lugar de simplemente usarlos todas partes como pares de valores clave de estación. Así Inside Lib, crea una carpeta llamada models, y dentro de ella crea un nuevo archivo dot Note dot dart. Ahora, vamos a crear una clase modelo para nodo. Y esto tendrá todas las propiedades, que ya hemos definido en el esquema Mongo DV Node, es decir ese archivo JS Aquí, solo comienza con ID de cadena. Cadena ID de usuario título de cadena lo siento, i título de cadena. Contenido de cadena Datet agregado crear un constructor Tenga en cuenta Eso es correcto. Este ID de punto, este ID de usuario, este título este contenido y este punto agregado. Puedes ir al esquema del nodo y solo ver que tenemos estas propiedades ahí también. Ahora, trabajemos en la serialización de JCN. Vamos a crear punchon para convertir los datos JCN provenientes de la base de datos a este objeto nodo, así como de este objeto al formato JS, que es entendido por Entonces aquí simplemente a la derecha. Fábrica. Tenga en cuenta que a partir de un mapa como este, estaremos enviando un mapa de datos, que será un mapa dinámico de cadena luego devolver un objeto de nota. Aquí tenemos que pasar los valores ID del mapa ID. Así que asegúrate de que estas claves sean las mismas que en DV. Es decir, si quieres saber estoy hablando de estas claves aquí. ID de usuario título estas claves. Esto también se menciona en nuestro esquema. Simplemente no quiero que cometas ningún error tonto aquí. ID de usuario Mapa ID de usuario. Title Map, este será título. Mapa de contenido. Contenido. Fecha añadida. Solo recuerda, si escribimos fecha agregada así, no va a funcionar porque este será en formato string o equenc adyacente, pero queremos formato de fecha y hora Escribiremos p. es decir, lo pasaremos. Analizaremos esta fecha al formato datetime, e intentaremos pasar para que devuelva null en caso de excepción en lugar de error Es decir, si por error, la fecha no está ahí, entonces simplemente devolverá nulo. No lanzará ninguna excepción o puedes decir detener nuestra aplicación. Y como se puede decir, esta es etiqueta nula. Al menos estaremos seguros de esa manera. Al menos la aplicación no se bloquea. De esta manera, los datos se convierten de JCN a este objeto, y ahora se crea otra función Que esto devolverá un mapa de cadena, mapa dinámico dos, y esto devolverá un mapa. Tendrá ID como ID ID de usuario como ID de usuario como título y luego fecha de adición. Ahora la fecha agregada, que enviaremos, estará en el formato de fecha y hora, pero ahora tenemos que convertirla nuevamente al formato de cadena, que es entendido por la base de datos. Así que solo escribe agregado y conviértalo a 2i86 01 string. Así que recuerda, nuevamente estamos convirtiendo a cadena a partir de la fecha y hora. Este es un concepto sencillo. Entonces estos son nuestros datos de nota. Sólo guarda todo. Y antes de seguir adelante, me gustaría deteneré primero la aplicación. Y voy a instalar algunas dependencias. Utilizaremos al proveedor como la administración estatal en nuestra aplicación. El otro paquete será UUID para crear ID únicos para nuestro usuario Entonces necesitamos paquete SDTP para llamar a la API. Entonces o puedes ir al sitio pub punto y buscarlos y pegarlo en la sección de dependencias en el archivo PUPS DOML, o puedes en el comando simplemente Pub add UUI solo puede comenzar con proveedor UUID y HTTP y presentador Entonces esto lo instalará todo. Veamos que hay algún error o no. En el archivo pups dot Yamal, puedes ver que tenemos proveedor UUID y Entonces eso es todo para este video. Gracias. 15. Interfaz de usuario de la página de inicio: Hola. Volvamos a ejecutar nuestra aplicación. En este video, trabajaremos en la interfaz de usuario de la página de inicio. En esta página, mostraremos todas las notas de ese usuario. Primero vamos a crear una interfaz de usuario básica. Aquí, tenemos la barra a, tenemos el botón de acción flotante. En el cuerpo, comencemos con un área segura vigid. De manera que si hay alguna muesca o algo relacionado con el dispositivo, será en la zona segura. Entonces usaremos grid view dot builder. Entonces, si quieres, puedes usar la vista de lista. Pero aquí, como es nota, la vista de cuadrícula se verá mejor. Entonces aquí en el delegado de cuadrícula, que escribir const astilla grid delegado con fix cross axis count así Sé que es muy confuso, pero aquí simplemente escribe también. Y este código simplemente significa eso en la pantalla. Sólo tendremos dos elementos en el horizontal. Entonces ya verás cuando tengamos lista esta UR. Entonces como sabes, en lista, también tenemos el conteo de artículos. Ahora mismo, solo usaré un conteo ficticio. Hay cinco, luego en el constructor de artículos. Escribir contexto e índice. Aquí voy a devolver el color del contenedor serán colores punto azul por ahora y margen será con borde en conjuntos los cinco. Y punto y coma aquí. Reinicia o puedes guardarlo. Y ver. Esta es la vista de cuadrícula, y solo hay dos elementos en la horizontal o en una fila. Entonces, si le das tres, entonces esto va a estar arriba, pero obviamente no quedará bien porque es un dispositivo móvil. Tiene un pequeño Entonces esto es solo la interfaz de usuario. Ahora, obviamente, necesitaremos una página donde el usuario pueda agregar notas. Dentro de las páginas, crea un nuevo archivo, agrega nueva nota al dardo. Mp material, luego crear un widget de estado agregar nueva nota. Bien. Aquí simplemente a la derecha dar un andamio. Un bar. Déjalo por ahora. En el cuerpo, tener un área segura, y dentro de la zona segura, tener una columna. Y los niños simplemente lo dejan vacío por ahora. Bien. Navega a esta página de agregar nuevas notas desde la página principal. Tenemos este botón de acción flotante en la página de inicio aquí. Simplemente escriba navegación del contexto, empuje la ruta de la página del material. Entonces en el constructor, si contexto aquí y añadir nueva nota. Bien. Y simplemente voy a dar una nueva propiedad de la misma. Hay diálogo a pantalla completa a dos. Entonces esto es simplemente una propiedad de la ruta de la página material. Si no quieres, puedes eliminar esto también. Entonces lo que hace es, si hago clic en más, entonces tiene esta cruz en lugar de una flecha hacia atrás. Entonces es como un cuadro de diálogo a pantalla completa en lugar de una página. Eso es lo único que hace este código. También tenemos la pantalla de agregar nuevas notas. Trabajaremos en la interfaz de usuario en el siguiente video. Gracias. 16. Añadir una interfaz de usuario de nota: Trabajemos en la página de agregar nueva nota. Entonces aquí necesitaremos campos de texto para que el usuario ingrese el título y el contenido de la nota y un botón para guardarlo. Entonces, antes que nada, comenzaré por tener controlador de edición de texto. Sé que habrá controlador de título. El controlador es igual al controlador de cosa tex. Otro será el controlador de nodos. Es decir, este será el nodo real. Tengo los controladores entonces En el cuerpo. Vamos a tener un campo de texto. Dentro de la columna, el controlador será el controlador de título. La decoración será la decoración de entrada constante en el texto como borde de título como borde de entrada ninguno. Después después de la decoración de entrada. Vamos a tener algo de estilo. El estilo será constante textil textil. Tengamos el tamaño de fuente como. No como pool de fuentes. Bien. Y luego quiero el enfoque automático. Enfoque automático a ro. Vamos a guardarlo. Si voy y si hago clic en el anuncio, puedo ver que el enfoque automático está ahí y ese campo de título está ahí Voy a darle un poco de relleno también a la columna. Envuélvala con relleno y aquí será simétrica horizontal 20 vertical diez Yo sólo lo guardaré y veremos. Se ve decente. Este es un título, el siguiente campo de entrada que es el siguiente campo de texto será texto relleno de texto aquí. El controlador será controlador de notas. Líneas máx. Yo le voy a dar null para que el usuario pueda presionar enter y bajar eso es que puede tener múltiples líneas y luego estilo estilo será constante textil en tamaño es 20, luego decoración con entrada decoración en texto nota borde entrada frontera. Guárdalo. Ahora, si hago clic en él, tenemos el título, tenemos la nota. Pero si hago clic en la nota aquí, entonces solo está en foco. Si hago clic en cualquier parte de esta área restante, no está enfocada. Para hacerlo de tal manera, podemos apenas la segunda nota con ampliado. Ampliado así. Y ahora, lo que pasa es, si vuelvo y si vuelvo a la pantalla y hago clic en cualquier parte de la pantalla, ahora tenemos la nota aquí porque está tomando todo el espacio aquí. Porque obviamente, quiero que el título sea competivamente más pequeño que la propia nota Y si hago clic en enter, entonces tenemos varias líneas. Lo único que queda es un botón seguro, que voy a dar en la barra de aplicaciones. Aquí, tener acciones entonces un botón de icono al presionar estará vacío por ahora. Y luego icono será const icon. Nota de iconos agregar color colores punto verde, talla 30. Guárdalo. Entonces este ícono estará en la parte superior C. Tenemos el ícono de guardar. O simplemente puede guardarla o regresar. Y asegúrate de disponer de esos controladores de edición también. Controlador de edición de texto dot dispose. Nota controlador punto disponer así. Que cuando volvamos y volvamos a la página, habrá nueva instancia de los controladores. Entonces eso es todo para esta interfaz de usuario. En el siguiente video, trabajaremos en la creación de un proveedor. Gracias. 17. Creación de proveedores de notas: Hola, bienvenido de nuevo. Ahora es el momento de manejar los datos. Para ello, tenemos que crear proveedor para los nuevos datos. Así que dentro de la carpeta Lip, crear una nueva carpeta proveedores y dentro de ella, crear un nuevo archivo. Proveedor de notas punto punto. Entonces hagámoslo. En primer lugar, importar material para que podamos usar ese proveedor notificador de cambio, luego importar modelos y luego no agrio Bien. Bien. Ahora vamos a crear un proveedor de notas de clase extiende proveedor de notificación de cambio. Entonces tendremos una variable, que consistirá lista de todos los nodos Nodos iguales a lista vacía por ahora. Este año, vamos a buscar notas de APA más adelante. Ahora mismo solo lo haremos a nivel local. Después crea una función para agregar una nota. Aceptará una nota y simplemente agregaremos esa nota en la variable. Y luego llamar a avisar a los oyentes así. Es un proveedor muy sencillo. Entonces espero que sepan que tenemos que registrar a nuestro proveedor en el archivo principal. Aquí, envuelva la aplicación de material con igd y escriba proveedor Entonces tenemos que mencionar a los proveedores. He usado múltiples proveedores porque supongamos que en el futuro quieres agregar algunos proveedores más y todo, entonces puedes hacerlo. Usaremos el proveedor del notificador de cambios luego los contactos, y el nombre de nuestro proveedor es notas Proveedor así. Entonces solo guárdala. Y empezamos. Entonces vamos a crear una función dentro, agregar nueva nota, donde vamos a crear un modelo de nota y enviar a la función proveedor. Aquí es simplemente escribir agregar nueva nota. Ahora, antes que nada, vamos a comprobar que el título está ahí. Yo controlador de título, texto Tm está vacío, entonces vamos a mostrar un snack p cuidadoso mensajero de contexto, que muestran snag p, snag pow widget en el contenido, es simplemente título no puede Así, hazlo constante y a partir de aquí simplemente regresa. No quiero que se ejecute el código Billow. Si el título está vacío. Entonces si no está vacío, entonces voy a crear una instancia de nota que es nueva nota, es anotar. Y aquí voy a pasar el ID de datos. Voy a usar el paquete UUID para crear ID únicos para simplemente const UU ID como esta versión uno Por lo que creará identificaciones únicas como esta. Entonces ID de usuario, por ahora, estoy dando algunos datos estáticos. Entonces supongamos ajo lag val por ahora. Esto es sólo un maniquí. Posteriormente, utilizaremos las preferencias compartidas. Pero ahora mismo, solo pruébalo. El título será el texto del punto del controlador del título, y el contenido será texto del controlador de notas y agregado será d punto así. Este es nuestro modelo de nodo. Después de esto, simplemente usaremos el proveedor que se proporciona fuera de contexto. Aquí qué proveedor necesitamos. Necesitamos nodos Proveedor de nodos. Y entonces como esto está fuera de la función bill, vamos a escribir Escucha, son las caídas porque no quiero que escuche ningún cambio. Porque si estaba dentro de la construcción, entonces puede rebelarse. Pero obviamente, esto está dentro de una función, y llamaré a la nota add y enviaré el nuevo valor de nota así. Entonces volveré a mostrar messenger de context show snag bar snack bar Y el contenido se añadirá con éxito. Y luego dejaré que Navigator haga pop así. Y luego llamar a esta función dentro del botón icono aquí. Éste. Simplemente llame a una nueva nota. Entonces eso es todo para este video. En el siguiente video, vamos a trabajar. Trabajaremos en esta página de inicio no TY. Gracias. 18. Mostrar notas en la página de inicio: Hola. Entonces ahora podemos agregar un nuevo dato. Así que vamos a trabajar en la interfaz de usuario de notas, que está en la página de inicio donde mostraremos todas las notas. Antes de eso, solo lo haré ya que el nombre del archivo es proveedor de notas, lo haré notas proveedor no nota. Y luego aquí, serán notas, y luego aquí, serán notas. Eso es. Es No es algo muy importante, pero es como ya que el nombre del archivo era notas proporcionadas. Vayamos a la página principal aquí. Entonces antes que nada, escribiré a mi proveedor. Aquí notas proveedor señala proveedor igual a proveedor de contexto, y es proveedor de notas. Y tengo que escribirlo dentro de la factura. Así. Entonces en el niño de zona segura aquí, primero voy a sacar condicionalmente un texto si no hay nota disponible Aquí solo voy a escribir notas proveedor punto está vacío. Después mostrar const center. Niño centrado. Y en el texto, todavía no escribiré notas. Así, eso es todo. Para que el usuario anote que no hay notas disponibles, y puede agregarlo. Luego en la vista de cuadrícula constructor de puntos. El recuento de artículos será notas proveedor notas hacer n. luego en el constructor de artículos. En primer lugar, voy a tener el modelo de nota, luego escribir nota actual es igual a notas proveedor notas y el índice. Entonces, obviamente, es vista de cuadrícula, los nodos individuales estarán aquí. Eso es obviamente del cero al índice a cero, uno, dos así. Entonces en el contenedor, quita el color azul aquí porque esto era solo un maniquí Entonces el margen y por debajo del margen derecho dan algunos acolchados contras los diez luego dan decoración caja decoración borde borde todos. Entonces el color del borde será colores hacer gris, W dos luego dentro de caja, decoración frontera radio frontera radio hacer circular, darle diez. Bien. Entonces el hijo del contenedor. Tenemos que salir de la decoración de la caja de borde, y luego aquí, niño será una columna. La alineación del eje transversal será la alineación del eje transversal. En los niños, vamos a mostrar en lo más alto ese título del título del nodo. Título de nota vigente, y no es nulo. Estilo constante textil. Peso de la fuente peso de la fuente punto negrita tamaño de fuente 20. Entonces Max líneas le dan uno, esta es la propiedad de ese texto, y luego el desbordamiento de texto que es el desbordamiento debería ser desbordamiento eclipse de punto. Eso simplemente significa peso, voy a mostrar En primer lugar ver todo el código aquí. Entonces Max líneas uno, es decir, solo quiero que el título esté en una línea. Supongamos que el título es muy grande, así que no quiero que sea en dos líneas o tres líneas. Que sea una línea, y el texto restante será eclipse Elipses, perdón Eso significa punto punto punto como este. Por lo que no va a quedar muy mal. Entonces después de este texto, dar algunas obras de tamaño y altura siete. Entonces tengo que escribir la descripción. La descripción nuevamente es un texto gid current note content. No es nulo, entonces textil aquí otra vez, talla, dale 18, colores de color hacen gris, lo hacen 700. Estos son sólo unos estilismos. Obviamente, puedes dar tus propios estilos para que se vea bien. Entonces después del estilo dentro del texto, nuevamente, escribe Max líneas 24 aquí esta vez, y luego desbordar para desbordar eps. Ahora vamos a probarlo H Acabo de guardar todo. Y ahora mira, aquí no hay notas todavía. Y yo escribo una nota nueva, mi primera nota y escribo. Este es un contenido ficticio. Hagámoslo grande para que desbordamiento de texto funcione y lo hagamos elipses. Espero que esto funcione. Y si presiono guardar, entonces veo nodo con éxito, entonces este es un contenido ficticio y ahí está la elipsis Y si lo hago, Max líneas a cinco. ¿A ver qué pasa? Bien. Ahí está el desbordamiento. A las cuatro. Bien. Entonces esto se ve bien. Tenemos el título aquí en negrita, tenemos el texto. Y recuerden, ahora mismo, esto no es guardar en la base de datos. Es justo en el local. Entonces, si lo actualizo, esos datos desaparecerían. Y ahora mismo, mi enfoque es sólo trabajar en el proveedor. Posteriormente, conectaremos el servicio API con ese proveedor. Ahora, obviamente, podemos agregar datos. Pero también tenemos que crear función para actualizar y eliminar nota también. Ir a las notas proporcionadas aquí y abajo agregar nota, escribiré nota nula. Esto hará una pregunta por los datos del nodo. Ese es qué nodo se actualizará. Y ahora, tengo que actualizar ese valor. En primer lugar dentro de esta lista de notas porque ésta se mostrará al usuario. Tengo que conocer el índice de esta nota aquí en esta lista. Voy a escribir en índice de nota es igual a notas índice de entonces elemento notas donde donde sea que encuentre el elemento ID igual al nodo que se está enviando, luego obtener el índice. Entonces lo que quiero decir con esto es, recorrerá esta nota y verificará todas las notas ID a esta identificación. Y si lo consigue, entonces aquí vamos a obtener el índice que se supone en la posición dos. Entonces solo escribiré notas que es esa lista índice de nota y la cambiaré a nuestra nueva nota actualizada, luego escribir notificar a los oyentes Esto es sólo una lógica básica. Entonces obtendremos el índice y cambiaremos ese valor de índice en esta matriz a esta nueva variable de nodo. Del mismo modo, haremos algo por la función de nodo retardado. Obtendré el índice de esta nota y luego simplemente escribiré esa lista de notas o A y luego eliminaré el anuncio, y eliminaré este índice, y luego notificaré a la listess Por lo que esto actualizará la interfaz de usuario. Y espero que hayan entendido que esta actualización y eliminación es temporal ya que solo lo estamos haciendo a nivel de app. Entonces eso es todo. En el próximo video, trabajaremos crearemos una pantalla para editar una nota también. Gracias. 19. Trabaja en la página Editar notas: Hola. Bienvenido de nuevo. En este video, trabajaremos en la edición de una nota. Entonces lo que quiero es que cuando el usuario toque alguna nota, se le enviará a la página de edición donde podrá actualizar así como eliminar nota de muerte. Así que para eso dentro de las páginas, crear un nuevo archivo editar nota hacer. Copia y pega todo el código de una nueva nota. Y después de eso, haremos algunos cambios. Cópialo y pega aquí, cambia el nombre del widge que es dit note así Entonces como esto editará una nota, tenemos que aceptar datos de nota en el constructor. Aquí, escribiré nota final. Nota y este será un parámetro obligatorio. Entonces esta nota. Y después asignaré los valores de nota a este controlador de edición de texto. Aquí en el en su estado, voy a escribir title controller text is equal to widget title and I know this is not null and similar t is equal to widget note not content. Entonces espero que lo entendieras. Supongamos que hay este título, mi primer nodo, mi primera nota. Entonces cada vez que vayamos a la página de edición, ya se llenará dentro del campo de texto. Y luego después podemos editarlo. Ahora, no necesitamos esta función de agregar nueva nota. Aquí, vamos a crear una función para actualizar una nota. Vide Entonces si el texto del controlador de título do trim está vacío de manera similar como antes No lo vamos a permitir, así que vamos a tc messenger de contexto que enganchar par Y el texto será título no puede estar vacío, y volveremos de aquí. Esto será constante si todo está bien, lo que haremos es cualquier texto actualizado que tengamos. Vamos a asignar al nodo, tenemos en constructor constructor para que no actualicemos los otros rellenos. Otros rellenos significa ID, ID de usuario fecha. Estas cosas ya están dentro de esta variable, cierto. De esa manera, no tenemos que actualizar eso. Ahora solo trata de entender lo que voy a hacer es widget dot title. Lo cambiaré a title controller dot text, Y no necesito esto entonces peluca punto nota do contenido es igual a note controller dot text. Entonces llamaré a provider of context entonces el proveedor notes listen será false, y llamo a la función update y envío la nota que está en el constructor, pero ya la hemos actualizado. Y supongamos que el usuario no cambia el contenido. Entonces también no tenemos que preocuparnos por. Ya que en el constructor, hemos puesto dentro del texto ya que es que ya estaba dentro de esta variable. El mismo se actualizará de nuevo. Eso es. Entonces usaré estos mensajes y solo escribiré título actualizado con éxito. Y luego solo escribiré navigator dot POP esto también creará un nuevo botón dentro de la barra de aplicaciones para eliminarlo. En primer lugar, estas notas anuncio, podemos hacerlo. Voy a cambiar el icono, solo revisan círculo y le asignan la función actualizar nota así, ¿de acuerdo? Por encima de este botón. Voy a crear otro botón que es botón icono. El icono será con iconos de icono, do delay color colores rojo. En la prensa, lo que quiero es, simplemente voy a llamar al proveedor función de notas de contexto siempre que la nota de retraso, y voy a enviar widget punto nota como esta. Y además, no quiero escuchar los cambios porque solo quiero llamar a esta función. Entonces necesito este caful y navigator dot pop. Yo sólo escribiré. Y no debería ser título. Deben ser nota y ser nota eliminada con éxito. Eso es. Eso es todo. Ahora tenemos que navegar a esta página desde la pantalla de inicio. Así que ve a Pantalla de Inicio. Dentro del constructor de artículos. Aquí, envuelva este contenedor con un pozo de tinta y escriba en tap navegador de contexto, ph luego ruta de página de material. Enviaré a la página de edición de nota con el valor de nota y el valor de nota es la nota actual aquí. Como antes, escribiré diálogo a pantalla completa. Eso es. Así que guarda todo. Por qué esto está en ese grano. No queremos el UUID. Vamos a probarlo. Quisiera mi primera nota. Voy a escribir este es mi viejo contenido. Guárdalo que si hago clic en él, mira, y este era el snack bar estaba antes de snack bar. Si hago clic en él, tenemos una eliminación y la actualización. Entonces lo voy a actualizar a. Este es mi nuevo contenido, presiona guardar y decir, este es mi nuevo contenido. Si vuelvo a hacer clic en él y lo borro entonces, no lo elimino con éxito, y ahora es swing sin notas. Entonces eso significa que todas las funcionalidades están funcionando correctamente con proveedor en el nivel de aplicación. En el siguiente video, finalmente integraremos Mongo Db para que cualquier dato que venga en la aplicación provenga de una base de datos real. Gracias. 20. Función para agregar nota: Hola. Bienvenido de nuevo. Entonces, hasta ahora, todas las funcionalidades funcionaban solo a nivel de app. No estábamos almacenando ningún dato en Mongo DV. Así que ahora es el momento de integrar Mongo DB API también. Aquí en la carpeta lift, crea una nueva carpeta de servicios y dentro de ella, crea un punto de servicio API de archivos como este. En primer lugar, necesito el paquete HTTP. Lo voy a dar como HTTP, entonces necesito modelos Note model. Ahora, cree un servicio API de clase. Aquí, lo primero que queremos es la variable estática. Es una URL base de cadena constante estática . ¿Cuál es esta URL base? Ese es el dominio de Railway App. Vamos y aquí en la app ferroviaria, tenemos el dominio, esta copia pegarlo aquí. Pero asegúrate de agregar la columna HTTPS aquí, y luego la base de datos, lo siento, la base de datos, la ruta. Esa es la ruta de los nodos. Ya que solo tenemos esta ruta, eso la menciona en el BaseRL. Pero obviamente si tienes múltiples rutas, no vas a hacer esto Ahora, crea una función para agregar un nodo. Entonces lo estoy haciendo estático para que podamos llamar a esta función sin crear un objeto. Por lo que será amplio en el futuro. Nombrarlo agregar nota. Será función cantar, y pasaremos aquí el modelo de nota. Ahora bien, lo primero que necesitamos es el URI, escribimos request URI, a URI espero que sepas cómo usar el paquete STP URI será e la URL base. Usa la URL base y agrega. Esta era nuestra ruta. Si lo recuerdas en el lado del servidor, entonces voy a escribir R respuesta es esperar HTTP para agregar, tenemos que usar la solicitud de post. Entonces tenemos que enviar la URL, ese es el URI. Y ahora vamos a enviar el cuerpo en mapa, y sólo vamos a escribir nota la función de dos mapas. Si recuerdas en la nota, tenemos este mapa dos, que automáticamente lo convertirá en un mapa. Así es como vienen manejan estas cosas. Espero que entiendas esta conversión de objeto a mapa. Entonces tendremos el cuerpo de respuesta, vamos a escribir el código es igual a JC el código, y luego rese cuerpo Re cuerpo. Simplemente voy a imprimir el cuerpo que dice para debo, lo contrario, no tenemos que hacerlo en producción. Ahora, llamemos a esta función en el proveedor de notas. Después de esto notificar a los oyentes, llame al Mongo D V, es decir, el servicio API, la nota add Eso es. Ahora bien, podrías estar pensando por qué he escrito esta línea al final. Porque esto actualizará la interfaz de usuario en cuestión de segundos o instantáneamente. Y en segundo plano, los mismos datos serán enviados a la base de datos. Entonces obviamente, también será una buena experiencia para el usuario, porque no tendrá que esperar porque podrá ver esa nota instantáneamente en la página principal. Y si vuelve más tarde, entonces más adelante significa, obviamente, esto sólo tomará 5 segundos, pero supongamos que a 10 minutos vuelve a abrir la app, entonces las notas en la página principal serán recuperadas de la base de datos, y todas las notas serán iguales Solo recuerda, obviamente, puedes hacerlo en la cima también, pero eso no tiene ningún sentido. Ahora hagámoslo. Intentemos agregar una nota. Escribiré aprender Sin silla. Mostaza. Había algo de aire para el teclado, creo. Veamos qué pasa. Por eso prefiero la mayor parte del tiempo dispositivos físicos. Nodo elegir. Podemos guardar y ver en el terminal nuevo nodo creado con ID este. Entonces esto viene del servidor. Espero que recuerden que esta fue nuestra respuesta. Entonces eso significa que esto es esto se almacena en la base de datos. Entonces eso es todo para este video. S en el siguiente capítulo. Gracias. 21. Funcionalidades para actualizar y eliminar: Hola. Bienvenido de nuevo. Del mismo modo, como agregar nota. Vamos a crear una funcionalidad API para actualizar nota también. Vaya al servicio API y a continuación agregue nota. Simplemente escribe táctica. Futuro. Esto evitará también. Nota de fecha, hazlo una sincronización. Esto aceptará una nota. Y ahora, nuevamente, crear la solicitud URI URI es igual a URI punto p el URI base luego la actualización. Entonces R respuesta es esperar TTP. Esta vez, tenemos que usar el put B en el servidor también hemos dado el put. Aquí mismo, tenemos que sustituir URI y cuerpo a anotar para mapear. Entonces de manera similar tener este decodificado enviar hacer cuerpo y enviar una cadena. Para borrar, sólo voy a copiar esta función, pegar. Este será el nodo de eliminación. Están justo aquí. Se borrará. Su solicitud de TP se retrasará. Y eso es todo. Y recuerda, si quieres, puedes enviar un objeto de nota como este o así como solo el ID. Depende de ti porque de este mapa, el servidor extraerá el ID por sí mismo, o si envías solo ID, entonces también está bien. Depende de ti. Llamemos a esta función, vayamos al proveedor de notas, y de manera similar al final, escribamos la nota de fecha del servicio API y escribamos el servicio API no retrasar nota como esta y guardarla. Eso es lo que va a pasar si voy aquí y escribo Dummy actualizado y da click en esto Ver. Nota se ha actualizado con ID, y Dummyd Eso significa que se ha actualizado en el servidor. Recuerda, si lo actualizas, entonces estos datos serán eliminados porque no estamos recuperando notas en este momento Esto es solo en el nivel de la aplicación. Pero al menos se puede ver que está funcionando. Por lo que nuestra actualización y eliminación de APA también está funcionando. En el siguiente video, escribiremos la funcionalidad para recuperar todas las notas y crear una función que sea mostrar todo aquí. Gracias. 22. Función para obtener notas: Hola. Bienvenida de nuevo. Es hora de que vayamos a buscar todos los nodos en la pantalla de inicio para que si reiniciamos app, entonces también se puedan ver los datos Cree una nueva función en el servicio APS do file aquí. Escribamos futuro estático. Y esto no volverá nulo. Esto devolverá lista de nodo. Buscamos nodos. Y le enviaremos el ID de usuario aquí. Entonces queremos el URI, por lo que es request URI e2ip base URI list Recuerda, este es el ID de usuario. Tenemos que enviarlo en la URL solo porque será solicitud de GT. Nosotros R respuesta es igual a un TPG entonces solicitar URI, así No tenemos que mandar nada más. Entonces escribir lista decodificado es para Json decodificar respuesta a ese cuerpo Sabemos que será una lista. Y luego solo devuelven el mapa de puntos decodificado. Voy a convertir todos los nodos en el objeto nodo. Nota del mapa, tenemos que mandar la nota y esto es a mis. Hay que conocer la serialización de JC para estas cosas. Entonces espero que estos sean los conceptos de aleteo. Pero solo entiende que estamos convirtiendo el mapa en un objeto de nota y lo devolvemos. Entonces tenemos que crear una nueva función en la clase de proveedor también para llamar a esto fetch notes Ir al proveedor de notas aquí. Y vamos En primer lugar, voy a tener una variable booleana para que la pantalla de inicio muestre un indicador de carga Si está cambiando, entonces voy a evitar que los nodos de parche sean sincronizados. Será lista de notas acuñadas que el servicio de API de espera haga obtener notas. En este momento, voy a la ID de usuario. Entonces esos datos estarán llegando en orden ascendente ya que no he mencionado nada en el sitio del servidor. Entonces lo que voy a hacer es, voy a simplemente escribir nodos es igual a buscar nodos punto invertido punto dos lista Así que acabo de invertir todo dentro de él y luego convertir en lista de nuevo y asignar eso a nuestro este nodos viables. Para que se pueda ver hasta el front-end. Recuerda, si no escribes esta línea, entonces también funcionará, pero será en orden ascendente. Por lo que las últimas notas no estarán en la parte superior. Puedes intentarlo. Entonces voy a añadir facilidad de carga es igual a falso y notificar a los oyentes Y voy a llamar a este parche nodos divertidos en el constructor de este proveedor de Nodos. Entonces, cuando se llame a su instancia, llamará a esta función de nodos, y nosotros nuestra pantalla de inicio se poblará con los últimos datos de nodos. Ahora por fin, ve a la pantalla de inicio, aquí, en el cuerpo Simplemente voy a escribir notas proporcionadas si se está cargando, entonces así const centro niño indicador de progreso circular Eso es. Ahora, vamos a ver. El indicador circular de progreso está ahí. Sí. Ver, tenemos esta nota, que viene de la base de datos. Entonces si lo vuelvo a refrescar, entonces también esta nota está ahí. Entonces eso significa que nuestra API también está funcionando perfectamente. Nuestro front end y back end ahora están conectados. Entonces lo último que haremos es en el siguiente video, usaremos preferencias compartidas para almacenar el ID de usuario. Así que aquí ahora mismo en la encuesta En la API. Lo sentimos, en el proveedor de notas. Estoy duro codificando el ID de usuario, lo cual no es bueno porque obviamente, diferentes personas tienen diferente ID de usuario. Entonces, en el siguiente video, crearemos un ID de usuario único y lo almacenaremos en el dispositivo del usuario y lo usaremos para las operaciones de CRD. Gracias. 23. Función para almacenar userid: Hola. Bienvenida de nuevo. Así que hasta ahora estábamos usando ID de usuario ficticio. Usemos un almacenamiento de datos fuera de línea, como las preferencias compartidas, para guardar el ID de usuario creado por UUID localmente Y recuerda, solo podemos almacenar valores int, string, double y booleanos en forma de valores clave Dentro de las preferencias compartidas. Creo que no se pueden almacenar modelos de datos complejos. P, tienes que usar. Hola lo puedo almacenar, lo sé, pero las preferencias compartidas, no estoy segura. Ahora detenga su solicitud de carta y en la terminal, simplemente escriba la letra P compartida pre per. Se encuentra instalando. Entonces si voy aquí en el pub sec punto, puedo ver las preferencias compartidas, ¿bien? Ahora, vamos a crear una nueva función, que devolverá un ID único para el ID de usuario. Entonces en las notas proporcionadas, vamos a aquí, crear una nueva función, que devolverá cadena, obtendrá ID de usuario. Una sincronización. Bien. En primer lugar, vamos a crear una instancia de referencias flaps, a preferencias compartidas sí obtener instancia como esta. Entonces voy a crear en una cadena de nivel, que va a escribir ID de usuario es igual a tal vez obtener cadena. Entonces, antes que nada, intentaré obtener el ID de usuario del dispositivo. Es decir, si el usuario el usuario puede no ser un nuevo usuario, es decir, podría estar usando una aplicación, por lo que se almacenará el ID de usuario. Ahora, voy a comprobar si el ID de usuario es igual a nulo, es decir, es un nuevo usuario, entonces voy a crear esa clave que se establece cadena, luego escribir la clave ID de usuario, y el valor aquí será el UUID V cuatro Creará un ID único para nosotros, y asignaré este ID a la clave. Lo siento, espera. Te voy a explicar. Sé que puede que te estés confundiendo un poco. Y por último, voy a devolver el ID de usuario. Y que no es nulo, lo sé porque aquí estamos almacenando si es nulo, y si no es nulo, entonces sólo estamos devolviendo el ID de usuario directamente. Nuevamente, estoy explicando, primero, vamos a crear una instancia de preferencia compartida. Entonces comprobaremos si ya existe una clave de ID de usuario. Si no lo es si es nulo, entonces crearemos una clave para este ID de usuario en la preferencia compartida y guardaremos un nuevo ID único dentro de ella. Y luego asignaré ese valor a esta variable y lo devolveré al final. Entonces eso significa que esta función devolverá de todos modos un ID de usuario. Entonces voy a llamar a esta función dentro de aquí, es decir cadena, ID de usuario es igual a esperar obtener ID de usuario así, y voy a enviar este ID de usuario a esta función. Bien. Todo lo demás es bueno. Entonces ahora tenemos que hacer el ID de usuario almacenado en el Ahora tenemos el ID de usuario almacenado en las preferencias compartidas. Tenemos que asegurarnos de enviar ese ID de usuario mientras agregamos una nueva nota también. Ve a esta página aquí. Estamos enviando un hd. Voy a escribir de nuevo final s es igual a un peso compartido referencias que consiguen instancia. Y como estamos usando un peso, tenemos que hacerlo una sincronización. Entonces solo escribiré cadena de identificación de usuario para tal vez obtener cadena, y el nombre st es ID de usuario. El nombre de la clave es ID de usuario. Aquí obtendremos ese ID de usuario, y lo enviaré aquí. A. Eso es. Ese es el único cambio requerido. Entonces, obviamente, aquí no estamos usando ningún tipo de autenticación. Voy a hacer algunos otros núcleos en él. momento, este curso está dedicado únicamente a las operaciones de crud y a cómo usar no GS back y para principiantes. Hay muchas cosas que puedes hacer donde al menos ahora te encuentras cómodo con lo básico. Entonces espero que hayan disfrutado. En el siguiente video, probaré la aplicación completa ya que todo lo demás está hecho. Gracias. 24. Prueba la aplicación completa: Hola. Bienvenidos al video final de este curso. En este curso, simplemente probaremos el funcionamiento completo de la aplicación. Entonces, antes de seguir adelante, eliminemos todos los registros anteriores de la base de datos porque esos tenían ID de usuario ficticio Así que voy a borrar todas estas cosas. Bien. Entonces supongo que lo he borrado todo. Ejecutemos nuestra aplicación. Bien. Obviamente, no tenemos ninguna nota en este momento. Entonces voy a crear. Y aquí voy a aprender desarrollo de plataformas y guardarla. Ver nota agregada correctamente. Voy a añadir otra nota. No back end, simplemente escribiré operación maestra roja usando Mongo Tengo otros dos, y por último, escribiré ejercicio Diario ocho trabajo fuera y código. Bien. Tengo tres notas. Y si empecé, Así que ahora mismo, así que tengo tres nodos. Y luego si trato de actualizar este. Y sólo aprender asentir JS. Usando Mongo DB y aleteo. Si lo acabo de actualizar, entonces mira. Tenemos los asentimientos de aprender y aquí tenemos aleteo. Y si lo reinicio de nuevo, entonces veamos. Tenemos los mismos datos. Por eso llamo a esta función de base al final después de notificar a los oyentes porque obviamente, la experiencia de usuario es muy buena aquí El usuario no tiene que esperar a que se almacenen los datos. Simplemente lo puede ver en su UI. Y ahora si borro este también, entonces vea No eliminarlo con éxito. Tenemos ahora sólo dos notas, y si reinicié, Entonces sólo se van a buscar dos notas Entonces me alegro de que la app esté funcionando sin arar. Y hemos aprendido mucho en este curso. Obviamente, todo era para el nivel principiante. Pero si conoces lo básico, entonces obviamente en el futuro, también puedes trabajar en proyectos complejos. Entonces espero que hayan disfrutado. Echa un vistazo a mis otros cursos también. Gracias. Que tenga un buen día y siga practicando.