Google Apps Script 24 - Web App: Crea login/contraseña para mostrar registros

hola qué tal en este tutorial veremos cómo crear una aplicación web con contraseña o login si los datos son correctos el script buscar a un registro con la información del usuario en un sprite y lo mostrara en la página [Música] en la hoja usuarios tenemos la base de datos de usuarios y contraseñas la hoja menta es una tabla que contiene el nombre de usuario proveniente de la hoja usuario y las ventas que ha relacionado en cada cuatrimestre en pocas palabras lo que hará el script es buscar el nombre de usuario y contraseña que se hayan ingresado en la página web y si los datos coinciden buscaran los registros de dicho usuario en la hoja ventas y los mostrara en la página creamos tres archivos html uno para la estructura de la aplicación una para la hoja de estilo y uno para el código llave script del lado del cliente en el archivo código 10 g la función Duckett recuerda que esta función reservada es la que permite mostrar la página en el navegador entonces en la variable template vamos a utilizar el servicio htmlservice para crear este una plantilla a partir de un archivo que va a ser nuestro archivo index la plantilla tiene que ir acompañada del método Eva Lloyd para verificar que no haya ningún error en la estructura HTML si lo hubiera crearía una excepción y no se mostraría la página definimos la función y club qué es la que insertar el código de la hoja de estilos y el código llave script en el archivo index [Música] vámonos al archivo index HTML y antes de terminar el gel y antes de terminar el body llamaremos a la función incluso con un script LED para que en este punto se inserte todo el código de los archivos CSS y JavaScript obviamente según corresponda [Música] dentro del Body insertamos un div con la clase container estoy contenedor abarcará todo el contenido de la página aquí adentro agregaremos 3deep que representarán cada una de las páginas que vamos a mostrar el primero tendrá en la login el segundo tendrá en la EDI onerror a este le vamos a agregar la propiedad hidden porque de momento va a estar oculta el tercer tipo tendrá como la página 2 e igual también le vamos a agregar el atributo hidden porque estará oculto hasta que el usuario ingrese los datos correctos primero nos enfocaremos en el oye agregaremos un díptico en su aire para el encabezado [Música] ingresamos la etiqueta H2 para que sea un título y mostramos el título en el mismo nivel agregaremos un Ford con su nombre con tu aire y con un evento onsubmit que invocar a la función enviar formulario con el argumento this es decir con este objeto o el formulario dentro del Ford agregaremos 2 disc 1 para el del usuario y el otro para el input del password además insertaremos un botón de tipo submit con su aire submit Button y con el texto login [Música] embebida en el primer deep creamos un input de tipo texto con su nombre de usuario con su aire y también usuario y con el placeholder usuario y le vamos a agregar un asterisco para indicar que es un campo obligatorio por lo tanto también requiere la propiedad recoger del mismo modo en el interior del segundo deep insertamos un input pero ahora de tipo password su nombre será contraseña e igual también shoaibi serás contraseña y para el placeholder utilizaremos solamente asteriscos para indicar que es un campo de este tipo igual vamos a agregarle el atributo recuerdes heldeep poner de momento va a estar vacío y en el Dip paginados agregaremos un título de tamaño H2 para mostrar un mensaje de bienvenida creamos una implementación pero recuerda que trabajaremos con la implementación de prueba para ver los cambios reflejados de manera inmediata podríamos decir que ya tenemos la estructura HTML completa tenemos el título dos input y el botón de envío entonces ahora daremos estilo a estos elementos para dar diseño y personalización de los elementos nos apoyaremos del framework de uso libre bootstrap en la página principal copiamos la librería y la insertamos en la hoja de estilos antes de las etiquetas style [Música] en el Dip del título añadimos la clase mb4 checamos la documentación para el margen y la B para el voto es decir vamos a crear un margen inferior y el cuatro se refiere al tamaño del mar ALDIP del primer input el del nombre de usuario añadiremos la clase input-group porque aquí vamos a incluir un icono junto con el limbo también le vamos a agregar la clase MP3 para el mal G&W 50 para que los elementos tengan un ancho del 50% aquí adentro vamos a utilizar un spam qué es como un contenedor en line el están tendrá la clase input-group-text y aquí adentro del spam vamos a insertar el código del icono que viene en la documentación entonces vámonos a bootstrap nos vamos a la sección iconos y buscamos el icono que vaya de acuerdo al input aquí copiamos y pegamos aquí adentro ya solamente voy a acomodar el espaciado de los element al input voy a agregarle la clase formcontrol guardamos y actualizamos la página si te das cuenta ya cambio bastante la apariencia del primer input voy adelantar la velocidad del vídeo un poco para hacer lo mismo con el segundo elemento y con el botón te veo en un momento [Música] [Música] [Música] [Música] [Música] listo ya tenemos una apariencia aceptable podríamos personalizar los colores para darle aún más diseño en nuestra aplicación arriba te dejo un vídeo donde muestro cómo agregarle colorete marca a los elementos utilizando CSS pasemos a la última parte de nuestra aplicación el código para dar interactividad a la aplicación entre los datos del usuario y el servidor en el archivo llave script abrimos las etiquetas script y declaramos la función enviar formulario con un parámetro que llamaremos form recuerda que esta función se ejecutará cuando se envié el formulario agregaremos la instrucción event preventdefault para evitar envíos no deseados en la variable Button seleccionamos el botón del formulario por su aire [Música] y desactivamos el botón para evitar que se realicen varios envíos en un solo momento entonces a la propiedad disabled agregamos el valor true ahora invocaremos una función del lado del servidor sin la función devuelve un resultado válido ejecutaremos la calva Comisión muestra página 2 te lo contrario ejecutaremos la calva función muestra error la función que se ejecutará del lado del servidor se llamará verificar password y tendrá como argumento el objeto Ford declaramos la función muestra paginados la cual tendrá como parámetro un objeto con la información del usuario de la misma manera declaramos la función muestra error con el parámetro error antes de llenar estas funciones vamos a ir al archivo código y declarar la función verificar password en la función verificar paduart almacenaremos el sprite en la variable SS en la variable sin usuario almacenaremos la hoja con nombre usos y en la variable data usuario obtendremos el rango de datos de la hoja y los valores de la misma en la variables inventa almacenaremos la segunda hoja la que contiene la información de los vendedores por último en la variable data venta obtendremos el rango con datos y aquí utilizaremos el método GET display vales esto para obtener los datos tal cual se muestran en la hoja de cálculo y te la haremos a través de la tabla usuarios con un Ford Light es el índice de cada una de las filas de esta tarde y aquí creamos un ir para evaluar que si el valor de la tabla usuaria en la posición de la fila y la columna 1 es igual aquí podemos ver la tabla usuarios y los valores de la columna 1 entonces si el valor de esta fila en esta columna es igual al valor del Ford el objeto form en la propiedad de usuario y el valor de la tabla en la posición y en la columna 2 es decir esta columna es igual al valor del formulario del elemento contraseña se va ejecutar las condiciones aquí podríamos decir que es cuando si coincide nombre de usuario y contraseña vamos a crear un objeto llamado usuar y la primera propiedad serán los encabezados estos encabezados será en el valor de la tabla data ventas en la posición 0 el nombre de usuario se la da el valor de la tabla datos usuarios en la posición en la fila y en la columna cero por último la propiedad venta de momento estará vacía ahora vamos a instalar a través de la tabla de ventas ahora vamos a utilizar la variable fila que va a ser el índice de cada una de las filas de esta tablet si el valor de la tabla data venta en la posición fila y columna cero es igual a la propiedad nombre del objeto usuario vamos a ver vamos a la tabla de ventas es decir si uno de estos nombres de estas filas es igual al nombre del objeto usuario asignaremos a la propiedad usuario ventas el valor de la tabla está también está en la posición fila es decir vamos a asignarle todos los valores de esta fila todos estos como ya no se necesita seguir comparando los valores agregaremos un break para salir del loop y en este momento retornamos al lado del cliente el objeto usuario si en ningún momento se devuelve el objeto usuario significa que los datos ingresados del usuario y contraseña no fueron correcta entonces arrojar hemos un mensaje de error arroje haremos un string con el mensaje de que la contraseña o el usuario son incorrectos vamos a correr la función ducked para autorizar los nuevos alcances del proyecto recordemos que ahora necesita poder acceder a las hojas de cálculo antes de crear la tabla o mostrar un mensaje de error hay que hacer una prueba si se devolvió un valor con éxito del objeto usuario vamos a hacer un control de este objeto en cambio si él escribe al rojo un error vamos a realizar un con sol pero del argumento error ingresamos un valor válido y una contraseña correcta y aquí podemos ver el objeto usuario con sus propiedades y los valores de estas aquí tenemos los encabezados acá tenemos los las ventas y el nombre del vendedor actualizamos la página y ahora enviamos datos Novales podemos ver en la consola que arroja un error verificar password en la en el archivo código en la línea 38 entonces nuestro último paso será mostrar la tabla o el error según corresponda voy a comentar los dos con sol en la avería de login page almacenaremos el elemento login que era todo el día con el título y formular y modificaremos la propiedad piden para asignarle un valor es decir vamos a ocultar toda la parte del hoy para asegurarnos que el disco un error no esté visible vamos a obtener el un error = la propiedad sirve asignaremos el valor true en la variable page 2 obtenemos el objeto por su aire será el disco en la página 2 y modificamos el atributo hidden pero en esta ocasión vamos a asignarle el valor false para que se muestre cuando el login haya sido exitoso definimos una variable llamada Taito y asignamos un mensaje de bienvenida hilos concatenados con la propiedad nombre del usuario aquí cerramos el encabezado vamos a dar también un salto de línea ahora vamos a crear una variable que llamaremos output la cual contendrá el título más la tabla HTML que nos devolverá la función que estamos invocando llamada crear tabla y vamos a enviar como argumento el usuario abajo definimos la función crear tabla creamos una variable llamada table está tabla tendréis código html dentro de un string asignamos las clases béisbol y creamos un encabezado con su clase para darle diseño a este encabezado esta clase va a darle un color al encabezado y agregamos la etiqueta table row para insertar una fila dentro de nuestra tabla voy a dar unos espacios para centrar un poquito más el código con este está bien ahora vamos a crear los encabezados a través de la variable columna vamos a iterar por cada uno de los encabezados la variable columna va a ir recorriendo la longitud de la propiedad Jerez del usuario por cada columna vamos a agregar a la variable table Electric de un table header y en el texto irá el encabezado del objeto usuario en la posición columna después cerramos el encabezado una vez finalizado este look cerramos el renglón de la tabla es decir vamos a agregar un string cerrando el TableRow el table header y agregamos un TableRow otra línea para los datos insertamos otro loop para iterar a través de las columnas pero esta vez la variable columna 2 b eran a través de la longitud de la propiedad ventas del usuario por cada columna agregaremos a la tabla 1 table data y en el tabledata o en el campo vamos a insertar el texto del usuario en la propiedad ventas en la columna 2 y después cerramos el tabledata una vez terminado el look cerramos el renglón y también cerraremos la tabla ya la hemos terminado ya solamente devolvemos la variable date de nuevo en nuestra función muestra página 2 una vez que en la variable ya tenemos el título y la tabla vamos a insertar el método en el objeto Page 2 inner extienden el cual va a insertar la variable output es decir todo el código HTML del Título II de la tabla y lo vamos traer en la página ahora vamos a ver el caso donde los datos no se hayan ingresado correctamente en la variable Button obtenemos el botón de envío por su aire y la propiedad disabled le asignamos un valor false para que vuelva activar el botón en la variable tipo obtenemos el Dip con él y a la propiedad vive le asignamos el valor false para que sea visible y muestre el error en este mismo tipo utilizamos el método inerley siamel y asignamos un texto de color rojo concatenado con el mensaje de error que se envió desde el servidor cerramos la fuente y ponemos punto y coma para terminar la instrucción guardamos todos los cambios y volvemos a ver nuestra implementación de pruebas vamos a designar un nombre de usuario válido con su contraseña y eso es todo aquí tenemos nuestra tabla que muestra el informe correspondiente a este registro ahora vamos a un usuario pero con una contraseña inválida aquí nos muestra un mensaje de error si volvemos a correr el código pero con los datos correctos ya nos muestra la página listo si quieres este hacer más visible tu tabla puedes personalizar la conoces ese o insultando la en un Google Site cómo te muestro aquí [Música] si te sirve el vídeo dale LIKE comparte y o suscríbete para seguir creando contenido [Música]