{"id":1494,"date":"2012-01-29T16:11:23","date_gmt":"2012-01-29T19:11:23","guid":{"rendered":"http:\/\/realnorth.net\/blog\/?p=1494"},"modified":"2012-01-29T16:40:06","modified_gmt":"2012-01-29T19:40:06","slug":"gaia-ui-boot-to-gecko-b2g","status":"publish","type":"post","link":"https:\/\/realnorth.net\/blog\/gaia-ui-boot-to-gecko-b2g\/","title":{"rendered":"Gaia, la UI de Boot to Gecko (B2G)"},"content":{"rendered":"

Gaia, es la UI de Boot to Gecko, decir que esta en un estado de alpha seria algo muy optimista, Gaia mas que nada esta en un estado experimental, en donde se est\u00e1n probando y aplicando las mejoras que van apareciendo en WebAPI<\/a>, as\u00ed que tanto en lo visual como en lo estructural todo puede cambiar en mayor o menor medida.<\/p>\n

En Gaia todo es una WebApp y la primera de las WebApps que vemos es la Homescreen (ver imagen debajo), la Homescreen usa window.navigator.mozApps<\/em> para encontrar todas las WebApps instaladas y mostrar su correspondiente icono en la Homescreen, esto es en la teor\u00eda, actualmente el listado de apps que se ven en la Homescreen esta hardcodeado en el archivo ${GAIA}\/apps\/homescreen\/webapi+apps.js<\/em>, como dije al principio Gaia es una PoC (prueba de concepto) bastante experimental, por lo que en esta etapa del proyecto es posible encontrar cosas como estas.<\/p>\n

\"B2G
\nB2G Lockscreen, Homescreen y Dialer<\/em><\/p>\n

El resto de las aplicaciones est\u00e1n en un nivel muy b\u00e1sico de desarrollo, algunas est\u00e1n mas avanzadas y son mas funcionales que otras, por ejemplo ya es posible enviar SMSs usando B2G siempre y cuando lo estemos corriendo en un dispositivo, otra app que por obvias razones esta muy avanzada es el Browser, el resto de las apps est\u00e1n en sus comienzos, por lo que habr\u00e1 que esperar para ver su evoluci\u00f3n.<\/p>\n

\"B2G
\nB2G Browser<\/em><\/p>\n

Instalando Gaia<\/h3>\n

Podemos probar Gaia, flasehando una imagen de B2G en un dispositivo (Samsung Galaxy S2, Nexus S) he instalando Gaia encima, otra opci\u00f3n es hacer lo mismo pero corriendo todo en el emulador que trae el SDK de Android y por ultimo podemos correrlo dentro de un browser, esta ultima opci\u00f3n es la que escog\u00ed yo, el proceso para compilar Gaia, esta muy bien explicado en la Wiki de Mozilla<\/a>, antes de comenzar con el proceso de compilaci\u00f3n es recomendable chequear que cumplimos con todos lo pre requisitos<\/a> necesarios para compilar Firefox, la informaci\u00f3n esta disponible para varias distros en Mozilla Developer Network<\/a>, presten especial atenci\u00f3n a Autoconf<\/em> ya que Mozilla usa la versi\u00f3n 2.13 de Autoconf<\/em> para las tareas de compilaci\u00f3n y la mayor\u00eda de las distros viene con una versiones mas actualizada, por lo que casi con seguridad van a tener que hacer un downgrade.<\/p>\n

Web Apps en Gaia<\/h3>\n

El modelo de desarrollo de apps para B2G se basa en est\u00e1ndares Web, usando HTML, CSS y JavaScript, si han creado una aplicaci\u00f3n Web usando solo estas tecnolog\u00edas el proceso de portarlas a B2G es algo trivial, ademas se esta trabajando en un conjunto de APIs<\/a> para poder acceder a funciones “nativas” de los dispositivos y extender su funcionalidad, en la siguiente tabla pueden ver un listado de estas APIs.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n
Aplicaci\u00f3n\n<\/th>\n API\n<\/th>\n<\/tr>\n
Dialer\n<\/td>\n Telephony & Messaging API, Contacts API\n<\/td>\n<\/tr>\n
Battery\n<\/td>\n Battery API\n<\/td>\n<\/tr>\n
Address Book\n<\/td>\nContacts API\n<\/td>\n<\/tr>\n
SMS\n<\/td>\n Telephony & Messaging API<\/a>, Contacts API\n<\/td>\n<\/tr>\n
Camera\n<\/td>\n Camera API, Filesystem API\n<\/td>\n<\/tr>\n
Gallery\n<\/td>\n Filesystem API\n<\/td>\n<\/tr>\n
Settings\n<\/td>\n Device Status API, Settings API\n<\/td>\n<\/tr>\n
Games\n<\/td>\n Accelerometer API, Mouse Lock API, Vibration API\n<\/td>\n<\/tr>\n
Maps\n<\/td>\n Geolocation API, Contacts API\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Estructura de una WebApp<\/h4>\n

En el siguiente esquema pueden ver como esta organizada una peque\u00f1a WebApp, la estructura es la misma que utilizan las apps que viene precargadas con Gaia, as\u00ed que estimo sera la que ellos recomendaran en un futuro, si lo desean pueden organizar los archivos de la manera que les parezca mas c\u00f3moda lo \u00fanico que si o si tiene que estar presente en la WebApp es el archivo manifest.appcache<\/em>.<\/p>\n

\r\npaulo@kendra ~\/repos\/gaia\/apps\/subtego $ tree\r\n.\r\n\u251c\u2500\u2500 js\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 jlinq.js\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 lines.js\r\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 stations.js\r\n\u251c\u2500\u2500 manifest.appcache\r\n\u251c\u2500\u2500 manifest.webapp\r\n\u251c\u2500\u2500 style\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 icons\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2514\u2500\u2500 SubteGo.png\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 images\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 a.png\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 b.png\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 c.png\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 d.png\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 e.png\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 h.png\r\n\u2502   \u2502   \u251c\u2500\u2500 h.png\r\n... ... ... ...\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2514\u2500\u2500 pin.png\r\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 ui.css\r\n\u2514\u2500\u2500 subtego.html\r\n<\/pre>\n
manifest.webapp<\/h5>\n
Este archivo describe la WebApp, el nombre y el icono que se ver\u00e1 en la Homescreen como as\u00ed tambi\u00e9n el archivo de inicio de la WebApp.<\/p>\n
\r\n{\r\n  \"name\": \"SubteGo\",\r\n  \"description\": \"SubteGo for Gaia\",\r\n  \"launch_path\": \"\/subtego.html\",\r\n  \"developer\": {\r\n    \"name\": \"realnorth\",\r\n    \"url\": \"http:\/\/realnorth.net\"\r\n  },\r\n  \"icons\": {\r\n    \"120\": \"\/icons\/SubteGo.png\"\r\n  }\r\n}\r\n<\/pre>\n
Si siguen estos simples pasos y usan est\u00e1ndares web, migrar o crear una aplicaci\u00f3n “compatible” con B2G sera una tarea simple, si tienen dudas o quieren ahondar mas en el tema pueden aprender mucho mas viendo el c\u00f3digo de las WebApps que se incluyen en Gaia o consultar directamente el c\u00f3digo de una WebApp haciendo uso de la funci\u00f3n “View Page Source” (ver primera imagen debajo) que se incluye en varias apps en Gaia.<\/p>\n
\"B2G
\nB2G, funci\u00f3n “View Page Source”<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Gaia, es la UI de Boot to Gecko, decir que esta en un estado de alpha seria algo muy optimista, Gaia mas que nada esta en un estado experimental, en donde se est\u00e1n probando y aplicando las mejoras que van apareciendo en WebAPI, as\u00ed que tanto en lo visual como en lo estructural todo puede […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,9],"tags":[99,102,98],"class_list":["post-1494","post","type-post","status-publish","format-standard","hentry","category-development","category-ui","tag-b2g","tag-boot-to-gecko","tag-mozilla"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/1494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/comments?post=1494"}],"version-history":[{"count":42,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/1494\/revisions"}],"predecessor-version":[{"id":1540,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/1494\/revisions\/1540"}],"wp:attachment":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/media?parent=1494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/categories?post=1494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/tags?post=1494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}