Share
¿Quiere aprender a usar PhoneGap, pero no sabe por dónde empezar? Únase a nosotros para crear “Sculder”, no solo un homenaje a una excelente serie de televisión de ciencia ficción, sino también una aplicación móvil nativa para el creyente en usted.!
En la última parte de esta serie, pusimos en marcha nuestra aplicación web con una estructura básica y transiciones entre páginas. En esta parte, continuaremos trabajando para completar las partes de la aplicación que pueden ejecutarse sin PhoneGap y configurar nuestro proyecto PhoneGap, listo para la integración..
Antes de comenzar, quería cubrir una pregunta que siempre me hacen. Esta es una pregunta que una vez le hice, y sin duda usted también podría haberla hecho. A saber: ¿Cómo depuro una aplicación web en un dispositivo móvil??
Hay varias formas de depurar en un dispositivo. Podrías ir a la vieja escuela y usar alerta (algo);, pero tener alertas en todo el lugar es ineficiente y podría terminar en el código de producción (¡es tan molesto!). Puede usar la consola de depuración en Safari en un dispositivo iOS, ubicado en Configuración -> Safari -> Desarrollador, pero no todos los dispositivos usan Safari o tienen una consola de depuración. Además, esta consola genera información mínima..
Si solo necesito usar una consola de JavaScript para capturar un console.log (), o tal vez ejecute algunos JS en el dispositivo para verificar algo, me gusta usar jsconsole.com. Es uno de los métodos más fáciles de usar una consola en su dispositivo e incluso hay una aplicación iOS disponible. Para iniciar una sesión en jsconsole.com, simplemente escriba :escucha y luego obtendrás una salida de etiqueta de script para incluir en tu página. Inicia la aplicación y verás que la conexión ocurre en la consola. Ahora puede ejecutar JS en la consola y verlo reflejado en el dispositivo o ingresar a la consola en su código y verlo aquí. Vea el video a continuación para una demostración de esto:
Para más ayuda sobre jsconsole, vea aquí.
Otra alternativa es WeInre (Web Inspector Remote). Primero comenzó como un proyecto independiente, WeInRe ahora es parte de la familia PhoneGap y se puede encontrar en debug.phonegap.com. La configuración es muy similar a jsconsole, pero lo que realmente obtienes es un inspector de WebKit, como Chrome o Safari. Vea el siguiente video para un ejemplo:
Otra alternativa es Socketbug, que es excelente, pero requiere la instalación y configuración de Node y socket.io, que desafortunadamente está fuera del alcance de este tutorial. Sin embargo, si te sientes aventurero y quieres probar Socketbug, vale la pena..
Esas son las herramientas de depuración que uso. Ahora podemos empezar a añadir algunas características.!
Una de las características que podemos implementar sin una API de PhoneGap es el feed de Twitter. Esta función simplemente mostrará una lista de los tweets que coinciden con un término de búsqueda en particular. Afortunadamente, Twitter puede devolver datos en formato JSON cuando ejecutamos una consulta en search.twitter.com. Si usas la siguiente URL http://search.twitter.com/search.json?q=ufo+spotted&rpp=4, Obtendrá una respuesta JSON con datos suficientes para completar una lista.
Con el fin de obtener nuestros datos en la página y mostrarlos de una manera agradable, vamos a utilizar plantillas. Hay un montón de motores de plantillas por ahí y todos valen la pena ver, Mustache es muy popular y muy poderoso. jQuery también tiene uno que creo que es perfecto para lo que queremos lograr.
En la página de tweets, voy a tener un vacío. ul y un div Contenedor que está oculto en la página. Dentro del contenedor estará el código que quiero usar como plantilla. En este caso, es un simple li Elemento con un marcado básico que contendrá la información de twitter que queremos mostrar. Será en un guión bloque que tiene una identificación única y un tipo de type = "text / x-jquery-tmpl", esto es para que el navegador no lo ejecute como JavaScript. El motor de plantillas de Twitter utiliza PS como un marcador de posición para los datos que obtendremos de nuestra JSON datos. La página de tweets ahora se ve algo como esto:
Ahora necesitamos escribir nuestra función que será llamada en cualquier momento que carguemos esta página. Esta función irá a Twitter y obtendrá nuestro feed:
Accentsconagua
función getTweets () var q = "ufo + manchado" rpp = 5, twurl = "http://search.twitter.com/search.json?q="; $ .getJSON (twurl + q + "& rpp =" + rpp + "& callback =?", función (datos) $ ("# tmpl-tweets"). tmpl (data.results) .appendTo ("# # tweets") ;); Voy a tener esta página cargada primero, así que he configurado la clase de la página a actual. Ahora, solo necesitamos agregar un poco de estilo a los tweets, para que se muestren un poco más agradables..
/ ** Tweets Styling ** / #tweets list-style: none; relleno: 10px; #tweets li font-size: 12px; desbordamiento: oculto; margen inferior: 20px; #tweets li h2 font-size: 14px; margen: 0; .avatar margen derecho: 10px; #tweets li a, #tweets li span float: left; #tweets li span width: 70%;
La próxima vez que iniciemos la aplicación deberíamos obtener lo siguiente.
La otra característica que podemos implementar antes de que hagamos la integración de phonegap es la característica de mapa. Vamos a utilizar la API de Google Maps para generar un mapa simple y luego usaremos algunos datos del mapa para soltar los marcadores. Cada marcador indicará avistamientos de ovnis.
Para esto vamos a utilizar la API de JavaScript, actualmente en la versión 3. Una introducción completa a la API de mapas está fuera del alcance de este tutorial, pero puede encontrar toda la documentación aquí, así como ejemplos de implementación. Si sigue el tutorial que se encuentra aquí, verá cómo implementar un mapa básico. Podemos usar el mismo código para implementar un mapa básico y terminar con lo siguiente:
Ahora podemos ir a la documentación que cubre los marcadores, que se encuentran aquí. Ahora podemos soltar algunos marcadores básicos en nuestro mapa al cargar. Los marcadores representarían ubicaciones de avistamientos con los datos de las fotografías que han sido tomadas y cargadas por los usuarios de la aplicación. Tendríamos un servicio ejecutándose en un servidor que puede devolver datos a través de Ajax, probablemente en el formato JSON. Una vez más, configurar este servicio es un tutorial completo en sí mismo, pero para cada entrada crearemos un marcador para el mapa usando el código provisto en la demostración..
var marker = new Google.maps.Marker (position: newLatlng, map: map, title: "New Sighting");
Después de que se cargue el mapa, se agregarán los marcadores. Si lee la documentación de la API de Google, encontrará otras opciones para los marcadores, como mostrarlos con imágenes y notas. Vale la pena explorar las otras opciones y proponer diferentes implementaciones..
Eso es todo lo que podemos hacer antes de llegar a PhoneGap. Nuestra última función requiere el uso de la cámara, así que sigamos adelante y comencemos a configurar nuestro proyecto PhoneGap. Echa un vistazo a la introducción a PhoneGap aquí si aún no lo has hecho.
Los iconos son una parte muy importante de la aplicación. Es la imagen que representa su aplicación en todas partes, y hay ciertas pautas que querrá seguir para asegurarse de que se vea bien en todas partes. Aquí hay una excelente publicación de blog sobre el tamaño de los íconos y las pautas a seguir al crear un ícono. Por lo general, tomo un icono de 512x512 y lo reduzco desde allí a todos los tamaños necesarios.
También necesitarás crear una imagen de inicio / pantalla de inicio para tu aplicación.
Una vez que tengamos la aplicación PhoneGap predeterminada ejecutándose en nuestro simulador y / o dispositivo de prueba. Podemos ir a través de la página de resumen principal en la plantilla de Xcode para PhoneGap. Lo primero que quiero asegurar es que el menú de dispositivos esté configurado para iPhone. También podríamos implementarlo en iPad, si quisiéramos, pero podría haber algunos cambios en CSS que nos gustaría hacer primero. Por ahora solo me quedo con el iPhone. Verifique todas las orientaciones del dispositivo ya que jQuery Mobile clasifica nuestro diseño según la orientación. Puede arrastrar y soltar los archivos de imagen en sus espacios asignados en la página de resumen.
Ahora, cuando inicie su aplicación, será recibido con el nuevo icono de la aplicación y la página de inicio. Ahora copie sobre los archivos que ha estado trabajando en el www carpeta. Inicia la aplicación y comprueba que todo funciona correctamente..
Una vez que haya configurado su proyecto en Eclipse (de la misma manera que hicimos nuestro proyecto de prueba en la primera parte aquí), necesita tener tres tamaños de iconos preparados para su aplicación. Alta densidad (72x72), densidad media (48x48) y baja densidad (36x36). Estos íconos reemplazan los íconos predeterminados que se encuentran en la res carpeta. Los acrónimos apropiados son hdpi, mdpi y ldpi que representan Alto, Medio y Bajo respectivamente. Las imágenes que desea utilizar como pantalla de inicio también deben ir en estas carpetas.
Para que la pantalla de bienvenida funcione para Android, necesitamos agregar y modificar nuestros DroidGap clase para incluir la imagen de bienvenida en la carga. Añadir:
super.setIntergerProperty ("splashscreen", R.drawable.splash) A continuación, el loadUrl necesita un tiempo de espera adicional.
super.loadUrl ("file: ///android_asset/www/index.html", 5000); Su archivo ahora debería verse como el siguiente:
Ejecute la aplicación y asegúrese de que todo funcione correctamente..
Ahora estamos en el punto en el que estamos listos para implementar nuestras dos últimas funciones: la cámara del dispositivo y las opciones de almacenamiento local. Hacer esto será cubierto en futuros tutoriales en esta serie. Esta serie también incluirá el envío de nuestra aplicación a las distintas tiendas de aplicaciones, así que asegúrese de seguirla.!
