Social Apps Development

by Matias Paterlinimatias@altodot.comwww.altodot.com

• CTO / Co-Founder Altodot | Social Marketing Technologies

• Former Software Architect & Social Media Specialist at Tweetboard

• Columnist at PulsoSocial.com• Former Founder & CTO at:

o VirtualInmobiliario.com o Cristones.com - Xristianos

me...

El origen...

A ellos ya los socializamos...

Introducción a lasSocial Apps

¿Qué son las Social Apps?

Las Social Apps son aplicaciones web que se

desarrollan sobre plataformas sociales, o conectándose con ellas.

Porqué Social Apps?

- Acceso a millones de usuarios

- Acceso a millones de dólares

- Nuevos desafíos

- Nuevas oportunidades de negocio

Qué tipo de social apps hay?

- Facebook Applications

- Twitter Applications

- Open Social Applications

- Other social platforms

Cuales son los riezgos?

- Aplicaciones Baneadas

- Problemas de escalabilidad

- Aplicaciones poco virales

- No poder monetizarlas

- Camian las reglas del juego

Cual es la tendencia en Social Apps?

- Open social casi desaparece

- Twitter apps siguen creciendo

- Facebook Fan Pages explotan

- Casual Applications desaparecen

- Grandes aplicaciones explotan

Es dificil desarrollar Social Apps?

- No es “rocket science”

- No es soplar y hacer botellas

- Hay que preveer los “bottle necks”

- Son multilenguaje

- Requieren mucho monitoreo

Cómo se hostea una Social App?

- Cualquier shared hosting :(

- Servidores dedicados :)

- Could computing :D(Amazon Services, RightScale,Joyent, GoGrid, Vurbia T.)

Como manejar problemas de

escalabilidad en Social Apps?

- Distribuir la carga en varios   servidores

- No utilizar Frameworks

- Usar MUCHO memcached

- Usar lenguajes de programación   “rápidos”

Cómo “viralizar” Social Apps?

- Explotando canales virales

- Empujando la app son publicidad

- Generando una masa mínima de   usuarios

- Buenas ideas!!

Cómo “monetizar” Social Apps?

- Virtual Goods

- Ad Networks

- Real Goods – ej. tickets de avion

- Development

- Publicidad segmentada

Cuánto dinero se puede ganar con

Social Apps?

- MUCHO

- Virtual Goods: Promedio 1 dólar  por usuario

- Ojo con la inversión!

- Millones de usuarios = millones de   hits 

Cuánto tiempo toma desarrollar una

Social App?

POCO...

Cuán seguido se actualizan las APIs de las “plataformas

sociales”?

- MUY SEGUIDO!

- Facebook: TODO EL TIEMPO!

- Twitter: CASI NUNCA!

- Open Social: Muy Poco!

Cuánto tiempo requiere mantenerse

actualizado?

- MUCHO

- Las aplicaciones se caen

- Metodos se deprecan

- Nuevos métodos aparecen

Questions?

Facebook Platform Basics

Do you PHP?

Sabias?

• Facebook almacena +500 M de personas

• Facebook creó u propio compiler de PHP

• Facebook modificó y mejoró Memcached

• Facebook usa Mysql Sharded Databases

• Facebook construído sobre PHP

Facebook Platform

Que tipo de aplicaciones hay?

• Mobile Applications

• Facebook Connect Applications

• Fan Pages Tab applications

• Canvas Applicationso Iframe ApplicationsoCanvas Applications

• Desktop Applications

Canvas Applications

The IFRAME way

Facebook

HTML + XFBML

Facebook Javascript API Facebook PHP SDK

PHP

The FBML way

Facebook

FBML + HTML

Facebook FBJS wrapper Facebook API PHP client

PHP

Facebook Markup Language

En cada Request:

• Facebook llama a nuestro servidor pidiendo código FBML + HTML

• Nuestro servidor ejecuta los scripts PHP y devuelve código FBML + HTML

• Facebook parsea el FBML generado y...:o - Arroja errores (en caso de haber)o - Reemplaza identidades en nombres de estilos,

variables y funciones de FBJSo - Genera el HTML de los controles FBML usados

XFBML

• Funciona sobre IFRAME apps o sitios con Facebook Connect

• Requiere el Facebook Javascript SDK• Algunos controles son los mismos de FBML• Nuevos controles• Social Plugins

FBJS:

Facebook Javascript

• Tiene la misma sintaxis de Javascript• Diferentes funciones: .style = .setStyle• Getters y setters: .location = .setLocation, • Nuevas

métodos: .setTextValue, .setInnerFBML• NO se puede usar Jquery, mootools,

prototype, etc.• Tiene su propia librería de efectos para

animar objetos del DOM

FBJS Effects

• Permite modificar valores de CSS a diferentes velocidades y delays.

• Muestra o esconde elmentos con efectos.

FBJS Listeners

• Se pueden attachear funciones a eventos de los elementos del DOM como clicks, overs, etc

• Es muy útil cuando se agrega contenido dinámico en FBML desde ajax, en donde facebook remueve todos los eventos asignados como atributos a los elementos.

Facebook Javascript SDK

