Programar Android en Linux, con Eclipse y PhoneGap, 4 de 5

NUESTRO SITIO necesita la publicidad para costear hosting y el dominio. Por favor considera deshabilitar tu AdBlock en nuestro sitio. También puedes hacernos una donación entrando en linuxparty.es, en la columna de la derecha.

Programar Android en Linux, con Eclipse y PhoneGap, 4 de 5

Publicado: 30 Septiembre 2013 | Escrito por Javier Orovengua | Correo electrónico | Visto: 4002

Para construir mi aplicación Android (que yo llamo TweetMe) de sus fuentes de HTML, CSS y JavaScript, puedo crear una carpeta llamada TweetMe en mi directorio home, y en esa carpeta TweetMe pongo otra carpeta llamada TweetMe cual contiene los fuentes (HTML, CSS, JavaScript):

Ir a ~/tweetme/tweetme/:

cd ~/tweetme/tweetme/

Usted debe ver las fuentes de JavaScript, HTML, CSS, en ese directorio:

ls -l

falko@falko-virtual-machine:~/tweetme/tweetme$ ls -l
total 96
-rw-r--r-- 1 falko falko  4233 2011-01-24 00:20 index.html
drwxr-xr-x 2 falko falko  4096 2011-06-21 14:23 jqtouch
-rw-r--r-- 1 falko falko 78601 2011-01-23 23:15 jquery.js
drwxr-xr-x 4 falko falko  4096 2011-06-21 14:23 themes
falko@falko-virtual-machine:~/tweetme/tweetme$

Ahora podemos crear una aplicación desde la línea de comandos o mediante el uso de Eclipse:

7.1 Creación de una aplicación Android desde la línea de comandos

En el directorio ~/tweetme/tweetme/, ejecute:

droidgap create

(Si recibe el mensaje de error droidgap: comando no encontrado, por favor, ejecute

export PATH="$HOME/android-sdk-linux_x86/tools:$HOME/android-sdk-linux_x86/platform-tools:$HOME/phonegap-phonegap-android/bin:$PATH"

y vuelva a intentarlo. )

Esto creará el directorio ~/tweetme/tweetme_android el cual contiene todo lo que necesitamos para construir nuestra aplicación definitiva de la misma. El directorio ~/tweetme/tweetme_android/assets/www/ contiene el HTML, CSS, fuentes de JavaScript más el phonegap.<version>.js

cd ../tweetme_android/

ls -l

falko@falko-virtual-machine:~/tweetme/tweetme_android$ ls -l
total 44
-rw-r--r-- 1 falko falko 2241 2011-06-21 14:25 AndroidManifest.xml
drwxr-xr-x 3 falko falko 4096 2011-06-21 14:25 assets
drwxr-xr-x 2 falko falko 4096 2011-06-21 14:25 bin
-rw-r--r-- 1 falko falko  696 2011-06-21 14:25 build.properties
-rw-r--r-- 1 falko falko 2891 2011-06-21 14:25 build.xml
-rw-r--r-- 1 falko falko  363 2011-06-21 14:25 default.properties
drwxr-xr-x 2 falko falko 4096 2011-06-21 14:25 libs
-rw-r--r-- 1 falko falko  425 2011-06-21 14:25 local.properties
-rw-r--r-- 1 falko falko 1159 2011-06-21 14:25 proguard.cfg
drwxr-xr-x 7 falko falko 4096 2011-06-21 14:25 res
drwxr-xr-x 3 falko falko 4096 2011-06-21 14:25 src
falko@falko-virtual-machine:~/tweetme/tweetme_android$

ls -l assets/www/

falko@falko-virtual-machine:~/tweetme/tweetme_android$ ls -l assets/www/
total 228
-rw-r--r-- 1 falko falko   4233 2011-06-21 14:25 index.html
drwxr-xr-x 2 falko falko   4096 2011-06-21 14:25 jqtouch
-rw-r--r-- 1 falko falko  78601 2011-06-21 14:25 jquery.js
-rw-r--r-- 1 falko falko 132955 2011-06-21 14:25 phonegap.0.9.5.js
drwxr-xr-x 4 falko falko   4096 2011-06-21 14:25 themes
falko@falko-virtual-machine:~/tweetme/tweetme_android$

