xabilaser
Platino
¡Ya estamos en marcha!
La idea principal es hacer una especie de Tapatalk para Movilesdualsim. No vamos a crear una mega-app desde el minuto 1, sino que empezaremos con algo sencillo que vaya creciendo hasta donde nos lleve. Voy a ir creando un esquema con Visio para empezar de forma ordenada pero creo que la mejor forma de empezar es con una plataforma de logueo que nos lleve hasta un navegador en el que se cargará directamente el foro. Luego, ya veremos...
La mecánica de éste hilo supongo que os será familiar: comentamos todo lo que se nos ocurra dentro del hilo y lo que salga, se añade en este primer post donde irá cogiendo forma hasta convertirse en un tutorial hecho por todos.
[Los pasos que ya se han mencionado en los anteriores tutoriales, los obviaremos.]
Creamos el proyecto en ai2.appinventor.mit.edu y le damos nombre
SEGUIREMOS POCO A POCO...
La idea principal es hacer una especie de Tapatalk para Movilesdualsim. No vamos a crear una mega-app desde el minuto 1, sino que empezaremos con algo sencillo que vaya creciendo hasta donde nos lleve. Voy a ir creando un esquema con Visio para empezar de forma ordenada pero creo que la mejor forma de empezar es con una plataforma de logueo que nos lleve hasta un navegador en el que se cargará directamente el foro. Luego, ya veremos...
La mecánica de éste hilo supongo que os será familiar: comentamos todo lo que se nos ocurra dentro del hilo y lo que salga, se añade en este primer post donde irá cogiendo forma hasta convertirse en un tutorial hecho por todos.
[Los pasos que ya se han mencionado en los anteriores tutoriales, los obviaremos.]
Creamos el proyecto en ai2.appinventor.mit.edu y le damos nombre
Recordaremos que todas las apps arrancan en screen1. Independientemente de que trabajemos con capas o lo hagamos con más pantallas, ésta será nuestro punto de partida por lo que colocaremos aquí el primer elemento de nuestra app.
Para trabajar un poco el cambio de pantallas, cargaremos una pequeña animación al principio y dará paso a nuestra segunda pantalla donde ya sí, mostraremos el formulario de login.
Crearemos primero la segunda pantalla para tener un objetivo dónde apuntar y la llamaremos login. Volvemos a Screen1 y colocamos los elementos que necesitamos para hacer funcionar la animación de entrada:
- Configuramos Screen1 para que netre y salga con fundidos y, para no complicarnos mucho al principio, le daremos formato vertical, ya que nuestra animación va a ser una imagen que entra y sale en fundidos. Como no, el logo de MDS que habremos cargado antes en el adminbistrador de medios, en la vista de diseñador.
Para crear una animación de entrada, lo más sencillo es crear una capa temporizada que se haga invisible al terminar el tiempo de la animación, dejado visible la capa de logueo, de ahí que añadamos un reloj, para temporalizar.
Los valores del reloj, serán la duración (3000ms en mi caso) y las dos casillas destildadas, así aprovechamos para aprender a manejar el reloj desde la vista de bloques.
Quedará algo así:
Ahora nos vamos a los bloques.
Aquí, tendremos que decirle que, cuando se abra Screen1, se ejecute el temporizador. Al estar configurada la entrada y la salida con un fundido, se mostrará al principio el fundido dejando visible el logo durante algo menos de 3 segundos.
Añadimos después una instrucción que se lance cuando termine el temporizador y que llevará a la pantalla login.
¿De dónde sale todo esto?
Ya tenemos la animación montada.
Para trabajar un poco el cambio de pantallas, cargaremos una pequeña animación al principio y dará paso a nuestra segunda pantalla donde ya sí, mostraremos el formulario de login.
Crearemos primero la segunda pantalla para tener un objetivo dónde apuntar y la llamaremos login. Volvemos a Screen1 y colocamos los elementos que necesitamos para hacer funcionar la animación de entrada:
- Configuramos Screen1 para que netre y salga con fundidos y, para no complicarnos mucho al principio, le daremos formato vertical, ya que nuestra animación va a ser una imagen que entra y sale en fundidos. Como no, el logo de MDS que habremos cargado antes en el adminbistrador de medios, en la vista de diseñador.
- Una tabla de disposición tabular
- Una etiqueta para hacer de separador con un valor de alto del 20%, ya que nuestro logo tiene un formato apaisado.
- La imagen, logo.png en mi caso.
- Un reloj que servirá para temporizar la secuencia.
- Una etiqueta para hacer de separador con un valor de alto del 20%, ya que nuestro logo tiene un formato apaisado.
- La imagen, logo.png en mi caso.
- Un reloj que servirá para temporizar la secuencia.
Para crear una animación de entrada, lo más sencillo es crear una capa temporizada que se haga invisible al terminar el tiempo de la animación, dejado visible la capa de logueo, de ahí que añadamos un reloj, para temporalizar.
Los valores del reloj, serán la duración (3000ms en mi caso) y las dos casillas destildadas, así aprovechamos para aprender a manejar el reloj desde la vista de bloques.
Quedará algo así:
Ahora nos vamos a los bloques.
Aquí, tendremos que decirle que, cuando se abra Screen1, se ejecute el temporizador. Al estar configurada la entrada y la salida con un fundido, se mostrará al principio el fundido dejando visible el logo durante algo menos de 3 segundos.
Añadimos después una instrucción que se lance cuando termine el temporizador y que llevará a la pantalla login.
¿De dónde sale todo esto?
- De Screen1 el bloque marrón "Cuando Screen1...Ejecutar". Recordad que pulsando en cada elemento del árbol de la izquierda, se muestra un desplegable con opciones en escroll, de dónde las arrastraremos al espacio de trabajo.
- Del componente CLK_tempo (nuestro reloj) sacaremos la orden en verde de poner temporizador habilitado como y le añadiremos la propiedad lógica (booleano) Cierto que sacaremos de Integrados / Lógica.
- La segunda instrucción de control Cuando Temporizador, la sacamos nuevamente del reloj.
- De Instrucciones / Control sacamos abrir otra pantalla y le enganchamos el nombre que tendremos que teclear nosotros en un campo de texto vacío de Instrucciones / Texto.
- Del componente CLK_tempo (nuestro reloj) sacaremos la orden en verde de poner temporizador habilitado como y le añadiremos la propiedad lógica (booleano) Cierto que sacaremos de Integrados / Lógica.
- La segunda instrucción de control Cuando Temporizador, la sacamos nuevamente del reloj.
- De Instrucciones / Control sacamos abrir otra pantalla y le enganchamos el nombre que tendremos que teclear nosotros en un campo de texto vacío de Instrucciones / Texto.
Ya tenemos la animación montada.
Para hacerlo sencillo, vamos a insertar una tabla de disposición donde colocaremos los tres elementos que la van a conformar: el cuadro de texto para el usuario, el campo de contraseña y el botón de enviar:
En éste caso, he añadido un logo a la parte superior de la tabla de disposición principal y la he configurado con 7 filas añadiendo un 7 al número de celdas (Rows).
Los campos de usuario y contraseña que van titulados cada uno por su respectiva etiqueta y una tercera etiqueta con el texto sin color que actúa como separador del botón Enviar.
Además, de Almacenamiento he añadido un TinyDB para almacenar las credenciales de manera que dé persistencia a la app (que no haya que insertar los datos cada vez que se ejecuta).
[NOTA: se me ocurre poner una casilla para recordar las credenciales y que las guarde en la base de datos que acabamos de añadir, pero como no estoy seguro al 100% de cómo hay que hacerlo, lo añadiremos más adelante .]
Los componentes de Conectividad los he añadido para iniciar la actividad ActivityStarter y para manejar el contenido dinámico Web1. Con éste último pretendo almacenar la cookie y gestionar los códigos de respuesta para seguir adelante o reiniciar el logueo en caso de error, para lo que también añadiremos más adelante un notificador.
En éste caso, he añadido un logo a la parte superior de la tabla de disposición principal y la he configurado con 7 filas añadiendo un 7 al número de celdas (Rows).
Los campos de usuario y contraseña que van titulados cada uno por su respectiva etiqueta y una tercera etiqueta con el texto sin color que actúa como separador del botón Enviar.
Además, de Almacenamiento he añadido un TinyDB para almacenar las credenciales de manera que dé persistencia a la app (que no haya que insertar los datos cada vez que se ejecuta).
[NOTA: se me ocurre poner una casilla para recordar las credenciales y que las guarde en la base de datos que acabamos de añadir, pero como no estoy seguro al 100% de cómo hay que hacerlo, lo añadiremos más adelante .]
Los componentes de Conectividad los he añadido para iniciar la actividad ActivityStarter y para manejar el contenido dinámico Web1. Con éste último pretendo almacenar la cookie y gestionar los códigos de respuesta para seguir adelante o reiniciar el logueo en caso de error, para lo que también añadiremos más adelante un notificador.
SEGUIREMOS POCO A POCO...
Última edición:
Foro Xiaomi
Foro Realme
Foro OnePlus
Foro Jiayu
Foro Lenovo
Foro Samsung
Foro Nubia
Foro Blackview
Foro impresoras 3D