kudos flashcamp bogota 2009

Desarrollo de aplicaciones colaborativas utilizando Flex 3,

Facebook, BlazeDs, Spring y Java

Juan Carlos Méndez

Kudos Ltda. http://gkudos.com

http://www.gkudos.com

Página 2

21/08/2009

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

http://www.gkudos.com

Página 3

21/08/2009

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

http://www.gkudos.com

Página 4

21/08/2009

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…

http://www.gkudos.com

Página 5

21/08/2009

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

Ejemplos Básicos

http://www.gkudos.com

Página 7

21/08/2009

Ejemplos Básicos• QuQuQuQuéééé es Flex?es Flex?es Flex?es Flex?

— Flex es un marco de trabajo gratuito de código abierto para crear aplicaciones webinteractivas 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.

http://www.gkudos.com

Página 8

21/08/2009

Ejemplos Básicos• QuQuQuQuéééé es Flex?es Flex?es Flex?es Flex?

— MXML MXML MXML MXML es un lenguaje declarativo basado en XML. Se utiliza para describir el aspecto y comportamiento de la interfaz de usuario

— ActionScriptActionScriptActionScriptActionScript 3333, 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

http://www.gkudos.com

Página 9

21/08/2009

Ejemplos Básicos

• Descarga de Código Fuente: http://flashcamp.gkudos.com/facebook/flash_camp_2009_source.rar

• Próximamente Más información en http://blog.gkudos.com

http://www.gkudos.com

Página 10

21/08/2009

Ejemplos Básicos

• Animación Simple (I)

http://www.gkudos.com

Página 11

21/08/2009

Ejemplos Básicos

http://www.gkudos.com

Página 12

21/08/2009

Ejemplos Básicos• Animación Simple (II)

http://www.gkudos.com

Página 13

21/08/2009

Ejemplos Básicos• Arquitectura general de Aplicaciones

Flash / Facebook

http://www.gkudos.com

Página 14

21/08/2009

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 Tomado de Tomado de Tomado de ““““Create your first Create your first Create your first Create your first FacebookFacebookFacebookFacebook application with Flexapplication with Flexapplication with Flexapplication with Flex””””http://www.adobe.com/devnet/facebook/articles/build_your_firsthttp://www.adobe.com/devnet/facebook/articles/build_your_firsthttp://www.adobe.com/devnet/facebook/articles/build_your_firsthttp://www.adobe.com/devnet/facebook/articles/build_your_first_facebook_app_print.html_facebook_app_print.html_facebook_app_print.html_facebook_app_print.html

http://www.gkudos.com

Página 15

21/08/2009

Ejemplos Básicos 1

3. Autorizar el acceso de la aplicación “facebookfacebookfacebookfacebook developersdevelopersdevelopersdevelopers” al perfil del usuario

http://www.gkudos.com

Página 16

21/08/2009

Ejemplos Básicos 14. Crear una nueva aplicación

http://www.gkudos.com

Página 17

21/08/2009

Ejemplos Básicos 14. Crear una nueva aplicación

http://www.gkudos.com

Página 18

21/08/2009

Ejemplos Básicos 1

5. En la opción “Basic” revisar los datos de “Application id”, “API Key” y “Secret”

http://www.gkudos.com

Página 19

21/08/2009

Ejemplos Básicos 1

6. crear un xml con los datos del key de facebook. Ejemplo api_key_secret.xmlapi_key_secret.xmlapi_key_secret.xmlapi_key_secret.xml:

<?xml version="1.0" encoding="UTF-8" ?>

<xml> <!-- FacebookFacebookFacebookFacebook KeysKeysKeysKeys -->

<api_key>YOUR API KEYYOUR API KEYYOUR API KEYYOUR API KEY</api_key>

<secret>YOUR SECRET KEYYOUR SECRET KEYYOUR SECRET KEYYOUR SECRET KEY</secret>

</xml>

http://www.gkudos.com

Página 20

21/08/2009

Ejemplos Básicos 1

7. Descargar API de Facebook para Flex:

facebookfacebookfacebookfacebook----actionscriptactionscriptactionscriptactionscript----apiapiapiapi::::

Actionscript 3.0 Client for the FacebookPlatform API

http://code.google.com/p/facebook-actionscript-api/

http://www.gkudos.com

Página 21

21/08/2009

Ejemplos Básicos 18. Crear Proyecto Flex e Incluir Librería de Facebook(Facebook_library_v3.2_flex.swc):

http://www.gkudos.com

