SlideShare una empresa de Scribd logo
1 de 3
UNIVERSIDAD TECNOLÓGICA DEL ESTADO DE ZACATECAS
UNIDAD ACADÉMICA DE PINOS
DESARROLLO DE APLICACIONESIII
CRUZ ENRIQUE RODRÍGUEZ MIRELES
INTRODUCCIÓN AL DESARROLLO DE APLICACIONES MÓVILES
Documentación de aplicación desarrollada en MIT App Inventor 2
1. Abrir la aplicación de MIT App Inventor 2.
2. Crear nueva sesión con tu cuenta de Google.
3. Aceptar las condiciones y políticas de uso.
4. Elegir el idioma en el que se va a mostrar la aplicación web.
5. Abrir la pestaña proyectos y crear un nuevo proyecto.
6. Asignar el nombre al proyecto, en mi caso “Hola hola”.
7. Abrir la pestaña de proyectos y seleccionar Mis proyectos.
8. Abrir el proyecto que habíamos creado anteriormente.
9. En la pantalla de diseño agregar un Label a la pantalla principal de la aplicación.
10.Agregar un TextBox a la pantalla principal de la aplicación.
11.Agregar un Button a la pantalla principal de la aplicación.
12.Agregar un TextToSpeach del área multimedia.
13.Renombrar el Label en la caja de propiedades por “Your name here”.
14.Renombrar Button en la caja de propiedades por “Press to me”.
15.Cambiar la pantalla de Diseñador por la de Bloques.
16.Agregar un bloque del Button llamado when Button. Click do. de la caja de bloques
izquierda.
17.Agregar dos bloques del TextToSpeach llamados call TextToSpeach.Speak Message.
18.Unir los dos bloques anteriores al primer bloque.
19.Agregar el primer bloque que se encuentra en el área de Text.
20.Agregar un texto de hola al bloque anterior.
21.Conectar el bloque anterior con el primer call TextToSpeach.Speak Message.
22.Agregar un bloque del área del TextBox llamado TextBox.Text, que tomara lo que se
escriba en el TextBox.
23.Conectar el bloque TextBox.Text con el segundo call TextToSpeach.Speak Message.
Ahora probaremos la aplicación creada.
1. Primero descargaremos la aplicación MIT AI2 Companion de la Play Store en nuestro
dispositivo con Android 4.0 o superior.
2. Abriremos la aplicación en nuestro Android.
3. Ahora en la aplicación web de MIT App Inventor en la pestaña de conectar seleccionamos
la opción de AI Companion.
4. Con nuestro teléfono escanearemos el código QR proporcionado con la aplicación MIT
AI2 Companion.
5. Una vez escaneada nos conectaremos con el código que nos apareció, además hay que
tener en cuenta que la aplicación web y nuestro Android estén conectados en la misma
red.
6. Ya conectado nos aparecerá la aplicación en nuestro teléfono.
7. Probamos la aplicación escribiendo un nombre en el TextBox y presionando el botón,
nos dirá “Hola seguido del nombre escrito”.

Más contenido relacionado

La actualidad más candente

Presentation first-steps (1)
Presentation first-steps (1)Presentation first-steps (1)
Presentation first-steps (1)
ronald flores
 

La actualidad más candente (20)

Instalación de app inventor 2
Instalación de app inventor 2Instalación de app inventor 2
Instalación de app inventor 2
 
Introducción a App Inventor
Introducción a App InventorIntroducción a App Inventor
Introducción a App Inventor
 
App inventor
App inventorApp inventor
App inventor
 
Introduccion a app inventor
Introduccion a app inventorIntroduccion a app inventor
Introduccion a app inventor
 
MTI App inventor: Conociendo el Entorno
MTI App inventor: Conociendo el EntornoMTI App inventor: Conociendo el Entorno
MTI App inventor: Conociendo el Entorno
 
Interfaz de app inventor 2
Interfaz de app inventor 2Interfaz de app inventor 2
Interfaz de app inventor 2
 
App inventor
App inventorApp inventor
App inventor
 
