Tutorial app con phonegap

Phonegap es la tecnología que nos permite crear apps para dispositivos móviles multi plataforma usando HTM5 CSS y JS sin pasar por objetive c

Para este ejemplo usaremos jquery mobile, que es una tecnología para crear aplicaciones web móviles simples.

Al utilizar esta tecnología como alternativa para crear apps debemos cambiar la forma de estructurar nuestra web app  ya no se tiene que pensar en sitios multi pagina en las que por cada sección de nuestro sitio existe una página por separado, si no que ahora todo estará dentro de una misma. En jquery mobile a cada sección de nuestra página que actuara como vista(activity) dentro de la app se le asigna un “ROL” por ejemplo para declarar una vista(activity)  se coloca “data-role= page” y dentro de cada página se asignan 3 roles más, que pueden no ser asignados pero que comúnmente se usan y son: un encabezado un contenido y un pie.

Dicho lo anterior nos poneos manos a la obra:

En primer lugar debemos tener instalado eclipse y el sdk de android como lo explique en mi anterior articulo.

Segundo, crearemos nuestro html que actuara como app y que debe contener la siguiente estructura:

 HTML | 
 
 copy code |
?

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5.     <!-- declaramos la escala del contenido de nuestra app  y esto ayuda a adapterse al dispositivo que corra la app-->
  6.     <meta name="viewport" content="width=device-width, initial-sacle=1">
  7.     <!-- importamos jquery y la hoja de estilos -->
  8.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  9.     <script src="http://code.jquery.com/jquery-1.6.4.min.js" ></script>
  10.     <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" ></script>
  11.   <title>Mi app</title>
  12.     
  13. </head>
  14. <body>
  15. <div data-role="page">
  16.      <!-- En el header de la app comunmente vienen los botones de "atras"-->
  17.             <div data-role="header">
  18.          <h1 id="_title">App1</h1>
  19.         </div>
  20.         <!-- Cuerpo de la app -->
  21.         <div data-role="content">
  22.             <p id="_desc">HOLA MUNDO</p>
  23.         </div>
  24.         <!-- En la parte del footer es donde van los botones de las apps -->
  25.         <div data-role="footer">
  26.          <h4>pie de la APP</h4>
  27.         </div>
  28.     </div>
  29. </body>
  30. </html>

Lo guardamos como index.html

Abrimos eclipse y seguimos estos pasos:

Creamos un proyecto nuevo de android en File > project > Android > Android Aplication Project

a)      Le colocamos nombre.

pantalla1

b)      En la siguiente ventana dejamos los parámetros por defecto

pantalla2

c)      Asignamos un icono a nuestra app

pantalla3

d)      Seleccionamos “Blank activity”

pantalla4

e)      Le damos el nombre al activity que para este ejemplo le dejaremos la que viene por defecto

pantalla5

f)       Finish

Nota: debe de mostrarse del lado izquierdo el “Package Explorer” si no es asi vamos a :

 pantalla6

Ya creado el proyecto, creamos una carpeta “www” dentro de assets

Creamos una carpeta “libs” en la raiz del proyecto

Vamos a http://phonegap.com/install/ y descargamos el phonegap, para este ejemplo use phonegap-2.9.0

Después de descomprimir el zip phonegap que descargamos del sitio abrimos la subcarpeta lib > android y arrastramos él “.jar” y el “.js” a la carpeta libs, el js nos ayuda cuando nuestras apps trabajan con los recursos de los dispositivos como la cámara y demás, en este ejemplo no se ocupa pero por costumbre lo hacemos ya que no está de más.

También arrastramos la carpeta “xml” a la carpeta “res” de nuestro proyecto

Copiamos nuestro HTML a la carpeta www que creamos, ya solo quedan un par de cambios

pantalla8

vamos a la carpeta “src” > “nombre_de_nuestra_app” > “MainActivity.java” y modificamos para que quede de esta manera:

 Java | 
 
 copy code |
?

  1. package com.nalonsor.demoapp;
  2. //importamos cordova
  3. import org.apache.cordova.*;
  4. import android.os.Bundle;
  5. //ahora deriva de Droidgap
  6. public class MainActivity extends DroidGap {
  7.        @Override
  8.        public void onCreate(Bundle savedInstanceState) {
  9.              super.onCreate(savedInstanceState);
  10.              //llmamamos a nuestro html
  11.              super.loadUrl("file:///android_asset/www/index.html");
  12.        }
  13. }