Página 22

21/08/2009

Ejemplos Básicos 1

— Crear aplicación flex (Ver archivo Sample1.mxml)

— Cargar archivo XML

— Iniciar sesión en Facebook

http://www.gkudos.com

Página 23

21/08/2009

http://www.gkudos.com

Página 24

21/08/2009

http://www.gkudos.com

Página 25

21/08/2009

Ejemplos Básicos 1

• Resultado:

• http://flashcamp.gkudos.com/facebook/Sample1.html

http://www.gkudos.com

Página 26

21/08/2009

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

http://www.gkudos.com

Página 27

21/08/2009

http://www.gkudos.com

Página 28

21/08/2009

Ejemplos Básicos 2

• Resultado:

• http://flashcamp.gkudos.com/facebook/Sample2.html

http://www.gkudos.com

Página 29

21/08/2009

Ejemplos Básicos 3

Visualizando Fotos de Facebook

• Archivo Sample3.mxml

http://www.gkudos.com

Página 30

21/08/2009

http://www.gkudos.com

Página 31

21/08/2009

• Resultado http://flashcamp.gkudos.com/facebook/Sample3.html

Ejemplos Básicos 3

http://www.gkudos.com

Página 32

21/08/2009

Ejemplos Básicos 4• Consultar Red Social del Usuario

— Archivo Sample4.mxml

— Cargar Lista de Amigos

http://www.gkudos.com

Página 33

21/08/2009

Ejemplos Básicos 4

http://www.gkudos.com

Página 34

21/08/2009

Ejemplos Básicos 4

• Resultado

• http://flashcamp.gkudos.com/facebook/Sample4.html

http://www.gkudos.com

Página 35

21/08/2009

http://www.gkudos.com

Página 36

21/08/2009

Ejemplos Básicos 5

• Cambiando Propiedades Visuales con CSS

• Archivos: Sample5.mxml, styles.css

• Importar CSS

http://www.gkudos.com

Página 37

21/08/2009

Ejemplos Básicos 5

• Ejemplo de CSS para Flex

http://www.gkudos.com

Página 38

21/08/2009

Ejemplos Básicos 5

• Resultado:

• http://flashcamp.gkudos.com/facebook/Sample5.html

http://www.gkudos.com

Página 39

21/08/2009

http://www.gkudos.com

Página 40

21/08/2009

Ejemplos Básicos 6Visualizar 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 MapsFlash Api

http://www.gkudos.com

Página 41

21/08/2009

http://www.gkudos.com

Página 42

21/08/2009

Ejemplos Básicos 6• Archivo Sample6.mxml

• Obtener Información de Ubicación del usuario desde Facebook

http://www.gkudos.com

Página 43

21/08/2009

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?

http://www.gkudos.com

Página 44

21/08/2009

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:

http://www.gkudos.com

Página 45

21/08/2009

Ejemplos Básicos 6

• Utilizando Geoplanet desde Flex:

• Archivo samples/LocationLoader.as

http://www.gkudos.com

Página 46

21/08/2009

Ejemplos Básicos 6

http://www.gkudos.com

Página 47

21/08/2009

Ejemplos Básicos 6

http://www.gkudos.com

Página 48

21/08/2009

Ejemplos Básicos 6

• Qué es JSON? — Wikipedia: acrónimo de "JJJJavaSSSScriptOOOObject NNNNotation", es un formato ligero para el intercambio de datos. JSONJSONJSONJSON 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

http://www.gkudos.com

Página 49

21/08/2009

Ejemplos Básicos 6

• Ejemplo de Respuesta GeoplanetUtilizando JSON

http://www.gkudos.com

Página 50

21/08/2009

Ejemplos Básicos 6

• Ejemplo de Respuesta GeoplanetUtilizando XML

http://www.gkudos.com

Página 51

21/08/2009

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/demos/equake

http://www.gkudos.com

Página 52

21/08/2009

Ejemplos Básicos 6

• Resultado

— http://flashcamp.gkudos.com/facebook/Sample6.html

http://www.gkudos.com

Página 53

21/08/2009

Ejemplos Avanzados

Desarrollo de aplicaciones colaborativas utilizando Flex 3,

Facebook, BlazeDs, Spring, Java...

http://www.gkudos.com

Página 55

21/08/2009

Ejemplos Avanzados

Objetivos:Objetivos:Objetivos: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.

http://www.gkudos.com

Página 56

21/08/2009

Ejemplos Avanzados

•Demo: Aplicación Colaborativa Basada en Flex