Taller de Creación de Apps con App Inventor
Taller de Creación de Apps con App InventorTaller de Creación de Apps con App Inventor
Taller de Creación de Apps con App Inventor
 
App inventor primeros pasos i
App inventor   primeros pasos iApp inventor   primeros pasos i
App inventor primeros pasos i
 
App inventor
App inventorApp inventor
App inventor
 
ESTRUCTURA DE UN PROYECTO EN ANDROID STUDIO
ESTRUCTURA DE UN PROYECTO EN ANDROID STUDIOESTRUCTURA DE UN PROYECTO EN ANDROID STUDIO
ESTRUCTURA DE UN PROYECTO EN ANDROID STUDIO
 
Primer Ejemplo de Proyecto en Android Studio
Primer Ejemplo de Proyecto en Android StudioPrimer Ejemplo de Proyecto en Android Studio
Primer Ejemplo de Proyecto en Android Studio
 
Aplicacion sencilla en AppInventor
Aplicacion sencilla en AppInventorAplicacion sencilla en AppInventor
Aplicacion sencilla en AppInventor
 
Iniciacion programacion-ap ps-webinar
Iniciacion programacion-ap ps-webinarIniciacion programacion-ap ps-webinar
Iniciacion programacion-ap ps-webinar
 
Descargar Java JDK, Netbeans y Java ME para Desarrollo de Aplicaciones Moviles
Descargar Java JDK, Netbeans y Java ME para Desarrollo de Aplicaciones MovilesDescargar Java JDK, Netbeans y Java ME para Desarrollo de Aplicaciones Moviles
Descargar Java JDK, Netbeans y Java ME para Desarrollo de Aplicaciones Moviles
 
Presentation first-steps (1)
Presentation first-steps (1)Presentation first-steps (1)
Presentation first-steps (1)
 
Basicos app inventor-manual-de-introduccion
Basicos app inventor-manual-de-introduccionBasicos app inventor-manual-de-introduccion
Basicos app inventor-manual-de-introduccion
 
32- Android, Desarrollo de Aplicaciones Moviles, Importancia del Mockup
32- Android, Desarrollo de Aplicaciones Moviles, Importancia del Mockup32- Android, Desarrollo de Aplicaciones Moviles, Importancia del Mockup
32- Android, Desarrollo de Aplicaciones Moviles, Importancia del Mockup
 
Android
AndroidAndroid
Android
 
Herramientas para Desarrollo de Aplicaciones Moviles
Herramientas para Desarrollo de Aplicaciones MovilesHerramientas para Desarrollo de Aplicaciones Moviles
Herramientas para Desarrollo de Aplicaciones Moviles
 

Similar a MIT App Inventor 2 "Aplicacion"

USO DE HERRAMIENTAS IDE VISUAL C++
USO DE HERRAMIENTAS IDE VISUAL C++USO DE HERRAMIENTAS IDE VISUAL C++
USO DE HERRAMIENTAS IDE VISUAL C++
Luz Fa Calderòn
 
Manual de android
Manual de androidManual de android
Manual de android
481200619
 
Manual de Aplicación Móvil con Acceso a Datos
Manual de Aplicación Móvil con Acceso a DatosManual de Aplicación Móvil con Acceso a Datos
Manual de Aplicación Móvil con Acceso a Datos
Jesus Cisneros Morales
 
Programas de consola en java con net beans por gio
Programas de consola en java con net beans por gioProgramas de consola en java con net beans por gio
Programas de consola en java con net beans por gio
Robert Wolf
 
Tutorial 1 android
Tutorial 1 androidTutorial 1 android
Tutorial 1 android
libidinosa
 
Manual de aplicaciones moviles
Manual de aplicaciones moviles Manual de aplicaciones moviles
Manual de aplicaciones moviles
Jael Vazquez
 
Aplicaciones en java con interfaz gra╠бfica de usuario con net beans
Aplicaciones en java con interfaz gra╠бfica de usuario con net beansAplicaciones en java con interfaz gra╠бfica de usuario con net beans
Aplicaciones en java con interfaz gra╠бfica de usuario con net beans
MIGUEL ANGEL ESPINOZA MONTES
 
Presentación52
Presentación52Presentación52
Presentación52
arecerv
 

Similar a MIT App Inventor 2 "Aplicacion" (20)

USO DE HERRAMIENTAS IDE VISUAL C++
USO DE HERRAMIENTAS IDE VISUAL C++USO DE HERRAMIENTAS IDE VISUAL C++
USO DE HERRAMIENTAS IDE VISUAL C++
 
APLICACIONES CREADAS PARA ANDROID
APLICACIONES CREADAS PARA ANDROIDAPLICACIONES CREADAS PARA ANDROID
APLICACIONES CREADAS PARA ANDROID
 
Programacion2
Programacion2Programacion2
Programacion2
 
Tema2 ado net
Tema2 ado netTema2 ado net
Tema2 ado net
 
App inventor
App inventorApp inventor
App inventor
 
Laboratorio de visual basic_Orlando
Laboratorio de visual basic_OrlandoLaboratorio de visual basic_Orlando
Laboratorio de visual basic_Orlando
 
Aplicacion movil
Aplicacion movilAplicacion movil
Aplicacion movil
 
Desarrollo de aplicaciones adroid
Desarrollo de aplicaciones adroidDesarrollo de aplicaciones adroid
Desarrollo de aplicaciones adroid
 
Trabajo de ntics ii
Trabajo de ntics iiTrabajo de ntics ii
Trabajo de ntics ii
 
Trabajo de NTICS II
Trabajo de NTICS IITrabajo de NTICS II
Trabajo de NTICS II
 
Manual de android
Manual de androidManual de android
Manual de android
 
Presentacion de codeblock
Presentacion de codeblockPresentacion de codeblock
Presentacion de codeblock
 
Manual de Aplicación Móvil con Acceso a Datos
Manual de Aplicación Móvil con Acceso a DatosManual de Aplicación Móvil con Acceso a Datos
Manual de Aplicación Móvil con Acceso a Datos
 
Programas de consola en java con net beans por gio
Programas de consola en java con net beans por gioProgramas de consola en java con net beans por gio
Programas de consola en java con net beans por gio
 
Tutorial 1 android
Tutorial 1 androidTutorial 1 android
Tutorial 1 android
 
Manual de aplicaciones moviles
Manual de aplicaciones moviles Manual de aplicaciones moviles
Manual de aplicaciones moviles
 
Aplicaciones en java con interfaz gra╠бfica de usuario con net beans
Aplicaciones en java con interfaz gra╠бfica de usuario con net beansAplicaciones en java con interfaz gra╠бfica de usuario con net beans
Aplicaciones en java con interfaz gra╠бfica de usuario con net beans
 
Actividad Vb0506
Actividad Vb0506Actividad Vb0506
Actividad Vb0506
 
Presentación52
Presentación52Presentación52
Presentación52
 
bases de datos desde visual basic
bases de datos desde visual basicbases de datos desde visual basic
bases de datos desde visual basic
 

Más de UTZAC Unidad Académica de Pinos (15)

Cuaderno de Ingenieria
Cuaderno de IngenieriaCuaderno de Ingenieria
Cuaderno de Ingenieria
 
Introduccion a appmoviles
Introduccion a appmovilesIntroduccion a appmoviles
Introduccion a appmoviles
 
PHP
PHPPHP
PHP
 
MetricasMcCall
MetricasMcCallMetricasMcCall
MetricasMcCall
 
MetricasMcCall
MetricasMcCallMetricasMcCall
MetricasMcCall
 
CalidadSW
CalidadSWCalidadSW
CalidadSW
 
aplicaciones RIA y tradicionales - Web 1.0 y Web2.0
aplicaciones RIA y tradicionales - Web 1.0 y Web2.0aplicaciones RIA y tradicionales - Web 1.0 y Web2.0
aplicaciones RIA y tradicionales - Web 1.0 y Web2.0
 
Patrones de diseño
Patrones de diseñoPatrones de diseño
Patrones de diseño
 
A3APSeguridad_soft_vision
A3APSeguridad_soft_visionA3APSeguridad_soft_vision
A3APSeguridad_soft_vision
 
manualdewindows
manualdewindowsmanualdewindows
manualdewindows
 
Derechos deautor
Derechos deautorDerechos deautor
Derechos deautor
 
ParadigmasDeProgramacion
ParadigmasDeProgramacionParadigmasDeProgramacion
ParadigmasDeProgramacion
 
A1 u6ga enrutamiento estado enlace
A1 u6ga enrutamiento estado enlaceA1 u6ga enrutamiento estado enlace
A1 u6ga enrutamiento estado enlace
 
Lan link-state
Lan   link-stateLan   link-state
Lan link-state
 
A1U6GA Enrutamiento Estado Enlace
A1U6GA Enrutamiento Estado EnlaceA1U6GA Enrutamiento Estado Enlace
A1U6GA Enrutamiento Estado Enlace
 

MIT App Inventor 2 "Aplicacion"

  • 1. UNIVERSIDAD TECNOLÓGICA DEL ESTADO DE ZACATECAS UNIDAD ACADÉMICA DE PINOS DESARROLLO DE APLICACIONESIII CRUZ ENRIQUE RODRÍGUEZ MIRELES INTRODUCCIÓN AL DESARROLLO DE APLICACIONES MÓVILES Documentación de aplicación desarrollada en MIT App Inventor 2 1. Abrir la aplicación de MIT App Inventor 2. 2. Crear nueva sesión con tu cuenta de Google. 3. Aceptar las condiciones y políticas de uso. 4. Elegir el idioma en el que se va a mostrar la aplicación web. 5. Abrir la pestaña proyectos y crear un nuevo proyecto. 6. Asignar el nombre al proyecto, en mi caso “Hola hola”. 7. Abrir la pestaña de proyectos y seleccionar Mis proyectos. 8. Abrir el proyecto que habíamos creado anteriormente. 9. En la pantalla de diseño agregar un Label a la pantalla principal de la aplicación. 10.Agregar un TextBox a la pantalla principal de la aplicación. 11.Agregar un Button a la pantalla principal de la aplicación. 12.Agregar un TextToSpeach del área multimedia. 13.Renombrar el Label en la caja de propiedades por “Your name here”. 14.Renombrar Button en la caja de propiedades por “Press to me”.
  • 2. 15.Cambiar la pantalla de Diseñador por la de Bloques. 16.Agregar un bloque del Button llamado when Button. Click do. de la caja de bloques izquierda. 17.Agregar dos bloques del TextToSpeach llamados call TextToSpeach.Speak Message. 18.Unir los dos bloques anteriores al primer bloque. 19.Agregar el primer bloque que se encuentra en el área de Text. 20.Agregar un texto de hola al bloque anterior. 21.Conectar el bloque anterior con el primer call TextToSpeach.Speak Message. 22.Agregar un bloque del área del TextBox llamado TextBox.Text, que tomara lo que se escriba en el TextBox. 23.Conectar el bloque TextBox.Text con el segundo call TextToSpeach.Speak Message.
  • 3. Ahora probaremos la aplicación creada. 1. Primero descargaremos la aplicación MIT AI2 Companion de la Play Store en nuestro dispositivo con Android 4.0 o superior. 2. Abriremos la aplicación en nuestro Android. 3. Ahora en la aplicación web de MIT App Inventor en la pestaña de conectar seleccionamos la opción de AI Companion. 4. Con nuestro teléfono escanearemos el código QR proporcionado con la aplicación MIT AI2 Companion. 5. Una vez escaneada nos conectaremos con el código que nos apareció, además hay que tener en cuenta que la aplicación web y nuestro Android estén conectados en la misma red. 6. Ya conectado nos aparecerá la aplicación en nuestro teléfono. 7. Probamos la aplicación escribiendo un nombre en el TextBox y presionando el botón, nos dirá “Hola seguido del nombre escrito”.