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.!
Lo dejamos en el último tutorial de esta serie, justo después de colocar nuestra aplicación en el marco de trabajo de Phonegap y esperar a agregar nuestra última pieza de funcionalidad: la cámara del dispositivo. La idea detrás de este tutorial es permitir que el usuario tome una foto con la cámara y luego la cargue en un servidor. No cubriremos la carga real de la imagen, pero dejaremos espacio para que se agregue la funcionalidad. Puede encontrar muchos ejemplos de varias implementaciones para cargar imágenes a través de PHP, Ruby y otros idiomas del lado del servidor en otros lugares en línea. En su lugar, este tutorial se centrará en tomar la foto, mostrar la foto tomada y dar al usuario una alerta de que la imagen se ha cargado (la función que su servidor puede activar cuando devuelve un mensaje de carga exitosa).
Lo primero que debemos hacer es agregar un botón a nuestra página:
A continuación, debemos agregar un poco de estilo al botón para que se vea un poco mejor. Como estamos desarrollando para navegadores decentes, podemos aprovechar algunos estilos CSS3.
button.camera-control background-color: # f3f3f3; imagen de fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, stop de color (0%, # f3f3f3), stop de color (50%, #dddddd), stop de color (50%, # d2d2d2), parada de color (100%, #dfdfdf)); imagen de fondo: -webkit-linear-gradient (arriba, # f3f3f3 0%, #dddddd 50%, # d2d2d2 50%, #dfdfdf 100%); imagen de fondo: gradiente lineal (arriba, # f3f3f3 0%, #dddddd 50%, # d2d2d2 50%, #dfdfdf 100%); borde derecho: 1px sólido #dfdfdf; borde inferior: 1px sólido # b4b4b4; borde derecho: 1px sólido #dfdfdf; -webkit-border-radius: 5px; radio del borde: 5px; -webkit-box-shadow: recuadro 0 1px 0 0 blanco, 0 1px 0 0 # d5d5d5, 0 -1px 2px 1px #efefef; box-shadow: recuadro 0 1px 0 0 blanco, 0 1px 0 0 # d5d5d5, 0 -1px 2px 1px #efef; color: # 666; bloqueo de pantalla; fuente: negrita 16px "helvetica neue", helvetica, arial, sans-serif; margen: 10px auto; relleno: 7px 0; text-shadow: 0 1px 1px #fff; ancho: 150px; button.camera-control: hover background-color: # e5e5e5; imagen de fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, stop de color (0%, # e5e5e5), stop de color (50%, # d1d1d1), stop de color (50%, # c4c4c4), parada de color (100%, # b8b8b8)); imagen de fondo: -webkit-linear-gradient (arriba, # e5e5e5 0%, # d1d1d1 50%, # c4c4c4 50%, # b8b8b8 100%); imagen de fondo: gradiente lineal (arriba, # e5e5e5 0%, # d1d1d1 50%, # c4c4c4 50%, # b8b8b8 100%); -webkit-box-shadow: inserción 0 1px 0 0 # f2f2f2, 0 1px 0 0 # c9c9c9, 0 -1px 2px 1px # e3e3e3; box-shadow: recuadro 0 1px 0 0 # f2f2f2, 0 1px 0 0 # c9c9c9, 0 -1px 2px 1px # e3e3e3; button.camera-control: active -webkit-box-shadow: inset 0 0 30px 0 # 999999, 0 1px 0 0 blanco; caja-sombra: recuadro 0 0 30px 0 # 999999, 0 1px 0 0 blanco;
Si ahora ejecuta y prueba su aplicación (ya sea en el simulador o en un dispositivo), debería tener una página como esta:
Ahora tenemos que atar en la funcionalidad. Primero, comenzamos con la capturaFoto () Función que pondrá en marcha la cámara:
function capturePhoto () navigator.camera.getPicture (uploadPhoto, null, sourceType: 1, calidad: 60);
La función de éxito, subir foto, Es lo siguiente a ser escrito. Esta función cargará la foto en nuestro servidor, enviará la imagen a la pantalla y también le dará al usuario una notificación de que la imagen se ha cargado. Comencemos enviando la imagen a la pantalla:
función uploadPhoto (data) // aquí es donde enviaría el archivo de imagen al servidor // la imagen de salida a la pantalla cameraPic.src = "data: image / jpeg; base64," + data;
Una de las API de Phonegap que realmente no vimos antes, pero la usaremos aquí, es la API de notificación. La API de notificación es para alertar al usuario de una acción realizada, como la alerta() Funcionalidad de Javascript, pero adaptada para el dispositivo específico en el que se está ejecutando. También tiene la capacidad de emitir un pitido, vibrar o simplemente abrir y alertar un mensaje de diálogo. Para esta aplicación, solo vamos a utilizar el notification.alert (), que es un cuadro de diálogo que puede aceptar algunas opciones personalizables. El uso básico es:
navigator.notification.alert (mensaje, alertCallback, [title], [buttonName])
Dentro de nuestro subir foto función, vamos a utilizar el notification.alert () para mostrar un mensaje que indica que la foto se ha cargado en el servidor. Nuestro código se ve así:
Accentsconagua
navigator.notification.alert ('Tu foto se ha subido', // mensaje correcto, // devolución de llamada 'Photo Uploaded', // título 'OK' // buttonName); También necesitamos escribir el bueno funciona para asegurarnos de que no nos encontramos con ningún error cuando ejecutamos nuestro código. Puede hacer lo que quiera, pero se usa mejor cuando está conectado al servidor. Por el momento, la función quedará vacía..
Nuestro subir foto() La función ahora se ve así:
función uploadPhoto (data) // aquí es donde enviaría el archivo de imagen al servidor cameraPic.src = "data: image / jpeg; base64," + data; // Subida exitosa al servidor navigator.notification.alert ('Su foto ha sido cargada', // mensaje correcto, // devolución de llamada 'Foto cargada', // título 'OK' // nombre del botón); // la carga ha fallado Fail / * if (failedToUpload) navigator.notification.alert ('Tu foto no se ha cargado', failDississed, 'Photo Not Uploaded', 'OK'); * / funciona bien () // Haz algo Ahora deberá ejecutar la aplicación en un dispositivo, ya que el simulador no tiene acceso a una cámara. Después de tomar una foto, recibirá la siguiente alerta:
Nuestra aplicación ahora está completa y estamos listos para exportarla como una aplicación de trabajo y enviarla a las tiendas!
Tenga en cuenta que para distribuir una aplicación en la App Store de Apple, debe tener un certificado de desarrollador pagado por Apple..
Exportar para la plataforma iOS puede ser un desafío, pero siempre que tenga todos sus certificados preinstalados y sincronizados con Xcode (que tendría que haber hecho antes de poder probar en un dispositivo), no debería Sé demasiado desafiante después de haberlo hecho una vez. Si hace doble clic en su proyecto en Xcode y va a Configuración de compilación, asegúrese de que su identidad de firma de código se está utilizando para la aplicación.
Ahora tienes que ir a Producto => Archivo y envíe la aplicación al Archivo (que se encuentra en la ventana del Organizador). Es posible que pueda obtener un error en la línea de NSAutomaticpool no está disponible, esto se debe al conteo automático de referencias (que es nuevo). PhoneGap no lo admite en este momento, así que solo tenemos que desactivarlo en la configuración de compilación del proyecto. Si vas a la configuración de compilación y busca -CLANG_ENABLE_OBJC_ARC lo encontrarás y lo cambias a "no".
Una vez hecho esto, puedes dirigirte a iTunes Connect y comenzar a configurar tu aplicación allí. Una vez que haya iniciado sesión, haga clic en "Administrar aplicaciones" y "Agregar una nueva aplicación". Ir a través del Asistente, agregar el icono de iTunes (512x512px de tamaño) y al menos una captura de pantalla de la aplicación. Hay algunos otros campos obligatorios, como un número de SKU (este es un número de seguimiento para usted. Personalmente uso 0001 para comenzar y continuar desde allí) y una descripción. Una vez que haya terminado de rellenar el formulario, haga clic en enviar.
Una vez finalizado se te presentarán los siguientes
Al principio, el estado de sus aplicaciones será "Prepararse para cargar", por lo que debe hacer clic en "Ver detalles" y luego en "Carga binaria". Una vez que haya pasado por esto, su estado ahora será "Listo para subir".
De vuelta en el Organizador de Xcode, podemos ejecutar la opción Validar para verificar que nuestra aplicación esté bien para ser enviada a la App Store y esperamos que la aplicación funcione sin errores de validación.
Nota: Saltar a través de todos los aros que Apple presenta no es una tarea fácil de dominar. Si obtiene varios errores relacionados con las compilaciones que fallan porque no se pudieron encontrar los perfiles de aprovisionamiento, etc. Haga una búsqueda rápida en Google y encontrará la solución. Hay 100 escenarios diferentes con certificados que no coinciden que he enfrentado al intentar crear una aplicación para iOS, todo resuelto mediante el uso de Google. Si constantemente tiene problemas, no dude en dejar un comentario a continuación e intentaré ayudar!
Ahora que nuestra aplicación es válida, podemos enviarla a la App Store. Hacemos clic en enviar, verificamos que nuestra Solicitud e Identidad son correctas, y luego esperamos la carga.
Una vez hecho esto, puede iniciar sesión en iTunes Connect y ver que la aplicación está "En espera de revisión". A menudo, pueden pasar hasta 14 días antes de que su aplicación esté en la App Store, así que espere un poco..
Afortunadamente, después de todo el posible dolor que podría haber sufrido con la exportación de iOS, Android es ligeramente más fácil. Suponiendo que está utilizando Eclipse para su desarrollo de Android, todo lo que necesita hacer es eliminar cualquier característica no utilizada del archivo de manifiesto y luego hacer clic con el botón derecho en el proyecto y bajar a Herramientas de Android => Exportar paquete de aplicaciones firmadas. Una vez que haya pasado por el Asistente para exportar su paquete, debe asegurarse de crear un Almacén de claves. Terminarás con una .apk Archivo, que es lo que subiremos al Android market..
Diríjase al sitio del editor de Android Market aquí e inicie sesión. Si esta es su primera vez aquí, deberá registrarse para obtener una cuenta (usando su cuenta de Google existente), pagar $ 25 y configurar una cuenta de Google Wallet. Una vez que se haya registrado y haya iniciado sesión, puede seguir adelante y cargar su .apk expediente. Es un proceso mucho más sencillo que la ruta de iOS. Si sientes que la forma es abrumadora o no estás muy seguro de algo, consulta el tutorial de Shane Conder & Lauren Darcey aquí en mobiletuts a medida que lo hacen paso a paso. Vale la pena leer toda su serie sobre el desarrollo de Android si está interesado en llevar su desarrollo más lejos.!
Una vez que haya terminado, no le tomará nada de tiempo a que su aplicación esté en el mercado y esté lista para ser vendida.
Como se indicó en el primer tutorial de esta serie, vamos a aprovechar el sistema de creación de nubes de PhoenGap que se encuentra en build.phonegap.com. A largo plazo, usar este servicio cuesta dinero, pero la otra opción de ejecutar varios SDK diferentes en varios sistemas operativos y luego trasladar la aplicación a cada uno puede llevar más tiempo y problemas que el dinero extra que cuesta utilizar el servicio vale la pena.
Todo lo que necesitamos es un cremallera archivo que contiene nuestro HTML, CSS y JavaScript. Cárguelo en el servicio y luego será llevado a una pantalla de "Sus aplicaciones" donde verá su aplicación disponible en sus diversos formatos:
Es un simple clic y descarga para obtener la compilación correcta. Para comenzar con Blackberry, debemos enviar nuestra aplicación a su "App World". Dirígete al mundo de aplicaciones aquí y haz clic en "Comenzar". Rellene el formulario bastante sencillo y luego espere.
NOTA: Desafortunadamente, en este momento (2/8/2012), Blackberry aparentemente tiene una acumulación de aplicaciones de "proveedores". He estado esperando desde principios de enero para mi aprobación, pero hasta ahora no he tenido esa suerte. Actualmente están ejecutando una promoción de Playbook para quienes estén dispuestos a convertir sus aplicaciones de Android, lo que está causando el retraso. Si está interesado en registrarse para ser un proveedor de Blackberry, inscríbase lo antes posible..
Para los otros dispositivos compatibles con el servicio de construcción en la nube de PhoneGap, vale la pena registrarse en sus sitios de desarrollo relevantes: Nokia y webOS. Son muy similares y están llenos de documentación para cargar aplicaciones en sus mercados relevantes. Siguen el mismo tipo de proceso (Registrarse, Cargar aplicación, Cargar materiales de marketing, Esperar) y son razonablemente sencillos de seguir.
Hemos finalizado nuestra aplicación, la hemos exportado y la hemos cargado en la tienda de aplicaciones de iOS, así como en el mercado de Android. También utilizamos el servicio de compilación de PhoneGap para obtener una versión de nuestra aplicación en las otras plataformas a las que nos gustaría apoyar..
Phonegap va de fuerza en fuerza en este momento y continúa creciendo (la versión 1.4 fue lanzada recientemente). Vale la pena conocer este SDK si está comenzando el desarrollo móvil y no entiende los lenguajes de programación nativos detrás de las plataformas Android o iOS. Esperemos que esta serie de tutoriales le haya enseñado cómo hacerlo.!
