Este documento presenta ejemplos para desarrollar aplicaciones colaborativas utilizando Flex 3, Facebook Connect, BlazeDS, Spring y Java. Explica cómo integrar aplicaciones Flex con Facebook, consultar información de perfiles de usuario, visualizar fotos y amigos. También muestra cómo obtener la ubicación de usuarios y visualizarla en un mapa usando Geoplanet y Google Maps. Finalmente, describe una aplicación colaborativa que integra estos componentes.
1. Desarrollo de aplicaciones
colaborativas utilizando Flex 3,
Facebook, BlazeDs, Spring y Java
Juan Carlos Méndez
Kudos Ltda. http://gkudos.com
2. Agenda
• Ejemplos Básicos
— Hola Mundo (1 y 2): Qué es flex? /
Animación Simple con flex
— Ejemplo 1: Integrando aplicaciones Flex
con Facebook
— Ejemplo 2: Consultando la Información
del Perfil de Usuario
Página 2
21/08/2009
http://www.gkudos.com
3. Agenda
• Ejemplos Básicos
— Ejemplo 3: Visualizando Fotos de
Facebook
— Ejemplo 4: Consultar Red Social del
Usuario
— Ejemplo 5: Cambiando Propiedades
Visuales con CSS
— Ejemplo 6: Visualizar Ubicación
Geográfica de los Usuarios
Página 3
21/08/2009
http://www.gkudos.com
4. Agenda
• Ejemplos Avanzados: Creando una
Aplicación Colaborativa utilizando
— Flex 3, Google Maps
— Facebook Connect
— BlazeDS, Java, Spring Framework, JMS,
Tomcat
— Postgresql / Postgis
— Google Translator, Flickr, Panoramio…
Página 4
21/08/2009
http://www.gkudos.com
5. Sobre el Autor
• Juan Carlos Méndez
• Ingeniero de Sistemas
• Especialista en Telemática y Negocios
por Internet
• Actualmente Arquitecto de Software
en Kudos Ltda.
http://www.gkudos.com
Página 5
21/08/2009
http://www.gkudos.com
7. Ejemplos Básicos
• Qué es Flex?
Qué
— Flex es un marco de trabajo
gratuito de código abierto para
crear aplicaciones web
interactivas utilizando el plugin
de Flash.
— Ofrece un lenguaje basado en
estándares moderno y un
modelo de programación que
admite los patrones de diseño
habituales.
Página 7
21/08/2009
http://www.gkudos.com
8. Ejemplos Básicos
• Qué es Flex?
Qué
— MXML es un lenguaje declarativo basado en
XML. Se utiliza para describir el aspecto y
comportamiento de la interfaz de usuario
— ActionScript 3, es un potente lenguaje de
programación orientado a objetos, se utiliza
para crear la lógica de clientes.
— Flex incorpora una biblioteca con más de 100
componentes de interfaz de usuario extensibles
para crear RIA’s (Rich Internet Applications
Página 8
21/08/2009
http://www.gkudos.com
9. Ejemplos Básicos
• Descarga de Código Fuente:
http://flashcamp.gkudos.com/facebo
ok/flash_camp_2009_source.rar
• Próximamente Más información en
http://blog.gkudos.com
Página 9
21/08/2009
http://www.gkudos.com
14. Ejemplos Básicos 1
• Autenticar aplicaciones Flex con
Facebook * Pasos a Seguir:
1. Registrarse en Facebook
2. Adicionar la aplicación para
desarrolladores:
http://www.facebook.com/developers/
* Tomado de “Create your first Facebook application with Flex”
Flex”
http://www.adobe.com/devnet/facebook/articles/build_your_first
_facebook_app_print.html
Página 14
21/08/2009
http://www.gkudos.com
15. Ejemplos Básicos 1
3. Autorizar el acceso de la aplicación
“facebook developers” al perfil del
facebook developers
usuario
Página 15
21/08/2009
http://www.gkudos.com
16. Ejemplos Básicos 1
4. Crear una nueva aplicación
Página 16
21/08/2009
http://www.gkudos.com
17. Ejemplos Básicos 1
4. Crear una nueva aplicación
Página 17
21/08/2009
http://www.gkudos.com
18. Ejemplos Básicos 1
5. En la opción “Basic” revisar los datos de
“Application id”, “API Key” y “Secret”
Página 18
21/08/2009
http://www.gkudos.com
19. Ejemplos Básicos 1
6. crear un xml con los datos del key de
facebook. Ejemplo api_key_secret.xml
api_key_secret.xml:
<?xml version="1.0" encoding="UTF-8" ?>
<xml> <!-- Facebook Keys -->
<api_key>YOUR API KEY
YOUR KEY</api_key>
<secret>YOUR SECRET KEY
YOUR KEY</secret>
</xml>
Página 19
21/08/2009
http://www.gkudos.com
20. Ejemplos Básicos 1
7. Descargar API de Facebook para Flex:
facebook-actionscript-api:
facebook-actionscript-api:
Actionscript 3.0 Client for the Facebook
Platform API
http://code.google.com/p/facebook-
actionscript-api/
Página 20
21/08/2009
http://www.gkudos.com
21. Ejemplos Básicos 1
8. Crear Proyecto Flex e Incluir Librería
de Facebook
(Facebook_library_v3.2_flex.swc):
Página 21
21/08/2009
http://www.gkudos.com
26. Ejemplos Básicos 2
• Consultando la Información del Perfil
de Usuario:
— Archivo Sample2.mxml
— Se consultan los álbumes de fotos que
tiene el usuario
Página 26
21/08/2009
http://www.gkudos.com
40. Ejemplos Básicos 6
Visualizar Ubicación Geográfica de los
Usuarios
• Objetivos:
— Consultar ubicación del usuario en facebook
— Obtener coordenada (georreferenciar) el lugar
donde se encuentra localizado el usuario
utilizando Yahoo Geoplanet
— Visualizar coordenadas utilizando Google Maps
Flash Api
Página 40
21/08/2009
http://www.gkudos.com
42. Ejemplos Básicos 6
• Archivo Sample6.mxml
• Obtener Información de Ubicación del
usuario desde Facebook
Página 42
21/08/2009
http://www.gkudos.com
43. Ejemplos Básicos 6
• Facebook Retorna el Nombre del Lugar
(Ejm: Bogotá, Colombia)
• Pregunta: Cómo obtener la coordenada
(latitud, longitud) del lugar para poder
visualizarlo en el mapa?
Página 43
21/08/2009
http://www.gkudos.com
44. Ejemplos Básicos 6
• Yahoo Geoplanet: Conjunto de servicios web para
georreferenciación de información
http://developer.yahoo.com/geo/geoplanet/
A partir del nombre de un lugar retorna su
coordenada (latitud y longitud). Ejemplo:
Página 44
21/08/2009
http://www.gkudos.com
48. Ejemplos Básicos 6
• Qué es JSON?
— Wikipedia: acrónimo de "JavaScript
J S
Object Notation", es un formato ligero
para el intercambio de datos. JSON es un
subconjunto de la notación literal de
objetos de JavaScript que no requiere el
uso de XML.
— En general, la transferencia de datos en
formato JSON consume menos espacio
que su XML equivalente
Página 48
21/08/2009
http://www.gkudos.com
50. Ejemplos Básicos 6
• Ejemplo de
Respuesta
Geoplanet
Utilizando
XML
Página 50
21/08/2009
http://www.gkudos.com
51. Ejemplos Básicos 6
• Integrar Google Maps en Flex:
— Ver archivo Sample6.mxml
— Ver “Visualización de Información de
Terremotos Utilizando Adobe Flex y
Google Maps” (FlexCamp 2008)
http://gkudos.com/web/guest/portfolio/d
emos/equake
Página 51
21/08/2009
http://www.gkudos.com
54. Ejemplos Avanzados
Desarrollo de aplicaciones
colaborativas utilizando Flex 3,
Facebook, BlazeDs, Spring, Java...
55. Ejemplos Avanzados
Objetivos:
• Crear una aplicación colaborativa en
tiempo real.
• Desarrollar una GUI (interfaz gráfica de
usuario) unificada que permita
interactuar con múltiples sistemas de
forma transparente para el usuario
final.
Página 55
21/08/2009
http://www.gkudos.com
66. Referencias
• Flex
— facebook-actionscript-api: Actionscript
3.0 Client for the Facebook Platform API
http://code.google.com/p/facebook-
actionscript-api/
— Create your first Facebook application
with Flex
http://www.adobe.com/devnet/faceboo
k/articles/build_your_first_facebook_app_
print.html
Página 66
21/08/2009
http://www.gkudos.com
67. Referencias
• Flex
— Deliver rich, social experiences on the
web
http://www.adobe.com/devnet/faceboo
k/
— Flex / Facebook Integration Samples
http://www.adobe.com/devnet/faceboo
k/samples/index.html
— Swfobject
http://code.google.com/p/swfobject/
Página 67
21/08/2009
http://www.gkudos.com
68. Referencias
• Flex
— Integración de Adobe Flex y Google Maps:
Aplicaciones Geográficas Enriquecidas para
Internet
http://gkudos.com/web/guest/portfolio/demos/
equake
— Flex 3 Language Reference
http://livedocs.adobe.com/flex/3/langref
— Tour de Flex (components, samples)
http://www.adobe.com/devnet/flex/tourdeflex/
Página 68
21/08/2009
http://www.gkudos.com
69. Referencias
• Java
— Developing Web Applications With
JavaServer Pages 2.0:
http://java.sun.com/developer/technical
Articles/javaserverpages/JSP20/
— Social Java, Random Friend Facebook
Application
http://socialjava.blogspot.com/2009/01/f
acebook-facebook-connect-example-
using.html
Página 69
21/08/2009
http://www.gkudos.com
70. Referencias
• BlazeDs
— BlazeDS
http://opensource.adobe.com/wiki/displ
ay/blazeds/BlazeDS/
— Google Maps Collaboration Using
Google’s New ActionScript API, Flex, and
BlazeDS
http://coenraets.org/blog/2008/05/googl
e-maps-collaboration-using-googles-new-
actionscript-api-and-blazeds/
Página 70
21/08/2009
http://www.gkudos.com
71. Referencias
• Spring Framework
— http://www.springsource.org/
— Spring BlazeDS Integration
http://www.springsource.org/spring-flex
— Building and Running the Spring BlazeDS
Integration Samples
http://static.springsource.org/spring-
flex/docs/1.0.x/reference/html/ch06.html
Página 71
21/08/2009
http://www.gkudos.com
72. Referencias
• Facebook
— Facebook API
http://wiki.developers.facebook.com/ind
ex.php/API
— Facebook Developers
http://developers.facebook.com/
— How Connect Authentication Works
http://wiki.developers.facebook.com/ind
ex.php/How_Connect_Authentication_W
orks
Página 72
21/08/2009
http://www.gkudos.com
73. Referencias
• Facebook
— Authorizing Applications
http://wiki.developers.facebook.com/index.
php/Authorizing_Applications
— Authenticating Users with Facebook Connect
http://wiki.developers.facebook.com/index.
php/Authenticating_Users_on_Facebook
— Anatomy of a Facebook Connect Site
http://wiki.developers.facebook.com/index.
php/Anatomy_of_a_Facebook_Connect_Site
Página 73
21/08/2009
http://www.gkudos.com
74. Referencias
• Facebook
— Facebook Connect: Connect/Setting Up
Your Site
http://wiki.developers.facebook.com/ind
ex.php/Trying_Out_Facebook_Connect
— The Run Around (Facebook Connect
Sample)
http://wiki.developers.facebook.com/ind
ex.php/The_Run_Around
Página 74
21/08/2009
http://www.gkudos.com
75. Referencias
• Otros
— Introducción a JMS (Java Message Service)
http://www.programacion.net/java/articulo/jms/
— Introduction to Spatial Data Management with
Postgis
http://www.mapbender.org/presentations/Spati
al_Data_Management_Arnulf_Christl/Spatial_Dat
a_Management_Arnulf_Christl.pdf
— Building a Spatial Database in PostgreSQL
http://www.slideshare.net/dersteppenwolf/buildi
ng-a-spatial-database-in-postgresql
Página 75
21/08/2009
http://www.gkudos.com
76. Gracias por su tiempo
Más información en
http://gkudos.com
http://blog.gkudos.com