miércoles, 9 de noviembre de 2011

HTML5: Crear aplicaciones nativas para Android

La ventaja de hacer una aplicación móvil con HTML5 es que la puedes hacer funcionar igual de bien en cualquiera de los SO para móviles que hay actualmente sin necesidad de cambios.

Yo he estado haciendo una pequeña prueba de concepto a ver como funciona y la verdad es que me ha gustado mucho. De momento he probado con Android, con Windows Phone espero poder probarlo estas navidades y con IPhone y BlackBerry me tengo que fiar de todo lo que he leído y doy por echo que también funciona.

Para estas prueba he usado:

  • Eclipse con el Android SDK para crear la app que contiene la página HTML5.
  • JQuery Mobile. para el estilo y las transiciones entre páginas.

Bien, pues vamos con el código, es muy sencillo pero creo que perfecto para poder hacernos una idea de como funciona esto.

Lo primero que he hecho ha sido crear una aplicación Android 2.2 (no explico todos los pasos de como la he creado por que no es el objetivo del artículo, si alguien quiere o necesita que explique como se crea un proyecto en Android, que lo diga en los comentarios y ya hare algo) y lo que hago es crear un objeto del tipo WebView que contendrá la pagina web.

   1: public class PruebaActivity extends Activity {
   2:     /** Called when the activity is first created. */
   3:     @Override
   4:     public void onCreate(Bundle savedInstanceState) {
   5:         super.onCreate(savedInstanceState);
   6:         setContentView(R.layout.main);
   7:         
   8:         WebView webView = (WebView)findViewById(R.id.webView);
   9:         webView.getSettings().setJavaScriptEnabled(true);
  10:         //webView.getSettings().setGeolocationEnabled(true);
  11:         webView.setWebChromeClient(new WebChromeClient());
  12:         webView.loadUrl("file:///android_asset/www/index.html");   
  13:  
  14:          
  15:      }
  16: }

Después solo hay que crear la página html que contendrá la aplicación:



   1: <!DOCTYPE html> 
   2: <html>
   3: <head>
   4: <!--<meta charset="utf-8">-->
   5: <meta name="viewport" content="width=device-width, initial-scale=1">
   6: <title>Web App</title>
   7:  
   8: <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
   9: <script type="text/javascript" src="jquery-1.5.min.js"></script>
   1:  
   2: <script type="text/javascript" src="jquery.mobile-1.0rc2.min.js">
</script>
  10:  
  11: </head> 
  12: <body> 
  13:  
  14: <div data-role="page" id="page">
  15:     <div data-role="header">
  16:         <h1>Página 1</h1>
  17:     </div>
  18:     <div data-role="content">    
  19:         <ul data-role="listview">
  20:             <li><a href="#page2">Página 2</a></li>
  21:             <li><a href="#page3">Página 3</a></li>
  22:         </ul>        
  23:     </div>
  24:     <div data-role="footer">
  25:         <h4></h4>
  26:     </div>
  27: </div>
  28:  
  29: <div data-role="page" id="page2" data-title="Page 2" data-add-back-btn="true">
  30:     <div data-role="header">
  31:         <h1>Página</h1>
  32:     </div>
  33:     <div data-role="content">    
  34:         Contenido de la página        
  35:     </div>
  36:     <div data-role="footer">
  37:         <h4></h4>
  38:     </div>
  39: </div>
  40:  
  41: <div data-role="page" id="page3" data-title="Page 3" data-add-back-btn="true">
  42:     <div data-role="header" >
  43:         <h1>Otra página</h1>
  44:     </div>
  45:     <div data-role="content">    
  46:         mas contenido!        
  47:     </div>
  48:     <div data-role="footer">
  49:         <h4></h4>
  50:     </div>
  51: </div>
  52:  
  53: </body>
  54: </html>

Creo que poco se puede comentar este código ya que es muy simple.


Usando  jQuery Mobile es muy sencillo crear webs móviles con un aspecto muy similar al que tendriamos con Android o IPhone, además tiene eventos para controlar el scroll, el touch, etc.


Un ejemplo del aspecto que se puede conseguir usando los estilos de jQuery Mobile:


image


Y para finalizar, arranco todo esto a ver como queda:


image image


Y esta ha sido mi primera entrada, no seais muy duros, espero ir mejorando poco a poco. Nos leemos!