Ahora tenemos que editar el archivo index.html en el directorio assets/www/ agregue el phonegap.<versión>. Js a la sección <head> </head> (antes que el resto de los archivos JavaScript / código JavaScript).

gedit assets/www/index.html

Supongamos que el archivo se inicia de la siguiente manera:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Tweetme</title>

    <!-- include JQuery through Google API => Always have the latest version -->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript"> google.load("jquery", "1.3.2"); </script>

    <!-- import JQTouch -->
    <script src="/jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>

    <!-- Import JQTouch default style (iPhone look).
       Replace the string "themes/apple" with "themes/jq" for a non-iPhone theme -->
    <link type="text/css" rel="stylesheet" media="screen" href="/jqtouch/jqtouch.css">
    <link type="text/css" rel="stylesheet" media="screen" href="/themes/apple/theme.css">
[...]

Agregue la línea <script type="text/javascript" charset="utf-8" src="/phonegap.0.9.5.js"> </ script> antes del resto JavaScript para que quede de la siguiente manera (si han sustituido phonegap.0.9.5.js con phonegap.0.9.4.js, utilice la línea <script type="text/javascript" charset="utf-8" src="/phonegap.0.9.4.js"> </ script> en su lugar):

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Tweetme</title>
    <script type="text/javascript" charset="utf-8" src="/phonegap.0.9.5.js"></script>
    <!-- include JQuery through Google API => Always have the latest version -->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript"> google.load("jquery", "1.3.2"); </script>

    <!-- import JQTouch -->
    <script src="/jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>

    <!-- Import JQTouch default style (iPhone look).
       Replace the string "themes/apple" with "themes/jq" for a non-iPhone theme -->
    <link type="text/css" rel="stylesheet" media="screen" href="/jqtouch/jqtouch.css">
    <link type="text/css" rel="stylesheet" media="screen" href="/themes/apple/theme.css">
[...]Ahora, todavía en el directorio ~ / TweetMe / tweetme_android, por fin podemos construir nuestra aplicación:

ant debug

Debe recibir CONSTRUIDO CON ÉXITO al final:

[...]
-package-debug-sign:
[apkbuilder] Creating tweetme-debug-unaligned.apk and signing it with a debug key...

debug:
[echo] Running zip align on final apk...
[echo] Debug Package: /home/falko/tweetme/tweetme_android/bin/tweetme-debug.apk

BUILD SUCCESSFUL
Total time: 38 seconds

Ahora puede encontrar su aplicación en el directorio bin/ (llamado TweetMe-debug.apk; apk es la extensión para aplicaciones de Android):

cd bin/
ls -l

falko@falko-virtual-machine:~/tweetme/tweetme_android/bin$ ls -l
total 808
drwxr-xr-x 3 falko falko 4096 2011-06-21 14:32 classes
-rw-r--r-- 1 falko falko 155652 2011-06-21 14:32 classes.dex
-rw-r--r-- 1 falko falko 171877 2011-06-21 14:32 tweetme.ap_
-rw-r--r-- 1 falko falko 244900 2011-06-21 14:32 tweetme-debug.apk
-rw-r--r-- 1 falko falko 244846 2011-06-21 14:32 tweetme-debug-unaligned.apk
falko@falko-virtual-machine:~/tweetme/tweetme_android/bin$

Para instalarlo en el primer emulador en funcionamiento, podemos ejecutar

adb -e install -r tweetme-debug.apk

falko@falko-virtual-machine:~/tweetme/tweetme_android/bin$ adb -e install -r tweetme-debug.apk
411 KB/s (244900 bytes in 0.581s)
pkg: /data/local/tmp/tweetme-debug.apk
Success
falko@falko-virtual-machine:~/tweetme/tweetme_android/bin$

(En lugar de ejecutar ant debug y luego adb-e install-r TweetMe-debug.apk desde el directorio bin / de instalar la aplicación, que podría haber corrido

ant debug install

que habría construido y posteriormente instalado la aplicación de una sola vez.)

Ahora vaya a su emulador, y usted debe encontrar la nueva aplicación que figuran entre las otras aplicaciones: