Cómo hacer tu aplicación con PhoneGap

0
533
crear aplicacion
crear aplicacion

Hace meses descubrí phonegap y desde entonces voy sorprendiéndome cada vez más de su alcance. Gracias a este framework y a sus librerías puedo acceder a las api’s y crear aplicaciones de cualquier dispositivo IOS ó Android con html y javascript . ¿Suena bien verdad?. Y todo sin saber programar java y swift.

Después de algún tiempo realizando pruebas puedo resumir el proceso bastante bien. Primero hay que realizar una estructura para la aplicación. Puedes usar la que te ofrece el propio phonegap descargandote su programa (disponible para windows y mac) en la pagina oficial ó usar un framework también muy potente llamado ionic.

Hay que recalcar que se basa en angularjs así que todo el código que encontraremos será javascript y html.

Una vez realizada la estructura puedes hacer hacer de todo. Desde lo más simple con un html y algo de css (esto es lo que enseñaré con este tutorial) hasta introducir componentes visualmente muy pulidos creando aplicaciones con un estilo profesional. Incluso haciendo llamadas a datos a un servidor web (esto lo dejaré para los siguientes tutoriales).

Aunque así explicado parece algo muy complicado no es para tanto. Vamos a ir poco a poco explicando que necesitas en cada proceso. Si tienes dudas siempre puedes comentar para que te la resuelva.

¿Que necesito para crear mi aplicación?

Para empezar a crear la aplicación vamos a necesitar varias herramientas:

  1. Un servidor web local o en tu propio hosting. Para los que no tengáis un servidor podéis utilizar xampp.
  2. Como ya he mencionado la estructura podéis generarla a través del programa phonegap (para iniciarse no esta nada mal) ó ionic que es una estructura similar. Yo eligiré ionic ya que trabajaremos con componentes de este framework en un futuro.

Primeros pasos en ionic.

Para ello tendrás que usar la plataforma que te ofrece este framework: contructor visual .

Como habrás podido comprobar tendrás que registrarte (durante todo el proceso vas a tener que hacerlo muchas veces por desgracia). Sigue estos pasos para crear una estructura limpia que nos pueda servir de guía para nuestras aplicaciones.

Paso 1: Crea un nuevo proyecto cliqueando “new proyect”.

paso uno
paso uno

Paso dos: Crea un proyecto con la plantilla side menu.

paso dos
paso dos

Paso tres: En el creador vamos a darle a exportar (si quieres puedes jugar un poco con los elementos aunque el creador lo veo un poco limitado para algunas cosas).

Creador ionic
Creador ionic

Paso cuatro: Exporta el proyecto en formato .zip (muy importante ya que será el que utilicemos para compilarla en adobe build y convertirla así en formato para android o ios (lo explicaré más adelante).

Descargar proyecto ionic
Descargar proyecto ionic

La estructura de la aplicación

Una vez descargado el zip lo siguiente será descomprimirlo en xampp para poder trabajar los cambios a través del propio navegador.

La estructura quedaría de la siguiente manera aunque más adelante realizaremos algunos cambios.

Cuando tengas el xampp preparado y coloques estos ficheros dentro del htdocs\dashboard abre un navegador chrome y ve directamente a la ruta para visualizar el aspecto de la aplicación. (Para adaptar el navegador como un móvil presiona F12 y cliquea en la imagen de los móviles).

Aplicación
Aplicación
mi primera aplicacion
mi primera aplicacion

Voy a dar un repaso rápido a la estructura sin profundizar demasiado ya que más adelante tendré que hacerlo.

La carpeta img la utilizaremos para meter las imágenes locales de la aplicación.
Dentro de la carpeta Js estarán los controladores de la aplicación. Parte fundamental para su funcionamiento.
lib es una carpeta donde se encuentra las librerías de ionic para utilizar sus componentes visuales.
templates es la carpeta donde se encuentran las páginas html y donde visualmente podremos añadir texto plano elementos javascript, css. En la siguiente imagen podrás comprobar como está estructurado las plantillas.

Lo que destacamos es que son html y por lo tanto tienes libertad de usar cualquier etiqueta de html como de css. Una autentica pasada!!. Lo más extraño que podrás observar son las etiquetas <ion-content> <ion-view> pero por ahora no le hagas caso más adelante nos centraremos en ellos. Estos son componentes propios del framework ionic.

Para que te hagas una idea rápida y no te quedes con la curiosidad ion-view sería algo así como un head y el ion-content es claramente el body. Simplemente se utilizan para estructurar la vista.

Codigo aplicacion
Codigo aplicacion de un template

index.html es quien llama a estos templates y a los controladores.

Esto sería un repaso de como esta formada una estructura básica de ionic aunque en los siguientes tutoriales la modificaremos para manejarnos mejor.

¿Como compilo mi aplicación?

Para compilarla tendrás que usar la plataforma que te ofrece adobe: adobe build donde podrás generar tus aplicaciones de hasta 50 megas (más que suficiente) de forma gratuita. Antes tendremos que comprimir de nuevo la aplicación en .zip y una vez comprimida la subiremos a través de esta plataforma, un proceso muy fácil de realizar cuando lo hagas un par de veces.

Adobe build
Adobe build

Mi única pega es que gratuitamente solo se puede generar la aplicación para android ya que para ios tendrías que registrarte como desarrollador para obtener el certificado y eso cuesta 100€. Pero igualmente la visualización es idéntica que para android.

Una vez compilada para descargarla puedes pasarle el código QR e instalarla directamente en tu dispositivo o bien descargarla a un pc y pasarla a tu dispositivo. A mi personalmente me gusta más pasar el código QR.

Mi primera aplicacion
Mi primera aplicacion
Mi primera aplicacion
Mi primera aplicacion

 

 

 

 

 

 

 

Con este tutorial no pretendo que hagais una super aplicación (no quiero vender la moto) pero si que estoy haciendo una introducción para posteriores tutoriales y sobretodo enseñaros una cosa que a mi me costo más de un mes de aprendizaje. Espero que te guste y te sirva de guía, más adelante seguiremos publicando post para ir afinando y convirtiendo esta simple aplicación en algo mucho más potente. No olvides comentar si tienes dudas o si simplemente te ha servido de ayuda 🙂

 

Dejar respuesta

Please enter your comment!
Please enter your name here