35 comentarios:

  1. Muy interesante y parece bastante sencillo, me voy a animar a probar, respecto a la parte del SDK tendré que desempolvar apuntes... Gracias!!

    ResponderEliminar
  2. La verdad es que si que es muy sencillo. Yo estoy deseando tener un Windows Phone para probarlo en otros dispositivos.
    Un saludo!!

    ResponderEliminar
  3. Hola, seria muy interesant y de mucha ayuda que esplicaras brevemente los pasos a seguir para crear una aplicacion como esta ya que es lo que yo busco y asta ahora este post ha sido el mejor esplicado que he encontrado.
    Muchas gracias por tus aportes, y gracias por la ayuda

    ResponderEliminar
  4. Hola Armazon, gracias por tus comentarios. ¿a que te refieres con explicar los pasos? En el post ya lo explico.
    De todos modos, pronto hare mas posts sobre HTML5 y aplicaciones moviles.

    ResponderEliminar
  5. Muy buena entrada, te felicito! Justo estaba buscando información sobre esto, porque quiero ver si es mejor desarrollar una app con el sdk de android o bien utilizar html5. Sólo una pregunta, el tema de poner el navegador no hay problema, pero la web html5 donde se aloja?, en internet? en local?. Es decir, tendríamos una aplicación android que solo tiene un navegador, y accede a internet para visualizar el contenido online, pero offline no podriamos tener la aplicación. Me equivoco?. Un saludo!

    ResponderEliminar
    Respuestas
    1. Pues es obvio idiota, si está offline tendrá los datos almacenados localmente, pero si no los puede almacenar en un host gratuito o de paga. El navegador puede interpretar la aplicación offline y online. Pareces novato chaval.

      Eliminar
    2. Carlos Martinez Aquí todos somos novatos por lo que veo, Sergio Sanz ha hecho una pregunta coherente e inteligente, no merece esos insultos.

      Eliminar
  6. Gracias por tu comentario.
    En el caso de que hagas una APP pero usando páginas html5 como comento en el artículo, no tienes que alojar las páginas en ningún sitio. Cuando compilas la app con eclipse, se genera un fichero .apk que es el que se desplega sobre el móvil. Este fichero contiene todos los fichero necesarios para el funcionamiento de la app (vamos, cómo si fuese un .zip). Espero haberte ayudado.

    ResponderEliminar
  7. Ya tengo mi web en Html5 con jquery mobile, pero no se como debo compilar mi proyecto con eclipse para que cree la .apk ¿Podrias escribir algo sobre como hacerlo? gracias de antemano

    ResponderEliminar
  8. Hola Sergio, es que es justo como comento en este post. Con el eclipse creas un nuevo proyecto de Android, y lo pones tal y como comento. Especifica un poco mas cual es tu problema. ¿No sabes crear un proyecto Android?¿No sabes compilar? Comentame exactamente que es y a ver si puedo hacer algún post concreto.
    Un saludo.

    ResponderEliminar
    Respuestas
    1. hola, como son pocos codigos a lo mejor puedes hacer un video tutorial sobre como crear el proyecto y compilar osea todo desde 0 porque programo en php y html pero no se nada de programacion movil! porfa escribeme al correo con la respuesta: ibbotson2092@gmail.com desde ya te agradezco

      Eliminar
  9. Hola Dani, si podes crear un post sobre los pasos para crear y compilar un proyecto android con Eclipse te lo agradeceria...

    ResponderEliminar
  10. Buenas.

    A mi me da problema al compilar el proyecto en las siguientes líneas de tu post.

    setContentView(R.layout.main); //el error está en main que no lo reconoce

    WebView webView = (WebView)findViewById(R.id.webView); // error en que webView ya que me dice que no puede ser de tipo id

    A ver si me podéis ayudar.
    Un saludo. Gracias

    ResponderEliminar
    Respuestas
    1. El código es ya algo antiguo y han salido nuevas versiones del API, es posible que hayan cambiado cosas, no te lo puedo asegurar por que hace tiempo que no me miro el tema...

      Eliminar
  11. Holaaa esta genial!!, me voy a permitir hacer un aporte, por que a mi tambien se me complicaron algunas cosas al ver tu explicacion, espero no te enfade :)

    El error que le marca a Miguel Angel en esta linea:
    WebView webView = (WebView)findViewById(R.id.webView);
    es por el "R.id.webView" para solucionarlo en el main.xml debes agregar el control WebView.

    Para ver la pagina html no sabia muy bien donde ponerla lo hice asi:
    Dentro de la carpeta assets que genera el proyecto colocar otra con el nombre www y ahi dentro colocar el index.html

    listo con esto corre super bien :) Mil gracias!!




    ResponderEliminar
  12. hola..muy buenas...primero..muy buena pagina..si señor.
    Mira mi problema es el siguiente..yo ya ice un app en dreamweaver cs6 con phonegap..lo e compilado en .apk..e incluso esta subido en "aptoide"...cual es el problema....que quiero subirlo al "market"..y me dice que el manisfest esta corrupto...(y ...pum..no tengo ni idea) e leido y me han aconsejado eclipse, pero de java..no tengo conococimientos..como creo una app en html5 con eclipse¿?¿?

    mi mail es mahoni20@msn.com

    agradeceria mucho la ayuda..saludos y mil gracias.

    ResponderEliminar
  13. Hola, Eclipse es simplemente un entorno de trabajo para programar en Java, como lo es Dreamweaver para programar HTML. El manifest es un fichero XML, puedes editarlo con lo que mas a gusto te encuentres, yo uso Visual Studio, pero puedes usar hasta Notepad si quieres. Dreamweaver debería tratarlo sin problemas. En el Manifest tienes cosas que necesita la APP para funcionar, como por ejemplo los permisos. Puede que tengas alguna de las etiquetas XML mal cerrada, o alguna propiedad duplicada, quien sabe. Revisalo con cariño:
    http://developer.android.com/guide/topics/manifest/manifest-intro.html

    Espero que te sirva!

    ResponderEliminar
  14. Amigo excelente post, aunque aun no he probado con el eclipse me he entretenido un buen rato con el jquerymobile, ahora mirando por ahí vi que el tiene hasta botones que trabajan con ajax y dan un ejemplo de como se hace el action a un form de php, mi pregunta es la siguiente: obviamente cuando eso se ejecuta en un navegador en este caso de movil quien resuelve el código php es el servidor, en ese caso como se haria para que "si la pagina se monta como local en el movil" para que ejecute el codigo php, en pocas palabras lo que quiero hacer es conectar una aplicación con alguna base de datos alojada en un servidor de internet. Alguna idea?

    ResponderEliminar
    Respuestas
    1. Pues la verdad es que nunca lo he probado... para según que cosas prefiero hacerlo nativo. Prueba a mirarte PhoneGap, a ver si cumple con tus expectativas: http://phonegap.com/
      Un saludo!

      Eliminar
    2. hey dani podrias poner a disposicion algun documento q nos ayuda a introducrinos mas en html5, y ¿donde debo poner el archivo html para q lo reconosca?

      Eliminar
  15. Hola me preguntaba como poder crear un menú con el WebView y que que a cada botón del menú al presionarlo se iniciara una actividad, como podría obtener el resultado de ese botón y así poder llamar mi activity

    ResponderEliminar
  16. Hola el codigo me funciona correctamente pero, no se me muestra la pagina que cree en html5.......

    ResponderEliminar
  17. Whow, se ve muy bueno lo probaremos

    ResponderEliminar
  18. hola... y puedo usar netbeans para desarrollar? podrias poner algunos documentos que me ayuden a introducirme y a profundizar en este tema porfavor... y gracias!!!!

    ResponderEliminar
  19. Esta forma de hacer aplicaciones para android es muy buena e innovadora, creo que en base a este html5 se pueden lograr muchas aplicaciones no solo para android sino también para iPhone y BlackBerry entre otros.

    ResponderEliminar
  20. Yo también usé jQuery Mobile para la versión móvil de un sitio web. La experiencia fue bastante buena. Actualmente le echaría un vistazo a plataformas como Appcelerator, Icenium o Phonegap para usar HTML5, Javascript y CSS como base de una app nativa. Son bastante potentes y aunque no están pulidas al 100% nos permiten empaquetar un desarrollo con estos estándares como una aplicación nativa e incluso nos facilitan su publicación.

    ResponderEliminar
  21. ¿No podrías explicar un poco lo de el código? ¿Simplemente creamos un fichero xml en el que ponemos tu codigo? ¿No tiene que tener un nombre concreto para que el MainActivity lo lea?
    ¿Esto se hace con el eclipse, no? En el eclipse, ¿qué habría que elegir para hacer la app en HTML5? Porque cuando hago un proyecto android todo es java... No sé si hay que crear un proyecto en concreto o algo. Gracias por tu ayuda.

    ResponderEliminar
  22. Me sale todo subrayado en rojo, es decir, que tiene errores y sale: Attribute is missing the Android namespace prefix. ¿Por qué puede ser?

    ResponderEliminar
  23. yo estoy trabajando en un programa para cálculos me podrían ayudar?

    ResponderEliminar
  24. una consulta es funcional en android studio tambien

    ResponderEliminar
  25. Hola, muy bueno todo, solo una cosa... Yo tengo mi pag web ya hecha, pero no quiere funcionar en mi app... La puse asi como tu..."file:/// etc, etc.." pero habre :/

    ResponderEliminar
    Respuestas
    1. Hola, quisiera saber como usar un Toast mediante un webview... Es decir, al momento de entrar a mi pag mediante el webview y de clic en Xparte se lance un toast... Help me please!

      Eliminar
  26. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  27. Hola, quisiera saber como usar un Toast mediante un webview... Es decir, al momento de entrar a mi pag mediante el webview y de clic en Xparte se lance un toast... Help me please!

    ResponderEliminar