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
- Instalar el gestor de Parse en Linux $
curl -s https://www.parse.com/downloads/cloud_code/installer.sh | sudo/bin/bash Se genera el startercon$parse generate express
Basándome en el ejemplo de primera aplicación obtenido de Parse en el tutorial mencionado antes, se modifican los archivosarchivo app.js y el archivo main.jsdentro 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.jsrequire('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 |
Tấm lưới tựa lưng
ResponderEliminarThớt uốn dẻo đa năng
Máy làm kem Sony
may xay da da nang osaka