Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Series de Screencast: Lo Básico sobre Aplicaciones para Firefox OS

Este articulo necesita una revisión editorial. Cómo puedes ayudar.

Firefox OS es un sistema operativo que trae la Web a los dispositivos móviles. En lugar de ser un nuevo Sistema Operativo con nuevas tecnologías y entornos de desarrollo,  Firefox OS se basa en tecnologías web estándar que han estado en uso desde hace años. Si tu eres un desarrollador web y quieres construir una aplicación móvil, Firefox OS te da las herramientas para  hacerlo sin tener que cambiar tu flujo de trabajo o aprender un entorno de desarrollo totalmente nuevo. En esta colección de vídeos cortos, desarrolladores de Mozilla y Telenor se reunieron en Oslo, Noruega para explicar en pocos pasos como puedes empezar a construir aplicaciones para Firefox OS.

En esta serie tu aprenderás:

  • Cómo construir tu primera aplicación para Firefox Os.
  • Cómo depurar y probar tu aplicación en el escritorio y en un dispositivo real.
  • Cómo lograr que aparezca en el  Firefox Marketplace.
  • Cómo usar las APIs e interfaces especiales que Firefox Os ofrece a un desarrollador javaScript para aprovechar el hardware disponible en los teléfonos inteligentes.

Nota: Cada uno de los screencast son lo suficientemente cortos para verlos durante un descanso. Toda la serie no debe tomar mas de una hora para observarla.

Código y entorno de desarrollo

Además de los screencasts, tu puedes descargar los códigos de ejemplo desde GitHub que los acompañan. Si deseas probar los códigos de ejemplo por ti mismo, necesitarás configurar un entorno de desarrollo muy sencillo. Todo lo que necesitas es:

  • Una versión actual de  Firefox, que sale de la caja con las herramientas de desarrollo que necesitas — nosotros recomendamos obtener Firefox Aurora o Nightly si realmente quieres  jugar con la tecnología de ultima generación.
  • Un editor de texto — en los screencast nosotros usamos Sublime Text, pero cualquiera sirve. Si quieres ser realmente nativo en la web, puedes probar con Adobe Brackets.
  • Un servidor local o un servidor para subir los archivos de tu demo. Algunas de las aplicaciones demo necesitan conexiones HTTP en lugar de conexiones locales.

Presentación de la serie

La serie nos muestra a Jan Jongboom (@janjongboom) y Sergi Mansilla (@sergimansilla) de Telenor Digital, y Chris Heilmann (@codepo8) de Mozilla; Fue grabada durante tres días en Oslo, Noruega en la sede central de Telenor en Febrero del 2014.

Aquí estamos nosotros tres hablándote acerca de la serie y qué puedes esperar de ella:

Sección 1: Construyendo tu primera aplicación para Firefox Os y como publicarla

En los primeros cinco screencast de la sección 1 mostraremos como construir una aplicación para Firefox Os, como depurarla y probarla en tu computadora y en un dispositivo real,  y como tenerla listada en el Firefox Marketplace. Esto puede sonar como mucho trabajo, pero pronto descubrirás que si ya sabes como construir un sitio web, tienes 90% del camino listo.

Más que un sitio web

Las aplicaciones de Firefox OS son HTML5, En esencia, estas usan las mismas tecnologías que los sitios web. Puedes empezar escribiendo un sitio web y convertirlo en una aplicación simplemente dándole un archivo de manifiesto (ver The app manifest para más detalles). Esto le dice a Firefox OS que estas escribiendo una aplicación y te permite:

En esencia, las aplicaciones HTML5 son sitios web sobre alimentados y deben seguir las mismas reglas, como por ejemplo:

  • Mejora progresiva: Prueba para ver si lo que tu quieres utilizar está realmente disponible antes de intentar acceder a él.
  • Adaptación a su entorno: Por ejemplo, utilizando media queries y responsive images para optimizar las aplicaciones para distintos tamaños de pantalla, resoluciones y velocidades de red disponibles.
  • Utilizar HTML, CSS y JavaScript como tecnologías principales.

La diferencia principal es que para que una página web se convierta en una gran aplicación, debes tener muy en cuenta a los usuarios móviles. Esto significa, ante todo, que tu aplicación debe:

  • Trabajar offline
  • Permitir a los usuarios hacer una cosa y tener una interface que lo haga fácil
  • Jugar muy bien con la vida de la batería y velocidad del procesador

En muchos casos, esto significa que necesitas hacer más ligera tu página web y simplificar la interface. La buena noticia es que todos tus usuarios serán beneficiados por eso.

