xabilaser
Platino
Appinventor es un sistema de desarrollo de aplicaciones Android creado por Google, por lo que será imprescindible tener una cuenta de Google para acceder.
Se puede trabajar desde la web Sign in - Google Accounts o descargarse el instalador para cualquier plataforma UNIX.
Además, para previsualizar y probar, se podrá utilizar emuladores o dispositivos móviles, por lo que, en algunos casos, puede ser de utilidad el emulador de Google, para lo cual será necesario instalar el entorno de desarrollo de Android (SDK).
En mi caso la elección ha sido la plataforma web, pues me permite desarrollar mis proyectos con movilidad y casi desde cualquier equipo que pueda correr Chrome, por antiguo que sea el equipo.
Para esta guía, me centraré exclusivamente en esta plataforma y mostraré cómo previsualizar en el propio dispositivo Android, que es lo que la mayoría de simdualeros tendremos entre manos.
Dicho esto, la secuencia que he seguido en mi caso ha sido la siguiente:
- Seguir el enlace y acceder con mi cuenta de Google
- Aceptar las condiciones del servicio
- Voilá...
Como podréis ver, la interfaz se compone de varios bloques:
1. Un menú superior donde encontraremos:
- Opciones de la cuenta
- Idioma
- Opciones de previsualización
- Opciones de publicación
- Administrador de pantallas y de vistas
2. Una paleta lateral con todos los objetos estáticos y dinámicos para la vista de diseño.
3. Una vista de diseño a la que tendremos que arrastrar aquellos objetos dinámicos y estáticos que queramos añadir a cada pantalla de nuestra app.
4. Un explorador de los objetos que habremos añadido
5. Un explorador de medios que habremos cargado (imágenes, video, audio, etc)
6. Una barra lateral con las propiedades de cada objeto seleccionado.
La forma de trabajar, aunque se simplifica, no es tan sencilla de explicar sin entrar al detalle, pero lo voy a intentar pues es la mejor manera de entender la interfaz:
Toda aplicación parte de una pantalla que, por defecto, se denomina Screen1. A partir de esta, podremos enlazar pantallas o desarrollar las apps completamente en una sola mediante capas habilitando y deshabilitando la propiedad "Visible". Si trabajamos con las dos opciones, podemos desarrollar apps sobre esquemas muy organizados, aunque no está de más esbozar el desarrollo con papel y lápiz para estructurar de la mejor manera posible tanto la navegación por la app como el manejo de la misma.
El selector de pantalla se encuentra a la izquierda del segundo menú desde arriba, con fondo verde, y se compone de un desplegable donde seleccionar la pantalla que mostrará la vista previa y otro para crear nuevas pantallas.
A la derecha de este mismo menu, se encuentran dos botones Diseñador y Bloques, donde obtendremos las vistas del diseño y la de los bloques de programación.
Esta última, la de los Bloques, es la clave para que el desarrollador no tenga necesidad de conocer nada del código ni de aprenderlo, pues el manejo de scripts a modo de bloques como si de un puzle se tratara, origina la escritura automática del código por parte de la plataforma.
En esta parte de la plataforma, cambia algo la disposición. En ella cabe destacar dos partes:
1- La pantalla derecha, de escroll infinito, donde podemos apreciar una mochila arriba a la derecha, para guardar una copia de los bloques de código que nos interese conservar o que vayamos a repetir en la app que estemos desarrollando o en futuros proyectos; una papelera abajo, donde destruir los bloques de código que nos sobren o que no hayamos ensamblado bien y un amplio espacio donde colocar los bloques de código. En este caso, hay dos acciones básicas nada más, pero conforme vayáis conociendo el funcionamiento de este ingenioso framework llenaréis este espacio hasta límites insospechados. El espacio de trabajo para los bloques, aunque es ilimitado, da la opción de superponer los bloques en infinitas capas para aquellos que gustan de verlo todo de un vistazo, aunque es recomendable tener los bloques ordenados para poder localizarlos manejándonos con las barras de escroll.
2. A la izquierda, hay una barra de elementos de programación, de dónde saldrán las piezas de este mágico puzle. En la parte superior se encuentran las piezas comunes como los bloques de texto, variables, colores, etc; y en la parte inferior aparecen todos los objetos de la pantalla en la que estamos trabajando, ordenados en árbol, según la jerarquía de capas que les hayamos otorgado, en función del momento y el lugar en el que los hayamos colocado en la pantalla.
Una vez pulsas un elemento del árbol o una pieza común, se despliega a la derecha (la parte izquierda de la vista de bloques) sobre transparencia el submenú con las opciones que nos da cada tipo de elemento. En este caso, están desplegadas las opciones de variables, en naranja.
Cada tipo de opción presenta un color diferente, así, el inicio de la acción o las acciones globales se muestran en ocre, las ejecuciones en verde, los elementos web en morado, las variables en naranja, los cuadros de texto en rosa, las funciones lógicas en verde, las matemáticas en azul... etc.
Una buena muestra para entender cómo funciona el sistema de bloques sería esta:
Mediante este bloque, pongo en marcha una aplicación muy simple de una pantalla en la que he insertado cuatro elementos en vista de diseño, tres visibles y uno invisible. Lo quie la acción expresa es que, cuando aprieto el Botón1, pongo el único elemento invisible que hay, el Activity Starter o iniciador de actividad, como cierto, para que lance el visor web que hay encima y muestre la página web que muestra el cuadro de texto que hay acoplado, la de movilesdualsim.com.
Es un ejemplo muy sencillo para el que no voy a mostrar la vista de diseño, porque sólo pretendo que veáis cómo funciona esta maravilla.
Una vez completados los bloques de código y la vista de diseño, comprobaremos si hay errores y sugerencias en la parte inferior izquierda de la vista de bloques y procederemos a probar la app conectándonos por wifi a nuestro dispositivo. Una vez que comprobamos que funciona, podremos exportar la app compilada o el proyecto extendido en su formato (.aia). Esta última opción, permite que los desarrolladores podamos compartir desarrollos, aumentando la capacidad colaborativa de este sistema. Así, podremos compartir ejemplos, bloques de programación, partes de aplicaciones, etc. Lo que permite a comunidades como esta (por ejemplo), el crecimiento de cada miembro en una dirección diferente, para poder compartir después partes de proyectos e, incluso, poder construir un macroproyecto entre todos de manera muy sencilla y organizada.
En el siguiente tuto, explicaré más a fondo todo desarrollando una aplicación un poquito más compleja donde manejemos más elementos y algún que otro concepto, aunque si le dais una vuelta a Youtube o Google encontraréis mucho material para empezar y conocer mejor este sistema.
¡Nos vemos en la siguiente pantalla!
Se puede trabajar desde la web Sign in - Google Accounts o descargarse el instalador para cualquier plataforma UNIX.
Además, para previsualizar y probar, se podrá utilizar emuladores o dispositivos móviles, por lo que, en algunos casos, puede ser de utilidad el emulador de Google, para lo cual será necesario instalar el entorno de desarrollo de Android (SDK).
En mi caso la elección ha sido la plataforma web, pues me permite desarrollar mis proyectos con movilidad y casi desde cualquier equipo que pueda correr Chrome, por antiguo que sea el equipo.
Para esta guía, me centraré exclusivamente en esta plataforma y mostraré cómo previsualizar en el propio dispositivo Android, que es lo que la mayoría de simdualeros tendremos entre manos.
Dicho esto, la secuencia que he seguido en mi caso ha sido la siguiente:
- Seguir el enlace y acceder con mi cuenta de Google
- Aceptar las condiciones del servicio
- Voilá...
Como podréis ver, la interfaz se compone de varios bloques:
1. Un menú superior donde encontraremos:
- Opciones de la cuenta
- Idioma
- Opciones de previsualización
- Opciones de publicación
- Administrador de pantallas y de vistas
2. Una paleta lateral con todos los objetos estáticos y dinámicos para la vista de diseño.
3. Una vista de diseño a la que tendremos que arrastrar aquellos objetos dinámicos y estáticos que queramos añadir a cada pantalla de nuestra app.
4. Un explorador de los objetos que habremos añadido
5. Un explorador de medios que habremos cargado (imágenes, video, audio, etc)
6. Una barra lateral con las propiedades de cada objeto seleccionado.
La forma de trabajar, aunque se simplifica, no es tan sencilla de explicar sin entrar al detalle, pero lo voy a intentar pues es la mejor manera de entender la interfaz:
Toda aplicación parte de una pantalla que, por defecto, se denomina Screen1. A partir de esta, podremos enlazar pantallas o desarrollar las apps completamente en una sola mediante capas habilitando y deshabilitando la propiedad "Visible". Si trabajamos con las dos opciones, podemos desarrollar apps sobre esquemas muy organizados, aunque no está de más esbozar el desarrollo con papel y lápiz para estructurar de la mejor manera posible tanto la navegación por la app como el manejo de la misma.
El selector de pantalla se encuentra a la izquierda del segundo menú desde arriba, con fondo verde, y se compone de un desplegable donde seleccionar la pantalla que mostrará la vista previa y otro para crear nuevas pantallas.
A la derecha de este mismo menu, se encuentran dos botones Diseñador y Bloques, donde obtendremos las vistas del diseño y la de los bloques de programación.
Esta última, la de los Bloques, es la clave para que el desarrollador no tenga necesidad de conocer nada del código ni de aprenderlo, pues el manejo de scripts a modo de bloques como si de un puzle se tratara, origina la escritura automática del código por parte de la plataforma.
En esta parte de la plataforma, cambia algo la disposición. En ella cabe destacar dos partes:
1- La pantalla derecha, de escroll infinito, donde podemos apreciar una mochila arriba a la derecha, para guardar una copia de los bloques de código que nos interese conservar o que vayamos a repetir en la app que estemos desarrollando o en futuros proyectos; una papelera abajo, donde destruir los bloques de código que nos sobren o que no hayamos ensamblado bien y un amplio espacio donde colocar los bloques de código. En este caso, hay dos acciones básicas nada más, pero conforme vayáis conociendo el funcionamiento de este ingenioso framework llenaréis este espacio hasta límites insospechados. El espacio de trabajo para los bloques, aunque es ilimitado, da la opción de superponer los bloques en infinitas capas para aquellos que gustan de verlo todo de un vistazo, aunque es recomendable tener los bloques ordenados para poder localizarlos manejándonos con las barras de escroll.
2. A la izquierda, hay una barra de elementos de programación, de dónde saldrán las piezas de este mágico puzle. En la parte superior se encuentran las piezas comunes como los bloques de texto, variables, colores, etc; y en la parte inferior aparecen todos los objetos de la pantalla en la que estamos trabajando, ordenados en árbol, según la jerarquía de capas que les hayamos otorgado, en función del momento y el lugar en el que los hayamos colocado en la pantalla.
Una vez pulsas un elemento del árbol o una pieza común, se despliega a la derecha (la parte izquierda de la vista de bloques) sobre transparencia el submenú con las opciones que nos da cada tipo de elemento. En este caso, están desplegadas las opciones de variables, en naranja.
Cada tipo de opción presenta un color diferente, así, el inicio de la acción o las acciones globales se muestran en ocre, las ejecuciones en verde, los elementos web en morado, las variables en naranja, los cuadros de texto en rosa, las funciones lógicas en verde, las matemáticas en azul... etc.
Una buena muestra para entender cómo funciona el sistema de bloques sería esta:
Mediante este bloque, pongo en marcha una aplicación muy simple de una pantalla en la que he insertado cuatro elementos en vista de diseño, tres visibles y uno invisible. Lo quie la acción expresa es que, cuando aprieto el Botón1, pongo el único elemento invisible que hay, el Activity Starter o iniciador de actividad, como cierto, para que lance el visor web que hay encima y muestre la página web que muestra el cuadro de texto que hay acoplado, la de movilesdualsim.com.
Es un ejemplo muy sencillo para el que no voy a mostrar la vista de diseño, porque sólo pretendo que veáis cómo funciona esta maravilla.
Una vez completados los bloques de código y la vista de diseño, comprobaremos si hay errores y sugerencias en la parte inferior izquierda de la vista de bloques y procederemos a probar la app conectándonos por wifi a nuestro dispositivo. Una vez que comprobamos que funciona, podremos exportar la app compilada o el proyecto extendido en su formato (.aia). Esta última opción, permite que los desarrolladores podamos compartir desarrollos, aumentando la capacidad colaborativa de este sistema. Así, podremos compartir ejemplos, bloques de programación, partes de aplicaciones, etc. Lo que permite a comunidades como esta (por ejemplo), el crecimiento de cada miembro en una dirección diferente, para poder compartir después partes de proyectos e, incluso, poder construir un macroproyecto entre todos de manera muy sencilla y organizada.
En el siguiente tuto, explicaré más a fondo todo desarrollando una aplicación un poquito más compleja donde manejemos más elementos y algún que otro concepto, aunque si le dais una vuelta a Youtube o Google encontraréis mucho material para empezar y conocer mejor este sistema.
¡Nos vemos en la siguiente pantalla!
Última edición:
Foro Xiaomi
Foro Realme
Foro OnePlus
Foro Jiayu
Foro Lenovo
Foro Samsung
Foro Nubia
Foro Blackview
Foro impresoras 3D