sábado, 15 de julio de 2017

Tutorial emulador para App Inventor

Conecta tu teléfono o tableta a AppInventor

Primera parte. Conecta el móvil mediante USB.


Cuando se utiliza App Inventor con un teléfono o tableta, el dispositivo se comunica con el software de App Inventor que se ejecuta en el navegador del ordenador. Esta comunicación se administra a través de la AI2 Companion funcionando en el dispositivo.

La configuración de una conexión USB puede ser difícil, especialmente en máquinas Windows, que necesitan controladores especial (driver) para conectarse a los dispositivos Android. (Este no es el caso con Mac o Linux, que no necesitan controladores especiales.) Lamentablemente, los diferentes dispositivos pueden requerir diferentes controladores, y, fuera de unos pocos modelos estándar, Microsoft y Google han dejado en manos de los fabricantes de dispositivos la creación y suministro de sus propios controladores. Como consecuencia de ello, es posible que tengas que buscar en la web para encontrar el controlador apropiado para tu teléfono.

Estos son los pasos para comenzar a utilizar la aplicación AppInventor con el cable USB:


Paso 1: Ejecuta el programa de instalación del software App Inventor

Para conectar con USB, es necesario instalar primero el software de configuración de App Inventor en el equipo.

Paso 2: Descargar e instalar la App MIT AI2 Companion en el teléfono.


Abre el escáner de codigos QR de tu dispositivo y escanea uno de los códigos QR siguientes:


Play Store
Recomendada: Actualizaciones automáticas
Fichero APK
Requiere actualización manual


Si necesitas un escáner de códigos QR, puedes obtener uno en la Play Store (e.g., ZXing). o descargarte la que te facilito en este enlace:
Si no puedes descargar la aplicación, puedes descargarla desde este enlace:
MIT AI2 Companion

Después de descargar la app, sigue las instrucciones para instalarla. Únicamente necesitas instalarla una vez y a partir de ahí ejecutarla cada vez que uses App Inventor.

Nota: Si eliges el segundo método, tienes que habilitar en la configuración de tu teléfono la opción "permitir la instalación de aplicaciones desde fuentes desconocidas".

Para encontrar esta opción en las versiones de Android anteriores a la 4.0, vete a "Ajustes > Aplicaciones"

Paso 3. Inicia aiStarter

La comunicación entre el ordenador y el teléfono o la tableta requiere un programa llamado aiStarter . El programa aiStarter se instaló al instalar el paquete de instalación de App Inventor. Tendrás accesos directos a aiStarter desde el menú Inicio, en el escritorio, y desde Todos los programas. Cada vez que desees utilizar USB con App Inventor, tendrás que poner en marcha manualmente el aiStarter en su ordenador.


El icono de aiStarter

Para iniciar aiStarter en Windows, haz doble clic en el icono (imagen superior). Sabrás que has lanzado con éxito aiStarter cuando veas una ventana como la siguiente:


Paso 4: Configurar el dispositivo para USB (Poner el dispositivo en modo depuración USB)

En tu dispositivo Android, vete a Ajustes del sistema, Opciones de Desarrollador, actívalas, y asegúrate de que está permitido el modo "Depuración USB".

En la mayoría de los dispositivos con Android 3.2 o mayor, puede encontrar esta opción en Ajustes> Aplicaciones> Desarrollo.
Paso 5: Conecta el ordenador y el dispositivo, y autentifica si es necesario.

Conecta tu dispositivo Android al ordenador mediante el cable USB, asegúrate de que el dispositivo se conecta como un "dispositivo de almacenamiento masivo" (no "dispositivo multimedia") y que no se monta como una unidad en el ordenador. Si ocurre debes ir a Mi PC y desconectar cualquier unidad de disco que se monte cuando se ha conectado el dispositivo Android.

En Android 4.2.2 y posteriores, en el dispositivo aparecerá una pantalla con el mensaje ¿permitir la depuración USB? la primera vez que lo conecte al ordenador nuevo. Pulsa el botón "OK". Esto autentifica el equipo al dispositivo, lo que permite al ordenador comunicarse con él. Tendrás que hacer esto para cada equipo que conectes con el dispositivo, pero sólo una vez por equipo.

Paso 6: Prueba la conexión.
Vete a esta página de  prueba de conexión (se abrirá en una nueva pestaña de tu navegador) y comprueba si te da confirmación de que tu equipo puede detectar el dispositivo. Si la prueba falla, vete a Ayuda de conexión y lee la ayuda sobre USB . No podrás utilizar el AppInventor con el cable USB hasta que resuelvas los problemas de conexión.


Anónimo

Comentar
Cancelar

Segunda parte. Conecta el móvil mediante Wifi.


¡Puedes usar App Inventor sin necesidad de descargar e instalar nada en tu ordenador! Únicamente instala la app MIT App Inventor Companion en tu teléfono o tableta Android. A continuación abre tu proyecto en App Inventor, abre la app "companion" en tu dispositivo Android, y ya puedes testar tus apps a medida que las construyes:

Paso 1: Descarga e instala la App MIT AI2 Companion en tu teléfono o tableta.

Abre en tu dispositivo Android el escáner de códigos QR y escanea el código QR para descargar e instalar la App Companion desde la Play Store. Si no quieres usar la Play Store, escanea el código QR de la derecha para descargar la App Companion directamente a tu teléfono.

Play Store
Recomendada: Actualizaciones automáticas
Fichero APK
Requiere actualización manual

Si necesitas un escáner de códigos QR, puedes obtener uno en la Play Store (e.g., ZXing). o descargarte la que te facilito en este enlace:
Si no puedes descargar la aplicación, puedes descargarla desde este enlace:
MIT AI2 Companion

Después de descargar la app, sigue las instrucciones para instalarla. Únicamente necesitas instalarla una vez y a partir de ahí ejecutarla cada vez que uses App Inventor.

Nota: Si eliges el segundo método, tienes que habilitar en la configuración de tu teléfono la opción "permitir la instalación de aplicaciones desde fuentes desconocidas".

Paso 2: Conecta tu ordenador y tu dispositivo a la misma red WiFi

App Inventor te mostrará automáticamente la app que estés construyendo, pero sólo si tu ordenador (ejecutando App Inventor) y tu dispositivo Android (ejecutando Companion) están conectados a la misma red WiFi.


Paso 3: Abre un proyecto App Inventor conéctate a tu dispositivo Android

Vete a App Inventor y abre un proyecto (o crea uno nuevo). Entonces elige "Connect" y "AI Companion" en el menú principal:



Aparecerá un diálogo con un código QR. En tu dispositivo, ejecuta la app MIT App Companion tal como lo harías con cualquier otra app. A continuación haz click sobre el botón “Scan QR code” y escanea el código:



En unos segundos, deberías poder ver la app que estás construyendo en tu dispositivo. Se irá actualizando a medida que vayas realizando cambios tanto en el diseño como en el comportamiento,a esta característica se e denomina “live testing” (prueba en directo).
Si tienes problemas al escanear el código QR, puedes introducirlo a mano en la caja de texto de la app Companion y a continuación pulsar "Connect with code".

Solución de problemas:

Si la app que estás construyendo no aparece en tu dispositivo,los problemas más comunes son:
  • Puede que la Companion App esté desactualizada. Descarga la última versión.
  • Puede que tu dispositivo no esté conectado a la red wifi. Asegúrate de que puedes ver una dirección IP en la parte inferior de la pantalla de AICompanion.
  • Tu dispositivo no está conectado a la misma red wifi que tu computador. Asegúrate de que ambos dispositivos se encuentran en la misma red.
  • Tu escuela u organización tienen protocolos de red que impiden las conexiones. Si este es el caso, puedes usar la alternativa del emulador o de la conexión USB.

Tercera parte

Ahora que ya sabemos hacer servir el móvil con AppInventor, probaremos sus posibilidades.


Ampliar práctica HelloPurr

Introduciremos otra posibilidad, el uso del accelerómetro. Añadiendo en el Editor de Bloques los siguientes bloques, conseguiremos que el gatito maulle cuando lo movemos:

 

Ampliar práctica PaintPotV2


Vuelve a realizar otra copia del PaintPotV2 y llámala PaintPotV3.
Se trata de añadir una opción para cambiar el fondo del lienzo, podremos colocar el fondo que queramos, y además lo obtendremos mediante una fotografía.
Añade un cuarto botón con el nombre de TakePictureBotton y pon como texto Cámara. Desde la paleta de Media, arrastra un componente Camara en el Visor. Aparecerá en la zona del componente no visible

Pasa al Editor de Bloques y arrastra un controlador de botón when...Click do de la paleta del botón TakePictureBotton y desde la paleta de Camara1 un call...TakePicturey encájalo en su sitio

Ahora desde la paleta de Camara1 coge el bloque when.... .AfterPicture do:

Indica que cuando hagámos una fotografía, esta fotografía pasa a ser el valor de la variable image, y si dentro de la paleta de Canvas, le decimos que pase
a ser el fondo del lienzo, podremos dibujar en la fotografía.

Para terminar esta aplicación, añadiremos un controlador Slider, una barra que determinará el tamaño de los puntos que dibujaremos.
Lo primero, borraremos los botones que determinaban el tamaño y añadiremos un controlador Slider y una etiqueta para informar de la función del Slider:

Podemos cambiar el botón de borrar a la línea superior para ganar espacio. Determinaremos los valores de la etiqueta y del slider

Indicaremos en el Editor de bloques cómo se comportará y ¡¡ listo !!



Además podremos descargar directamente nuestra aplicación al móvil mediante códigos QR. En "Build" puedes generar tu código QR:

y generará un código QR que podrás descargar en tu móvil con un lector de QR.

Te indica que estará disponible durante 2 horas.

Fuente: http://www.frangoal.com/tecno/tecnologia/opcionals/informatica_4/mSCHOOLS/appinventor/PRACTICA4.htm



No hay comentarios:

Publicar un comentario