¿Podemos crear apps sin saber programar? ¿Podemos crear apps en HTML5 y publicarlas en el App Store, Google Play y otras tiendas de apps? ¿Podemos crear apps interactivas sin tocar ni una línea de código?
Índice de contenidos
¡Sí!
Y es genial.
Cuando hablamos de creación de apps tanto podemos hablar de crear una app desde cero, utilizando código, con un equipo de programación; como de apps creadas en HTML5 usando un programa como por ejemplo Tumult Hype. ¿Qué nos permite hacer Tumult Hype?
Nos permite poder crear apps interactivas y animadas, con transiciones interesantísimas entre pantallas, con interactividades incluso (evidentemente, menos potente que una app programada desde cero con un equipo de programación, pero para muchos proyectos será suficiente).
Es decir, podemos crear una app con Tumult Hype y luego exportarla y, pasando por PhoneGap, convertirla en una app y subirla a las tiendas de apps.
Que sí, que es verdad.
¿Qué es PhoneGap?
PhoneGap es un paquete de librerías que permite empaquetar aplicaciones HTML5 de manera que puedan ser usadas como apps para móviles o Web Apps.
PhoneGap, entonces, es una solución pensada para que empaquetemos nuestros proyectos en HTML5 en formato app. ¡Genial! No hace falta ningún programador que nos cree una app lectora de html5. Con PhoneGap lo tenemos todo.
Aquí puedes ver dos proyectos creados con Tumult Hype y con PhoneGap, disponibles en el App Store: iKlimt y este libro infantil.
¿Es gratis?
Para poder usar PhoneGap necesitaremos una ID de Adobe. Con esta ID podemos publicar hasta 1 proyecto de manera gratuita, con la limitación de que nuestra app no ocupe más de 50MB. Con un usuario de pago, el cual nos costará 9,99$/mes (dependiendo del número de apps que tengamos este número podría aumentar), podremos crear tantas apps como queramos.
¿Cómo funciona?
Lo explico paso a paso.
- Creamos nuestro proyecto en Tumult Hype
- Lo exportamos en modo HTML5 -> Carpeta
- Una vez lo tengamos exportado, ya podremos subirlo a PhoneGap
¡Así de fácil! Cuando lo subamos a PhoneGap podremos obtener un .apk (archivo de app de Android) y un archivo de app de Windows para hacer testing. Si queremos hacer testing creando una app para iOS (dispositivos iPad, iPhone), tendremos que tener una cuenta de Apple Developer y hacer algunas gestiones con certificados.
¿No puedo hacer testing de otro modo?
¡Sí! Puedes hacer testing de las apps que hayas creado con Tumult Hype a través de la app de PhoneGap para Windows o para Mac. Es tan fácil como instalar el programa PhoneGap en el ordeandor, luego instalar la app en tu dispositivo móvil y hacer testing. Esto te permitirá ir probando la app que estás desarrollando a medida que vas haciéndola.
Tutorial: cómo hacer testing de una app creada con Tumult Hype en PhoneGap
Bueno, vamos al lío. En este tutorial veremos cómo hacer testing de una app creada con Tumult Hype en nuestro dispositivo móvil a través de PhoneGap. La ventaja de hacer testing con PhoneGap es que cuando después queramos crear una app y subirla a las tiendas de apps, ya sabremos si nuestra app funciona o no, la habremos podido mejorar…
Requisitos
1) Tener un proyecto con el que poder practicar. Yo practico con el proyecto EmailSwipe que hay en la web de Tumult Hype. Lo hago porque es un proyecto preparado para dispositivos móviles. ¿Qué pasa si haces pruebas con un proyecto que no esté preparado? Que puede ser que no te salga nada, dependiendo de cómo lo hayas diseñado.
2) Tener un dispositivo móvil Android, iOS o Windows Phone en el que se le pueda instalar PhoneGap
Primer paso: instalar PhoneGap
El primer paso es instalar PhoneGap en nuestro ordenador. PhoneGap se puede instalar en Windows y en Mac, pero como todos los alumnos de este curso tenéis Mac (sino no podríais usar Tumult Hype), nos centraremos en Mac:
Tienes que seguir el típico proceso de instalación de una app en Mac OS X. Finalmente, hacer drag and drop en el icono del programa para poder tenerlo siempre accesible desde la carpeta de Aplicaciones de nuestro sistema operativo.
Una vez hecho esto, tendremos instalado PhoneGap en nuestro ordenador.
Segundo paso: instalar PhoneGap en nuestro dispositivo móvil
Puedes encontrar PhoneGap para iOS, Android y Windows:
Una vez hayas instalado la app, ábrela.
¡Seguimos!
Tercer paso: crear una app en el programa PhoneGap de nuestro ordenador
Crearemos una app en la versión de ordenador de PhoneGap para conectarnos a nuestro dispositivo móvil y así poder hacer testing del proyecto que hemos creado en nuestro dispositivo móvil. Lo que estamos haciendo en este paso es:
1) Subir el proyecto al PhoneGap de nuestro ordenador
2) Conectarnos desde nuestro dispositivo móvil, con la app de PhoneGap, al programa PhoneGap de nuestro ordenador para descargarnos el proyecto.
3) Poder hacer testing en nuestro móvil sin tener que pasar por el proceso engorroso de creación de una app.
Poder visualizar la app que estamos creando en diferentes dispositivos móviles: iPad, iPhone, Android, Windows Phone nos sirve para poder hacer testing de los gestures, del diseño, de las funcionalidades… Pero, ¿y si queremos crear una app para iOS y para Android? Vamos a ver en el siguiente capítulo una introducción a la creación de apps.
Testing con PhoneGap paso a paso (el vídeotutorial en textos e imágenes)
Primero de todo, tendremos que exportar nuestro proyecto de Hype como HTML5 -> Carpeta. Una vez exportado, crearemos una carpeta donde queramos que nuestros proyectos PhoneGap estén alojados.
Después crearemos un proyecto nuevo en la app de PhoneGap para nuestro ordenador:
Escogeremos la carpeta que hayamos creado para alojar los proyectos PhoneGap. Le pondremos un nombre al proyecto y, si queremos, una ID. La ID en las apps suele ser el nombre de vuestra empresa o la dirección de vuestra web, pero al revés. Por ejemplo:
com.ubicuostudio.miapp
Esto es opcional ahora mismo y no hace falta que lo rellenéis.
Una vez rellenada la información podéis hacer click en “Create Project”.
Lo que ha pasado ahora es que habéis creado unas carpetas con el nombre de vuestra app dentro de vuestra carpeta de proyectos PhoneGap. Ahora lo que tenemos que hacer es poner vuestro proyecto de app dentro de estas carpetas. Vamos a ello.
Primero tenéis que ir a la carpeta donde habéis exportado vuestro proyecto Tumult Hype.
Aquí tenéis que copiar los dos archivos generados. El nombredevuestroproyecto.html y el nombredevuestroproyecto.hyperesources.
A continuación, tenéis que ir a la carpeta donde tengáis los proyectos PhoneGap y buscar el proyecto que habéis creado.
Entonces borráis el archivo index.html y pegáis los archivos que habíais copiado en el punto anterior. Una vez copiados, le cambiáis el nombre a “nombredevuestroproyecto.html” por “index.html”, de manera que PhoneGap lo coja como archivo principal a tener en cuenta.
¡Bien!
Una vez hecho esto, podéis ir a PhoneGap de vuestro dispositivo móvil y poner el número de IP que os sale en PhoneGap versión escritorio. Si no os sale, podéis buscarlo aquí:
Estos numeritos (vosotros tendréis unos en concreto, no son los que me han salido a mí, los copiáis en vuestra app PhoneGap de vuestro dispositivo móvil:
Hacéis toque en “Connect” y ¡listos!
Sólo os queda darle al “play” a vuestro proyecto PhoneGap si no lo habíais hecho antes.
¿Y ahora qué?
En este primer tutorial os he mostrado cómo usar el programa para ordenador PhoneGap + la app para dispositivos móviles para poder hacer testing de vuestras creaciones en Tumult Hype. En otros tutoriales veremos cómo crear apps 😉
¡Quiero más!
Si te interesa este tema, recuerda que tenemos un curso de Tumult Hype en el que aprendes a usar el programa al 100% para poder crear las apps que quieras!