Share
Los sitios web para dispositivos móviles han recorrido un largo camino, pero si desea aprovechar al máximo el hardware de un teléfono inteligente, o inscribirse en la tienda de aplicaciones de iTunes, debe compilar su código. En este tutorial, le mostraremos cómo crear una aplicación web móvil con una apariencia de iPhone usando jQTouch, y luego convertirla en una aplicación nativa para iPhone usando Phonegap. No es necesario Objective-C.
Para completar este tutorial, necesitarás lo siguiente:
PhoneGap es un marco de código abierto que puede convertir cualquier aplicación web en una aplicación nativa para iPhone, BlackBerry y Android. Se quita
este truco ejecutando su código web en una UIWebView, una instancia incrustada de Safari sin el
Barras de herramientas y botones de la aplicación Safari independiente. PhoneGap luego extiende esta funcionalidad básica al mapear las características de
Desde el iPhone SDK a los objetos de JavaScript que puede llamar en su código web, para que pueda agregar fácilmente funciones como GPS, cámara, contactos, vibración,
Soporte SQLLite y acelerómetro. Y cuando esté listo para distribuir su aplicación, PhoneGap 0.80 está aprobado por Apple!
La distribución de PhoneGap incluye todo lo que necesita para crear y ejecutar una aplicación para iPhone. El proyecto incluido XCode está incluido
con un código de muestra que muestra cómo usar muchas de las funciones nativas, y todos los archivos de soporte necesarios para compilar la aplicación y
ejecutalo en el simulador de iPhone o en tu telefono.
Para probar si tienes tu Mac lista para ejecutar tu código, probemos el proyecto de muestra incluido con PhoneGap.
Primero, abra la carpeta del iPhone y haga doble clic en PhoneGap.xcodeproj:
Esto debería abrir XCode con su proyecto cargado. Aunque hay mucho que hacer aquí, nosotros como desarrolladores web solo necesitamos
preocuparnos por el www carpeta. Este contiene el código web que se convertirá en la interfaz y la lógica de
nuestra aplicación.
Ahora que tenemos nuestro proyecto cargado, es hora de darle una vuelta. Junto con el iPhone SDK se incluye un simulador de iPhone que
se engancha directamente a XCode. Todo lo que tenemos que hacer es hacer clic en "Crear y Ejecutar".
Por el bien de este tutorial, he creado una aplicación simple de sentimiento nativo que muestra mi feed de Tumblr con un "Acerca de"
pantalla. Esta aplicación se basa en el excelente marco jQTouch, una biblioteca de interfaz de usuario basada en jQuery
Elementos, animaciones y extensiones que le permiten desarrollar rápidamente aplicaciones web móviles con aspecto y estilo nativos. Echemos un vistazo rápido
al armar una aplicación web utilizando jQTouch antes de que importemos esta aplicación en nuestro proyecto Phonegap.
Primero, cargamos jQuery, jQTouch y algunos archivos de temas en el paquete.
etiqueta; estos estilizarán nuestros elementos para que parezcanLuego construimos el esqueleto de nuestra aplicación:
jQTouch toma cualquier descendiente directo de la
Etiqueta y la convierte en una "vista" de pantalla completa. Esto significa que cada
Accentsconagua
carné de identidad: Acerca de
JQTouch incluye una variedad de formas geniales de transición entre estas pantallas, y pueden habilitarse simplemente agregando clases CSS.
Por ejemplo, para convertir ese enlace a la página Acerca de en una transición deslizante, agregamos lo siguiente:
Acerca de
Luego, en la página Acerca de, agregamos un botón para "cerrar" el panel deslizando hacia atrás:
Cerrar
En la pantalla predeterminada, agregaremos una barra de herramientas con el botón "Acerca de" mencionado anteriormente, y un lugar para incrustar un feed de Tumblr:
Casa
Acerca deTransmisión en vivo
Por último, algunas clases de CSS que personalizarán la salida de la fuente de Tumblr para que coincida con nuestro tema "Apple":
ol color: negro; fondo: #fff; borde: 1px sólido # B4B4B4; fuente: negrita 17px Helvetica; relleno: 0; margen: 15px 10px 17px 10px; -webkit-border-radius: 8px; ol> li color: # 666; borde superior: 1px sólido # B4B4B4; tipo de estilo de lista: ninguno; relleno: 10px 25px 10px 25px;
¡Eso es! Después de agregar algo de contenido a nuestra página Acerca de, reemplazamos los archivos en nuestro proyecto Phonegap www carpeta
con nuestra nueva aplicación web, y ejecútela de nuevo:
Nuestra aplicación web ya está compilada, y desde aquí se puede empaquetar para su distribución en la tienda iTunes Store. Es un comienzo simple, pero
en muy poco tiempo tenemos una aplicación nativa que se parece a la de Apple, se ejecuta en cualquier iPhone y se puede extender a una variedad de usos.
Cubriré cómo extender su aplicación con soporte para cámaras y geolocalización en futuros tutoriales. Mientras tanto, usted puede
Lea más sobre Phonegap en la Wiki de Phonegap. La documentación no está completamente desarrollada,
por lo que es posible que te encuentres cavando a través de los repositorios de git después de una larga cacería.
Para enviar su aplicación a la tienda de aplicaciones de iTunes, regístrese en el Programa para desarrolladores de iPhone.
Una vez que se haya registrado, se le darán las herramientas para firmar digitalmente y enviar su aplicación a la tienda iTunes Store..
¿Sabía que puede ganar hasta $ 600 por escribir un tutorial PLUS y / o un screencast para nosotros?? Estamos buscando tutoriales detallados y bien escritos sobre HTML, CSS, PHP y JavaScript. Si tiene la habilidad, contacte a Jeffrey en [email protected].
Tenga en cuenta que la compensación real dependerá de la calidad del tutorial final y del screencast.
