Mozilla hispano, tu comunidad en español de Mozilla

É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.

The following two tabs change content below.

• Bio
• Latest Posts

jorgev

AMO Product Manager at Mozilla

Jorge trabaja para el equipo de complementos de Mozilla, y se dedica a Mozilla Hispano y Mozilla Costa Rica en su tiempo libre. Actualmente está encargado del blog de Mozilla Hispano Labs.

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