¿Cuantas veces he dicho que detesto a mas no poder todo lo que tiene que ver con Java y, por añadir más, todo lo que tenga que ver con un IDE grande, gordo y pesado?
No lo sé, ya habré perdido la cuenta, pero la cosa es que, todos saben bien lo mucho que desprecio el trabajo con entornos de desarrollo integrados como Eclipse, NetBeans, Aptana, entre otros; creo que el único IDE que realmente me ha parecido genial, es, sin dudas NinjaIDE y es por el simple hecho de que no es estúpidamente pesado, no requiere de mil plugins ni, obviamente, de descargar nada mas que el simple instalador …
La cosa es que mi pasantía radica en crear una webapp para una empresa que pueda ser utilizada en distintos dispositivos y, obviamente Phonegap es la elección para esto. ¿Qué pasa? Me habían recomendado que usara Eclipse si iba a trabajar con Linux y si trabajaba con Windows, pues que usara … dios, me siento un poco enfermo al decirlo … Dreamweaver, porque tiene integración nativa con Cordova/Phonegap.
La cosa va de que en palabras exactas de mi tutor “Si tratas de usar editores de texto, morirás en el intento”; bueno, a mi eso de morir en el intento no me va, estuve conversando con Andrés y resolvimos, luego de leer un hilo en Stack Overflow, que era posible armar un entorno de desarrollo completo y sencillo con Sublime Text 2/3.
Gran parte del trabajo ya la sabía AurosZx así que la mitad de todo ya estaba prácticamente hecha (el chico es medio genio aunque no lo admita), aunque luego tuvimos que echar mano de documentación y mucho más Stack Overflow (que dios los bendiga, amo esa página).
¿Por qué Sublime? ¿Qué tiene el que no tengan los enormes IDE’s que todos quieren usar? Oh, muy simple, integración real con HTML5, plugins y, por encima de todo, ligereza.
No es que en los antes mencionados no se pueda utilizar HTML5 ni mucho menos, sino que en este aspecto a Sublime es muy difícil ganarle, cosas como emmet, JsLint, resaltadores de sintaxis para pre-procesadores CSS, entre TANTAS otras cosas lo hacen un candidato ideal para el trabajo con Phonegap, solo que, claro, no se encuentra mucha información precisa de como hacer que esto funcione, nosotros no reinventamos la rueda, solo descubrimos la secuencia de pasos necesaria para lograr el cometido y la compartiremos con ustedes.
Nano y yo estábamos conversando sobre su pasantía, y me mencionó que le tocaba desarrollar una app con PhoneGap para Android. Pero no le gustaba para nada la idea de usar Eclipse, y dijo que había leído que era posible desarrollar para Android con Sublime Text. Nos pusimos a investigar, y llevamos (poco a poco, si…) la teoría a la práctica. Hoy les venimos a mostrar el fruto de nuestro esfuerzo, y cómo conseguirlo ustedes mismos ;)
Lo que necesitas para empezar
Bueno, para enseñarle a Sublime Text como lidiar con Android/PhoneGap y todas esas hierbas, vamos a necesitar algunas cosas…
- Java (OpenJDK es suficiente).
- Sublime Text 2/3.
- Android SDK (Software Development Kit).
- Andrew (plugin para Sublime Text 2/3).
- Node.js y PhoneGap.
- Apache Ant.
Empecemos instalando Java. Se recomienda usar Java de Oracle, pero OpenJDK no me ha dado problemas (pero a mi sí, y además, fui idiota y seguí la recomendación de la documentación de Google). Lo instalamos de los repos oficiales de
Arch Linux, ejecutando en una terminal:
pacman -S jdk7-openjdk jre7-openjdk jre7-openjdk-headless
Para Ubuntu tendríamos que usar:
sudo apt-get install -y openjdk-7-jdk openjdk-7-jre openjdk-7-jre-headless
Nano: Si esto de alguna manera no les funciona y, les parte las pelotas con que necesitan Java de Oracle, bueno, tienen varias maneras para hacer esto.
La forma bonita, simple y sin enredos:
sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java7-installer
Y la forma menos bonita pero que quizá a algunos les guste, les dejo un link para que vean con detalle como hacerlo y en español, AQUÍ.
Para instalar Sublime Text 2/3 en Arch, abrimos una terminal y ejecutamos:
yaourt -S sublime-text
O, claro:
yaourt -S sublime-text-dev
Tambien existimos los que usamos Sublime en Ubuntu, de nuevo, dos maneras para hacerlo, pero explicaré una, la de los flojos, que funciona igual:
Para Sublime Text 2:
sudo add-apt-repository ppa:webupd8team/sublime-text-2
sudo apt-get update
sudo apt-get install sublime-text
Para el 3:
sudo add-apt-repository ppa:webupd8team/sublime-text-3
sudo apt-get update
sudo apt-get install sublime-text-installer
Ahora necesitamos el Android SDK. Para instalarlo en Arch ejecutamos el comando:
yaourt -S android-sdk
si eres yo y detestas la idea de andar con todas las yerbas de instalación de Arch, y eres flojo, te toca descargar el SDK manualmente, aunque da igual, no es ciencia espacial…
Android SDK para Linux (32 y 64 bits)
Bien, ahora necesitamos instalar Node.js. Lo instalamos de los repos oficiales de Arch, ejecutando:
pacman -S nodejs
Ya tenemos Node.js, y con esto instalaremos PhoneGap. En una terminal ejecutamos:
sudo npm install -g phonegap
Esperamos a que termine (puede tardar un rato). Adicionalmente, bajaremos el paquete por separado desde la Web, ya que necesitaremos algunos archivos que contiene más adelante.
Ahora, este proceso en Ubuntu es un pelo mas fastidioso porque Node.js no está actualizado en los repos y usar esa versión no es buena idea si quieres desarrollar, por ende puedes usar el “PPA-way” que no es mala idea, o, usar (como yo le digo cariñosamente) “los caminos turbios de Tete” y compilarla, cosa que por cierto, es una idiotez de lo fácil que es:
El PPA-way:
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get instal nodejs
Los turbios caminos de Tete:
Bien yo también he usado esta manera porque me gusta, no explicaré por qué ni qué ventajas tiene, eso ya depende de ustedes y de que quieran investigar, este tuto no es sobre este tema, así que primero se descargan las dependencias para compilar (todo desarrollador las debería instalar, independientemente de lo que vaya a usar):
curl build-essential libssl-dev libsqlite3-0 libsqlite3-dev git-core
Nos descargamos node:
git clone https://github.com/joyent/node.git
Ahora instalamos:
cd node
./configure
make #Esperamos un rato, está construyendo el paquete
sudo make install
Y eso señores, es la temida magia negra de la compilación manual en su más básica expresión, ¿Da miedo verdad? Ahora solo nos falta NPM, cosa que … ahem:
curl http://npmjs.org/install.sh | sh
Listo, ahora sí.
Por último, instalaremos el compilador Apache Ant para Java. En Arch Linux lo instalamos así:
pacman -S apache-ant
Para Ubuntu, igual, nada del otro mundo debo decir:
sudo apt-get install ant
Tenemos que descargar ahora, obviamente, Phonegap:
Ahora necesitamos un par de cositas más, una de ellas para obtener la otra fácilmente, AurosZx ya hizo ese pedazo del artículo por mi:
Necesitamos instalar Andrew, un plugin para Sublime Text que añade resaltado de sintaxis, autocompletado y soporte integrado para el compilador de Apache Ant).
Para instalar Andrew, primero necesitamos el plugin “Package Control” de Sublime Text. Para instalarlo, abrimos ST2, vamos a View > Show Console y en esa terminal escribimos:
import urllib2,os; pf='Package Control.sublime-package'; ipp =
sublime.installed_packages_path(); os.makedirs( ipp ) if not
os.path.exists(ipp) else None; urllib2.install_opener(
urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join(
ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/'
+pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text
to finish installation')
Y para ST3, ejecutamos:
import urllib.request,os; pf = 'Package
Control.sublime-package'; ipp = sublime.installed_packages_path();
urllib.request.install_opener( urllib.request.build_opener(
urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf),
'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' +
pf.replace(' ','%20')).read()
Aunque no muestre ningún aviso, en unos segundos estará listo. Ahora reiniciemos Sublime Text. Usando el atajo de teclado Ctrl+Shift+P buscaremos la opción “Install Packages”. Ahí escribimos “Andrew” y lo instalamos.
Nano: Resulta y acontece que una parte crítica al momento de compilar requiere librerías de 32 bits que no se encuentran instaladas en nuestro sistema (en esta caso, uno basado en Debian) y por más que tengamos el SDK de 64bits esto no va a importar, por ende si usas un sistema de 64bits (Debian, Ubuntu y derivadas) necesitas instalar las famosas ia32:
sudo apt-get install ia32-libs
Y si usas otro sistema, pues busca el equivalente.
Nano: y hasta aquí la parte de lo que necesitas para armar tu entorno de desarrollo con Sublime Text y Linux.
El proceso
Bien, lo primero que debemos hacer es descomprimir el SDK en /opt para instalarlo, eso debe hacerse con sudo obviamente.
Una vez hecho eso, para evitarnos el dolor de cabeza de tener que ejecutar todo como superusuario, le cambiamos los permisos a la carpeta para que nuestro usuario pueda usarla libremente sin sudo
sudo chown -R usuario /opt/android-sdk-linux/ #O como se llame su archivo descomprimido, por defecto debería ser ese
Ahora debemos añadir una ruta del SDK a nuestro PATH. Así que ejecutamos (de forma normal):
editor ~/.bashrc
Nano: o en mi caso:
editor ~/.zshrc
Reemplazando editor por nuestro editor favorito (nano, vim, kate, gedit, etc). Añadimos la siguiente línea al archivo:
export PATH=$PATH:/opt/android-sdk/platform-tools
Y para zsh:
export PATH=/opt/android-sdk-linux/tools:$PATH
Por último, cerramos la terminal y la volvemos a ejecutar o si usan alguna como Guake o Yakuake:
source .bashrc
source .zshconfig
Ambos ejecutados, obviamente, desde la carpeta Home.
Ahora lanzamos el Android SDK Manager con el comando:
android
Nano: acá empieza lo bueno y es donde nos damos cuenta de que Eclipse, ADT, Netbeans y sea lo que sea que se llame IDE, es innecesario, feo, pesado … al menos para trabajar con este tipo de cosas, en mi opinión.
Al ejecutar el comando anterior, nos aparecerá una ventana, que es el SDK Manager de Android y con el es que vamos a instalar las API’s y recursos necesarios para compilar y probar nuestro código, de todos modos tengan en cuenta que es medio pesada la descarga e instalación así que va a tardar y, también recomendamos que solo descarguen lo necesario, osea:
- Android SDK-tools
- Android SDK-Plataform-tools
- Android SDK-build-tools
Y de los sistemas en general, osea 4.3, etc, lo realmente importante de tener en cada uno que quieran instalar es:
- SDK Plataform
- Samples for SDK
- Google APIs
Luego de tenerlo todo descargado y listo, hay que ponerse a trabajar en el entorno de desarrollo.
Andrew no es nada complicado de configurar si han seguido los pasos anteriores, de hecho, lo que viene es ridículamente simple:
- Vamos a Andrew > Preferences > Locate SDK. Podemos elegir localizarlo automáticamente o manualmente, ¿Recomendación? Denle a mano, con tal es solo /opt/android-sdk-linux y ya.
- Van a Andrew > Preferences > Workspace path y le dicen en donde va a poner los archivos (¿Donde? Esa ya es su elección, muchachos), tengan en cuenta que “~/” no es reconocida como “home”, deben usar la ruta absoluta, osea /home/usuario/carpeta.
- Chequeamos que todo funciona clickeando en Andrew > Android managers > Android SDK Manager y si les abre el SDK manager, entonces funciona.
- ¡A codear! (o bueno, casi) Simplemente vayan a Andrew > New Project dentro de las opciones y esto les va a generar el entorno completo de carpetas para trabajar.
Bien ya tenemos la mitad del trabajo hecho, o más, ahora viene lo que nos fastidió un poco a y a mi.
La parte fácil radica en la configuración de Phonegap. Del archivo Phonegap.2.x.x que se descargaron necesitan tomar componentes puntuales e ir ubicándolos en sus lugares, los componentes que nos importan se encuentran dentro de …/lib/android las demás carpetas son, obviamente, para los demás sistemas operativos.
- Existe una carpeta llamada assets (si esta no existe, basta con crearla), dentro de ella se debe crear una carpeta nueva llamada www y dentro de ella deben colocar el archivo cordova.2.x.x.js, y básicamente en esta carpeta es donde van a codear tooooooooda su app.
- Ahora deben buscar dentro de su carpeta de Cordova (la que bajaron) el archivo llamado cordova.2.x.x.jar, tomar este archivo y ubicarlo dentro de la carpeta lib de su app.
- Dentro de su archivo Phonegap descargado debe existir una carpeta llamada xml, la cual tomaremos y lanzaremos dentro de la carpeta res en nuestra app.
Con esto ya tendríamos lista la parte de ubicar los componentes en su sitio, ahora toca echar mano de un poquito de código, nada del otro mundo.
Configurando la clase principal
Esto es importante, para que todo funcione hay que modificar la clase principal del proyecto de nuestra app, que se encuentra hasta abajo de nuestro directorio src, en mi caso se llama HelloWorld.java porque, obviamente, hice un Hola Mundo, pero el nombre variará dependiendo de como hayan llamado al proyecto.
En fin, van a encontrarse un código parecido a este:
package com.helloworld.helloworld;
import org.apache.cordova.*;
import android.os.Bundle;
public class Helloworld extends DroidGap
{
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
Ese es el código ya modificado, deben tomar en cuenta el NO COPIAR Y PEGAR el código porque no va a funcionar, no sean tan flojos. Les explico cuales son los cambios que se hicieron para que quedara así:
La clase como tal pasa de ser:
extends Activity
a:
extends DroidGap
El método onCreate debe ser public (antes no lo era).
Sustituimos:
sustituimos la linea setContentView(R.layout.main);
por:
super.loadUrl("file:///android_asset/www/index.html");
Y reemplazamos:
import android.app.Activity
por:
import org.apache.cordova.*;
Y con eso ya tendríamos lista esta parte, ahora vienen las dos últimas cosas que debemos configurar para quedar a tono.
El manifest.xml
Yupi, ya llegamos a la parte mas fastidiosa, tener que echar XML, menos mal que nos tienen para hacerles el trabajo, ¿No?
Bien, bromas aparte, esto es realmente importante, si esto no se hace, se van al infierno y no les va servir de nada todo lo anterior. Abran el archivo AndroidManifest.xml y dentro de la etiqueta manifest, debajo de todo lo demás colocarán las siguientes resoluciones de pantalla:
Link al código que necesitan (wordpress no permite formatear código xml)
Busquen el nodo activity hijo directo de application y agreguen lo siguiente:
android:configChanges="orientation|keyboardHidden"
Tambien se necesita crear otro activity:
Y dentro del nodo application, agregar la propiedad:
android:debuggable="true"
La cual, obviamente eliminarán cuando lancen su app al público ;).
Magia negra
Bien, resulta y acontece que había algo que nos eludía a y a mi. El archivo .jar que utilizamos anteriormente necesita generar un ” Build Path” especial, cosa que Eclipse hacía con un menú contextual super rebuscado nativo y que, obviamente Sublime Text no hace.
Creo yo que pasamos un rato dándonos de topes buscando soluciones en internet y todas decían lo mismo en eclipse, pero Stack OverFlow volvió al rescate y consiguió por fin la solución a esto, manual, pero simple y efectiva.
¿Cual es? Pues simple, creamos un archivo llamado .classpath (así, a secas, sin nada más, no inventen, sigan la senda) en la carpeta raíz del proyecto y dentro de ella ponemos lo siguiente (por problemas con wordpress, no podemos mostrar directamente aquí el contenido XML que se requiere, por ende, los enviamos a un link permanente en el paste Desdelinux)
En donde lo que mas importa es la ultima línea, que dice donde diablos está el archivo .jar que necesitamos … básicamente lo que hace el menú contextual del mal en Eclipse es generar este archivo.
Hecho esto, señores, tenemos toda la configuración lista, es hora de codear de verdad ;)
Compilando
Bueno, ahora nos toca compilar el proyecto para probarlo. Sin embargo, hay un pequeño detalle: Sublime Text (por detalles de diseño del plugin, entre otras cosas) no es capaz de compilar directamente el proyecto con Apache Ant. Así que, vamos a compilar el proyecto a mano desde la terminal (no representa gran problema).
Para hacer una compilación de prueba, abrimos una terminal y navegamos hasta la carpeta de nuestro proyecto. Por ejemplo:
cd ~/.workspace/HelloWorld/
Luego, ejecutamos el comando:
ant debug
Y empezará a incluir nuestras librerías de Cordova, archivos y luego los compilará y generará un lindo archivo .apk que podremos probar. Luego lo firmará con una clave aleatoria (o clave de depuración).
Esto está bien si queremos hacer pruebas, pero… ¿Qué pasa si luego queremos compilar la aplicación para distribuirla al público? Por cuestiones de seguridad y comodidad, no podemos dejar una clave de depuración, sino que debemos firmar el .apk con nuestra propia clave.
Creando nuestra llave
En los IDEs grandes y engorrosos (igual que Nano, yo también los considero así, a veces), esta clave se crea mediante menús siguiendo los pasos indicados. Pero nosotros no usamos nada de eso, ¿verdad? Así que vamos a ver cómo hacerlo.
Abrimos una terminal, y ejecutamos el siguiente comando:
keytool -genkeypair -v -keystore nombre.keystore -alias nombre-de-preferencia -keyalg RSA -keysize 2048 -validity 10000
Les explico que hace el comando. La opción -genkeypair nos genera nuestro par de llaves (pública y privada), el parámetro -v es “verbose” que nos dice todo lo que pasa. Lo siguiente es -keystore, para elegir el nombre del archivo de nuestra llave, puede ser el que quieran (y puede cambiarse luego, claro). La opción -alias es como un “nombre de usuario” (por llamarlo de alguna forma) que usaremos para identificarnos al firmar nuestras aplicaciones.
El -keyalg es el cifrado a usar (puede ser DSA o RSA). El -keysize es el tamaño de bits del cifrado. Y por último, -validity es el tiempo que pasará antes de que “expire” la clave (antes de no poder usarse más).
Hay que aclarar unos detalles. Al ejecutar el comando, pedirá que escriban una contraseña. Puede ser cualquiera, sólo no la olviden. El alias, si tiene más de 8 caracteres, se recortará a los 8 primeros.
Y en la última parte, asegúrense de colocar una fecha de espiración adecuada (suficiente para el tiempo que vayan a distribuir la app), o sino tendrán que crear una llave nueva y generará inconvenientes al actualizar la aplicación.
Ya habiendo generado nuestro archivo .keystore, editaremos el archivo ant.properties y añadiremos estas dos líneas:
key.store=ruta/a/mi.keystore
key.alias=alias-del-keystore
Guardamos, abrimos la carpeta raíz del proyecto en una terminal, y ejecutamos:
ant release
Nos pedirá nuestro alias y contraseña (para confirmar), luego compilará y firmará nuestro archivo .apk.
Ya listos en esta parte, sólo nos quedaría lo más fácil: probar nuestra aplicación.
Probando
Bien, el último paso de esta guía es probar nuestra aplicación (que tanto esfuerzo nos ha llevado, ¿no?). Podemos probarla con un dispositivo real (teléfono, tablet, etc), o con un emulador (útil para probar más tamaños de pantalla).
Probando en nuestro dispositivo
Este es el modo más simple que hay. Estos son los pasos a seguir:
- Habilitamos la depuración USB en nuestro dispositivo. En Android 2.3 se hace en Ajustes > Aplicaciones > Desarrollo. De 4.0 en adelante, lo hacemos en Ajustes > Opciones de desarrollo. Desde 4.2 en adelante este menú está oculto y se muestra haciendo 7 toques seguidos en Ajustes > Acerca del teléfono > Número de compilación.
- Conectamos el dispositivo por USB. Nos mostrará un aviso de que la depuración USB está activa. Abrimos una terminal y escribimos lo siguiente para asegurarnos de que es detectado:
adb devices - En esa terminal, nos movemos al directorio raíz de nuestro proyecto, y ejecutamos:
adb install bin/nombre_de_la_app-release.apk - Con eso la app será instalada. La buscamos en nuestro dispositivo, y la probamos :)
Probando en un emulador
Técnicamente podría ser cualquiera (Bluestacks, etc), pero el Android SDK incluye AVD (Android Virtual Device), para crear pequeñas máquinas virtuales con el tamaño de pantalla, recursos y versión de Android que queramos (y que hayamos descargado al configurar el SDK). Es posible que se deba instalar (en la versión correspondiente) una “System Image”, para que el emulador funcione con esa versión.
Para configurar un emulador hacemos lo siguiente:
- Lanzamos el Android SDK Manager (con el comando android, por ejemplo), y vamos a Tools > Manage AVDs.
- Hacemos clic en “New”. Colocamos un nombre, elegimos un dispositivo, versión de Android, cantidad de RAM disponible, VM Heap (tamaño de máquina virtual para las apps, unos 32/48MB son suficientes), usar la GPU de nuestra máquina, etc.
- Con la máquina virtual creada, la iniciamos, y esperamos a que termine de arrancar. Activamos la depuración USB en su respectivo menú. Abrimos una terminal, y nos aseguramos de que el sistema detecte la máquina ejecutando: adb devices
- En una terminal, navegamos al directorio raíz de nuestro proyecto, y ejecutamos:
adb install bin/nombre_de_la_app-release.apk - Buscamos la aplicación instalada en la máquina virtual, y, finalmente, la probamos :)
Con esto ya estamos listos para desarrollar con PhoneGap para Android, y sin usar esa bestia llamada Eclipse ^^.
Conclusiones
pueden preguntarse por qué hacer tantas cosas para simplemente desarrollar con Sublime Text cuando ya se tienen IDE’s listos para esto como Eclipse, etc, que lo hacen casi todo por ti.
Bueno en mi opinión esto es pura basura, yo no necesito un IDE escrito en Java, que no está adaptado para escribir en HTML5 y que pesa una tonelada, yo quiero poder usar las herramientas correctas para el trabajo correcto, yo no programo en Java ni me interesa usar ese lenguaje, mi mundo es Javascript últimamente, HTML, CSS, sus preprocesadores y muchas otras cosas que Eclipse, Netbeans y demás IDE’s no manejan bien; no es que no las manejen, sí hay plugins para eso, pero no lo hacen bien, no como a mi me gusta.
Otra cuestión importante es que para mi las interfaces super-cargadas de esos programas son abrumadoras, son demasiadas cosas, extrema cantidad de paneles y cosas que normalmente no uso, los logs se me desparraman en distintas instancias de terminal abiertas por todo el programa y bueno, a mi personalmente me encanta un editor de texto y una terminal, eso es lo mio, por eso traté de hacer todo esto, que sigue siendo poco.
como ven, el resultado no está mal. Quizás sea mucho esfuerzo sólo por no usar un IDE, pero a cambio podemos trabajar en máquinas más limitadas o con una herramienta a la que estamos más acostumbrados.
Si es verdad que hay desventajas, como la (posible) automatización de pasos que nos dan los IDEs y no tenemos haciendo esto, o el hecho de que tengamos que compilar proyectos a mano (que de todas formas no es complicado, y algunos lo hacemos a diario… ¿no?), o el no tener editores WYSIWYG al diseñar la interfaz de una app Android o PhoneGap.
Aún así, me parece un pequeño costo que pagar. Además, el hacer todo esto a mano forma parte de un aprendizaje, tanto para nosotros como para ustedes, y estoy seguro de que muchas personas estarán interesadas en una guía como esta ;)
Esto es todo amigos, si tienen alguna duda, problema o sugerencia para la guía, escribanla acá abajo en los comentarios … si la duda ya es mas compleja, o mejor, si es una duda con logs, por favor, por favor! usen la sección “desarrollo” del Foro Desdelinux, resolver esto en comentarios no es simple y tampoco es el medio adecuado.
Fuente: desdelinux