http://flashcamp.gkudos.com/facebook/

http://www.gkudos.com

Página 57

21/08/2009

http://www.gkudos.com

Página 58

21/08/2009

Ejemplos Avanzados

• Componentes Utilizados en el Demo:

— Adobe Flex

— Facebook Connect

— BlazeDS, Java, Spring, Tomcat, JMS

— Postgresql, Postgis

— Google Translator, Flicrk, Panoramio

— Google Maps Flash API

Ejemplos Avanzados

Arquitectura General

http://www.gkudos.com

Página 60

21/08/2009

http://www.gkudos.com

Página 61

21/08/2009

Publicación de Información en Facebook

Procesamiento de Información Geográfica

Fotografías de Flickr y Panoramio

http://www.gkudos.com

Página 63

21/08/2009

http://www.gkudos.com

Página 64

21/08/2009

• Operaciones Espaciales

Referencias

Enlaces seleccionados sobre Facebook, Flex, Spring, Java…

http://www.gkudos.com

Página 66

21/08/2009

Referencias

• FlexFlexFlexFlex

— facebook-actionscript-api: Actionscript3.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/facebook/articles/build_your_first_facebook_app_print.html

http://www.gkudos.com

Página 67

21/08/2009

Referencias• FlexFlexFlexFlex

— Deliver rich, social experiences on the web http://www.adobe.com/devnet/facebook/

— Flex / Facebook Integration Sampleshttp://www.adobe.com/devnet/facebook/samples/index.html

— Swfobjecthttp://code.google.com/p/swfobject/

http://www.gkudos.com

Página 68

21/08/2009

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 Referencehttp://livedocs.adobe.com/flex/3/langref

— Tour de Flex (components, samples) http://www.adobe.com/devnet/flex/tourdeflex/

http://www.gkudos.com

Página 69

21/08/2009

Referencias

• Java

— Developing Web Applications With JavaServer Pages 2.0: http://java.sun.com/developer/technicalArticles/javaserverpages/JSP20/

— Social Java, Random Friend FacebookApplication http://socialjava.blogspot.com/2009/01/facebook-facebook-connect-example-using.html

http://www.gkudos.com

Página 70

21/08/2009

Referencias

• BlazeDs— BlazeDShttp://opensource.adobe.com/wiki/display/blazeds/BlazeDS/

— Google Maps Collaboration Using Google’s New ActionScript API, Flex, and BlazeDShttp://coenraets.org/blog/2008/05/google-maps-collaboration-using-googles-new-actionscript-api-and-blazeds/

http://www.gkudos.com

Página 71

21/08/2009

Referencias

• Spring FrameworkSpring FrameworkSpring FrameworkSpring Framework

— http://www.springsource.org/

— Spring BlazeDS Integrationhttp://www.springsource.org/spring-flex

— Building and Running the Spring BlazeDSIntegration Samples http://static.springsource.org/spring-flex/docs/1.0.x/reference/html/ch06.html

http://www.gkudos.com

Página 72

21/08/2009

Referencias• FacebookFacebookFacebookFacebook

— Facebook API http://wiki.developers.facebook.com/index.php/API

— Facebook Developershttp://developers.facebook.com/

— How Connect Authentication Works http://wiki.developers.facebook.com/index.php/How_Connect_Authentication_Works

http://www.gkudos.com

Página 73

21/08/2009

Referencias• FacebookFacebookFacebookFacebook

— Authorizing Applicationshttp://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

http://www.gkudos.com

Página 74

21/08/2009

Referencias

• FacebookFacebookFacebookFacebook

— Facebook Connect: Connect/Setting Up Your Sitehttp://wiki.developers.facebook.com/index.php/Trying_Out_Facebook_Connect

— The Run Around (Facebook ConnectSample) http://wiki.developers.facebook.com/index.php/The_Run_Around

http://www.gkudos.com

Página 75

21/08/2009

Referencias

• OtrosOtrosOtrosOtros

— Introducción a JMS (Java Message Service) http://www.programacion.net/java/articulo/jms/

— Introduction to Spatial Data Management withPostgishttp://www.mapbender.org/presentations/Spatial_Data_Management_Arnulf_Christl/Spatial_Data_Management_Arnulf_Christl.pdf

— Building a Spatial Database in PostgreSQLhttp://www.slideshare.net/dersteppenwolf/building-a-spatial-database-in-postgresql

Gracias por su tiempo

Más información en http://gkudos.com

http://blog.gkudos.com