Egov AppInventor

Gobierno mvil:
Introduccin
Android es actualmente el sistema operativo para smartphones y tablets ms
famoso, con una enorme cuota de mercado.
Desarrollar software para esta plataforma permite llegar a una gran cantidad de
pblico. Sin embargo, abordar un desarrollo directo con el lenguaje de
programacin Java, XML, emulacin virtual y ambiente de dispositivo mvil
puede ser intimidante. Esa es la razn por la que Google ide una forma sencilla
de desarrollar aplicaciones para Android: haciendo uso de programacin grfica
y atraer as a los desarrolladores.
Google, sin embargo, dej de lado este proyecto el cual fue retomado por el MIT
y se ha mantenido as.
Peru_e_Gobierno
GobiernoElectronicoONGEI
El libro sigue el formato de llevar paso a paso al lector desde preparar el ambiente
de desarrollo, pasando por el diseo de la pantalla en un Smartphone Android, los
diferentes componentes visuales y no visuales, programacin usando bloques
como si fuese un rompecabezas, variables, uso del s condicional, ciclos o bucles,
hasta el uso de las capacidades propias de un Smartphone como la
cmara, video o el acelermetro.
MIT App Inventor oficialmente es una herramienta para desarrollo en lnea por lo
que requiere conexin permanente a Internet.
Peru_e_Gobierno
Paso 1. Tener una cuenta en Gmail
En https://accounts.google.com/ puede crear una cuenta de

correo, ya la tiene? Entonces este paso es innecesario.
Paso 2. Ir a la pgina de MIT App Inventor
Dirjase a http://www.ai2.appinventor.mit.edu/ . All inicia todo, pero

antes hay que preparar el PC para poder usar esta herramienta.
Imagen 1:
Peru_e_Gobierno
Paso 3. Preparando el PC para hacer uso de MIT App

Inventor
Tiene Windows 7 o Windows 8 (32 o 64 bits), Qu se debe instalar? Dos
software:
1. JRE (Java Runtime Environment)
2. AppInventor Setup
Paso 3A. Descargando e instalando el JRE (Java Runtime

Edition)
Con el navegador Google Chrome en 32bits, es necesario ir a esta ubicacin:
http://java.com/es/download/index.jsp y dar clic en
Descarga gratuita de Java
Peru_e_Gobierno
Imagen 2: Descarga del JRE para Google Chrome de 32 bits
Luego se debe dar clic en Aceptar e iniciar

descarga gratuita
Imagen 3:
Peru_e_Gobierno
Imagen 3: Advertencia cuando el sistema operativo del PC es Windows 8:
Google Chrome descarga el instalador de Java (ver la parte inferior), luego se da clic en ese
ejecutable
Peru_e_Gobierno
Imagen 4: Descargando JRE para Google Chrome
Peru_e_Gobierno
Imagen 5: Instalador de JRE en

ejecucin
Peru_e_Gobierno
Imagen 6: Descargando el resto de JRE
Peru_e_Gobierno
Imagen 7: JRE instalado
Para probar que efectivamente el JRE qued correctamente instalado, dirjase

a http://www.java.com/en/download/testjava.jsp , debe
aparecer la siguiente imagen:
Peru_e_Gobierno
Imagen 8: Se da el permiso para ejecutar un applet Java dentro de

Google Chrome
Al dar clic en Google Chrome en Ejecutar siempre en

este sitio debe aparecer:
Peru_e_Gobierno
Imagen 9: Java correctamente instalado y ejecutando en el navegador
Y para hacer la prueba que puede ejecutar App Inventor, dirjase a este enlace:
http://beta.appinventor.mit.edu/learn/setup/misc/JWSTest/AppInvJWSTest.html ,
all le debe dar clic al botn Launch que lanza un
Bloc de Notas o Notepad funcional.
Peru_e_Gobierno
Imagen 10: De clic en el botn "Launch" para probar que el JRE est listo
para ejecutar App Inventor
Peru_e_Gobierno
Imagen 11: Google Chrome pide permiso para descargar el programa

notepad.jnlp
Peru_e_Gobierno
Imagen 12: Una vez descargado notepad.jnlp se da clic para ejecutarlo
Peru_e_Gobierno
Imagen 13: Permiso para ejecutar la

aplicacin
Imagen 14: Un bloc de notas o "Notepad" lanzado.
Peru_e_Gobierno
Paso 3B. Descargando e instalando el AppInventor Setup

Descargue directamente de este enlace el AppInventor Setup
http://beta.appinventor.mit.edu/learn/setup/setupwindows.html , y siga
estos pasos:
Peru_e_Gobierno
Imagen 15: Descargando el App Inventor Setup
Peru_e_Gobierno
Imagen 16: Inicio de instalacin
Peru_e_Gobierno
Imagen 17: Que grupo de programas se crea en la instalacin
Peru_e_Gobierno
Paso 4. Iniciando con MIT App Inventor
Ya puede dirigirse a http://www.ai2.appinventor.mit.edu/

Luego entre con su cuenta de Gmail
Peru_e_Gobierno
Entre con su cuenta de Gmail
Apruebe el uso de la cuenta en MIT AppInventor
Peru_e_Gobierno
Esta es la pantalla con que inicia
Pantalla inicial que muestra los proyectos que ha hecho
Como es la primera vez que inicia en esta

herramienta, todava no tiene proyectos.
Peru_e_Gobierno
Iniciando con el tradicional Hola Mundo
Presione el botn New para crear un nuevo proyecto

Presione el botn "New" para generar un nuevo proyecto
Peru_e_Gobierno
Presione el botn "New" para generar un nuevo proyecto
Peru_e_Gobierno
Se le pone un nombre al proyecto (espacios no estn permitidos)

Inmediatamente al crear un proyecto, se muestra la pgina de diseo de pantallas,
la cual es muy parecida a otros IDE (Integrated
Development Environment)
Peru_e_Gobierno
Arrastre el control grfico TextBox a la pantalla Screen1 y observe lo que

sucede
Peru_e_Gobierno
Arrastre el control grfico "TextBox" a la pantalla "Screen1"
Arrastre un Button a la pantalla Screen1
Peru_e_Gobierno
Arrastre un "Button" a la pantalla "Screen1"
Una muy buena recomendacin, es renombrar los objetos grficos con un

estndar. Se usar esta forma:
Se presiona el botn Rename para cambiar cada objeto grfico.
Peru_e_Gobierno
Renombra el objeto visual TextBox
Peru_e_Gobierno
Objetos visuales aparecen en "My Blocks"
El desarrollo es con piezas de rompecabezas que encajan. Se da clic en

btnPresionar (un botn), y aparecen los eventos:
Peru_e_Gobierno
La primera pieza es un evento que se dispara cuando se da clic en el

botn
Arrastre esa pieza del rompecabezas que

representa un evento a la pantalla:
Peru_e_Gobierno
Arrastrando la pieza que representa un evento a la pantalla
Ahora es el turno del objeto TextBox, al dar clic en este, nos muestra todos los
eventos, acciones y cambio de valor de propiedades que
pueden hacerse:
Peru_e_Gobierno
Arrastre la pieza que dice: "set txtAviso.Text to" a la pantalla
Y observe que la pieza se acopla perfectamente al evento del botn
Peru_e_Gobierno
Ahora es darle un valor al TextBox, para ello en la seccin de Built-In

seleccione Text y de all la pieza text text, arrstrela hasta
que se acople a la pieza de cambio de valor de propiedad del TextBox
Peru_e_Gobierno
Seleccione de "Built-In", en "Text", la pieza "text text"
Peru_e_Gobierno
Escriba el texto Hola Mundo en la propiedad text como se ve en la imagen
Peru_e_Gobierno
Activa la simulacin de SmartPhone
Peru_e_Gobierno
Aviso que el emulador de SmartPhone inicia, toma de 2 a 3 minutos.

