LinuxParty

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.
Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado
 

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):

HOME
    |
    |
    + tweetme
             |
             |
             +tweetme
                     |
                     |
                     SOURCES (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:

Esto es lo que la aplicación se ve así:

[ < Anterior ]  [ Siguiente > ]

Pin It

Escribir un comentario


Código de seguridad
Refescar



Redes:



 

Suscribete / Newsletter

Suscribete a nuestras Newsletter y periódicamente recibirás un resumen de las noticias publicadas.

Donar a LinuxParty

Probablemente te niegues, pero.. ¿Podrías ayudarnos con una donación?


Tutorial de Linux

Filtro por Categorías