social apps workshop
DESCRIPTION
Workshop of social apps presented at the Palermo University in Buenos AiresTRANSCRIPT
• 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
HTML + XFBML
Facebook Javascript API Facebook PHP SDK
PHP
The FBML way
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?
