martes, 6 de mayo de 2014

Crear una aplicación Facebook utilizando Parse.com


Crear una aplicación Facebook utilizando Parse.com
En este artículo se mostrará como crear una aplicación para Facebook, o comúnmente llamadas también app Facebook.
La aplicación que se va a utilizar es una página web con contenido en JavaScript.
Como hosting se utiliza Parse.com.
Los fuentes de la aplicación se encuentran basados en los ofrecidos por Parse.com como app inicial. Se busca que sean lo más sencillos posibles, dado que a partir de estos el usuario podrá avanzar.
Los códigos los puedes encontrar en Git Hub.

1.Requisitos

  • Cuenta de Facebook.
  • Darse de alta como desarrollador Facebook.
  • Crear una cuenta Parse.com.

2.Por donde inicio para crear la app en Facebook.

La página inicial para desarrolladores es https://developers.facebook.com. Solo que al principio no comprendía la totalidad de la información.
Para no reinventar la rueda, Facebook ha escrito muchos tutoriales, visitar este documento https://www.facebook.com/help/110919988996182
Enlazado al documento anterior se encuentran otros tutoriales que pueden ser leídos si el objetivo es hacer aplicaciones de juegos https://www.facebook.com/help/110919988996182
En cuanto a nuestro objetivo, hacer la app para Facebook, https://developers.facebook.com/docs/games/canvas este documento tiene la visión necesaria para comprender la plataforma, el cual habla sobre el Canvas, que es el elemento básico que Facebook provee para enlazar aplicaciones de terceros.

3.Donde alojar la app Facebook?

Si alojas la app en tu servidor, es posible que tengas que recurrir a un servidor que te permita direcciones del tipo seguras, es decir algo así como https://tuapp.com, porque este es uno de los problemas principales con los que me topé.
En muchos hostings, tendrás que tramitar un certificado para tu dominio, algo que se extiende mas allá de los límites de este tutorial.
Hasta el momento he encontrado dos hostings para aplicaciones web que proveen el servicio gratuito y que cuentan con los requisitos de poder contar con direcciones seguras.



Heroku https://www.heroku.com/
Parse https://www.parse.com



El tutorial tratará sobre Parse, Heroku quedará para que sea investigado por el usuario.
Parse, provee servicios que pueden ser utilizados por nuestra app:
  • Hosting.
  • Dominio seguro del tipo https://miaplicacion.parseapp.com.
  • Datos en la nube utilizando APIS.
  • Documentación para las APIS de datos y tutoriales.
  • Alta integración con Facebook dado que pertenece al mismo dueno.

4.Como trabajan las aplicaciones Facebook?

Facebook otorga un marco el cual contiene las aplicaciones, y llama a las aplicaciones externas utilizando el formato de iframes.
O sea que llama a otros programas usando iframes y pasando parámetros en formato POST.

5.Alojando la app en Parse.com

Luego de haber creado la cuenta en Parse (https://www.parse.com/)
Se debe crear una aplicación Parse, en la cual se podrán configurar distintos valores, como ser el dominio web de nuestra app en Parse.com.
Se puede leer este turorial para mayor información https://www.parse.com/docs/hosting_guide#webapp
Los códigos fuentes ejemplos, se encuentran basados en el tutorial que ofrece Parse.com.

1.Pasos resumidos

  1. Instalar el gestor de Parse en Linux $ curl -s https://www.parse.com/downloads/cloud_code/installer.sh | sudo /bin/bash
  2. Se genera el starter con $ parse generate express
  3. Basándome en el ejemplo de primera aplicación obtenido de Parse en el tutorial mencionado antes, se modifican los archivos archivo app.js y el archivo main.js dentro del directorio Cloud.

1.Modificaciones del archivo app.js

//-----------------------------CORTAR AQUI -----------------------
// These two lines are required to initialize Express in Cloud Code.
var express = require('express');
var app = express();
var indexPage = '/realindex.html'; // This can not be index.html because that one would be catched by the '/' rule below

// Global app configuration section
app.set('views', 'cloud/views'); // Specify the folder to find templates
app.set('view engine', 'ejs'); // Set the template engine
app.use(express.bodyParser()); // Middleware for reading request body

app.get('/version', function(req, res) {
res.send(req.query.message);
});

app.post('/version', function(req, res) {
res.redirect(indexPage);
});

app.listen();
//-----------------------------CORTAR AQUI -----------------------



2.Modificaciones del archivo main.js

//archivo main.js
require('cloud/app.js');
Parse.Cloud.define("hello", function(request, response) {
response.success("Hello world!");
});



6.Configurar la app en Facebook

Configurar los campos Display Name, Namespace para la aplicación.
Elegir el despliegue de la app en plataforma Facebook. Cargar la dirección web externa, tanto la dirección http y la https.
Para nuestro ejemplo se utilizan parametros POST según la versión.
Ejemplo:
http://tuapp.parseapp.com/version?v=1
https://tuapp.parseapp.com/version?v=1



7.Problemas encontrados

  • Contar con un servidor que nos permita una dirección https.
  • La página no ha sido encontrada dentro de Parse. Esto se da porque puede existir una dirección mal puesta desde la app en Facebook o porque no se han realizados las modificaciones al código para recibir parámetros POST.

8.Fuentes de información

Crear aplicación “Hello World” en Facebook con PHP http://www.cristalab.com/tutoriales/crear-aplicacion-hello-world-en-facebook-con-php-c73492l/
Desarrolladores Facebook https://developers.facebook.com/
Canvas https://developers.facebook.com/docs/games/canvas
Weapps en Parse.com https://www.parse.com/docs/hosting_guide#webapp
Hosting HTML Files for Facebook App https://www.parse.com/questions/hosting-html-files-for-facebook-app
JavaScript Guide Parse.com https://www.parse.com/docs/js_guide


1 comentario: