TUTORIAL Te hanga i tetahi MDS App. Nga hikoi me nga whanaketanga tuatahi

karekau

konukawata
Karere
626
ngā
2.481
Mobile
Letv Le1 Pro X800
¡Ya estamos en marcha!

La idea principal es hacer una especie de Tapatalk hoki 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 takiuru. 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 i roto i taku take.
- 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í:

lh3.googleusercontent.com__6GKv5nWYQ78_V2QgPptw8zI_AAAAAAAAFOce4dc4b2af1bfbe72588f75c95da49c69.png


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 takiuru.

lh3.googleusercontent.com__gilZygk4QhU_V2QgPjbLivI_AAAAAAAAFOYb96f8d6513e6e5bc6585b2fe1feba397.png


¿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) Pono 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:
lh3.googleusercontent.com__Yc89s3IYzJ8_V343mAKbYmI_AAAAAAAAFQ4be684f67fbd36852a7169b38117ec98b.jpg


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 (Rarangi).

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 .]

Tuhinga o mua Conectividad los he añadido para iniciar la actividad ActivityStarter y para manejar el contenido dinámico Web1. Con éste último pretendo almacenar la pihikete 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...: Hana:
 
Putanga whakamutunga:

FeyoMx

Hangaia nga piriti, Ehara i nga Papa !!!
Diamante
Tumuaki
Karere
4.640
ngā
11.229
Mobile
Lenovo K3
Te sigo desde tus hilos pasados y estoy muy interesado en tus enseñanzas. Estaré atento

I tukuna mai i taku Lenovo A7010a48 mā Tapatalk
 

JDesing

Ka hoki ana au ki te kaainga ...
Diamante
Tumuaki
Karere
6.145
ngā
16.976
Mobile
Lenovo K3 Note, Xiaomi Redmi Note 4
Me parece una idea genial!

Si necesitas aporte gráfico, HTML5, CCS3 te puedo hacer algo a ratos.

I tukuna mai i taku Lenovo K50-t5 ma Tapatalk
 

karekau

konukawata
Karere
626
ngā
2.481
Mobile
Letv Le1 Pro X800
Me parece una idea genial!

Si necesitas aporte gráfico, HTML5, CCS3 te puedo hacer algo a ratos.

I tukuna mai i taku Lenovo K50-t5 ma Tapatalk
Ese es precisamente mi fuerte, pero si como yo, estás abierto a aprender PHP, creo que estás en el sitio adecuado porque creo que la forma más sencilla de conectar una app a través de php es incrustando un script en html.
Ahí tienes un puto de partida.
¿Te animas a enredar por ese camino?

I tukuna mai i taku thl 5000 ma Tapatalk
 

karekau

konukawata
Karere
626
ngā
2.481
Mobile
Letv Le1 Pro X800
¡Atención gurús del PHP!
yo os invoco...


Llegados al formulario de logueo, necesitamos una página (supongo que en html) para llamar al formulario de logueo de MDS y enviarle los datos mediante GET. Creo que ésto es lo más sencillo que podemos hacer. A partir de la respuesta del servidor (200) intentaremos guardar la pihikete y pasar a navegar por la app.
Dejo un enlace a un vídeo en el que se explica algo parecido:
 
Putanga whakamutunga:

JDesing

Ka hoki ana au ki te kaainga ...
Diamante
Tumuaki
Karere
6.145
ngā
16.976
Mobile
Lenovo K3 Note, Xiaomi Redmi Note 4
¡Atención gurús del PHP!
yo os invoco...


Llegados al formulario de logueo, necesitamos una página (supongo que en html) para llamar al formulario de logueo de MDS y enviarle los datos mediante GET. Creo que ésto es lo más sencillo que podemos hacer. A partir de la respuesta del servidor (200) intentaremos guardar la pihikete y pasar a navegar por la app.
Dejo un enlace a un vídeo en el que se explica algo parecido:

Hola compañero,

Que necesitas exactamente un formulario de login en html?

Enviado desde uno de los ocho núcleos de mi Lenovo K3 Note mediante Tapatalk.
 

karekau

konukawata
Karere
626
ngā
2.481
Mobile
Letv Le1 Pro X800
Kia ora hoa!
Necesitamos una respuesta 200 del servidor. No se si la solución es un formulario html o enviar los datos mediante get. Tenemos que comprobar credenciales y generar una Cookie sin usar las credenciales de la base de datos. Algo así como una api de acceso.

I tukuna mai i taku Le 1 Pro ma Tapatalk
 

JDesing

Ka hoki ana au ki te kaainga ...
Diamante
Tumuaki
Karere
6.145
ngā
16.976
Mobile
Lenovo K3 Note, Xiaomi Redmi Note 4
Kia ora hoa!
Necesitamos una respuesta 200 del servidor. No se si la solución es un formulario html o enviar los datos mediante get. Tenemos que comprobar credenciales y generar una Cookie sin usar las credenciales de la base de datos. Algo así como una api de acceso.

I tukuna mai i taku Le 1 Pro ma Tapatalk
De comunicaciones entre servidor y bases de datos se encargaba mi antiguo compañero en Master-web. Si necesitas un formulario html si te lo puedo hacer, pero de lo otro siento no poder ayudar.

Creo que deberías buscar por los foros de programación o hablar con cualquier youtuber que entienda del tema y a ver si se presta a hacer el favor.

Enviado desde uno de los ocho núcleos de mi Lenovo K3 Note mediante Tapatalk.
 

He au

Ko tehea tuku ka tatari atu koe?

  • Huawei P50 / P50 Pro

    Pōti: 10 14,5 orau
  • Samsung Galaxy Z Takai 3 / Z Flip 3

    Pōti: 10 14,5 orau
  • Whakahonoretia Magic 3/3 Pro

    Pōti: 9 13,0 orau
  • Xiaomi Mi Mix 4

    Pōti: 17 24,6 orau
  • Google Pixel 6

    Pōti: 16 23,2 orau
  • Tētahi atu (Waiho ki te kōrero, ā mā mātou e tāpiri atu)

    Pōti: 7 10,1 orau

Mai i te blog

Ko nga papahiko waea hiko 21 teitei kei te utu pai
Arriba