Ahora nos dirigimos al AndroidManifest.xml lo abrimos con doble clic, vamos a la pestaña “AndroidManifest.xml” localizamos lo siguiente:

 XML | 
 
 copy code |
?

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  3.     package="com.example.lectorfeednalonsor"
  4.     android:versionCode="1"
  5.     android:versionName="1.0" >

y despues de esas lineas pegamos lo siguiente:

 XML | 
 
 copy code |
?

  1. <supports-screens
  2.    android:largeScreens="true"
  3.    android:normalScreens="true"
  4.    android:smallScreens="true"
  5.    android:resizeable="true"
  6.    android:anyDensity="true" />
  7. <uses-permission android:name="android.permission.CAMERA" />
  8. <uses-permission android:name="android.permission.VIBRATE" />
  9. <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  10. <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  11. <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
  12. <uses-permission android:name="android.permission.READ_PHONE_STATE" />
  13. <uses-permission android:name="android.permission.INTERNET" />
  14. <uses-permission android:name="android.permission.RECEIVE_SMS" />
  15. <uses-permission android:name="android.permission.RECORD_AUDIO" />
  16. <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
  17. <uses-permission android:name="android.permission.READ_CONTACTS" />
  18. <uses-permission android:name="android.permission.WRITE_CONTACTS" />
  19. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  20. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  21. <uses-permission android:name="android.permission.GET_ACCOUNTS" />
  22. <uses-permission android:name="android.permission.BROADCAST_STICKY" />

Tu aplicación esta lista para ser probada:

pantalla7

Esta es la base para realizar app con eclipse y phonegap ya solo resta que pongas en práctica tus conocimientos es css, html5 y jquery para mejorarla y con la ayuda de la documentación de phonegap seguro logras apps muy potentes.

Tutorial express – instalación de eclipse + Android SDK

1- vamos a google y buscamos el jdk java

2- seleccionamos el que va con nuestro SO

3- Instalamos

4- descargar eclipse desde eclipse.org/downloads

5- descomprimir en el lugar que se va a instalar

6- entramos a la carpeta de eclipse y ejecutamos eclipse.exe

7- te pedira una ruta para guardar el espacio de trabajo, escoje la que mas te convenga

7.1- Recomendación: Crea un acceso directo en tu escritorio para después poder acceder fácilmente a eclipse

7.2- Una vez abierto eclipse vamos a “help > check for updates” para actualizar.

7.3- despues de actualizar volvemoas a “help > download new software”

7.4- pegamos esta direccion en “work with”: https://dl-ssl.google.com/android/eclipse y apareceran:

7.5- Seleccionamos “Developer tools” y “NDK plugins” y damos clic en “next”

7.6- en la siguiente pantalla seleccionamos todos e instalamos

7.7- al terminar reiniciar eclipse

7.8- cuando reinicie eclipse te pedira que indiques la ruta de android SDK y en este paso dejaremos por un momento eclipse

sin cerrar eclipse procedemos con los siguiente:

8- descargar sdk de android desde developer.android.com/sdk/index.html y buscar el apartado “DOWNLOAD FOR OTHER PLATFORMS”

8.1- vamos a la parte donde dice “SDK Tools Only” y descargamos “Windows32 & 64-bit”

8.2- teminada la descarga descomprimimos y colocamos al carpeta en “C:\Program Files”

8.3- Recomendacion: Renombramos la carpeta solo a “android”

9- Regresamos a eclipse y en la ventana que nos abrio le damos en “open preferences”

9.1- clic en procced de la ventana que dice “Thanks for using the android SDK” si no te sale no te preocupes

10- En la ventana preferences y en campo SDK Location ponemos: “C:\Program Files\android” o la ubicacion donce hallas dejado el SDK y en seguida clic en “apply”

11- le damos “ok” en la ventana que dice “Error when loading the SDK”

12- clic en “open SDK manager” en al ventan aque dice “SDK platform tools component is missing!”

13- y abrira el SDK manager de android

14- y en este seleccionamos “tools” y minimo la version 2.1 de android para asegurar la compatiblilidad de las apps con las demas versiones

enjoy!