Construir un sistema de asistencia a los empleados con flutter y Supabase

1. Introducción al curso: ¿Estás interesado en crear una aplicación del mundo real con sarro o quieres impresionar a posibles empleadores con tus habilidades de desarrollo móvil y conseguir el trabajo de tus sueños? Entonces este curso es solo para ti. Te enseñará cómo crear un sistema de gestión de asistencia de empleados completamente funcional con desorden y supervisar con proveedor como esa herramienta de gestión estatal. Supervisor es una alternativa de código abierto a Firebase y está ganando mucha popularidad entre la comunidad tecnológica. Comenzaremos construyendo un sistema de autenticación robusto, que permita a los empleados registrarse e iniciar sesión con su correo electrónico y contraseña obtener pulgadas. Luego crearemos una interfaz fácil de usar, permite a los empleados deslizarse fácilmente para registrarse y salir por el día. Esa ubicación actual del empleado también se guardará para que se confirme que está en la oscuridad. La aplicación también implementará características que permiten a los empleados ver su historial de asistencia para cualquier mes del año, actualizar sus datos personales, así como departamento de la compañía, todo mientras se mantiene una gestión estatal eficiente utilizando proveedor. Al finalizar el curso, tendrás un completo sistema de gestión de asistencia que podrás utilizar en tu propia organización o exhibir tu portafolio sin perder más tiempo. Empecemos. 2. Crear un proyecto de flutter: Hola, bienvenidos al primer video del curso, donde construiremos un sistema de gestión de asistencia de empleados con flutter y Superbus. Estoy asumiendo que ya tienes conocimiento del desorden. Y a la hora de supervisar, ese silencio es son muy directos y sencillos como Firebase. Entonces, si tienes conocimiento de Firebase, no te resultará difícil. Además, estaré usando el paquete proveedor como la herramienta de gestión estatal en nuestro proyecto. También debes tener conocimiento de la deuda. Así que sin perder más tiempo, Empecemos creando un nuevo Proyecto Florida. Vaya a su directorio deseado y abra su terminal. Entonces el comando, Aleteo. Crear centro de asistencia de empleados. Obviamente puedes usar cualquier nombre de proyecto. Depende de ti. Entonces abre tu terminal. Lo sentimos, abre tu editor de código. Voy a estar usando VS Code. Entonces. Ben, tu proyecto. Nuestro proyecto está creado. Ahora, es el momento de crear una cuenta supervisada. Abre tu navegador y escribe supervise.com. Entonces esta es la página oficial aquí. Haga clic en iniciar sesión. Y obviamente, he estado firmando directamente porque ya he iniciado sesión antes usando mi cuenta de GitHub, definitivamente obtendrás una opción para iniciar sesión con tu cuenta de GitHub. Simplemente ingresa tus credenciales y luego serás enviado a esta página. Aquí. Simplemente haga clic en Crear proyecto. También recuerda, para crear un nuevo proyecto, necesitas tener una organización. Entonces tengo a saber viajar. Ahí obtendrás una opción para simplemente nombrarlo. Ahora aquí el nombre del proyecto será la asistencia de los empleados. Simplemente voy a generar una contraseña aleatoria. Sin embargo, elige tu razón más cercana. Y el plan de precios será gratuito. Pasado ese tiempo se está configurando proyecto. Simplemente saque su código VS. Y aquí en la nueva terminal, simplemente voy a escribir esa combinación de datos. Bob, agrega súper formas, más y más fuerte, punto ENV. Estos son los paquetes que se requieren. También puedes ir a bob dot dev y echa un vistazo a estos paquetes. Para hacer pop es aleteo se utiliza para interactuar con sí supervisa. Y este punto ENV se usa para que nuestras contraseñas no se vean comprometidas. No vamos a escribir la contraseña directamente en el archivo principal o bien las Pantallas, así. Solo iremos a revisar el Pub spec dot YAML y veremos. Tenemos estos dos. Tenemos esto para instalar. Ahora. En el directorio raíz de nuestra app. Simplemente cree un archivo y asígnale el nombre punto ENV. Asegúrate de no estar creando esto dentro de eso. Tienes que crear en el directorio raíz. Y aquí vamos a almacenar las credenciales de Superbus como evaulate super base URL es igual a esto y super formas k es igual a. Entonces. Vaya al panel de control aquí, haga clic en Configuración de proyectos , luego API. Y aquí puedes ver la URL es copiarla y pegarla aquí. Y luego copiar eso. Y en clave pública y pegarlo en esa clave. Eso es. Ver tienes directamente copiar y pegar los detalles aquí. Después de eso. En ese archivo pub spec dot YAML, tenemos que mencionar ese archivo punto ENV en la sección de activos. Así que ve abajo aquí. Sólo hay que descomentarlo. Recuerda que este archivo Pub spec dot YAML es muy sensible a mayúsculas y minúsculas, por lo que cualquier espacio extra o pestaña le dará a una C, hay que tener mucho cuidado así, igual que dot ENV y guardarlo. Bien, así que eso es todo para este video. En el siguiente video, inicializaré nuestro Superbus y ejecutaré la aplicación. Gracias. 3. Inicializar el cliente de supabase: Hola, sigamos. Entonces como tenemos dependencias instaladas, tenemos que configurar también el Android. Así que ve a Android, luego a la aplicación. Y aquí dentro tienes el archivo Gradle acumulado. Aquí. Primero. Tienes esta versión del SDK de bilis. Que sea 33, así. Entonces tienes la versión mínima mínima del SDK. Sí, sí, aquí. Que sea 19. Y también habilitar multi-década. Con esta línea. Si ya has configurado Firebase, entonces sabes que estos son obligatorios cada vez. Y además solo iré a la fuente de Android, manifiesto principal de Android, y cambiaré la etiqueta de Android para prohibir. Entonces este será el nombre de la aplicación, o se puede decir que este es el sistema de gestión de empleados para una empresa llamada Fang. Eso está bien. Entonces tenemos que inicializar ese cliente supervisar dentro de nuestra función principal. Así que ve a principal aquí. Sí, solo hazlo un fregadero. Entonces como rígidos, son vinculantes y se muestran inicializados. Después primero cargue los archivos ENV. Lo haré enseguida. Y primero voy a importar punto ENV así como voy a importar Superbus flutter así. Y aquí simplemente escribiré ese comando dot ENV dot load. Por lo que cargará ese archivo punto ENV de horas. Y entonces inicializaré supervisar. Primero, solo voy a obtener dow URL en la clave en una variable separada aquí es que solo escribiré punto ENV, punto ENV. Aquí. Tenemos que escribir el nombre clave. Si lo sabes. Esta es la clave para los datos. Entonces solo voy a escribir esto y puede ser nulo. Entonces solo me aseguraré si es nulo, luego le daré el valor de una cadena vacía. Entonces tenemos al supervisor es clave. Aquí. Se trataba de whisky. Después de eso, inicializaré con el código supervise, no inicializaré. Entonces aquí tenemos que dar la URL, que es magníficamente cURL. Anon key será súper arriesgado. Eso es. Así es como inicializamos Superbus. Esto es muy sencillo. Ahora después de eso, estructuraremos nuestro proyecto. Simplemente cerraré esto y Android. Y dentro de lib, estructuraremos nuestro proyecto en carpetas en lugar de escribir todo en una pila. Así que crea una nueva carpeta llamada pantallas dentro de lib. Después crea otra carpeta llamada Constance. Otra carpeta, labra, por lo tanto modelos. Y por último, tenemos servicios. Entonces esta es una mejor manera de escribir código. Y percepciones. Verdes, crear un archivo. Pantalla de inicio de sesión punto, punto. Vamos a importar material y crear un widget con estado por ahora. Pantalla de inicio de sesión. Sí, voy a devolver un andamio. En ese cuerpo. Simplemente era escribir. Está funcionando. Y en dominio punto punto. Simplemente. Primero eliminaré estos comentarios y eliminaré todo de aquí. Eso es de la página principal de la clase. Elimina todo y dale como valor la pantalla de inicio de sesión al inicio. Guardar. Todos. Después de eso, voy a iniciar mi emulador de Android pixel five. También puedes conectar tu dispositivo físico . Depende de ti. E intentaré ejecutar esa aplicación. Ahora veamos si corremos o hay algún editor. Esta es la primera vez, por lo que podría llevar algún tiempo. Así que hasta entonces, si quieres, solo puedes ir a los Darks coqueteados Superbus. Aquí. Y aquí. Puedes, puedes ver muchos elogios o puedes entender si no tienes idea de Superbus. A ver. ¿Qué no tenemos otros perros? Sí. Aquí tienes todas las consultas, cómo obtener datos, insertar, cómo iniciar sesión, cómo crear almacenamiento, y también esto, esta URL te será útil. Esto va a ser útil. Asegúrate de que si tienes tiempo libre, lees todo aquí. Tengo alguna licencia y todo lo cual tiene que ser aceptado. Por eso está tomando algún tiempo. Eso está bien. Podemos esperar. Ver dapp. Y ahora la pantalla, está funcionando, está ahí. Eso significa que nuestra aplicación está funcionando perfectamente. Simplemente voy a cambiar aquí este título a asistencia de empleados y depurar banner a false. Eso es. Eso es todo para este video. En el siguiente video, trabajaremos en esa interfaz de usuario de pantalla de inicio de sesión. Gracias. 4. Crear una pantalla de inicio de sesión: Hola, bienvenido de nuevo. Por lo que en este video comenzaremos a trabajar en la interfaz de usuario de la pantalla de inicio de sesión. Entonces esta es la pantalla donde los empleados pueden iniciar sesión en su empresa, que he llamado a este Pang, f, a, y g. Así que comencemos. Entonces antes que nada, dentro de eso se crearán variables para obtener ancho y alto del dispositivo. Entonces simplemente, doble. El ancho de la pantalla es igual a los contactos de punto de consulta de medios deberían ser, no son de contactos. Tamaño de punto, ancho de punto. Y de igual manera, copiado, pegado. Siempre va a verde altura. Y esto va a ser alto. Ahora, comencemos. Empecemos por wi. En ese cuerpo, voy a usar una columna ese primer contenedor de estragos infantiles. altura del contenedor basará la altura verde dividida por tres. El peso del contenedor será el ancho de la pantalla. Vamos a dar alguna declaración. Const caja, decoración, color, colores, rojo, acento. Después frontera. El radio será radio de borde, circular. Debería ser solo. Entonces aquí adentro, ¿verdad? Abajo a la derecha. Será radio circular 70. ¿Bien? Y dentro de ese contenedor tenemos esa propiedad hijo. Será, nuevamente vía columna voy dar un icono aleatorio y primero quedará existe alineación principal excelente centro Mendota para que el niño sea enviado fuera de este contenedor. Y entonces tenemos que niños niños serán de estanques a valorar será puedo iniciar escáner de código QR. Puedes código QR o puedes dar lo que yo quiera. Les dot blanco, talla al día. Entonces danos tamaño rocas de altura, dy, y luego dale texto del nombre de la empresa. Yo lo haré. Estilo colmillo. Textil. El tamaño de los bonos será de 25. Colores punto blanco. Peso de la fuente, font-weight, negrita. Guarde todo. Vamos a echarle un vistazo. Ver, está buscando descenso. Aquí tenemos este radio inferior. Esto es ese contenedor galerías rojo X y puedes cambiar el color de acuerdo a tu necesidad. Entonces tenemos en ese hijo en una columna que puedo terminar el texto que está en el centro ya que hemos dado centro de punto de alineación del eje principal. Ahora después de eso, tenemos que crear dos textos, cualquier cosa controlador para esos campos de texto. Para ellos, propósito de inicio de sesión. Así que vamos dentro de esa clase aquí y escribamos el controlador final de edición de texto. Control de correo electrónico capaz de controlador de edición de texto. De igual manera, también tenemos el controlador de edición de texto para contraseña. El controlador de contraseña es que van a hacer cualquier cosa controlador. Después dentro del widget de columna. Aquí, crea otro widget de columna con algo de relleno. Entonces a continuación, vamos a ver. Tenemos este widget de columna, termina aquí. Entonces dale algún tamaño de espaciado, altura de caja 50 que profundidad. Al agregar widget. Voy a dar el relleno es 20. Y me encanta el relleno será columna. Ahora tenemos a esos niños. En eso los niños tendrán ese campo de texto. Declaración, declaración de entrada Const. La etiqueta será texto. Empleado, correo electrónico, DNI. Arreglar. Yo puedo puedo empezar persona. Puedes escribir persona, puedes escribir correo electrónico, lo que quieras. Borde, borde de entrada de contorno. Entonces tenemos el controlador Opción fuera de la declaración y le daremos Controlador de correo electrónico. Y después de este campo de texto, dale algo de espaciado. Tamaño, altura de caja 20. Vamos a guardar todo. Puedes ver el código y ahora ver que tenemos el ID de correo electrónico del empleado así. Entonces eso es todo para este video. En el siguiente video, completaremos esta pantalla de inicio de sesión, así como crearemos la pantalla de registro. Gracias. 5. Crear una pantalla de registro: Sigamos trabajando en la pantalla de inicio de sesión. Debajo de esta caja de tamaño. Crear otro texto. Simplemente puedes copiar este texto, lo pegarás. Aquí. Será contraseña. Puedo Solvay, puedo comenzar la suerte. El controlador será el controlador de contraseña y el texto oscurecido será verdadero. Es decir, cualquier cosa que escribamos no debería mostrarse a nadie más. Vendrá como estrellas. Debajo de este texto se dará algo de espaciado. Caja de tamaño, altura 30. Y entonces vamos a tenerlo botón. Dale una caja de tamaño. Su altura será de 60, que será de doble punto infinito. Niño se elevará botón. Ese texto escrito en el botón será login. Y le daremos un poco de estilo tecnológico también. Tamaño de fuente 20. Que sea const. Entonces dale un poco de estilo al botón elevado también. Entonces aquí, como estilo elevado de diez puntos de así es como le das estilo a botón elevado. El color de fondo serán colores que acentúan rojo. Y la forma será redondeada. Borde rectangular, radio de borde, radio fronterizo. Circular hoy. Esto es justo, debería ser al final del argumento. Eso es. Vamos a echarle un vistazo. Ver, el botón también se ve bien. Ahora es el momento. Creamos otra pantalla para registrarse. Entonces dentro de la pantalla simplemente califica la pantalla registrada punto punto. Entonces, obviamente, esta es la página donde los nuevos empleados pueden registrar, copiar y pegar ese código de la pantalla de empleados aquí. Entonces solo antes que nada cambiaremos el nombre a la pantalla. ¿Bien? Ahora aquí en el andamio, tendremos un MBA para que podamos mostrar ese botón de retroceso también. Simplemente escribamos barra AB, colores de color de fondo, el acento rojo, elevación cero. Y solo voy a cambiar la altura para ajustarlo con la barra de aplicaciones. Y por último, en el botón, escribiré aquí registro. Eso es. Sólo estos tres cambios. Guardar. Ahora también tenemos la pantalla de registro. Ahora naveguemos a la pantalla de registro desde la pantalla de inicio de sesión. Así que ve a la pantalla de inicio de sesión archivo punto punto. Aquí. Debajo de esta caja de tamaño. Daré algo de espaciado con este cuadro de tamaño D. Y vamos a crear un botón de texto el cual navegará hasta el cual navegará a esa pantalla de registro. Entonces solo voy a agregar texto. ¿Eres un nuevo empleado registrado aquí? Y en el evaulado en las instalaciones, navega por su Bush. Espero que ya conozcan estos comandos. Estos son todos los conceptos básicos de cómo navegar el ahora todo lo que tenemos para escribir texto aquí y lo enviaremos a esa pantalla de registro así. Y esto es una const. C. Guarde todo. Ahora tenemos el inicio de sesión y si hago clic en registrarme aquí, vea que también tenemos la pantalla de registro. Y aquí en la barra de aplicaciones, tenemos el botón Atrás, que nuevamente podemos ir a la pantalla de inicio de sesión. Entonces eso es todo para este video, hemos creado con éxito la interfaz de usuario para iniciar sesión y registrarse. Nos vemos en la próxima sesión. 6. Crear la clase de servicio de Auth: Hola, bienvenido de nuevo. Entonces ahora es el momento de que empecemos a trabajar con datos, o se puede decir estado. Y para ello, estaremos usando proveedor como esa herramienta de gestión estatal. Entonces ahora vamos a instalar el paquete proveedor en esa terminal. Simplemente escriba carta proveedor de anuncios. Eso es. También puede ir al sitio web bob.gov y obtener eso permeado desde allí también. Sólo revisa. Sí, tenemos el proveedor. Ahora, primero vamos a crear una clase utils. Así que dentro de la carpeta utils, crea un nuevo archivo. Punto punto. Crearemos una función estática para mostrar el snack bar. Ya que esto se utilizará muchas veces. Por eso estoy creando un método separado para ello. Simplemente importe material que el vidrio. Tú labra así de grueso, ancho. Así que snack bar. Aceptaremos el mensaje, el contexto de campana, y un valor opcional de color, que puede ser nulo. Ya que esto es opcional. Después escribiremos escafoides, messenger off contextos, dot show snack bar. Entonces este, este código es de más plano. Recuerda, snack bar. Ahora contenido, voy a dar texto y enviar un mensaje aquí. Y dentro de este snack bar, dentro de esta serpiente, pero tenemos ese color de fondo. Eso será color. Eso es. Entonces si es nulo, entonces llegará a su color predeterminado. Ahora, tenemos esa función de utils aquí. Ahora vamos a crear nuestra clase de servicio de arte. Ahora las cosas se pondrán interesantes. Insights. Servicios, ¿verdad? Encuestas, oscuras, oscuras. Aquí escribiremos todos los métodos relacionados con la autenticación. Así que primero que nada empaquetemos materiales, luego importemos, supervisemos el paquete. Después crear las encuestas de arte de clase, las cuales se extenderán, cambiarán, notificarán o ya que estaremos utilizando proveedor. Entonces primero voy a crear una instancia de cliente Superbus. Así que byways glándula supervisar es igual a super punto base instancia punto cliente. Esto es solo crear una instancia. Entonces voy a crear es cargando, variable. Se está cargando. He creado una variable privada para cada carga y luego creo getter y setter para que los usuarios fuera esta clase no puedan acceder a este valor directamente. Tienen que pasar por esto, así no pueden cambiarlo directamente. Servicio impar punto esto, Ellos no pueden hacer esto. Tienen que usar este conjunto de métodos. Método. El conjunto se está cargando. Enviaremos un valor bool. Será es cargando es igual a valor. Y notifique a los oyentes para que cualquiera que esté escuchando este extraño servicio se refresque. Entonces eso es todo. Para este video. En el siguiente video, trabajaremos en diferentes métodos. Gracias. 7. Método para registrar a los empleados: Hola, bienvenido de nuevo. Entonces ahora vamos a crear un método para permitir que un empleado registre una cuenta. En la clase de artes o riesgo. Una función futura. Registrar empleado. Así. Vamos a requerir cosa correo electrónico, cadena, contraseña, así como los contextos de campana para mostrar ese snack bar. Después envolveremos el código dentro del bloque try catch. Que probar primero voy a hacer se establece, se está cargando a true. Lo es. Voy a usar este método setter. Entonces voy a comprobar si E-mail es igual a vacío. Nuestra contraseña es igual a Md. Entonces lanza un error. Se requieren ballenas. Y si no, entonces escribiré la consulta para firmarlas. Es decir ese tipo de datos, que es el retorno, se llama la respuesta del arte. Entonces voy a añadir esperar Superbus instancia es esa variable punto, punto registrarse así. Y aquí tenemos que mandar ese correo electrónico y la contraseña. Y después de esto, mostraremos utils dot show snack bar. El mensaje será un éxito. Ya puedes iniciar sesión y el color serán colores verde oscuro. Entonces simplemente escribiré, navegaré por el tercer punto, pop. Y set se está cargando a false. Entonces este es el código. Y ¿y si hay algún sumador? En primer lugar, lo que voy a hacer, un conjunto es cargarse a false. Después voy a mostrar ese snack bar utils punto show snack bar. El mensaje será e punto toString. Los contextos serán contextos, pero el color será rojo. ¿Bien? Entonces este fue el método para registrarse. Y sólo voy a ir a la documentación aquí. Y te voy a mostrar esta línea que está firmando un usuario C, obtienes Dakota, aquí tienes la respuesta, supervisar o ese inicio de sesión con contraseña. Este es el estudio de inicio de sesión. Tenemos que crear un nuevo usuario y C punto de registro. Entonces esto es muy sencillo. Eso, también obtienes al usuario de la respuesta. Entonces eso es todo para este video. En el siguiente video, escribiremos el método para iniciar sesión así como cerrar sesión y Q. 8. Método para iniciar sesión y cerrar sesión: Hola, sigamos con nuestros métodos. Y por debajo de esta función de registro, vamos a crear otra función, o mi tercera, se puede decir para iniciar sesión, emplear este futuro. Ahora otra vez, emplee aquí también. preguntaremos o la palabra de moda por correo electrónico, contextos de factura. Y ese código es bastante parecido. Lo que puedes hacer es copiar este código, pegarlo aquí, y luego aquí tenemos está cargando a la verdadera respuesta del arte. Esta será sine in weight password. Y no tengo que mostrar nuestra navegación aquí. Simplemente establecer se está cargando a false. Y supongamos que tenemos algún error. Se va a coger aquí. Yo caveré. Debajo de esta grilla de funciones. Otra función requiere cierre de sesión. Esto es muy sencillo, como un peso. Así que proporciona arte de punto, cerrar sesión. Y avisaremos a los oyentes. También crearemos un getter para obtener al usuario que este usuario obtenga el usuario actual de Superbus. Simplemente manera luz supervisar ese arte, punto usuario actual. Así. Eso es. Esto obtendrá si el usuario está firmando o no. Ahora, tenemos al proveedor aquí, ¿no? Tenemos que declarar a nuestro proveedor en ese punto principal, puntos para que la nariz más plana que hemos proporcionado en nuestra aplicación. Así que simplemente aquí con rígido llamado multi proveedor. El proveedor, ya que tendremos múltiples proveedores más adelante. Aquí. Aquí, simplemente escriba, notifique a su proveedor. Entonces crea. Y aquí tenemos el contexto de la parada de autobús. Y escribir servicio impar. Simplemente así. Eso es. Así es como declaras proveedores en una aplicación de flutter. Entonces eso es todo para este video. En el siguiente video, asignaremos esos métodos a la UI. Gracias. 9. Asignar métodos a la interfaz de usuario: Hola. Entonces ahora es el momento de asignar ese registro así como la función de inicio de sesión a nuestra interfaz de usuario. Así que ve a la pantalla de registro. En ese botón de registro. Estaré envolviendo esto elevado pero luego dentro del consumidor para que podamos acceder a propiedades y métodos desde el servicio AAD. Y voy a estar usando de esta manera para que no ese widget completo, es decir la función bill no va a reconstruir una y otra vez solo esta sección vamos a reconstruir. Entonces escribamos como consumidor, consumidor. Aquí tenemos que mencionar qué proveedor estamos utilizando. Entonces tenemos al constructor. Esto habrá ido cubiertas o instancia de proveedor de servicios. Esta cárcel no es de uso. Aquí. Tenemos que devolver esta caja de tamaño. Acabo de obtener pasta. Dar punto y coma. Aquí. Esto es cuatro. Bien, tenemos que quitar esto solamente, ya está. Entonces hemos actuado. Además, mostraremos condicionalmente un indicador de carga, carga. Aquí. En ese niño, voy a escribir impar proveedor de servicios punto está cargando. Si es cierto, entonces muéstralo en el centro infantil y es un indicador de progreso más fresco así. Es decir, si la carga es verdadera, Mostrar indicador de progreso circular. Y si no, entonces en el on-premise escribiremos proveedor de servicios impar, empleado registrado. Aquí tenemos el texto de punto correcto del controlador de correo electrónico en esa contraseña. Controlador de contraseña dot text. Y aquí solo voy a dar un sueño también. ¿Y si hay algo de espacio extra? ¿Marco? K? Entonces este consumidor es el concepto de proveedor. Entonces deberías haber conocido este concepto al menos. Entonces. De igual manera ir a la pantalla de inicio de sesión. Aquí. Tenemos este 1 s, supongo. Sí. Sí. Bien. Sí. Aquí. Este tamaño encajonado con ese proveedor de servicios directos al consumidor. Entonces tenemos al constructor. Se ha ido textos instancia de clase de servicio de arte que es a la ligera se le puede nombrar cualquier cosa. Y tenemos el chai y luego simplemente devolvemos este botón de inicio de sesión. Este niño. De igual manera aquí en ese niño lo vamos a dar condicionalmente. El sabor. El servicio impar proporcionado es de carga. Después const center, indicador de progreso circular. Así. Y en la prensa escribiremos proveedor de servicios impar, empleado de inicio de sesión punto. He probado controlador de correo electrónico, texto punto, controlador de contraseña punto txt. Y también aquí otra vez, puedes hacer las cosas de recorte. Eso es un golpe. Guarde todo. Ahora. Ir a ellos. Tablero Superbus. Aquí. Autenticación Econ. En esos proveedores, como puedes ver, el correo electrónico está habilitado por defecto. Simplemente deshabilitaré ese correo electrónico de confirmación porque tenemos que verificar cada correo electrónico antes de registrarse. Más adelante si quieres, puedes habilitarlo. Ahora, haz clic en Guardar. Entonces ahora el correo electrónico está ahí, como ahora no tenemos usuarios. Por fin vamos a comprobar si está funcionando o no. Ahora bien, si doy algo y escribo 12345 y hago clic en Iniciar sesión, vea que tenemos la extraña excepción, credenciales de inicio de sesión inválidas. Entonces ese es este correo electrónico y contraseña no están registrados como ahora. Yo lo registraré. Usa el correo electrónico que quieras. Después contraseña, haga clic en Registrar. K, éxito. Ya puedes iniciar sesión. Ver. Ahora bien, si escribo esa contraseña, debería tener. Obviamente que ahora no estoy haciendo nada. No nos van a enviar a ninguna pantalla en este momento, obviamente, porque no estamos escuchando los cambios. Pero si voy allí y recargo, vea, tenemos el correo electrónico registrado con éxito. Entonces eso es todo para este video. Espero que hayas aprendido y entendido hasta ahora. Nos vemos en la próxima sesión. Gracias. 10. Creación de tablas de modelo de usuario y Db: Hola, bienvenido de nuevo. Por lo que ahora vamos a crear un modelo para los datos del usuario. Así que dentro de la carpeta de modelos, cree un nuevo archivo llamado User model dot dot. Ahora, todos estos datos los almacenaremos en la base de datos después de que el usuario se haya registrado. Así que ahora mismo cuando estamos en cambio solo, podemos ver esos datos dentro de la sección de autenticación. Pero y si queremos que el nombre del empleado o el Departamento de ellos emplee esos datos que tenemos que almacenar en la base de datos. Entonces digamos Glass. Modelo de usuario. Los datos, que parecerán venir serán binarios, ID de cadena, luego cadena fina, correo electrónico, nombre de cadena final, vinil. Que sea grande. Final int departamento. Debido a que vamos a crear otra tabla para departamento y en la herramienta de lista, el ID que es esta será una clave externa a la clave primaria si conoces el concepto de SQL y luego cadena binaria, employee ID es el ID que creamos. Es decir, esta será una idea única. Vamos a crear un constructor. Entonces el id requerido, requerido. Estos no mandan correo electrónico. Adquirió este nombre y departamento. Ya que es en un liberal no estamos escribiendo lo que requiriera requerido. Hay una identificación de empleado de punto. Ahora crea un método de fábrica para convertir esos datos JSON que vienen de la súper base a este modelo. Así ensamblar el modelo de usuario de fábrica para el modelo de usuario punto Rahm, Jason , mapa, cadena de datos dinámicos, y devolver un modelo de usuario. Y aquí hay que escribir datos. Id es GAAP basado en bits departamento de TI se deja. Este será correo electrónico. Este será nombrado. Estos nombres o nombres de columna, que crearemos en ese ID de empleado del departamento de Superbus. Bien, guarda todas estas cosas. Esto no es obligatorio. Ahora, vamos a crear una mesa más departamento. Vamos a un navegador. Vaya a su navegador. Después ve a Editor de tablas. Después crea una nueva tabla. Nombre. Departamentos. Entonces no habilites IRLS por ahora. Y tampoco necesitamos en tiempo real para estos datos. Simplemente crea una columna de título. Que sea texto. Eso es. Guárdalo. Y luego inserte algunos datos aquí. Entonces aquí, primero serán las ventas, luego, y luego el departamento, departamento de identificación, luego marketing, y recursos humanos, luego financia ahí. Estos son solo los departamentos en una empresa que es Y operación. Entonces he ingresado datos. Supongamos que si quieres, puedes crear otra app para el administrador de la empresa. Puede ingresar estos datos desde su portal de administración. Depende de ti. Ahora tenemos los departamentos. Crearán otra mesa llamada empleados. Empleados. Una vez más, quiten el RLS por ahora. Y luego. Este id será una clave externa para el Id del usuario de arte. Esto, por lo que este id será el mismo que la idea autenticada del usuario. Sólo guárdala. Entonces, dale un nombre. Que sea texto. Entonces tenemos ese correo electrónico. Darle texto. Después dar una fila por columna por departamento. Será una clave foránea para el ID de departamentos así. Y luego a continuación tenemos la identificación del empleado. Id. Esta voluntad con texto también. Entonces tenemos dos claves foráneas, departamento y el id. Esto es principalmente también. Guárdalo. Espero que entiendas que estas mesas son las mismas que esta. Estos datos IDE pueden inclinar la identificación del empleado del departamento. Ahora por fin, en sus constantes, crearán las constantes de nombre de archivo punto punto. Escribiremos que aquí nombrarán variables estéticas, por lo que es fácil utilizarlas posteriormente en cualquier lugar la aplicación sin ningún error de mecanografía. Como vidrio, constantes. Esa toma se fue. La tabla de empleados es igual a los empleados. Y ese **** ido st departamento es igual a dos departamentos. Eso es. Hemos hecho mucho en este video. Nos vemos en la próxima sesión. 11. Creación de una clase de servicio de base de datos: Hola, bienvenido de nuevo. En este video, trabajaremos en creación de una clase de servicio de base de datos. Entonces antes tenemos las encuestas de arte. Es hora de que creamos otro archivo dentro de los servicios y lo nombremos DV, encuestas punto punto. Así que crea un servicio de clase DB que se extenderá al modificador de cambio, ya que es, lo usaremos, lo usaremos como proveedor. Luego crea una instancia del cliente de pelvis. Supervisor es igual a supervisar punto instancia punto cliente. ¿Bien? Ahora la primera función que crearemos es insertar un nuevo dato de usuario. Ellos limitarán insertar nueva tabla de base de datos de usuarios que creamos empleados. Tenemos que almacenar esta información ahí. Del usuario. pediremos o cadena de correo electrónico ID, que es el ID de arte. Ya que aquí mencionamos que la idea será un dar foráneo. Esa es la única razón por que están insertando en la base de datos. El comando es purveys instance dot de que es cual tabla? El nombre de la tabla está ahí en esa tabla de empleados de inicio constante. Después puntear directamente la consulta se inserta. Aquí tenemos que enviar un valor de mapa. Eso es. Esta es la única consulta necesaria para crear nuestro insertar un nuevo dato. Aquí. Id será id. El nombre estará vacío ya que es un nuevo usuario. El correo electrónico será correo electrónico. Entonces esto es nuevo, eso es ID de empleado. Esto tenemos que crear una función para generar. Lo vamos a crear, y luego departamento será nulo por ahora. Espero que tengamos el departamento, sí, ahí tenemos el departamento. El usuario podrá actualizar su departamento posteriormente en la sección de perfil. Ahora, tenemos que crear una función para obtener un ID aleatorio. Así que vamos a crear una cadena, generar ID de empleado aleatorio. Ahora, usaremos la función aleatoria aquí. Esto viene de la biblioteca de matemáticas. Ahora bien, lo que voy a hacer, qué personajes quiero es sólo el nombre de la compañía aquí. Supongamos f, a y g, luego F mayúscula, a y G, y luego todos los números así. Entonces eso significa que la función creará el ID solo a partir de estos números, es decir a partir del único de este personaje. Esto es, esto es sólo mi preferencia. Puedes usar todos los personajes, es decir de la a la Z. solo estoy usando esto. Entonces. Realmente podría escribir una función que yo mismo obtuve de Internet. Lista, punto generar, tierra, Taiwán, ocho caracteres. Entonces aquí, todos los personajes. Punto aleatorio, next, int, caracteres longitud de punto, y finalmente al final punto unirse, unirse así. Entonces este Chen yo mismo agarró a un dios de Internet. También puedes usar cualquier otra función de generación si quieres. ¿Esta cadena hace qué? Crea un ID aleatorio de ocho dígitos a partir de estos caracteres. Ahora, llame a esta función aquí. Tenemos lista la función insert new user. Ahora, llamaremos a esta función insert new mientras registramos un nuevo usuario. Así que ve al servicio de AAD. Mientras que aquí, cuando nos estamos registrando. Ahora veamos. Tenemos respuesta final de arte aquí. Simplemente voy a escribir si responde no igual a null, entonces eso y pegar todo aquí. En primer lugar, voy a hacer es esperar. Tengo que crear una instancia de ese servicio dv en esa parte superior. Por servicio DB nulo. El reciente. Crear una instancia para que podamos usar las funciones. Entonces aquí, voy a escribir a continuación esto, arriba de este utils, divi encuestas punto insertar nuevo usuario. Es posible que el correo electrónico y la identificación de Lee respondan dot ID de usuario. Esto. Tenemos que mandar el correo electrónico y son pequeños. Después mostraremos un snack bar que se muestra cerca aquí solo escribiré correctamente registrado y no quiero que el usuario vuelva a y luego sus credenciales de inicio de sesión. Entonces lo que puedo hacer es llamar aquí a la función de inicio de sesión, así. Empleado de inicio de sesión. Tengo la contraseña de correo electrónico y el contexto. Y ya que la carga de colono es falsa aquí también. Entonces voy a quitar esto de la función que hay cosas en Chen. No quiero que se pongan cargando falso porque es directamente llamar dentro de iniciar sesión empleado. Aquí. Espero que hayan entendido que he llamado a esta función aquí para que el usuario no tenga que volver a ingresar ese correo electrónico después de registrarse. Imagínese que aquí está registrado y ahora nuevamente tiene que ir a la página de inicio de sesión y nuevamente escribir los mismos datos de inicio de sesión. Esa es la única razón. Ahora, ya que tenemos este nuevo proveedor, lo declararé en el multi proveedor. Así que sólo tienes que ir aquí, copiar esta línea, pegarlo, y escribir servicio dv. Eso es. Entonces eso es todo para este video. Continuemos en la próxima sesión. Gracias. 12. Maneje el Estado de usuario de Auth: Hola. Entonces tenemos todo listo. Esa es la parte de registro y de inicio de sesión. Ahora, en la pantalla Insights, crea una pantalla de inicio para que el usuario pueda navegar a esa después de registrarse con éxito. Así que simplemente importa material, luego crea un estado rígido, nombra pantalla de inicio. Entonces aquí simplemente devuelven un andamio niño centrado en el cuerpo. Y lo escribiré pantalla de inicio. Entonces esto es solo un dato ficticio por ahora. Solo el simple widget de texto en el medio de la pantalla. Ahora, tenemos que comprobar, es decir cuando el usuario o los pines que tenemos que comprobar si está conectado o no. Es decir, si se trata de un nuevo usuario ya ha iniciado sesión antes. Entonces tenemos que mostrarle la pantalla que es la página de inicio de sesión o la pantalla de inicio condicionalmente. Para esa pantalla de información, cree una nueva pantalla llamada pantalla de inicio. Punto punto. Nuevamente importar material. Entonces crea un rígido apátrida, llama a esta pantalla de presentación. Entonces aquí en el cinturón. En primer lugar, llamaré al proveedor impar. Es decir, encuestas impares es igual a proveedor de contexto. Y luego el servicio. Entonces voy a devolver archivo en consecuencia, esto si el servicio AAD oscuro usuario actual es igual a null, luego a la pantalla de inicio de sesión, a la pantalla de inicio. Eso es. Sé que anteriormente por después de registrarme, también me encantaron con los detalles. Entonces por ahora voy a llamar a las encuestas de arte punto cierre de sesión para que esa sesión termine. Y ve al punto punto principal y haz que la pantalla de inicio sea la pantalla raíz. Así. Eso es. A ver, incapaz de pasar. ¿Cuál es el trato aquí? Bien. Solo tienes que ir a la pantalla principal.out y splash y comentar esto por ahora. Bien, para notificar lista una y otra vez. Es decir, eso no lo es. Entonces, obviamente, no volveremos a llamar a esta función aquí más adelante. Pero ahora, como tenemos aquí esa sección de base de datos, tenemos que ir a la autenticación y eliminar a este usuario porque antes no guardamos del usuario en la base de datos. Eliminar este usuario, volveremos a registrarnos. Ahora saquemos nuestra app. Vuelva a hacer clic en eso dentro del correo electrónico. 345. Registrar. Ahora veamos si iniciamos sesión directamente o no nos registramos correctamente. Y nos envían directamente a la pantalla de inicio. Entonces de lo que estaba hablando. El usuario no tiene que volver a iniciar sesión porque es una buena experiencia, creo. Entonces. Ahora bien, si reinicio, vamos a ver ¿qué página veo esa? Veo el login o directamente la pantalla de inicio. Y a ver si estamos en la pantalla de inicio. No hay pantalla de inicio de sesión y todo ya que también estamos manejando el estado de ese usuario. Así que gracias. En el siguiente video, trabajaremos en la parte de la interfaz de usuario de la pantalla de inicio. 13. Trabajar en la pantalla de inicio: Hola, bienvenido de nuevo. Ahora comencemos a trabajar con la creación de una barra de navegación inferior. En la pantalla de inicio, verás que la educación en el hogar está vacía ahora mismo. Así que vamos a trabajar en eso. Ir a la pantalla de inicio. Aquí. Debajo del cuerpo. Vamos a crear un nav inferior, barra de nav. Será un contenedor. Es el valor. Entonces la altura del contenedor es de 70. Entonces dale algo de margen. Const, las entradas de borde puntean solo a la izquierda, 12, derecha, 12, inferior 24. Después decoración. Regala una decoración de caja const. Entonces aquí dale color. Colores punto blanco. Después frontera-radio. Radio de borde radio de punto, punto circular para t. Luego dar efecto de sombra de caja también. Acepta una matriz y el único valor que le daremos es box-shadow, luego más opaco. Colores, oscuro, negro, 26, radio de desenfoque. Después offset. El valor de compensación será 22. Entonces solo veamos cómo se ve. Mira tenemos esta barra de navegación en este momento, es solo cierto contenedor. Vamos a agregar los valores aquí. Aquí serán íconos. Y para eso, usaré una biblioteca conocida como iconos Font Awesome. Así que simplemente abre el terminal, terminal termina a la derecha, más plano. Agregar fuente. Carta impresionante. Entonces este es el que puedo nombrar, ese es el nombre del paquete. Pulse Intro. También puedes ir al dev y buscar este paquete si quieres. Este paquete nos ayuda a usar muchos iconos. En esta aplicación. No vamos a usar tantos íconos. Es decir, si quieres, puedes quitar esto más adelante también. Para que funcione, hay que detener la aplicación ya que es un paquete nuevo y luego volver a ejecutarlo. Simplemente voy a cerrar este archivo. Y esto es que ya no necesito estos archivos. Sólo la pantalla de inicio. ¿Bien? ¿Qué pasa? Ahora otra vez, trabajando. Ahora, vamos a crear los iconos dentro de este contenedor. Aquí en ese niño. Simplemente dale una fila. Fila. Tienes hijos. Y en esa fila, ¿verdad? Principal existe y cruza eje a centro, así. Y entonces necesitamos **** podemos decir que simplemente lo haremos. Puedo ver una lista de icono, datos, navegación, iconos. Entonces peor voy a dejar que Font Awesome íconos, que días calendario sólidos, luego icono Font Awesome, marque. Y por último, Font Awesome icon dot solid user. Entonces estos son los tres íconos que usaremos. Aquí en que los niños, simplemente bien, le dan un bucle for. Para int I es igual a cero. I menos que los iconos de navegación longitud de punto I más más. Entonces usa este operador de spread. Y entonces usaremos niño ampliado será centro. Y luego el icono F le da índice de icono de navegación que estos uno por uno, todos los iconos serán de salida en una región expandida. Entonces ahora vamos a comprobar cómo se ve. Si voy a ver, tenemos esos tres que puedo ver en esto luciendo decente, creo. Ahora, obviamente no pasa nada si hago clic en él. Tenemos que trabajar en eso. Ahora, aquí debajo de los iconos, vamos simplemente como int índice actual es igual a uno. Y en eso niños, tenemos esto expandido. Entonces este centro dentro de GestureDetector. En la pestaña. Simplemente escribiremos set state. El índice actual es igual a I, cambiar el índice. Y entonces aquí cambiaremos ese color según el índice. Entonces calificaremos el color. Si, si yo es igual al índice actual, entonces los colores que el acento rojo colorea oscuro, negro, 54. Del mismo modo tamaño. Si yo es igual al índice actual, entonces hazlo 30 o bien 26. A ver si está funcionando o no. Si hago clic aquí, vea el tamaño del icono y el color, ambos están cambiando. Ahora, se puede ver que tenemos tres pantallas. Así que vamos a crear esas tres pantallas. Dentro de las pantallas, crear calendario, pantalla, punto, punto, luego asistencia, punto verde punto. Y finalmente tenemos archivo punto verde punto. Dentro de todo simplemente, vamos a crear una pantalla básica. Es importante material entonces crea el prestamista. Pantalla. El retorno es andamio. Cuerpo, centro, niño. El siguiente calendario. Copiar todo. Ir a Pantalla de asistencia basada cambió su nombre para luego bailar. Luz verde hoy. Asistencia. Y de igual manera ir a la pantalla de perfil, pegar todo. Cambiaron su nombre a pantalla de perfil y perfil de idea. Esto es solo una pantalla ficticio en este momento. Por último, añadir que estas pantallas en el cuerpo de la pantalla de inicio para que podamos navegar hasta ellas con la ayuda de la barra de navegación inferior. Así que ve a la pantalla de inicio aquí. Termina aquí cuerpo, ¿verdad? Indexado. Esa estaca ahí dentro. Entonces en el índice estará el índice actual. Y los niños serán todas las páginas. Esto será const. Escribamos a los prestamistas en verde como primero, luego en verde, luego esa pantalla de perfil. Eso es. Guarde todo. Compruébalo. Ver hoy asistencia. Si hago clic en calendario. Y si tengo si hago clic en el Archivo de Subir y desde los índices cuando es 01, leer la primera página se muestra es que la asistencia para el día de hoy? Entonces todo está funcionando hasta ahora. En el siguiente video, trabajaremos en esto hoy, luego la pantalla. Gracias. 14. Trabajo en la interfaz de usuario de asistencia: Hola, bienvenido de nuevo. Entonces ahora comencemos a trabajar en esta fecha y luego a la pantalla UI. Entonces aquí en el cuerpo, Empecemos con es solo hijo ScrollView. En ese niño tendrá una columna rígida. Y luego que los niños y en ese niño soltero se desplace por encima, voy a dar algunas pistolas de acolchado e insiste en que todos los 20. Ahora en eso hijos, vamos a tener un widget de texto que se superpone dentro del contenedor. Dar alineación de TI a la alineación. Puntos centrados, izquierda. Después margin, const, sumando conjuntos, no sólo 32. Entonces niño. Const. Texto como bienvenido. Estilo. Textil. En el textil dan algo de color. Colores, no negros 54. Y el tamaño de la fuente como 30. Bien, guarda esto. Y luego debajo de este contenedor, como otro contenedor que está aquí tenemos la bienvenida y aquí tendremos el nombre del empleado. Es alineación. Alineación, centro izquierda. Entonces niño echó un vistazo, texto. Soy Louis de nombre. Esto es solo un empleado llamado luz ficticia. Ahora mostraremos más adelante el estilo de texto y solo le daremos un tamaño de fuente de 25. Ahora guárdala. Vamos a comprobarlo. Mira, tenemos el nombre de bienvenida y empleado aquí. Entonces continuemos. Debajo de este contenedor. Voy a tener otro contenedor. Copia este, pegarlo. Aquí. Habrá margen. Como const. Agregando conjuntos que sólo 32. Y aquí los textos serán de dos días. Eso sí. Y el tamaño de la fuente va a estar haciendo hacer. Y luego debajo de este contenedor. Y ese contenedor, dale un margen. Const. Agregando conjuntos que solo 12. Pero tengo 32. Escribo 150. Declaración. Const decoración de caja. Los colores LED punto blanco, sombra de caja. Aquí tenemos la sombra de caja. Bueno, habrá colores que 26. Entonces el radio de desenfoque es entonces un valor de desplazamiento, desplazamiento a dos. Y debajo de esto, eso está por debajo de esa sombra de caja. Tenemos ese radio fronterizo. Radio del borde, los puntos del radio son más fríos. Ahora digamos, bueno, veamos cómo se ve y veamos el estado actual del estado y esto se ve decente. Ahora. En el siguiente video, trabajaremos en la interfaz de usuario izquierda. Gracias. 15. Implementar la diapositiva para registrarse: Hola, sigamos trabajando. Entonces aquí teníamos este contenedor. Dentro de esta cuadrícula contenedora, ese widget de fila hijo. Habrá niños. Niños aquí escribirá la alineación del eje principal, centro, alineación, puntos. Y luego dentro de eso, los niños murieron y se expandieron rígidos. Espero que conozcas todos estos widgets porque solo estoy creando la interfaz de usuario, nada más. X adherida. Entonces aquí será la visión de columna. Entonces otra vez en esa columna, tenemos la alineación del eje principal y la cruz. Sólo cópielo y pegarlo. Y entonces tenemos a esos niños. Ahora aquí. Así es. Se necesita widget. Ese texto se registrará. Dale un poco de estilo. Estilo de texto. El tamaño de la fuente será 20, el color será negro, 54. Entonces por debajo de este tamaño de texto, la caja. Espera un día. Separador infantil, solo para dar un poco de espaciado. Y luego otro texto. Ahora el momento en este momento solo es duro codificado 930. Después rancio. Estilo de cubierta, fuente, tamaño 25. Se puede ver. Es rho dentro de fila. Tenemos este widget ampliado. Ahora. Copia este rígido expandido. Y dentro de esta fila, pegarlo de nuevo así. Y aquí esto va a ser checkout. Y la textura quedará en blanco así. Y guárdala. Vamos a comprobarlo. Mira, se ve decente, creo. El estatus de hoy. Y así. Y por debajo de eso lo hace el estado de hoy. Puedes dar un poco más solo para dar un poco de espaciado aquí. Eso es. Arriba otra vez entre d. Bien. Ahora para el check-in, usaré un paquete. Entonces solo escribe más tarde. Bob, agrega diapositiva para actuar. Utilizaremos esta diapositiva para actuar paquete para implementar la funcionalidad, para el check-in, check-out y emplear. Esto se verá bien en lugar de solo un botón. Se presiona el botón elevado para hacer el check-in. Esto quedará bien. Supongo. Quizá tengamos que parar y volver a ejecutar. Veamos qué pasa. Pero si voy al pub spec punto YAML solo para comprobar, a ver, tenemos el widget aquí, lo siento ese empaque. Ahora vamos a trabajar en eso. Ir a continuación, a la pantalla. Voy a cerrar todas las páginas. Aquí. En la parte superior. Tenemos que crear una clave para la diapositiva. Clave global rígida y sólida. El estado de acción deslizante q0 es igual a la clave global. Estado de acción ligera. Este caso solo es necesario para que el widget funcione. Ahora, abajo, dentro de esa columna tenemos que escribir. Entonces es decir, tenemos este widget de columna aquí, baje. Aquí. Tenemos que dar otro contenedor es alineación. Alineación centro izquierda niño. El siguiente 15. Abril 2023. Textil. Ahora solo estoy codificando esta información. Y de manera similar copiarlo y pegarlo de nuevo. Aquí que la x será el momento. Entonces solo escribiré Duan De cero-cero, cero-uno PM. Y que te diviertas el tamaño será D. El color será colores punto negro. Quinto incumplimiento. Sólo ahorra. Y ver. Esto solo muestra esa última fecha. Eso es. Y esta será esa hora, la hora actual. Ahora es el momento de crear el botón deslizante. Dentro de esa columna. Simplemente crea otro contenedor. Margen. Const, agregue en conjuntos que sólo 25. Entonces niño será un constructor rígido. Así. Aquí será el contexto. Y luego simplemente devuelve la acción de deslizamiento así. Y ahora se va a asesinar el texto. A la salida. Entonces el textil será textil. Color. Capas, oscuro, negro, 54. El tamaño de los bonos será de 18. Entonces por debajo de ese estilo. El círculo exterior, el color exterior serán colores. Ese color blanco serán los colores puntean el acento rojo. La clave será clave. Por último, al presentar. Así. Aquí, justo. El estado jardín reset. Así que eso hace luz, que llega a su posición original. Entonces mira, tenemos ese deslizador. Llega a su posición original porque la estamos reajustando. Pero se ve tan bonito. Y en consecuencia, solo puedes darle el tamaño del margen de relleno si sientes que queda espacio aquí. Entonces puedes hacer estas cosas más adelante porque quizás quieras mostrar alguna otra información, algún tipo de anuncio aquí. Depende de ti. Para mí, esta funcionalidad debería funcionar. Eso es. Eso es. Para este video. Seguiremos trabajando y obtendremos datos reales en esto falla en los videos posteriores. Gracias. 16. Función obtener datos de usuario: Hola, bienvenido de nuevo. Ahora es el momento de crear una función que recoja los datos de usuario de la tabla empleados que se muestra, para que podamos mostrar los que están aquí en la pantalla. Ir al archivo de puntos de encuestas DB. En la parte superior. Primero, cree una variable para el modelo de usuario, que puede ser nula. Modelo de usuario. Entonces crea una función. Si la función futura que devolverá un modelo de usuario es, vamos a parchear eso. No lo convierte. Después obtengo datos de usuario. La consulta es que los datos del usuario son iguales a esperar. Ron oscuro de Super Way. Es decir, ¿qué mesa? La tabla es constantes no emplear tabla. Y consulta punto seleccionar. Es decir, seleccionará a todos, pero obviamente tenemos que seleccionar solo a este empleado. Entonces usaremos igual qué columna tenemos que verificar la columna ID y qué valor tenemos que verificar. Tenemos que revisar las superautopistas que art. El id de usuario actual Es decir, como sabemos que no puede ser nulo, tengo esto dio esta exclamación. Esta consulta irá a la tabla de empleados y obtendrá esos datos que son iguales a este ID. Y esto significa que irá a verificar este ID, este id de columna Esto es muy sencillo. Entonces. Y sé que los datos serán solteros y Lisa solo escribirá soltera porque no puede haber más de un empleador con la misma identificación. Entonces voy a escribir el modelo de usuario es igual al modelo de usuario de Jason. Y voy a enviar esos datos de usuario aquí. Y también devolveré el modelo de usuario. Y esto no es nulo. Entonces espero que hayan entendido esta línea de código. Entonces estamos obteniendo los datos. Estamos cambiando los datos a un modelo de usuario y almacenándolos en este modelo de usuario, una variable que hemos declarado en la parte superior. Ahora, mostraremos ese nombre de usuario o el ID en lugar del marcador de posición dentro de eso y luego la pantalla. Entonces aquí tenemos este nombre de empleado contenedor que voy a crear un widget de consumidor. Esto es, esto viene de proveedor. Recuerda, estará escuchando a qué proveedor, DB, servicio y Constructor. Tenemos contexto, la instancia de clase de servicio y el niño. Luego devuelve tu constructor de sillas. Y ahora, ¿cuál es el futuro? El futuro son las encuestas dv, punto obtener datos de usuario. Por lo que enviará los datos del usuario aquí. En el Builder, obtenemos el contexto y, por lo tanto, la instantánea. Ahora, sabemos cómo usar un futuro constructor. Es decir, si snapshot tiene datos, entonces haz otra cosa. Retorno, const, tamaño, caja, peso, 60, niño, indicador de progreso lineal. Y lo que sea que el usuario tenga datos. Entonces devolveremos este contenedor que es el nombre del empleado contenedor. Tal vez vaya a devolver el nombre del empleado contenedor. En ese texto. Escribiremos aquí snap shot. Es decir, si tiene el modelo de usuario, usuario es igual a snapshot ese conjunto de datos porque sabemos que los datos que vienen son un tipo de modelo de usuario. Y aquí ahora en ese texto, voy a escribir si el nombre del punto de usuario no es igual a vacío, luego escribo el nombre del punto de usuario. Espera, vamos a ver. Espero que no pase nada. Al igual que el id, así, ID de empleado de usuario. Pero ahora veamos. Bien, esto no puede ser constante. Eso es. Y que sea const. Ahora guarda todo. Espero que hayan entendido que usar al consumidor y acceder al servicio, luego llamar a la función futura. Y aquí simplemente están comprobando que el usuario haya actualizado su nombre o no. Si no, entonces muestra la identificación del empleado con su hashtag. Vamos a ver. Esta es mi identificación de empleado. Y como en estos momentos mi nombre no está ahí, así que se nos mostrará la identificación del empleado. Esto se hace ahora para formatear los datos y todo. Voy a usar un paquete. Así que simplemente idea. Bob, agregue el paquete IN D. Intel. Voy a usar este paquete para el formateo de fechas. Iré al pub spec punto YAML y comprobará. Sí, tenemos el paquete. Ahora. Quiero mostrar la última fecha aquí. Así que ve al check-in, check-out. Bien. Aquí. En ese texto, tenemos que escribir el código. Formato de fecha, ¿bien? Entonces sí, correcto, formato, que quiero es pequeño VD mayúscula M, y luego pequeño y 0 veces tantas veces. Eso automatiza el tiempo que ahora así. Y de manera similar copia esta línea y pégala aquí. Y aquí. El formato será en las horas, minutos, segundos, así, ¿bien? Pero obviamente los segundos seguirán cambiando. Entonces es por eso que envolveremos esto dentro de un generador de stream. Y aquí, stream será Stream punto periódico, const, duración, segundos, uno cada segundo, solo refrescarlo. Entonces los segundos que es el valor sigue actualizándose. Que const, bien. Que sea constante. Vamos a comprobarlo. Y vamos a ver. No lo sé. Punto de transmisión, instantánea periódica. Digamos cualquier cosa otra vez y firmaremos. Ya que también he usado otro paquete. Comprobemos el código, pista no autorizada. Esto importaba. No debería ser, no debería obtener este error. Jwt caducado, k no autorizado. veamos. Tengo el obviamente está funcionando antes que estaba ahí ahora mismo, que está aquí. A mí me parece gracioso. Ve a esta pantalla de presentación y cierra la sesión. Ahora. Veamos qué está fechado. Bien. El token caducado está caducado. A ver. Yo no lo creo. He cometido algún error. Vamos a registrarnos. Consultar y ver. Bien, y ahora todo está bien. No sé qué era antes el editor, pero solo me desconecto e inicio de sesión. Y como pueden ver, la moneda de diez centavos ¿ hay hay check-out? Check-in. Tenemos de todo. Eso es. Eso es todo para este video. Supongo que aquí hemos hecho mucho. Durante la siguiente sesión. 17. Tabla de asistencia y clase de servicio: Hola, bienvenido de nuevo. Entonces como puedes ver, tenemos las fechas y UserData funcionando, pero ahora tenemos que trabajar en el mercado y la funcionalidad densa. Entonces para eso, antes que nada, vamos a crear una nueva tabla. Dentro de supervisar y nombrarlo. Se le puede nombrar asistencia. Asistencia, discapacitados, seguridad a nivel de fila. por ahora, y habilitar en tiempo real porque mostraremos esa historia más adelante. Ahora. La primera columna será ID de empleado, clave foránea, una clave dos, empleados. Y la idea aquí que es la IDT no hecha ID de empleado de ese cliente, porque esa no es una clave primaria. Esta es la clave principal. Las claves foráneas pueden ser sin etiquetar. Asignado a una clave primaria. Entonces dale una fecha de tipo texto. Después check in. Se leerá tipo de texto. Después echa un vistazo. Será dx, dy. Hola. Kay. Así que guarda todo solo estoy comprobando eso. Sí, identificaciones de empleados, su fecha está ahí. Sí. Guardar. Se está sumando. Bien, esto está hecho. Ahora aquí. Ir a modelos y vamos a crear un modelo por ahora, y luego el archivo y luego modelar punto, punto, Digamos clase. Y luego más inteligente por null. ID de cadena. Comprando, siendo fecha. Por ahora. Se ha baraja en la cuerda final. Esto puede estar ahora nivelado. Echa un vistazo bien hasta que mueran. Creado en, bien. Vamos a crear el constructor que va a aceptar este valor se adquiere. esta identificación de punto, se requiere esta fecha de punto. No hay check-in. Pero en el caso de checkout, no usaremos requerido es será este checkout y luego requerido, este punto lo creó. Ahora vamos a por los tres. Y luego más inteligente y más inteligente punto Rahm. Jason enviará un mapa de datos dinámicos de Jane. Y se hizo. Y luego en más inteligente. Ahora aquí, checkout también. Identificación de empleado de datos. Entonces. De igual manera el nombre de la columna es Jack in. Copiar y pegar. Echa un vistazo. Y esto se creará a las y esto tendrá marca de tiempo. Entonces tenemos que analizarlo fecha hora que barre porque los supervisores no nos está dando en un formato de fecha y hora. Entonces simplemente vamos a cambiar el formato aquí. Ahora. Para trabajar con entonces cosas, vamos a crear un nuevo servicio para ello. Vaya a Servicios creados, cree un límite de archivos. Entonces servicio punto punto. Vamos a crear este archivo. Asistencia, encuestas, extensión, cambio nota si comprador. Entonces como dijiste, crea una clase base de spa y supervisa Isabel dos base dot instance dot client. Entonces, y luego modelar, hazlo sin etiquetar por el momento. Entonces lo conseguiré hoy. Se rasgan la fecha de vencimiento abajo en y en este momento. Ahora no. A continuación, tenemos el booleano. Booleano está ahí en ese servicio es copiar y pegar. Y recuerdo que aquí no estamos usando este valor booleano. Entonces, si quieres, puedes simplemente quitarlo más adelante. Ahora tenemos este nuevo proveedor ir al archivo punto punto principal. Ahora multi proveedor mencionó este nombre, que es archivo de servicio de asistencia. Y también en el archivo punto punto constante, crear una nueva const estática. Entonces lo harán, van a hacer entonces densos así. Entonces sí, eso es todo. Eso es todo para este video. En el siguiente video trabajaremos en las funciones para conseguir eso y luego estado y mercado. Y luego Gracias. 18. Función para marcar la asistencia: Hola, bienvenido de nuevo. En esta sesión, completaremos la pantalla de Asistencia y crearemos todas estas funcionalidades. Así que vamos a crear una función para obtener el estado. Las encuestas de asistencia a las que acudir aquí. Y ahora. Vamos a crear la función futuro y llegar a la asistencia. Primero, verificaremos si el empleado ha etiquetado en parte hoy o no. En caso afirmativo, entonces almacenaremos esos datos dentro de nuestra asistencia de manera más inteligente. Es decir, que no es liberal. Vamos a encender por otra lista. El resultado es que va a hacer. Entonces el punto de Bobby del que eran constantes punto, luego estable, punto, selecto, punto igual. Entonces tenemos que verificar la identificación del empleado. El ID de empleado es igual al valor. Supervisar punto punto, ID de usuario actual. Así. ¿Bien? Entonces comprobaremos si el resultado no está vacío, es decir al menos tenemos algunos datos de asistencia. Entonces el modelo de asistencia es igual al modelo de asistencia de Jason. Punto de resultado primero. Y luego al final notificaremos a los oyentes desde datos para esa fecha en particular. Y también, me olvidé. Aquí, tenemos que verificar esos datos también porque llegar a la fecha y terminar. La fecha será igual a hoy. Que esto es importante obviamente porque habrá mucha asistencia en esa columna, pero esa fecha en particular y ese empleado en particular será solo una. Por eso he usado resultado al principio. Este es el puñetazo y para conseguir hoy asistencia, es decir solo te voy a mostrar también, lo que ellos tiempo hablando. Este estatus de hoy. Bien. Entonces ahora la función más importante, puñetazos para marcar asistencia. Así que vamos a crear eso también. Escribamos una marca de futuro. Lavabo de asistencia. Requerimos los contextos de campana. Ahora aquí primero comprobaremos si empleado se ha registrado para ese día o no. Si no, entonces insertaremos un nuevo dato para ese día. Y en caso afirmativo, entonces actualizaremos esos datos con ese tiempo de pago solo porque el usuario ya se ha registrado. Entonces escribamos si la comprobación del modelo de asistencia es igual a nula, así, entonces agregaremos un peso. Así que el punto de Bobby de las constantes, tabla de asistencia de punto inserto de punto. ¿Bien? Ahora obviamente estamos insertando los datos. Aquí. La identificación del empleado será súper formas. Od punto ID de usuario actual. Entonces serán fecha de vencimiento. Entonces verificar el check-in será formato de fecha, horas y minutos. Dot parlamento, datetime punto ahora. ¿Bien? Entonces esto se ejecuta si el usuario no se ha registrado, y supongamos que el usuario se ha registrado, entonces lo haremos de inmediato. Supervisar las constantes que mesa de asistencia. Actualización de puntos, ¿de acuerdo? Actualizaremos el valor, pero donde eso sea igual punto, ID de empleado es igual para supervisar ese art. Y aquí, obviamente no queremos a Alice solo eso es que tenemos que leer más. Si else-if el checkout del modelo de asistencia es igual a nulo, es decir, la comprobación está ahí, pero el checkout no es art. Dot ID de usuario actual. Y nuevamente, verificaremos puntos iguales para esa fecha en particular solamente. Por lo que hay que asegurarse de que estamos actualizando esa fecha solamente. Bien, Esto es muy importante. Ahora ve a la sección de actualización que está aquí. Aquí solo actualizaremos ese checkout. Echa un vistazo así. Y de manera similar copia esta línea y pegarla aquí. ¿Bien? Y ahora tenemos el if, else-if, y luego finalmente S que es check-in tampoco es nulo. El checkout tampoco es nulo. Después mostraremos un snack bar utils dot show. Y mensaje será, ya has checado hoy. Bien. Entonces al final, llamaremos a la asistencia get today. Eso es para que obtenga los últimos datos y actualice la interfaz de usuario porque aquí tenemos a los oyentes notificantes. Por lo que actualizará los últimos datos. Con este modelo de asistencia, C, Como puedes ver, estamos actualizando eso y luego algún modelo aquí. ¿Bien? Sé que hay mucho código, pero es muy sencillo. Si tienes algún tipo de aplicación, entonces sabes que solo estamos creando, actualizando, eliminando conjunto de datos. Ahora ya tenemos lista la función. Ahora es el momento de que hagamos cambios en la interfaz de usuario. Así que ve a Pantalla de asistencia punto punto. Ahora, lo primero que vamos a hacer es en el estado init llamado llegar a él y luego poner de contexto más amplio. Tenemos que escribir servicio de asistencia, punto, ponerse al día y denso aquí. Escuchar va a ser falso. Ya que solo quiero que eso se haga de ahí inicialmente. Entonces lo que quiero es aquí, me relaciono por nulo. Entonces entonces proveedor de servicios punto fuera de contextos, lo mismo de contextos. Y ahora tenemos eso y luego proveedor de servicios aquí. No estoy llamando aquí a esta función porque ya que esta se llamará varias veces para eso, sin motivo, también se llamará a esta asistencia. Por eso sólo lo he llamado en el estado init por primera vez. Entonces vayamos a este check-in infantil. Bien. Ahora aquí, este texto de check-in, tenemos que cambiar y simplemente hacer que estas cosas const, porque estas cosas serán const. Y Li, estos textos van a cambiar. Por lo que esto serán encuestas de asistencia, modelo de asistencia, comprobación. Si es nulo, entonces escribe la hora MD o bien escribe ese check in time. Entonces esto simplemente en su lugar de salida, esto. Si es nulo, entonces da salida a esto. Bien. De igual manera, copia este código. Vaya al texto de pago aquí, será Checkout, justo en ese momento aquí. Si es nulo, entonces simplemente usa el marcador de posición y hazlo const. Hay cosas también serán const. Sé que hay mucha const. ¿Bien? Así que lo hemos hecho ahora solo estoy comprobando que todo esté terminado y no me quede nada. ¿Bien? Ahora tenemos que ejecutar el mercado luego denso en la diapositiva. Es decir cuando usan esta diapositiva para hacer el check-in, check-out. Entonces aquí vuelve diapositiva, Sí, ésta. En primer lugar, tenemos que dar salida condicionalmente a esos textos. Entonces volveremos a parecer, encuestas de asistencia. Modelo de asistencia. Si el check-in es igual a nulo, entonces ¿verdad? Deslízate hasta el check-in. Aquí, deslice a la derecha para registrarse o es un poco de pago. Eso es. Entonces tenemos el textil onsubmit, que sea un fregadero y llame directamente a las encuestas de asistencia dot market que contexto denso. Entonces después de que esto se complete, configuraremos esa clave para que el usuario pueda volver a usar el control deslizante. Nosotros hemos hecho todas las cosas. Es tiempo, ahorramos y probamos nuestra aplicación. A ver si hay algún error o no. Oh, bien. Iré aquí en la asistencia y sólo nos refrescaremos. Y vamos a ver. Aquí no hay datos. Ahora. Si hago el check in, vea esa hora de entrada. ¿Hay 18, 39? Obviamente, esta vez está en el emulador. Entonces por eso podrías estar pensando, bien, aquí la hora es diferente, aquí la hora es diferente, pero al menos se registra la hora del dispositivo móvil. Así que vamos a comprobarlo. Ver. Hemos creado en el ID de empleado el check-in de deuda, el check-out es nulo. Entonces eso significa que el check-in está funcionando perfectamente y solo esperaremos, para t. es decir, que me vaya y le haga saber que está funcionando o no. Bien para los gustos ahí. Vamos a echarle un vistazo. El checkout también está ahí hecho. Está funcionando. Ahora si voy a ver tenemos el valor del checkout actualizado solo en esta tabla. Ahora. Supongamos que el usuario intenta volver a realizar el check out. Entonces aquí se mostrará, ya has checado hoy. Eso significa que tienes que volver mañana. Por último, la pantalla de Asistencia está funcionando a la perfección. Toda la funcionalidad funciona a la perfección y no hay ningún error en el código. En el siguiente video, trabajaremos en el historial de asistencia para que el usuario pueda ver su asistencia al autobús y la hora de entrada y salida. Gracias. 19. Función para obtener la historia de asistencia: Hola. Bienvenida de nuevo. Ahora es el momento. Trabajamos en el historial de asistencia. Esa es nuestra pantalla de calendario. Para eso. En primer lugar, tenemos que añadir un nuevo paquete. Entonces abre una terminal y agrego mi oreja para que el usuario tenga pueda cambiar o seleccionar el año y mes para que quiere obtener la asistencia. Eso es. Si voy al archivo Pub spec punto YAML, se puede ver aquí tengo el mes simple aquí, más grande. ¿Bien? Ahora a continuación escribiremos función def para obtener el historial de asistencia. Así que ve a él y luego servicio punto punto aquí. En la parte superior. Voy a crear una variable que contendrá una montaña de datos buscados. Entonces aquí, sólo estoy pensando dónde escribir. Vamos a escribirlo aquí. Cepa. La asistencia es de tres. Mes es igual al formato de fecha apical m, M, m, luego pequeño y, y, y, y formato punto. El tiempo. Ahora k. Entonces voy a llegar ahí. Voy a dejar que llegue ahí, obtenga asistencia, Mes de la Historia. Y voy a enviar un valor esto. Y entonces voy a tener un conjunto de su historia de asistencia. Mes. Entonces valoraremos aquí. Nos gustará que el mes de asistencia sea igual a valor y notificar a los oyentes. Así que simplemente somos solo Este es el mes que revisa fuertemente el historial de asistencia. Entonces, al principio, el mes va a estar muerto significó solamente. Y entonces si quieres, puedes cambiarlo. Por eso estoy usando esto para que cuando vaya a la pantalla de Asistencia, al menos para ese mes, ya obtenga los datos. Ahora, crearemos una función para devolver un futuro con cheques esa columna de fecha para la búsqueda Montagnier. Así que vamos. Derecha. Futura lista de asistencia inteligentemente. Obtener asistencia, historia. Un fregadero. Y Diane, bien. Primero, digamos que la consulta por datos de analista es igual a esperar Superbus, constantes de color marrón oscuro. Después, estable. Punto seleccionar punto igual columna, ID de empleado, igual para supervisar ese arte, ID de usuario actual. Y luego haremos algo como búsqueda de texto por puntos porque tenemos la fecha en cadena. Entonces aquí también estamos guardando los datos en cadenas, así que solo vamos a comparar. Es decir, la consulta es comillas dobles luego dentro de sus códigos únicos y mes de historia de asistencia. Así. Y los config serán en inglés. Inglés, así. Orden creado al ascender a falso. Entonces, como pueden ver, tenemos finalistas. Los datos son iguales a Superbus promedio que desde el inicio constante en un punto inestable, seleccione ese ID de empleado igual, que debe ser igual para supervisar el ID de usuario artístico. Después búsqueda de texto punteado. Revisaremos la columna de fecha y obtendremos todas las filas, que es igual a ese mes. Por lo que estamos enviando esta asistencia Mes de la Historia. Y entonces el orden debería estar en el orden descendente. Después de esto, devolveremos el mapa de puntos de datos. Mapearemos los datos. Obtendremos asistencia. Será el modelo de asistencia punto Jason. Enviaremos cada asistencia. Y por último, vamos a convertir estos datos en una cadena, en una lista. Por lo que esto se convertirá en un modelo de lista de asistencia. Entonces esta es la función. Eso es. Para este video. Trabajaremos en la parte de UI en los próximos videos. Gracias. 20. Trabajar en la interfaz de usuario: Hola, bienvenido de nuevo. Entonces ahora comencemos a trabajar en esa pantalla de calendario. Aquí mostraremos ese historial de asistencia del empleado para un mes y año en particular. Entonces lo primero que haremos es conseguir la asistencia del proveedor. Encuestas es igual conocer Vida punto de contexto. Y escribí, debería cortarlo y pegarlo dentro del servicio de factura y asistencia. Bien. Contamos con el proveedor. Sí. Regresarán columna Harlem que niños. Contenedor. El contenedor da la alineación a la alineación. Centro a la izquierda. Después margen, const, sumar en conjuntos que solo de izquierda de dop 60. Parte inferior. Entonces, entonces niño será const text. Mi asistencia. Estilo, textil, dar duff tamaño de fuente 25. Bien. Entonces por debajo de este contenedor, fila, dominio X es alineación. Los puntos de alineación espacian de manera uniforme. Aquí. Mostraremos ese mes actual así como un botón para seleccionar un mes. Entonces escribamos que los niños más los textos serán. Después después encuestas. Asistencia, Historia, Estilo Mes será const. Decks, murió. Bien en talla 25. Entonces tendremos un botón de esquema. El próximo será semana, mes. Hazlo const. Bien. Esto nos ha convertido en mes. En el on-premise, conviértelo en un fregadero. Entonces escribe Pi otro. Seleccione. El ID es igual a mes simple aquí, porque este es el paquete dot show lunes. Porque el diálogo aquí, tenemos esto y tenemos que escribir desactivar futuro es igual a verdad. Eso significa que esto inhabilitará años futuros. Obviamente el usuario no puede entrar en años futuros y obtener su historial de asistencia. Entonces escribiremos cadena mes grande. Es decir, tenemos que formatear esta fecha en nuestro propio formato, que se está utilizando en todas partes. Entonces solo diremos mayúscula M cuatro veces pequeño vi cuatro veces. Esto nos ayudará a comparar los datos que hay ahí. Tenemos textos o canal. Es por ello que estamos formulando fecha seleccionada. A ver. Haz que te aguarde esta sencilla montaña. Y luego simplemente cambiar esas encuestas de inquilinos. Asistencia, mes de servicio es mes escogido. Ahora, si vas, eso son encuestas de asistencia, Mes de la Historia. Esto es un setter. ¿Ves? Entonces, cuando establecemos el valor, cambiará el valor de este. Y luego notificar al oyente que volverá a reconstruir la pantalla. Por eso vamos a obtener el último mes en el texto. Entonces si lo refresco, si lo refresco y voy a decir que tenemos varios ¿por qué este cero aquí? ¿Ms. Pensando? No sé qué hay en tu teléfono. Espero que no haya sumador. Haber hecho todo correctamente. Y luego la historia del baile, m, M, m. y creo que a nosotros le he dado esta línea extra. Por eso esa es la única razón. Es un error muy tonto que tengamos que asegurarnos de que estas cosas se están conectando. Entonces ahora, si reinicio, y espero que sea carácter, si voy a ver un braille, 2023, si los escojo y a marzo, será marzo. Bien. Eso quiere decir que está funcionando hasta aquí. Ahora vamos a crear el futuro constructor para obtener los datos llamando a la función get dependence History. Vamos a continuación de esto. Vamos a escribir el inicio esa fila obviamente molestó a esta fila. Está dentro de la columna tenemos que escribir x unión. Entonces tú constructor de gráficos. El futuro será, luego encuestas que obtengan historial de asistencia. Aquí facturará contextos, contexto como ver instantáneas, instantáneas. Ahora vamos a agregar si snapshot que tiene no hicieron algo. Como retorno, const. Indicador de progreso lineal. Fondo, color, colores punto blanco. Y rueda de colores, colores, gris, así. Y aquí en si snapshot tiene datos, entonces aquí nuevamente comprobaremos snapshot esa longitud de punto de datos mayor a cero. Es decir, si hay alguna historia o no. Si no, entonces devolveremos texto infantil const center. Y aquí en los textos no escribiremos ningún dato disponible. Hacer estilo de estilo de texto, tamaño de fuente 25. Eso es. Ahora bien, lo que haremos es si la longitud del punto de los datos de punto de instantánea es mayor que cero, entonces sacaremos algún tipo de widget, que haremos en el siguiente video. Gracias. 21. Mostrar los datos de historial: Hola, sigamos trabajando en la pantalla Calendario. Ahora, aquí, si snapshot esa longitud de punto de datos es mayor que cero, entonces devolveremos un widget de constructor de punto de vista de lista. Aquí. El recuento de artículos será datos de punto de instantánea, longitud de punto. Artículo. A continuación se encontrará. Aquí. Tendrá contextos y un índice. Entonces vamos a tener la idea y luego más inteligentes ya que sabemos que papi muere entrando en tipo de modelo de asistencia. Entonces, entonces, entonces, entonces los datos son una buena instantánea. Datos. Índice k. Ahora devuelva contenedor. Margen, se fue. Insets de borde. No sólo darle 12, izquierda, darle 20, derecha, darle 20. Abajo. Dale diez. Después la altura. 150. Después declaración. Const, decoración de caja, color, colores punto blanco, colores punto blanco. Entonces caja sombra tendrá caja sombra colores de color, negro. Cuando estas seis ideas borrosas entonces compensan dos a k. Obviamente, ¿verdad? Ahora. Sólo espera. Tenemos la sombra de caja. Entonces después de esto, esta fuera de la decoración de la caja, no saudita, después de la caja. Eso sin embargo, cierto. Radio fronterizo, radio de punto de radio fronterizo, esa circular 20. Ahora dale a ese niño al contenedor. Y el contenedor le da una fila. Principal existe matrices de alineación, la clase de centro de punto de alineación será tan centrada también. Entonces vamos a tener esos niños. Entonces K, como pueden ver aquí, niños. Entonces ahora vamos a trabajar en esos niños. Se ampliarán los primeros hijos. Margen de contenedor, const, agregando conjuntos. Al final. Veamos qué valor vamos a dar. Verificará el regulador en const, decoración de caja. Color, colores, el acento rojo, border-radius, border-radius dot, radio, puntos circulares 20. Bien. Entonces dale a este contenedor un centro quiral. Ahora, vamos a cumplir con esa fecha, formato de fecha aquí dentro, ¿verdad? Mayúscula E. Luego cambia esa línea a esta. Tendremos los datos, el domingo, el lunes y la fecha. Formato. Fecha de asistencia punto creado que debido a que esta será la misma así como la fecha. Por lo que será mucho más fácil cambiarlo. Entonces dale algo de estilo. Const. Textil. En tamaño será un color fino. Punto blanco. Peso de la fuente, font-weight, negrita. Bien. Tenemos esto y después de esto ampliado, derecho, Otra región ampliada. Tenemos una matriz de columna es alineacion principal extracelular mi centro de datos, alineacion transversal eje cruz x es elemento que centro que los niños. En que los niños const check-in de texto. Ahora mostraremos esa hora de entrada y salida. El estilo le dio algo de estilo de texto. Fuente, tamaño, Duan De, color, negro. Después se fue, solo dale, dale una caja de tamaño, peso. El niño divide esto. Esto es lo mismo que el que no hice entonces el texto de la pantalla. Después estado punto, punto, check-in. Stein, const, textil, tamaño de fuente, dale 25. Bien. Aquí tenemos la columna. Tenemos esto ampliado. Y luego de manera similar copia esta Jacqueline expandiendo y pegando. Y tenemos ejes principales, eje transversal. Entonces el texto será checkout. Esto está bien. Tenemos el divisor entonces aquí, ¿verdad? Punto de pago toString. Y si es nulo, entonces escribe ese titular de lugar así. Y después de esto ampliado, solo dale una caja de tamaño que esté dentro de esa fila. Recuerda, fuera de esta expandida, dame su caja de tamaño. Ahora, ejecuta la aplicación. Y derecho sigue ocurriendo si está mostrando en mi sistema la autorización y todo. Es porque estoy usando un emulador porque he probado toda la aplicación en un dispositivo real y estaba funcionando a la perfección. Entonces creo que si lo intentas en tu dispositivo, no obtendrás este tipo de no autorizados y los caducados. Y ahora vamos a la pantalla de inicio. Cerrar sesión el usuario. Ahora k i. Ahora estos errores, no vas estar consiguiendo este escenario de error más bajo es porque el ahora mismo, este es un dispositivo virtual y creo supongo que el tiempo también es diferente a R. Así que de nuevo, iré e iniciaré sesión. Tengo ese check-in check-out. Y si voy a la pantalla, ver tengo los datos y si voy a recoger un mes y darle marzo, entonces no hay datos disponibles. Si voy a elegir un Braille, entonces tenemos la fecha de entrada y salida. Y si vas al calendario, no lo creo. Se requiere que había un conjunto vacío. Este no requieres porque creo que el espaciado y todo se ve bien. Esto es que al final, hicimos la caja de tallas. Entonces este es el, por eso tenemos este espacio aquí. Porque todo está tomando igual espacio debido a la versión expandida. Pero creo que esto se ve decente. Entonces eso es todo. Nuestra pantalla de historial de asistencia también está funcionando perfectamente. Entonces continuemos en esos videos futuros. Gracias. 22. Función para obtener la ubicación de los empleados: Hola, bienvenido de nuevo. En este video, implementaremos una característica de obtener la ubicación actual del usuario. Entonces, mientras estamos registrando nuestra caja, también almacenaremos la ubicación del usuario para que sea más fácil para el empleador verificar si el empleado está en la oficina o no. Así que solo haremos la ubicación. No voy a estar comprobando la distancia y todo. Pero obviamente con esos datos, se puede comprobar la distancia desde la oficina y el usuario muy fácilmente. Ahora, para implementar esa característica, estaré usando ese paquete conocido como ubicación. Aquí. Este es el paquete. Así que simplemente cópielo y pegarlo en el archivo pub spec dot YAML. Con esta ubicación, obtendremos la latitud y longitud. Así que simplemente deténgalo y reinicie la aplicación nuevamente. Porque hemos instalado un nuevo paquete. Simplemente vaya y comience a depurar. Y como decía, almacenaremos la latitud y longitud del usuario. Y más adelante, si quieres, puedes usar el nombre del paquete es geocodificación para obtener ese nombre de calle, ciudad, país y otros detalles de esa coordenada de ubicación proporcionada por este paquete. Entonces depende de ti. El nombre del paquete es Joe. Espera, yo solo te lo mostraré también. Esa vez le está pasando a la codificación. Creo que fue algo a la codificación. Pero ya ves que este es el nombre de codificación geográfica. Sí. Puedes usar eso por tu cuenta si quieres. Ahora, en esa ubicación, estaré usando este código y voy a ver este código que voy a usar. Así que ahora, vamos a crear una nueva Clase de servicio. Servicios Insights. Archivo creativo. Ubicación, servicio, punto punto, simplemente ubicación correcta servicio. Este no es el proveedor. Y divídalo. Voy a importar material. Después voy a importar ubicación. Eso es. Ahora, crea una instancia de la ubicación. Entonces, ¿verdad? Ubicación, datos. Datos de registro. Luego crea una función que devolverá un mapa de cadena doble, es decir latitud y longitud. Y puede ser nulo, a veces. Inicializar y obtener ubicación. Haremos cosa de la junta aquí. Sitio, contextos, contextos para mostrar el snack bar. Ahora el código será como los booleanos. Las encuestas habilitan permiso, estado. Permiso. Concedido. El primero verifica si ubicación está habilitada o no. En ese dispositivo el servicio y es igual esperar ubicación. Servicios habilitados. Si el servicio no está habilitado, entonces relacionamos la habilitación de servicio es igual a 08. Localización punto solicitar servicio. Entonces si servicio habilitado, nuevamente frase, entonces estábamos como utils punto show snack bar. Por favor. Habilita la ubicación, servicio como este. Y vamos a devolver null aquí. El otro código no será ejecutado. Entonces esto será, esto será si no se les habilita el servicio. ¿Bien? Entonces comprobaremos. Si el servicio está habilitado. Entonces pide permiso para la ubicación al usuario. Eso significa que el usuario obtendrá una ventana emergente que permitirá que esta aplicación acceda a la ubicación. Entonces ahora tenemos permiso otorgado es igual a esperar ubicación que tenga permiso. Del mismo modo, escribimos si el permiso otorgado es igual al estado de permiso punto denegado. Entonces otra vez agregar permiso que es igual a esperar ubicación, solicitar permiso. Y nuevamente, si el permiso otorgado no es igual a los permisos, se les concedió escritorio. Después utils dot show snack bar. Por favor permita ubicación, exceso, devolución nula desde aquí. Y si este no es el caso, todo está bien. Después de que se otorgue el permiso, luego devuelva las coordenadas. Simplemente escribir datos de registro es igual a esperar ubicación que getLocation. Y devuélvala de aquí. Un mapa de datos. Deje que el tipo es igual al elemento de latitud de punto de datos de registro de punto de datos latitud . Aquí. Este doble también puede ser nulo. Del mismo modo, la longitud es igual a los datos logarítmicos dot edu. Entonces podrías estar pensando, ¿qué es este código? Entonces, si vas a la documentación oficial, obtendrás el código exacto aquí. Para que solo puedas leer o copiar o lo que quieras. Depende de ti. No estamos escuchando cambios de fondo y todo eso es por lo que no estamos haciendo ningún tipo de configuración. Eso es permiso y todo acceso en primer plano y segundo plano. Este tipo de cosas. 23. Ubicación de la tienda mientras se registra: Bien, Ahora, ya que vamos a almacenar estos datos en eso y luego estables, tenemos que hacer algunos cambios. Así que acude a empleado de asistencia. Y en esa asistencia, edita la tabla y agrega columna. Ubicación del check in, que estará en el formato de mapa, es decir Jason. Y de manera similar como la ubicación del check out. Esto también será en formato JSON. Sólo guárdala. Ahora, tenemos que hacer cambios en el mercado y luego su función. Entonces aquí en Dinamarca, la función de asistencia permite la asistencia solo si se otorga ese permiso de ubicación. Entonces aquí, en primer lugar, map, nullable, get location es igual a esperar ubicación, servicio, inicializar y getLocation. ¿Bien? Entonces voy a escribir si getLocation no es igual a null, entonces solo ejecutaré. Estos son códigos de aquí, copia y pega aquí. ¿Bien? Y aquí obviamente tenemos que guardar esa ubicación. Entonces en el inserto, registraremos la ubicación con un getLocation grande. Y de manera similar mientras se realiza la salida, se leerá, la ubicación de pago será GetLocation. Otras cosas van a ser iguales. Estamos, recuerda que simplemente estamos guardando esa ubicación. Nada más. No usaremos esa ubicación, pero al menos ya sabes cómo obtener la ubicación. Lo último que tenemos que hacer es hacer cambios en su modelo de asistencia. ¿Verdad? Final, mapa. Ubicación del check in. A estas alturas. Mapa check out ubicación. Aquí. Será esta ubicación de check-in punto, esta ubicación de checkout punto, por lo que no sería requerido. Recuerda aquí también. Escribiremos la ubicación del check-in serán datos. Ubicación del check in. Los datos de ubicación de pago serán la ubicación de salida. Entonces eso es todo. Eliminaré estos datos, datos de asistencia porque quiero que también se almacene esa ubicación de check-in. Probemos la aplicación. Ver entrada, la salida no está ahí. Entonces si me deslizo, me preguntará la ubicación del dispositivo, lo aceptaré. A ver. Espero que no haya adder porque sé que si dispositivo físico no hay error, pero no estoy seguro de este emulador. A ver. No hay error es cuando. Entonces aquí en asistencia, pantalla, mercado y lente. Pero, ¿y si la ubicación está bien? Ofertas no show snack bar. No se puede obtener la ubicación del patio. ¿De qué color será de color rojo? Porque obviamente, Dios es y llegar a ello en para que el estado se actualice. Pero veamos qué pasó. Si verificamos. Bien, como pueden ver aquí, no está funcionando. Lo que voy a hacer es mostrarte esto que correr en un dispositivo real. Entonces ahora he conectado mi dispositivo real, y vamos a comprobar si esa ubicación está funcionando o no. Entonces si yo esos leves para registrarse, sí. Estaré preguntando mi ubicación y se la di. Y ver. Tenemos ese check-in y esa ubicación es hacia el éxito, creo. Entonces. Aquí tenemos ese lugar de check-in. Entonces, como puedes ver, está funcionando perfectamente en un dispositivo real. Antes, el único problema era que se trataba de un emulador de Android. Esa es la única razón o de lo contrario está funcionando bien. Si hago clic en Pagar, entonces otra vez, tenemos esa ubicación de pago y hora actualizada. Entonces eso es todo por la ubicación y esa historia. Estas dos páginas están funcionando perfectamente. En el siguiente video, trabajaremos en esa pantalla de perfil. Gracias. 24. Función para obtener todos los departamentos: Hola, bienvenido de nuevo. Entonces ahora comenzaremos a trabajar en esa pantalla de perfil que está obteniendo todos los departamentos y actualizando el nombre de usuario. Entonces para eso, primero vamos a crear un nuevo modelo para departamento. ¿Correcto? Departamento punto, punto, modelo de departamento, punto, punto, punto. Esta es una nueva clase de modelo. La parte significó modelo. Final int. Tendremos el ID, es decir, id de departamento y cadena binaria. Ya hemos insertado pocos departamentos en su base de datos. Se requiere modelo de departamento, este ID de punto requirió este título de punto, luego crear una fábrica. Partir cuando un modelo de Jason, estaba enviando datos dinámicos de cadena de mapa. Entonces se vuelven. Modelo de departamento. Id serán datos, id, y el título será datos, y la clave será título, ya que está en formato de mapa. Bien, tenemos el modelo listo. Ahora. Vayamos a los servicios DV. Entonces ya que vamos a permitir al usuario actualizar su nombre y departamento en su pantalla de perfil. Entonces, vamos a crear Panchen para obtener todos los departamentos en ese servicio DV. Entonces aquí, Así es. Tú vitoreaste. Ancho. Obtener departamentos. Asíncrono. Ahora, primero crearemos algunas variables de estado. Primero haremos una lista de departamento. Modelo. Departamentos es la lista vacía por ahora. Y vamos a tener un departamento de empleados enteros, eso es lo que es el departamento de empleados actual. Esto también se cambiará si el usuario selecciona otra cosa. Entonces entenderás de alguna manera. Ahora bien, en eso obtener datos de usuario, lo que podemos hacer es que podamos agregar si departamento de empleados es igual a nulo, luego darle el empleado. Si es nulo, entonces a la derecha, departamento de empleados es igual al modelo de usuario punto modelo de usuario departamento no está haciendo nada. Entonces lo que hice fue, tienes que entender esto. Es decir, ya que a este divertido Chen se le puede llamar varias veces, es decir, cada vez que lo llamamos avisar a los oyentes presentes, pantalla de asistencia. Esta función lo llamará ya que tiene voluntad futura ahí. Entonces restablecerá el valor del Departamento, la parte cuando valor. Es por ello que estamos usando condición que se le asigna un valor sólo si un departamento está vacío. Eso es por primera vez. Espero que lo hayas entendido. Para asignar a Lee y el tiempo. Eso es. Ahora en el intestino todos los departamentos. Vamos a escribir una lista de funciones. El resultado es un peso. Superbus, baile de graduación, mesa de departamento de inicio constante esta vez, selección de punto, seleccionaremos todos los departamentos. Después vamos a sumar todos los departamentos es igual a resultado. Mapa de puntos. Aquí tendremos departamento. Entonces, ¿verdad? Departamento. Aquí tenemos que escribir modelo de departamento desde JSON y le enviaremos el departamento. Finalmente haga todo a la lista y luego notifique los oyentes para que actualicen el valor. Eso es. Porque aquí estamos usando el oyente irá en la interfaz de usuario. Conectaremos la interfaz de usuario a esta variable. Es que vamos a escuchar estos datos variables. Por eso. Entonces, eso es todo. Hemos creado una función para obtener todos los departamentos en los próximos videos. Crearemos una función para actualizar el perfil también. En junio. 25. Función para actualizar los datos de perfil: Hola, bienvenido de nuevo. En este video escribiremos función def para actualizar los datos del perfil en el servicio DB, ¿ verdad? Futuro. Actualizar perfil. Vamos a requerir el nombre Bill contexto. Y simplemente vamos a esperar. Esto debería estar a un fregadero de distancia. Es súper formas en que Rahm, inicio constante, tabla de empleados punto nombre de actualización. Actualizaremos con su nombre. Y departamento. Actualizaremos con el valor del departamento empleado, que es la siguiente variable de estado. Es aquí. Desde el principio. Lo inicializaremos con el valor anterior. Y aquí tenemos que usar los iguales de punto porque tenemos que cambiar en vivo donde ID es igual para supervisar ese ahd dot ID de usuario actual. Después de que esté hecho, utilizaremos dodge snack bar. Perfil de relacionar, actualizado con éxito. Y le daremos color a los colores verde oscuro. Y avisaremos a los oyentes. Por lo que ese nombre en la mesa de asistencia que sea ID de bienvenida o nombre de bienvenida se actualizará automáticamente si usamos avisar a los oyentes aquí. Pasemos a la pantalla de perfil. Aquí. Tenemos que empezar a trabajar en él. Primero, vamos a crear algunas variables. Estallando con controlador de edición de texto. El controlador de nombre es igual al controlador de edición de texto. Y entonces int valor seleccionado es igual a cero. Veamos qué vamos a hacer. ¿Esto será requerido o no? Esto lo comprobaremos más adelante. En los contextos que no es la factura primero creará el proveedor de servicios DB, el contexto del proveedor de servicios . Contexto. Y luego requerimos servicio DB. Después de eso, llamaremos encuestas DV. Todo el departamento. Si está vacío que no se ha inicializado, entonces llame a las encuestas DV, consiga que todos los departamentos no estén haciendo nada. Este código significa llamar al departamento get all solo una vez. Entonces mismo, vamos a nombrar controlador el texto. Si está vacío, entonces use el controlador llamado el valor de los textos para ser servicio dv, modelo de usuario, nombre de punto. Y si eso también está vacío, hazlo vacío. Eso es cadena vacía. Lo que significa que si esa página se carga por primera vez, luego vaya e inserte los textos del controlador de nombre dentro del controlador de nombres para que sean los mismos que el nombre del punto del modelo de usuario. Y supongamos que di usuario no ha actualizado su nombre, entonces solo usa la cadena que está vacía. Así. Estamos utilizando estas condiciones usando las siguientes condiciones. Porque el cinturón se puede llamar varias veces cuando se usa notificar a los oyentes. Esa es la única razón. Ahora, vamos a trabajar en el cuerpo. En el cuerpo. Verificaremos si el modelo de usuario del servicio es igual a nulo. Después mostrar un indicador de progreso. Porque obviamente si usas un modelo no está ahí, entonces cómo podemos mostrar los datos. Ahora empieza con el acolchado rígido const, y en su lugar inicia nuestro Duan De. Entonces child será una sola columna secundaria ScrollView. Entonces principal existe elemento, es decir principal sale celda en Mendota, centro. Alineación de eje transversal, alineación de eje transversal. Eso está centrado. Y luego tenemos que niños 0, k Así que continuemos desde aquí. En el siguiente video. En el siguiente video tendremos el TextField y una opción para seleccionar el departamento, así como un botón para actualizar los datos del usuario. Gracias. 26. Menú desplegable para seleccionar el departamento: Hola, sigamos trabajando en esa pantalla de perfil. Entonces aquí en esa columna tenemos a esos niños. Y dentro de esos niños, comencemos con la creación de un contenedor. Contenedor, dale un margen de const y se inserta en Lee. A la altura cien cien. Decoración, declaración de caja. Radio de borde, radio de borde. Los puntos son más fríos. 20 colores de color puntean el acento rojo. Así. En ese niño. Simplemente escriba becas. Y tercer hijo, le daremos un icono. Entonces esto, esto es solo para el Usa un look que esta persona sí agrego. Ese es el aspecto de la página. Si lo deseas, puedes implementar la carga de imágenes y seguir. Aquí. Esta es la y por debajo de esta caja tamaño contenedor, caja de altura 15. Entonces el ID de empleado de texto es igual a, llamaremos al servicio DB. Las encuestas que UserModel, no Employee ID. Le mostraremos el ID de empleado que creamos. Entonces por debajo de esto está el tamaño de la caja de IA hoy. Y luego tenerlo TextField x will controller, name controller. El const de colisión, declaración de entrada, etiqueta, texto, nombre completo, nombre completo. Dar borde, borde de entrada de contorno. Ahora guarda todo. Veamos cómo se ve. Ver que tenemos el ID de empleado. Está buscando descenso. Tenemos el TextField aquí para el nombre completo. Ahora, aquí crearemos un menú desplegable para que el empleado pueda seleccionar su departamento. Ahora, debajo de ese campo de texto, dar una caja de tamaño de altura 15, y escribir encuestas dv. No todos los departamentos que están vacíos. Después escribe const, indicador de progreso lineal o bien cuadro tamaño Harris. Ya que sé que no va a estar vacío porque ya he insertado los datos en la base de datos. Por eso voy a mostrar un indicador de progreso lineal. Ahora en la caja de tallas. Dale una altura de doble punto infinito que es el tamaño más antiguo disponible. Entonces el niño será dejado caer. Campo de formulario. ¿Bien? Aquí primero vamos a agregar declaración, Const, declaración de entrada, frontera, borde de entrada de contorno. Entonces el valor será dv empleado de servicio, departamento. Si es nulo, entonces use el servicio DB. Departamentos. Primer valor de id de punto, es decir, si el usuario selecciona ventas, entonces ¿cuál es el ID? Eso es suponer cero, ese es el valor que queremos, no los textos, eso es una operación de ventas. No quiero el texto, quiero el ID de esa fila. Entonces tenemos que escribir artículos. Los artículos serán encuestas dv, todos los departamentos mapa de puntos. Dentro del mapa tendremos el ítem modelo departamental. Ahora dentro de esta función regresará el elemento del menú desplegable como este. K. Ahora este código se está poniendo, sé que es muy difícil. Pero aquí hay que hacerlo a la lista para que vaya el error. Y dentro del valor y el niño se cae, se hace. El artículo tiene valor. Será item.name, ID. Pero, ¿qué debemos mostrar? Usaremos un campo de texto para mostrar ítem, punto, título. Y el estilo será const. Estilo de texto. Tamaño de fuente 20, 0, k Aquí está una declaración de retorno. Ahora lo último que se requiere es que tengamos la k dentro de ellos. El campo del botón de punto punto es onchange. Entonces onchange nos da el valor seleccionado. Aquí. Si lo usan, cambia el valor, entonces escribiremos encuestas dv. Departamento de empleados, cámbielo al valor seleccionado. Eso es. Ahora. Verás, tenemos ventas, mercadotecnia, todo. Si quieres, puedes darle un poco de relleno y todo depende de ti. Debajo de esta caja de tamaño. Por último, tendremos algún tamaño de espaciado de altura de caja para D. Y luego otra vez obtener esta caja de tamaño. Aquí crearemos el botón. El tamaño funciona con 250. Niño. Botón elevado. En prensa está ahí. Y niño será const. Siguiente. Actualización, estilo de perfil. Textil. Uno dice que cuando D N en el on-premise, simplemente vamos a escribir dv Service Update Profile contextos está ahí. Y aquí llamado controlador punto texto recorte. Eso es. Entonces ahora todo está hecho. Recuerda, no estamos enviando el id de departamento porque si el usuario lo cambia, entonces automáticamente aquí, se cambiará el departamento de empleados. Y además, no requerimos esta variable de valor seleccionada. Ahora bien, si voy a la mesa de empleados, podemos ver que departamento y nombre está vacío. Vamos a comprobarlo. Departamento lo lamentará, nombre va a ser un buen rato. Y departamento Tomémoslo id, actualización, perfil de los muertos con éxito. C departamento a nombre está ahí. Y si voy a la asistencia, entonces hemos recibido a todo un Agawam. Antes era la identificación del empleado, pero como estamos usando los oyentes de notificación, se actualiza. Entonces eso significa que nuestro perfil de actualización, actualización también está funcionando perfectamente en todas las secciones. Ahora trabajando. En el siguiente video, trabajaremos en la funcionalidad para cerrar sesión a un usuario. Gracias. 27. Trabajar en la firma de la firma: Hola, bienvenido de nuevo. En este video, vamos a crear un botón de cierre de sesión aquí, que permitirá al empleado cerrar sesión en esta aplicación. Por lo que será muy sencillo y directo. Ir a la pantalla de perfil. Entonces aquí en esa columna, veamos. Aquí tenemos columna. Tenemos niños que se zambullieron muy rápido. Es decir, antes de esta imagen de icono. Crea el margen del contenedor, dale const. Inserciones de borde que solo se detuvieron cuando la alineación D, alineación, el punto brillante. Entonces el niño será el ícono del botón Siguiente. Yo puedo, ya sea const, puedo puedo cerrar la sesión. Cerrar sesión. Y etiqueta será const, texto. Cerrar sesión. Aquí. Cambiemos eso. Top 200 , 100, diré cuando D, porque no necesitamos tanto margen. Ahora, guárdala. Entonces si voy a ver, tenemos aquí este botón de cierre de sesión, que se ve bien. Puedo ver. Ahora simplemente, si vas a encuestas de arte, ya tenemos el botón de cerrar sesión aquí. Así que vayamos a la pantalla de perfil aquí en el on-premise. Simplemente escriba proveedor de contexto aquí. Y proveedor será extraño. Encuestas. No queremos que escuche los cambios. Solo queríamos llamar a este letrero Wanchun. Ok, guárdala. Bien, ahora vamos a comprobar si hacemos clic en el botón Inscribirse, si salimos o no. Ver, tan pronto como haga clic en el botón Registrarse, notifica al oyente que llama a la pantalla de bienvenida aquí. Mira, este fue reconstruido y nos enviaron a la pantalla de inicio de sesión desde aquí. Por eso no tenemos que navegar, derecho, el código de navegación, porque aquí se hace automáticamente. Y también ahora mismo, no tengo esto, no quiero este código aquí. Enviamos directamente el cierre de sesión por correo desde la aplicación. Si reinicio, entonces también se mostrará la página de inicio de sesión al empleado. Entonces eso es todo para este video. Nuestra app está terminada, todas las funcionalidades están funcionando. Lo único que queda es trabajar. Si vas a la mesa. Tenemos que trabajar en seguridad a nivel de fila. Entonces, en los próximos videos, habilitaremos la seguridad a nivel de fila y escribiremos políticas para la mesa. 28. Políticas para la tabla de asistencia: Hola, bienvenido de nuevo. Entonces ahora lo último que queda es habilitar la seguridad a nivel de fila en nuestra base de datos. Por lo tanto, la seguridad a nivel de fila es una característica de seguridad que nos permite controlar acceso a las filas en una tabla de base de datos en función de la identidad de un usuario o un rol. En supervisado, puede usar RLS para restringir qué filas de datos puede ver o modificar un usuario en función de reglas predefinidas. Hasta ahora, cualquier persona con la clave API pública tenía acceso a nuestra base de datos. Ese comportamiento predeterminado después habilitar RLS a una tabla es que niega todo el acceso ya sea que el usuario esté autenticado o no hasta que mencionemos nuestras políticas. Si va allí, puede ver después de habilitar la seguridad a nivel de fila, todas las operaciones crud serán denegadas. Entonces para eso tenemos que escribir algo conocido como políticas. Se puede pensar en ellos como agregar una cláusula where a cada consulta. Tabla diferente puede tener diferente política de RLS. A lo mejor quieres que se pueda producir alguna mesa, tal vez no lo son. Así que comencemos. Habilite RLS, vaya a la autenticación y luego a las políticas. Aquí, como puedes ver, RLS está deshabilitado en todas las tablas. Comenzaremos con habilitar RLS en la mesa de asistencia. Y además, como no necesito que se ejecute la aplicación, simplemente la voy a detener. Y centrémonos en Lee bajo RLS. Entonces haga clic aquí y agregará un menos de, ¿está seguro de que desea habilitar nuestra seguridad a nivel de fila para esta tabla? Tasa de asistencia, confirmar. Entonces, como puede ver, RLS está habilitado, pero aún no se han creado políticas. Entonces, vamos a crear una nueva política. Y aquí tienes dos opciones. Comience rápidamente y cree una póliza desde cero. Entonces, por simplicidad, te gustará usar el get started rápidamente y después de crear algunas consultas más adelante si quieres, puedes ir por más, más personalización. Ahora, haz clic en comenzar rápidamente. Entonces aquí puedes ver que hay plantillas predefinidas que no pueden leer acceso a todos. Luego, habilite el acceso de inserción solo para usuarios autenticados. Después actualizarán el acceso de los usuarios en función de su ID. Entonces como puedes ver, esa plantilla es para habilitar un eje de bit. Pero cuando usas esta plantilla, incluso puedes cambiar qué acceso se requiere. Es decir, lo haremos, podemos usar esta plantilla, pero en su lugar esa actualización podemos escribir. Supongamos que seleccione luego habilitado seleccione Acceso para usuarios en función de su correo electrónico. Entonces no es necesariamente eso si un solo se puede hacer en base a su correo electrónico. Y finalmente, se le da acceso incapaz de eliminar a los usuarios en función de su ID. Entonces acabas de leer. Habilitar el acceso para los usuarios en función de su ID, ya sea que se retrase, lea , actualice, depende de nosotros. Así que comencemos. Usaremos el acceso de inserción no posible solo para usuarios autenticados. En esta mesa esa es una asistencia. Vamos a permitir insertar a cualquier persona que, que haya creado una cuenta. Así que usa esta plantilla. Entonces aquí. Como puede ver, el nombre de la política es y se insertará para autenticar a los usuarios, operación permitida es insertar. Roles objetivo solo autenticados, lo que debería ser cierto. Entonces no vamos a hacer ningún cambio. Simplemente haga clic en Revisar. Puedes ver la consulta aquí. Y recuerda, esta consulta es lo que podemos hacer en nuestra propia sección interna de personalización. Si sabes escribirlos, se desconoce la consulta de secuela de postgres, por lo que es buena. Ahora haga clic en Guardar Política. Entonces, como puede ver, hemos hecho con éxito nuestra primera política que es insertar datos en la mesa de asistencia. Ahora otra vez, para segundo policíclico sobre nueva política otra vez. Entonces empieza rápidamente. Ahora elige la plantilla. Eliminar el acceso de los usuarios en función de su ID de usuario. Primero, los glificones usan esta plantilla, pero usaremos la plantilla Eliminar para permitir el exceso de actualización. Es decir, los empleados pueden actualizar sus propios datos sobre lee. Simplemente primero cámbielos. Un nombre de directiva para habilitar la actualización para los usuarios en función del ID de usuario. Entonces en lugar de eliminar, haz clic en Actualizar, luego tienes este campo extra. Entonces, ¿qué expresión se necesita? La condición será si ahd dot ID es igual a ese ID de empleado, que es el nombre de la columna. Aquí. Usuario que usa ID de subrayado. No hay tal columna en nuestra tabla. Eso es, supongo que sí. Mesa de empleados. Sí. Eran empleados. Yo mismo me he olvidado. Aquí fue mesa de asistencia. Derecha. ID de empleado. Eso es extraño. Quien esté solicitando este exceso, es decir su identificación, debe ser igual al campo ID de empleado. Ahora simplemente copia y pega lo mismo en esta expresión de recheck. Estos dos se salvarán. Entonces ahora después de eso, haga clic en Revisar y haga clic en Guardar política. Es decir también entonces hemos regresado con éxito la política de actualización de acceso para mesa de asistencia. Después siguiente, nuevamente, otra política para la asistencia. Haga clic en obtener. Ahora, nuevamente, elige el acceso de eliminación para los usuarios en función de su plantilla de ID. Haga clic en usar esta plantilla. Entonces aquí vamos a permitir una selección de nibble que está permitiendo leer, una lectura de estos datos. Eso es ya que ya sabemos que tenemos una página donde la gente va a excederse, que la gente va a ver su propio historial de asistencia. Por lo que solo permitiremos que los usuarios accedan a sus propios datos históricos. Así que haz clic en Seleccionar. Entonces. Aquí será identificación de empleado. Eso es. Por lo que tenemos una selección inversa para los usuarios basada en el ID de usuario. Después selecciona el ID de empleado aquí también, si lo deseas, puedes agregar ID de empleado. Depende de usted en el nombre. Esto es sólo un nombre de política. Este es el más importante, es decir un nombre de columna. Haga clic en Revisar, luego haga clic en Guardar. Entonces, como puede ver, hemos redactado con éxito políticas para el establo de asistencia. Dado que no se le da acceso de eliminación al empleado en la aplicación, no vamos a escribir la política para eso, pero espero que hayan entendido. Supongamos que tiene esa funcionalidad de eliminación. De igual manera, también se puede escribir la política para eliminar. No es nada diferente a todas estas políticas. Entonces eso es todo para la mesa de asistencia. En el siguiente video, escribiremos políticas para los departamentos. Gracias. 29. Políticas para la tabla de departamentos: Hola, Sigamos trabajando en nuestras políticas. En este video, trabajaremos en la mesa del departamento aquí. En primer lugar, habilite el RLS. Entonces sí, estamos confirmados. Después da click en esto, confirme. Se trata de una habilitación religiosa. Después haga clic en nueva política y comience rápidamente. Ahora bien, sabemos que la tabla de departamentos no tiene datos sensibles. Entonces usaremos esa plantilla que es un acceso de lectura no válido para todos aquí. Depende de ti. Si quieres, puedes usarlo estos accesos de lectura solo para usuarios autenticados, pero voy a usar esta plantilla. Haga clic en, utilice esta plantilla. Aquí. No vamos a hacer ningún cambio. Haga clic en Ver y haga clic en Guardar Política. Por lo que tenemos la política de selección para mesa de departamentos. Y además solo necesitamos el acceso de lectura para esta tabla ya que estamos insertando datos de departamento directamente desde el panel del supervisor en esta aplicación. Entonces, si vas al editor de tablas, si vas a los departamentos, hemos insertado estos datos directamente de este, es decir insertar fila, y es por eso que no necesitamos políticas. Pero supongamos que tienes una app que es diferente o estás permitiendo que el dueño de la compañía inserte los departamentos, entonces tendrás que escribir la nueva política. Después inserte para autenticar a los usuarios solo se leen los departamentos para dar rienda suelta. Admin son los dueños de la empresa. Como todas estas cosas que puedes hacer, depende de ti. Pero como tenemos esta sencilla aplicación, no necesitamos ninguna otra política. Eso es para la mesa departamental. En el siguiente video, finalmente trabajaremos en la mesa de empleados, encola. 30. Tabla de políticas para los empleados: Hola, bienvenido de nuevo. En este video, trabajaremos en ellas políticas para la mesa de empleados. Así que simplemente primero habilitó RLS. Después confirme. Después haga clic en nueva política. Haga clic en “Empezar”. Usaremos esa plantilla. Insertará el acceso solo para usuarios autenticados. Ya que después de crear una cuenta que se está registrando, insertaremos un nuevo dato de usuario en esta tabla. Entonces solo queremos esa inserción para usuarios autenticados. Haga clic en, úselos. Aquí no vamos a hacer ningún cambio. Da clic en Revisar, entonces todo está bien. Haga clic en Guardar política. Entonces insertar está hecho. Entonces otra vez, da clic en Nueva Política. Empieza rápidamente. Ahora tenemos que crear una política para el exceso de actualización. Elija la tercera plantilla en la que se habilite el acceso de actualización para los usuarios en función de su plantilla de correo electrónico. Entonces espero que hayas entendido aquí muerto. Esto comprobará, supongamos que de un usuario está enviando esta solicitud. En lugar de verificar el ID de usuario, no revisaremos el correo electrónico art dot que puedas decir. Después haga clic en Usar plantilla. Y ahora si recuerdas, ya tenemos una columna llamada e-mail en nuestra esta tabla como esta tabla de empleados. Entonces no tenemos que hacer ningún cambio aquí. Pero si tienes algo así como usura molar de la moral del empleado, entonces tienes que escribir el nombre de la columna aquí. Es, empleado slash guión bajo correo electrónico o cualquier nombre de la columna. Haga clic en Revisar y luego haga clic en Guardar política. Y finalmente, esa tercera política será para ese exceso cíclico aquí. Y también usaremos la misma plantilla que es, habilitaremos el acceso para los usuarios en función de su correo electrónico. Y además, si quieres, puedes usar en base a su ideal. Entonces pero lo haré simplemente basado en su correo electrónico. Y haga clic en Usar es el nombre de la política para una lectura no válida. Los usuarios basados en el correo electrónico, las operaciones permitidas serían seleccionadas. Esta está bien, esa es la revisión por correo electrónico de Emily. Y luego haga clic en Guardar Política. Entonces RLS se habilita con éxito en todas las tablas. Y también hemos escrito que requería. Estas políticas. Es decir, se requiere si la inserción es adquirida por la eliminación. Depende de app a app. Entonces, obviamente, el usuario no puede eliminar nada ya que la política tardía no es su única super sesgada admin puede ir directamente a través de una tabla y eliminar las cosas. Esto también es algo bueno es decir, cualquier solicitud de eliminación será cancelada. Entonces eso es todo para la parte de seguridad a nivel de fila. Espero que lo hayas entendido. Puede que te resulte muy complicado ya que este concepto no está ahí en otros servicios Cloud. Cada uno tiene lo suyo, algunos, algunas reglas de seguridad, algunos tienen cosas diferentes. Por lo que depende del proveedor de servicios Cloud. Pero en la medida en que es muy sencillo. En ese siguiente video, finalmente haremos pruebas que completen el trabajo nuestra aplicación con la seguridad a nivel de fila habilitada. Gracias. 31. Pruebe la aplicación completa: Hola, bienvenidos al video final de nuestro curso. En este video, probaremos esa aplicación completa. Y esta vez estoy usando mi dispositivo físico aquí. Y también hemos habilitado la seguridad a nivel de fila en los últimos videos. Entonces veamos si todo está funcionando perfectamente o no. Así que vayamos e iniciemos sesión con nuestras credenciales. 345. Haga clic en Iniciar sesión. Bien. Todo está bien hasta aquí. Ver He iniciado sesión en mi cuenta. Si voy tengo éste, entonces digo recto que es. Entonces eso significa que el acceso de lectura está funcionando perfectamente aquí. También lee los excesos ahí. Es decir, la mesa de empleados. El nombre del empleado está aquí. Ahora bien, si trato de hacer pizarra para registrarse, bien, si usan un botón físico, es preguntar por la ubicación mientras usa la aplicación. Y mira, eso quiere decir que está funcionando. Podemos insertar los datos. Rls también está funcionando perfectamente bien. ¿Bien? Entonces el perfil está ahí. Tenemos el nombre completo, tenemos la identificación. Y si vuelvo a checar, esa caja también debería funcionar. Sí. También funcionó. Así que la caja también está ahí. Si hago clic en el historial de asistencia, tengo la asistencia de hoy. Y si voy y cambio el nombre a solo Raúl y lo actualizo a marketing y da click en actualizar. Yap, actualizar, actualizado con éxito. Tomó algún tiempo, pero no lo creo. Va a pasar una y otra vez. Si solo hago clic en reiniciar, pues veremos que tenemos todo un ahora marketing. Contamos con el departamento de mercadotecnia. Entonces nuestra app está funcionando a la perfección. Todas las funcionalidades están funcionando. Simplemente voy a hacer clic en Cerrar sesión. Sí. Yo no lo creo. Este pequeño retraso está ocurriendo en su aplicación porque he vuelto a probar esta aplicación, en, otra vez en correctamente en mis dispositivos. Esto simplemente está pasando aquí, pero no es un tema. Entonces eso es todo para este curso. Espero que hayas disfrutado y aprendido mucho. Echa un vistazo a mis otros cursos también. Eso es. Espero verte en mis otros cursos. Sigue practicando.