Transforma tu página de Facebook en una aplicación móvil de Firefox OS
1 abril, 2015 5:42 por jorgev
desarrollo facebook firefox OS labs
Ésta es una traducción del artículo original en el blog de Mozilla Hacks. Traducción por Sergio Carlavilla Delgado.
Si eres un negocio o el propietario de una página comunitaria, ¿qué sería mejor que aumentar la accesibilidad a tú página que ofreciendo una aplicación móvil independiente?
Apptuter es un framework de código abierto que te ayuda a lograrlo, con un mínimo de conocimientos sobre programación y unos sencillos pasos a seguir serás capaz de construir tu propia aplicación. El framework soporta actualmente páginas de Facebook como fuente de contenido y es capaz de producir aplicaciones para las plataformas Firefox OS y Android.
Cómo funciona
Hagamos una prueba sobre cómo sería el funcionamiento. En nuestro ejemplo generaremos una aplicación independiente usando la página de Facebook de Mozilla como fuente de contenido.
Clonar el repositorio
El primer paso sería descargar o clonar el directorio de Apptuter-Firefox desde el repositorio de Apptuter:
git clone https://github.com/egirna/apptuter.git
La estructura del directorio debería tener este aspecto:
Obtener el identificador numérico de Facebook
Ahora tendremos que obtener el identificador numérico de la página de Facebook. Si has asignado un nombre amistoso a la página, el identificador no será visible a partir de la URL de la página, en cuyo caso tendremos que visitar la siguiente dirección URL para obtenerlo https://graph.facebook.com/nombredepagina
En nuestro ejemplo sería: https://graph.facebook.com/mozilla
El identificador de la página será visible en la primera línea de los datos devueltos.
Crear una aplicación de Facebook
El siguiente paso es la creación de una aplicación de Facebook: serás capaz de obtener el ACCESS TOKEN de la aplicación mediante la combinación del APP ID y el APP SECRET de modo que la dirección URL solicitada debe de estar de la siguiente forma: http://graph.facebook.com/endpoint?key=value&access_token=app_id|app_secret
Al solicitar la información de la página (Info.js) es donde vamos a definir estos parámetros y reemplazar el PageID con el identificador, que se puede encontrar en /Apptuter-Firefox/js.
var Main = function () {
this.pageName = ‘pageID’;
this.name = null;
this.category = null;
this.description = null;
this.photoArray = null;
this.postArray = null;
this.infoArray = [];
this.accessToken = 'AppID|AppSecret';
this.pictureUrl = null;
this.paging = 'https://graph.facebook.com/' + this.pageName + '/posts?limit=20&access_token='+this.accessToken;
this.pagingNext = 'https://graph.facebook.com/' + this.pageName + '/posts?limit=20&access_token='+this.accessToken;
}
Definamos nuestras nuevas propiedades de la aplicación en el fichero manifest.webapp que se encuentra en el directorio raíz:
{
"name": "Mozilla App",
"description": "This is an example app of apptuter framework",
"launch_path": "/Shared/index.html",
"icons": {
"32": "/images/app_icon_32.png",
"60": "/images/app_icon_60.png",
"90": "/images/app_icon_90.png",
"120": "/images/app_icon_120.png",
"128": "/images/app_icon_128.png",
"256": "/images/app_icon_256.png"
},
"chrome": {
"navigation": true
},
"version": "1.0.1",
"developer": {
"name": "Egirna Technologies Limited",
"url": "http://www.apptuter.org"
},
"orientation": [
"portrait"
],
"default_locale": "en"
}
Apariencia
Lo único que falta es definir la apariencia. Desde el repositorio, ve a /Apptuter-Firefox/images y sustituye las imágenes por defecto con las de nuestro logo de ejemplo que coincidan en las dimensiones y el nombre.
¡Éxito!
¡Y hemos terminado! Pongamos a prueba de que manera se vería en el simulador de Firefox OS.
Eres responsable en última instancia de usar este software en conformidad con los términos de servicio y el acuerdo de licencia con el usuario final de Facebook, Google y Mozilla. Esto se aplica a cualquier servicio con el que este software puede integrarse.
jorgev
Latest posts by jorgev (see all)
- Los 9 errores más comunes al usar CSS Grid - 11/11/2018
- Una caricatura sobre el DNS a través de HTTPS - 22/09/2018
- Utilizando dispositivos 2FA con la API WebAuthn - 13/05/2018