• Es una librería standard de Javasctipt que conecta contra el Facebook Open Graph para conseguir información.

• Se encarga de analizar el DOM y reemplazar todos los tags de XFBML por HTML estandard

• Puede usarse en sitios con Facebook Connect o aplicaciones en Iframe

• Puede coexistir con Javascript frameworks como Jquery, mootools, prototype.

• Tiene una serie de métodos para autenticarse, así como para obtener información de los usuarios y ejecutar métodos del Facebook API

Facebook PHP SDK

• Es una librería PHP estandard que se contecta contra los servidores de Open Graph.

• Viene a reemplazar al PHP REST CLIENT que se conectaba contra los servidores REST de Facebook.

• Contiene una serie de métodos para obtener información de los usuarios, para postear contenido, o para ejecutar funciones del Facebook API.

• Puede ejecutar múltiples métodos en modo batch.

FQL:

Facebook Query Language

• Es un conjunto de tablas y un lenguaje de query scripting para consumir la información de esas tablas

• Las tablas solo pueden ser leidas.• Pertenece a los métodos del Facebook REST

server• Solo se puede filtrar por las columnas indexadas• No se pueden usar joins• No se puede usar el operador “NOT” • Se puede usar el operador IN en los filtros.

FBML or IFRAME?

• Facebook va a restringir las apps a solo iframe en dic.• Iframes tiene problemas de session• FBML require conocer los controles• FBML es mas estricto, no se pueden cometer errores o

Facebook mostrará una lista de errores por pantalla• En FBML, uno está limitado a las funciones que nos ofrece

FBJS, mientras que en Iframe somos libres de usar cualquier librería Javascript

• Las aplicaciones en FBML tiene problemas de latencia. Si el script de nuestros servidores tarda mas de 12 en devolver el contenido facebook “droppea” el request y muestra un error por pantalla

Graph API

Facebook Graph API es la nueva representación de la información en Facebook, ordenada por ids unicos, y con conecciones entre objetos del social

graph

• Cada objeto tiene un id único y una representación de su objeto en formato JSON

• Hay información pública e información a la que podemos acceder pasando un access token autorizado.

• Algunos objetos poseen “conecciones” que nos llevan a subelementos del objeto padre. Ejemplo Album → Fotos

• Faltan MUCHOS metodos del REST API todavía.

https://graph.facebook.com/me

{"id": "587412625","first_name": "Mat\u00edas","last_name": "Paterlini","link": "http://www.facebook.com/paterlinimatias","about": "Founder & Chief Technology Officer at Altodot | Social Gaming","birthday": "07/02/1983","gender": "male"}

Scalability Issues

• Evitar ORMs, o en caso de usuarlos no debemos traer todo el contenido del objeto por defecto, sino ir pidiendo a medida que necesitemos información

 • Utilizar css sprites para evitar la carga de

multiples imagenes.

• Desarrollar las aplicaciones "ajax friendly"

Facebook ConnectApplications

???

Fan Pages TabApplications

Social Plugins

Questions?

BREAK

Facebook Platform in Deep

Programando una aplicación en FBML

Paso 1: Elegir Hosting

Paso 2: Configurar la

aplicación

Paso 3:Programando nuestro primer "Hola Mundo!"

index.php

Paso 4:Autorizando una

aplicación utilizando el Facebook PHP

SDK

Descargamos el PHP SDK

http://github.com/facebook/php-sdk/

y lo guardamos en el root como facebook.php

config.php

init.php

index.php

Entramos al Canvas URL

Aceptamos los permisos y...

index.php

Obtenemos el objeto "/me" del Graph API

Paso 5:Accediendo a la información de 

mis amigos

index.php

Obtenemos la conexión "friends" del objeto "/me" del Graph API

Paso 6:Requiriendo permisos

extendidos

init.php

Nuestros nuevos permisos

Accediendoa los álbums y fotos

del usuario

index.php

El resultado será...

Paso 7:Utilizando controles

de FBML

index.php

El FBML transformado en HTML resultará en:

Paso 8:Agregando client side

scripting con FBJS

index.php

Al ejecutarlo...

Al clickearlo

Utilizando Facebook Dialogs con FBJS

index.php

Al ejecutarlo...

Realizando llamadas AJAX con FBJS

index.php

Al ejecutarlo...

Al clickear en el boton...

Agregando la aplicación a un Fan Page Tab 

Creamos el file tab.php

Configuramos la app para aceptar Tabs

Accedemos al Application Profile

Clickeamos en "Add to my page"

Elegimos la Fan Page a agregar el Tab

Vamos a la Fan Page!

Aquí veremos el FBML generado por tab.php

Al clickear en "Cambiar mi status":

Luego de publicarla... vemos en nuestro perfil el update.

Creando una aplicación en Iframe

Modificando la configuración...

Encuentre la diferencia!

Encuentre la diferencia!

Creamos nuestro Hola Mundo Script en index.php

Y la ejecución resulta en:

Consultando el Graph API con Javascript

index.php

Esto resultará en:

Questions?

Twitter API

Questions?

Thanks!

matias@altodot.com

@paterlinimatias

blog.altodot.com

Questions?

Become a dotter: jobs@altodot.com