Nota: Para encontrar más información acerca de cómo diseñar una buena aplicación HTML5, entra al App Center en MDN.

El archivo manifest de tu app

El App Manifest en Firefox OS en un archivo simple de JSON que le dice al sistema operativo acerca de tu aplicación. En esencia, esto es lo que convierte una página web en una Open Web App. Dentro del manifest, tu defines el nombre en diferentes localidades y solicitas al sistema operativo tener acceso a varios servicios y al hardware. Incluso puedes editar la orientación predeterminada de tu aplicación, y de ser necesario, bloquear la orientación.

Para más información acerca del manifest y herramientas que pueden ayudarte:

El gestor de aplicaciones

La forma más sencilla de empezar a trabajar con Firefox OS es probando el gestor de aplicaciones App Manager.  Esta herramienta se encuentra junto al Firefox developer tools for desktop y te permite conectarte a un simulador de Firefox OS en su computadora, o a un dispositivo real con Firefefox OS si tienes uno disponible. Desde allí, puedes jugar con Firefox OS, instalar aplicaciones directamente dentro del simulador o en un dispositivo real, y depurarlas como si se ejecutaran en un Firefox OS , viendo los cambios inmediatamente en tiempo real sin necesidad de desinstalar o actualizar las aplicaciones.

El siguiente video presenta los primeros pasos para el uso del App Manager junto con el simulador:

Nota: El App Manager te permite depurar tus propias aplicaciones sin ningun problema incluso cuando no estes conectado.

Para más información sobre el App Manager:

Probar en un Dispositivo Real

Probar tus aplicaciones en un simulador esta bien, pero solo te lleva tan lejos como un ambiente simulado puede hacerlo. Si quieres probar el rendimiento de la interacción de la aplicación o la reacción a algunas cosas como la orientación del dispositivo, necesitas un dispositivo real. Con las herramientas de desarrollo y el App Manager juntos, puedes usar el dispositivo y adentrarte en los detalles de lo que pasa dentro de tu aplicación mientras la usas.

Publicar en el Marketplace

El Marketplace de Firefox OS es el sitio mas conveniente para listas tus aplicaciones y ponerlas a disposicion de las personas en sus dispositivos y en la web. El Marketplace también te permite listar tu aplicación para otras plataformas como Firefox Desktop y Firefox para Android. Tambien puedes permitir que las personas valoren tu aplicación, den su opinión, y compren  tu aplicación usando un proceso simple de verificación. Listar tu aplicación es simple:

  • Agrega la URL del marketplace a tu archivo manifest.
  • Agrega una descripción de tu aplicación (la cual ayuda a las personas a encontrarlo entre todas las demás aplicaciones disponibles.)
  • Proporcionar imágenes de pantalla o videos para mostrar la funcionalidad de tu aplicación.
  • Selecciona una categoría para tu aplicación.
  • Proporcionanos un correo electronico para contactarte.
  • Proporciona a usuarios(as) finales un enlace a tu política de privacidad y sitio web de soporte.
  • Provee una clasificación de contenido para tu aplicación.

Las aplicaciones enviadas al Marketplace son revisadas por el equipo revisor de aplicaciones de Mozilla y se te notificara sobre el estado de tu envío en pocos días. Si existen problemas con tu aplicación recibirás un mensaje de validación durante el proceso, pero es posible que también recibas una explicación legible por humanos sobre lo que está mal y como solucionarlo.

Nota: Lee Submitting an application to the Firefox Marketplace para más nformación sobre el procesos de envío.

Sección 2: Tópicos Avanzados sobre Firefox OS

En los primeros videos te presentamos Firefox OS y como desarrollar tu primera aplicación. También abarcamos como depurar tu aplicación en el escritorio (y en un dispositivo real), y como listar tu aplicación en el Marketplace de Firefox. En los cinco videos restantes nos adentraremos en las tecnologías que permiten a Firefox OS ir un paso más adelante y darte acceso a las funcionalidades que hacen del desarrollo para smartphones y tablets interesante para los desarrolladores. Pese a que muchas de estas tecnologías actualmente solo funcionan en Firefox OS, son todas de código abierto y han sido enviadas como propuestas estándar. Trabajar hoy con estas APIs significa que estás preparado para otros dispositivos y plataformas que emergerán en el futuro cercado.

Web APIs

