App Inventor: App con LOGIN y SIGN-UP online | Aplicación con USUARIO y CONTRASEÑA

Crear una aplicación que pida usuario y contraseña y que funcione online con una base de datos, un tema que básicamente hizo crecer mi canal de Youtube en sus inicios, así que empecemos.

Hoy veremos como hacer un login en app inventor usando TinyDBWeb, por supuesto que hay otras formas como por ejemplo usar CloudStorage o Firebase, pero eso es un tema más avanzado que lo puedes ver en mi CURSO GRATIS DE APP INVENTOR.

Hay muchas formas de crear una aplicación con login, más aun con las nuevas versiones de App Inventor que incluyen nuevas bases de datos, las cuales permiten iniciar remotamente desde multiples dispositivos móviles, pero como se mencionó antes, hoy usaremos TinyDBWeb.

Ahora veremos un corto tutorial y explicación para ponerle usuario y password a una aplicación con App Inventor.

Tabla de contenido
  1. Crear aplicación en App Inventor que pida usuario y contraseña
    1. Pantallas de inicio de sesión y registrarse
    2. Lógica y programación de cada pantalla

Crear aplicación en App Inventor que pida usuario y contraseña

Veamos como crear una aplicación en App Inventor con login y sign-up, es decir una aplicación que nos pida usuario y contraseña para ingresar a ella, pero lo más novedoso es que nos va a dejar registrarnos online, tipo Facebook. Lo mejor de todo es que no vamos a pagar host, ni base de datos, pues vamos a utilizar recursos de App Inventor que son gratis.

Pantallas de inicio de sesión y registrarse

Lo primero que haremos es crear dos pantallas y recursos gráficos. Una pantalla de iniciar sesión y la segunda pantalla o screen, será donde los usuarios no registrados puedan registrarse.

Crearemos dos pantallas sencillas, ya el tema de la creatividad se los dejo a ustedes, yo solo agregare botones y elementos predefinidos de App Inventor.

iniciar sesion app inventor
Esta sera la pantalla principal, la que nos permita decidir si iniciar sesion o registrarnos.

Ahora vamos a ver las dos pantallas. Inicio de sesión y registrarse respectivamente.

iniciar sesion app inventor

Ahora vamos con la pantalla de registro. Este es un tutorial bastante básico, asi que solo puso un usuario y dos contraseñas para verificar la correctitud. En tutoriales más avanzados enseño como usar el correo electrónico.

registrarse app inventor

Lógica y programación de cada pantalla

La lógica de esta aplicación es bastante facil de replicar. La primera pantalla es solamente redirigir a cualquiera de las dos opciones, ya sea a la pantalla de iniciar sesión o a la pantalla de registro.

app inventor botones redirigen

Lo que esta dentro de los bloques rosados son los nombres de las pantallas o screens hacia donde queremos ir al momento de presionar dicho boton. Ahora bien, vamos para la parte de iniciar sesión. Primero agregamos este componente a nuestra pantalla o screen.

tinywebdeb app inventor

Ahora veamos la lógica que hay en el fondo de esta pantalla o screen.

app inventor app login

La parte subrayada en rojo se se añade al usuario para evitar que exista alguien que sobre-escriba en nuestra base de datos. Al momento de hacer su aplicación, elijan otros números para evitar que alguien les sobre-escriba la base de datos. Ahora vamos con la pantalla de registro, para la cual tenemos que agregar el mismo componente anterior.

app inventor app login registro

Si este método no te ha convencido, tengo más formas de hacerlo. Te invito a visitar mi sección de tutoriales para App Inventor o a ir a la pagina 2 de este post.

Recomendado:   Como hacer un CRUD en Spring Boot + JPA + PostgreSQL + API REST
  1. josue dice:

    ya no esta disponible en link? del video .

    1. Yo Androide dice:

      El canal acaba de ser cancelado. Estamos trabajando para poner los vídeos nuevamente en la pagina. Lamentamos los inconvenientes. 🙁

      1. APerez dice:

        Estimado una consulta, servirá si creo una App para ingresar los usuarios y contraseñas; y después tener otra App para que yo le envie su usuario y contraseña por correo y con ello recién poder ingresar a esta otra aplicaciòn? lo he intentado pero no me sale, quizas debo modificar algo en el firebase, nose, si me pudieras ayudar seria genial.

  2. Felix Falconi dice:

    Amigo, soy profesor y tengo una aplicación un poco básico de cuestionario y me gustaría adaptarle este registro de contraseña pero previamente quería ver el .aia para probarlo antes. Pero no tienes descargas.
    Espero que puedas compartir .
    Gracias anticipadas

  3. Saludos colega! igualmente Ing. en sistemas, viendo uno de tus vídeos fue que llegue a tu web ;D

Subir
A %d blogueros les gusta esto: