Crear Aplicaciones Android con AppInventor

Temas de hacking ético y ciberseguridad en general. Por favor lea [Necesita Registrarse o Iniciar Sesión para ver el enlace] para que conozca todo sobre nosotros. Invita a otros miembros al foro, también puedes unirte al chat con este enlace: [Necesita Registrarse o Iniciar Sesión para ver el enlace].

Nota: Publique aquí lo que no esté en las demás categorías.
Avatar de Usuario
matcon
Mensajes: 17
Registrado: Mié Ene 30, 2019 9:41 pm

Crear Aplicaciones Android con AppInventor

Mensaje por matcon » Jue Jun 27, 2019 4:37 am

Bueno en este pequeño tutorial, aprenderás a crear una aplicación de Navegador (APK), de forma muy sencilla usando AppInvetor ([Necesita Registrarse o Iniciar Sesión para ver el enlace]), ubicando el botón en la esquina superior derecha como aparece en la siguiente imagen:
Screenshot_1.png
En la imagen superior hacer click en "Create Apps!"
nos redirigiría a nuestro login, el cual se accede con permiso de una cuenta de google, la cual nos guarda nuestros proyectos.
Screenshot_2.png
Luego se abrirá nuestro panel general:
Screenshot_3.png
Del cual aparecen listado nuestras aplicaciones creadas anteriormente, sino tienes alguna puede hacer click en el botón "start new project", al cuadro añadir el nombre de proyecto de nuestra aplicación, en nuestro caso sera "TutorialAppInventorSHL", aparecerá así:
Screenshot_4.png
En el menú de la izquierda representa elementos que podemos añadir arrastrando hacia la "screen1" que viene siendo nuestra app de forma grafica, en nuestro caso añadiremos un "webview" configurado para mostrar por defecto nuestro sitio "[Necesita Registrarse o Iniciar Sesión para ver el enlace]" las propiedades generales de los módulos se deben cambiar en el menú de la derecha que aparece al hacer click en el elemento.
Screenshot_5.png
podemos ir probando por USB, Emulador, o AI Companion, que esta ultima es una aplicación que muestra en tiempo real los cambios en el móvil sin estar reinstalando el apk para ir probando, esto nos ahorra tiempo de pruebas haciendo en tiempo real, hecho lo anterior con el elemento webview logramos esto en el móvil:
Screenshot_5.1.jpg
hasta aquí tenemos un sitio web que aparece apenas abrimos la aplicación, podemos crear una aplicación web y adaptarla aquí solo con este paso.

ahora transformaremos esto en un navegador, añadiendo mas botones como volver atrás, actualizar, ir adelante, y botón de inicio, para ajustar botones en el orden que queramos es necesario aplicar "layouts", estos son pequeñas ventanas que nos permiten alinear lo que le dejemos adentro en la configuración de layout que elijamos por ejemplo en nuestro caso ordenaremos los botones de forma horizontal, uno al lado del otro debajo de la barra de direcciones, para ello continuamos con imágenes:
Screenshot_6.png
quedando de tal manera:
Screenshot_7.png
ese cuadro es un "layout", adaptable a nuestra pantalla y alineación que queramos en el interior de esta.
lo primero que añadiremos desde los elementos sera un cuadro de texto, y un botón lo añadiremos como en la siguiente imagen:
Screenshot_8.png
en el cual en el móvil ya tendría este aspecto:
Screenshot_8.1.jpg
volvemos añadir otro "layout horizontal", debajo de nuestro layout ya creado y en este añadiremos los botones restantes.
Screenshot_9.png
quedando de esta forma:
Screenshot_11.png
en el móvil ya se ve así:
Screenshot_11.1.jpg
luego renombramos nuestros elementos para mantener un orden en los bloques posteriormente (este paso es opcional)
de todas forma yo lo realizo para recordar ciertos elementos y no se llamen parecidos.
Screenshot_12.png
luego de renombrar los elementos pasamos a darle funciones a los elementos que están gráficamente en esta zona, hacemos click en "Blocks" en la esquina superior derecha:
Screenshot_13.png
dando una imagen similar a esta:
Screenshot_14.png
agregamos las funciones principales que son los botones, iniciando por el botón de "Visitar o IR", para ello en el menú izquierda se busca el elemento de "botonvisitar" y se busca que haga una función al presionarlo como aparece en la siguiente imagen:
Screenshot_15.png
ya con eso agregamos la función de presión del botón pero el que hará después hay que agregarlo de forma que encaje con el siguiente bloque, en nuestro caso el botón visitar al ser presionado tiene que ir a la url indicada en el campo de texto, para ello iremos al elemento webview y vemos las opciones agregar:
Screenshot_16.png
y por ultimo para que visite la url indicada en el campo de texto:
Screenshot_17.png
con eso queda claro la función del botón, en la siguiente imagen he declarado la función del resto de botones:
Screenshot_18.png
ya con eso tenemos un navegador básico y funcional, creado por nosotros en AppInventor, para exportar nuestra aplicación a "APK" y poder instalarla en nuestro dispositivo es necesario construirla presionando en mi caso "Build" (me acostumbre en ingles aunque esta disponible en español).
Screenshot_19.png
Luego de elegir uno de los 2 métodos disponibles para descargar es hora de instalar:
Screenshot_19.2.jpg
ahora ya tenemos nuestro navegador listo para usar, como lo muestra la siguiente imagen:
Screenshot_20.jpg
Con esto finalizamos nuestro pequeño y básico tutorial para crear un navegador, pues yo recomiendo modificar las propiedades de los elementos gráficos por temas visuales como centrados, alineaciones, temas de diseño es prácticamente fácil pero hay que configurar, de paso les dejo el código de nuestra aplicación en formato (*.aia) el cual es el formato de proyecto de AppInventor el cual pueden importar y haberse ahorrado 5 minutos en haber hecho un navegador.

Dudas, consultas sigan el hilo, Saludos..
No tiene los permisos requeridos para ver los archivos adjuntos a este mensaje.

Avatar de Usuario
matcon
Mensajes: 17
Registrado: Mié Ene 30, 2019 9:41 pm

Re: Crear Aplicaciones Android con AppInventor

Mensaje por matcon » Jue Jun 27, 2019 4:59 am

Enlace de descarga del proyecto tutorial navegador.
TutorialSHLAppInventor.zip
No tiene los permisos requeridos para ver los archivos adjuntos a este mensaje.

Volver a “General”