Los Smartphones están llenos de tecnología grandiosa (cámaras, acelerómetros, y GPS para nombras algunos).  El problemas era que ellas no eran accesibles para tecnologias web, si querías acceder a ellas necesitabas escribir aplicaciones nativas. Para solucionar esto, Mozilla y sus socios diseñaron un conjunto de APIs para permitir a los desarrolladores alcanzar las profundidades del hadrware de los dispositivos móviles usando JavaScript de una forma segura. Estas son llamadas Web APIs y estan definidas abiertamente y disponibles para que otros las implementen. Firefox OS es la primera plataforma que las usa.

 Más infromación en el siguiente screencast:

Para más información sobre las Web APIs:

Web Activities

Web Activities son métodos alternativos para acceder al hardware de un dispositivo. En vez de hacer que una API se comunique con el dispositivo directamente, Web Arctivities te permitirá crear un ecosistema de aplicaciones en el dispositivo que se comunican entre sí y comparten sus habilidades. Por ejemplo, en vez de acceder a la cámara directamente, tu aplicación puede usar un Web Activity para solicitar una imagen y el usuario del dispositivo puede usar su aplicación favorita para tomar una foto la cual es devuelta a la aplicación que realizo la petición originalmente.

En vez de solicitar a los usuarios acceso a los dispositivos (lo cual es importante en términos de seguridad), les permitirás usar aplicaciones en la que ellos ya confían para realizar dichas funciones. Además,  puedes registrar tus aplicaciones como las opciones preferidas para ciertas tareas en el sistema operativo. Puedes pensar sobre los Web Activities como el equivalente de hacer clic con el botón derecho sobre un documento en el escritorio del computador y seleccionar con cual aplicación abrir dicho documento. Aparecerán diferentes opciones más una opción para hacer que el sistema operativo utilice de manera predeterminada esta aplicación para abrir los archivos de ahora en adelante.

Web Activities permite a las aplicaciones comunicarse entre sí en el dispositivo sin ninguna necesidad de utilizar un servidor. Lo único que transmiten de una aplicación a la otra es la información final.

Para más información sobre Web Activities:

Notificaciones Push

Notificaciones Push (invocada usando el SimplePush Web API) son métodos para que una aplicación reaccione cuando el dispositivo recibe un mensaje específico. Esto te permitirá desarrollar aplicaciones que pueden estar cerradas (y ahorrando energía) hasta que sean necesarias. Las notificaciones creadas de esta manera tendrán el beneficio de no portar información y de esta manera Mozilla nunca obtendrá información sobre la aplicación y los atacantes no podrán acceder a la misma.

Para más información sobre cómo usar Notificaciones Push con SimplePush:

Funcionalidad sin conexión

Las aplicaciones no son muy útiles si no funcionan sin conexión web. Este es un motivo por el cual los usuarios prefieren aplicaciones ya instaladas en vez abrir el navegador del dispositivo y buscar el contenido en él. El término “aplicación web” pareciera indicar que se necesita de una conexión web para que la aplicación  se pueda usar.

Nuestros usuarios estarán sin conexión web en algunas ocasiones (ya sea en un avión, en el subterráneo o sin plan de datos en la tarjeta SIM) y necesitamos asegurarnos de que nuestras aplicaciones sean útiles cuando eso suceda. HTML5 ofrece algunas tecnologías que permiten funcionalidad sin conexión web, principalmente AppCache y DOMStorage.

Para más información sobre funcionalidad sin conexión:

Donde encontrar más

Esperamos que esta serie de videos te haya dado una clara introducción para el desarrollo de tus propias aplicaciones web abiertas. Si te interesa aprender más, existen algunos recursos y canales que puedes usar:

  • El MDN App Center presenta información sobre como diseñar y desarrollar buenas aplicaciones web abiertas.
  • La MDN Marketplace zone contiene instrucciones detalladas sobre como hacer que tus aplicaciones sean listadas en el Firefox Marketplace, diferentes opciones de publicación, y la gestión de pagos.
  • El Hacks Blog presente artículos semanales sobre aplicaciones de Firefox OS (presentando al personal de Mozilla y personas que desarrollan por su cuenta como tu), y tecnologías innovadoras. Es un lugar excelente para tener una visión sobre lo que vendrá en las próximas versiones de Firefox y Firefox OS.
  • La MDN Firefox OS zone y B2G Wiki tiene información mas detallada sobre el sistema operativo Firefox OS.
  • Estamos siempre en IRC — simplemente usa irc.mozilla.org y encuentranos en #devrel, #b2g, #openwebapps o #marketplace.

Esperamos verte allí.

Chris, Sergi y Jan

Etiquetas y colaboradores del documento

Etiquetas: 
 Última actualización por: chrisdavidmills,