Imagen 54:
Peru_e_Gobierno
El emulador ha iniciado
Una vez que el emulador ha iniciado, vuelva a la pantalla Android Blocks Editor y
presione en Connect to Device y seleccione
emulator-5554
Peru_e_Gobierno
Seleccione "Connect to Device..." y de all a "emulator-5554"
Peru_e_Gobierno
Aplicacin ejecutndose en un SmartPhone (emulacin)
Peru_e_Gobierno
MUCHAS GRACIAS
Descarga MPERU App:
Android:https://goo.gl/BaOdFV
IOS:https://goo.gl/0kNMCj
Peru_e_Gobierno

Egov AppInventor

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Egov AppInventor

Загружено:

Авторское право:

Доступные форматы

Gobierno mvil:

Paso 1. Tener una cuenta en Gmail

En https://accounts.google.com/ puede crear una cuenta de

Paso 2. Ir a la pgina de MIT App Inventor

Dirjase a http://www.ai2.appinventor.mit.edu/ . All inicia todo, pero

Paso 3. Preparando el PC para hacer uso de MIT App

Paso 3A. Descargando e instalando el JRE (Java Runtime

Imagen 2: Descarga del JRE para Google Chrome de 32 bits

Luego se debe dar clic en Aceptar e iniciar

Imagen 3: Advertencia cuando el sistema operativo del PC es Windows 8:

Imagen 4: Descargando JRE para Google Chrome

Imagen 5: Instalador de JRE en

Imagen 6: Descargando el resto de JRE

Imagen 7: JRE instalado

Para probar que efectivamente el JRE qued correctamente instalado, dirjase

Imagen 8: Se da el permiso para ejecutar un applet Java dentro de

Al dar clic en Google Chrome en Ejecutar siempre en

Imagen 9: Java correctamente instalado y ejecutando en el navegador

Imagen 11: Google Chrome pide permiso para descargar el programa

Imagen 12: Una vez descargado notepad.jnlp se da clic para ejecutarlo

Imagen 13: Permiso para ejecutar la

Imagen 14: Un bloc de notas o "Notepad" lanzado.

Paso 3B. Descargando e instalando el AppInventor Setup

Imagen 15: Descargando el App Inventor Setup

Imagen 16: Inicio de instalacin

Imagen 17: Que grupo de programas se crea en la instalacin

Paso 4. Iniciando con MIT App Inventor

Ya puede dirigirse a http://www.ai2.appinventor.mit.edu/

Entre con su cuenta de Gmail

Apruebe el uso de la cuenta en MIT AppInventor

Esta es la pantalla con que inicia

Pantalla inicial que muestra los proyectos que ha hecho

Como es la primera vez que inicia en esta

Iniciando con el tradicional Hola Mundo

Presione el botn New para crear un nuevo proyecto

Presione el botn "New" para generar un nuevo proyecto

Se le pone un nombre al proyecto (espacios no estn permitidos)

Arrastre el control grfico TextBox a la pantalla Screen1 y observe lo que

Arrastre el control grfico "TextBox" a la pantalla "Screen1"

Arrastre un Button a la pantalla Screen1

Arrastre un "Button" a la pantalla "Screen1"

Una muy buena recomendacin, es renombrar los objetos grficos con un

Se presiona el botn Rename para cambiar cada objeto grfico.

Renombra el objeto visual TextBox

Objetos visuales aparecen en "My Blocks"

El desarrollo es con piezas de rompecabezas que encajan. Se da clic en

La primera pieza es un evento que se dispara cuando se da clic en el

Arrastre esa pieza del rompecabezas que

Arrastrando la pieza que representa un evento a la pantalla

Arrastre la pieza que dice: "set txtAviso.Text to" a la pantalla

Y observe que la pieza se acopla perfectamente al evento del botn

Ahora es darle un valor al TextBox, para ello en la seccin de Built-In

Seleccione de "Built-In", en "Text", la pieza "text text"

Escriba el texto Hola Mundo en la propiedad text como se ve en la imagen

Activa la simulacin de SmartPhone

Aviso que el emulador de SmartPhone inicia, toma de 2 a 3 minutos.

Seleccione "Connect to Device..." y de all a "emulator-5554"

Aplicacin ejecutndose en un SmartPhone (emulacin)

Вам также может понравиться