¿Cómo podríamos agregar códigos JavaScript a la aplicación de Android en Android Studio?

Hemos creado numerosas demostraciones de chat y tutoriales con JavaScript, incluido 10Chat , una aplicación de chat simple escrita con solo 10 líneas de JavaScript. Estas demostraciones funcionan en dispositivos móviles, pero no son exclusivamente aplicaciones de Android. En esa nota, cambiaremos eso.

Cerrar la brecha entre Web y Native con PhoneGap

• Quiero aprender programación de Android. ¿Recomendarías aprender Kotlin o Java?
• Cómo aprender Java y practicar en Android
• Cómo instalar Android SDK solo sin instalar Android Studio
• Cómo obtener el asistente de Google en Android Lollipop
• ¿Cuáles son las ventajas de aprender el desarrollo de aplicaciones de Android antes de aprender el desarrollo de juegos de Android?

PhoneGap es un marco móvil de código abierto que le permite crear aplicaciones multiplataforma que se ejecutan en varios dispositivos móviles, incluidos iOS y Android. Escribes tu aplicación web en HTML5, JavaScript y CSS, y PhoneGap te ayuda a convertirla en aplicaciones nativas, probablemente Android o iOS.

Puede crear aplicaciones web móviles o receptivas con los marcos y bibliotecas de interfaz de usuario de su elección: jQuery Mobile, Sencha Touch, Enyo, Kendo UI, Onsen UI … lo que sea. O, por supuesto, VanillaJS sin ningún marco puede ser su elección. El código de muestra utilizado para este tutorial está disponible en Github, y esta demostración tiene una interfaz muy limpia con CSS mínimo y sin imágenes, y sin bibliotecas de IU adicionales.

Hay dos formas de convertir su aplicación web en una aplicación de Android usando PhoneGap. Una es una forma ultra fácil y sin complicaciones, y otra es una forma manual usando Cordova CLI con un SDK de Android.

Opción 1: Aplicaciones de Android integradas con PhoneGap Build

Usar PhoneGap Build es absolutamente indoloro. Todo lo que necesita hacer es comprimir su aplicación web, subirla a la nube de Adobe PhoneGap Build, y el servicio se encarga de todo por usted. Ni siquiera necesita descargar y configurar SDK o emuladores.

1. Escribe una aplicación web
2. Ciérralo
3. Suba el archivo zip a la nube PhoneGap Build. Haga clic en Listo para construir . Edite el nombre de la aplicación y cargue también el icono de una aplicación.
4. Cuando esté listo, escanee el código QR con su teléfono Android y siga el enlace
5. Descarga el apk e instálalo en tu teléfono
6. Woo-hoo!
7. (…¡Lucro!)

Opción 2: Desarrollo completo con PhoneGap Cordova CLI

Bien, eso fue fácil. O bien, puede instalar las herramientas de interfaz de línea de comandos (CLI) de Cordova y los SDK de Android para un desarrollo completo aprovechando los complementos que le permiten utilizar API de hardware, notificaciones push y más, y depuración.

Paso 1: Instale Android Eclipse Bundle

Primero, debe descargar e instalar Eclipse ADT Bundle. El paquete incluye las herramientas de Android SDK, Eclipse IDE con las herramientas de desarrollador de Android incorporadas.

Paso 2: configura el SDK de Android

Una vez que haya instalado todo lo que necesita, abra Eclipse y vaya a Ventana> Administrador de Android SDK . En el cuadro de diálogo, seleccione herramientas SDK. Probablemente necesites:

• Herramientas de Android SDK
• Android SDK Platform-tools
• Android SDK Build-tools (API 19 para trabajar con Cordova, a partir de octubre de 2014)
• Plataforma SDK
• Imagen del sistema ARM EABI v7a

Para obtener más información sobre cómo agregar paquetes SDK, consulte el sitio http://developer.android.com/sdk….

Paso 3: configurar el emulador de Android

Ahora, debe crear un dispositivo virtual Android (AVD). En Eclipse, vaya a Ventana> Administrador de dispositivo virtual de Android . En la ventana Administrador de AVD, en la pestaña Definiciones de dispositivo, elija un emulador y haga clic en Crear AVD …

Paso 4: Instale Cordova CLI

La instalación de la interfaz de línea de comandos requiere node.js. Si no lo ha hecho, primero debe instalarlo.

Instale cordova con npm:

$ sudo npm install -g cordova

Paso 5: crear un nuevo proyecto en el SDK

Cree un nuevo proyecto escribiendo estos comandos:

$ cordova create simple-chat com.mydomain.chat SimpleChat
$ cd simple-chat
$ cordova platform add android

Intente compilarlo e implementar la aplicación en un emulador o dispositivo:

$ cordova build
$ cordova run android

Puede llevar un tiempo iniciar el emulador, pero tenga paciencia. Una vez que el emulador esté en funcionamiento, ¡debería ver esta pantalla de presentación de Cordova!

Paso 6: transfiere tu aplicación web

En su carpeta de proyecto, debe encontrar un directorio /www/ . Aquí es donde va tu aplicación web.

El contenido de su cuerpo index.html va al cuerpo de /www/index.html . No elimine ni reemplace la sección del encabezado a menos que sepa lo que está haciendo.

Y /js/index.js incluye funciones que se requieren para PhoneGap. Solo necesita llamar a las funciones de su aplicación en onDeviceReady() .

aplicación var = {

initialize: function ()

bindEvents: function ()

onDeviceReady: function () {

// Tu increíble aplicación de chat aquí:

var canal = ‘chat’;

var p = PUBNUB.init ({

subscribe_key: ‘sub-c-f762fb78-2724-‘,

edit_key: ‘pub-c-156a6d5f-22bd-‘

});

}

};

app.initialize ();

ver rawindex.js alojado con ❤ por GitHub

Además, incluye todos sus archivos e imágenes CSS en /www/ .

Los iconos de la aplicación pueden estar en cualquier lugar, solo necesita especificar la ubicación en su archivo config.xml.

SimpleChat

ver rawconfig.xml alojado con ❤ por GitHub

Implementar en un emulador o dispositivo.

$ cordova run android

¡Ahora tienes tu propia aplicación de chat para Android! ¡Súper!

Depuración remota con Chrome

Cuando trabajas en aplicaciones de Android, puedes depurar fácilmente en Chrome.

1. Habilite el modo de depuración USB en su dispositivo Android yendo a Configuración> Opciones de desarrollador , luego active la opción de depuración USB .
2. En su navegador Chrome de escritorio, vaya a http: // chrome: // inspect .
3. Conecte el dispositivo y su computadora con un cable USB
4. Debería ver el nombre de su dispositivo (en esta captura de pantalla a continuación, XT1032 es el nombre de Moto G con el que estoy probando), también su aplicación en la pantalla de Chrome
5. Haga clic en “inspeccionar”

Una vez que haga clic en “inspeccionar”, debería ver la ventana familiar de DevTools para la depuración. Si tiene problemas con las herramientas, vaya a Google Chrome Developer para obtener más información.

Relacionado: desarrollo de aplicaciones de Android