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


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


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…


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


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.


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


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


Página 10

21/08/2009

Ejemplos Básicos

• Animación Simple (I)


Página 11

21/08/2009

Ejemplos Básicos


Página 12

21/08/2009

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


Página 13

21/08/2009

Ejemplos Básicos• Arquitectura general de Aplicaciones

Flash / Facebook


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


Página 15

21/08/2009

Ejemplos Básicos 1

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


Página 16

21/08/2009

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


Página 17

21/08/2009

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


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”

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> 

<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>


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/


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):


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


Página 23

21/08/2009


Página 24

21/08/2009


Página 25

21/08/2009

Ejemplos Básicos 1

• Resultado:

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


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


Página 27

21/08/2009


Página 28

21/08/2009

Ejemplos Básicos 2

• Resultado:



Página 29

21/08/2009

Ejemplos Básicos 3

Visualizando Fotos de Facebook

• Archivo Sample3.mxml


Página 30

21/08/2009


Página 31

21/08/2009

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

Ejemplos Básicos 3


Página 32

21/08/2009

Ejemplos Básicos 4• Consultar Red Social del Usuario

— Archivo Sample4.mxml

— Cargar Lista de Amigos


Página 33

21/08/2009

Ejemplos Básicos 4


Página 34

21/08/2009

Ejemplos Básicos 4

• Resultado



Página 35

21/08/2009


Página 36

21/08/2009

Ejemplos Básicos 5

• Cambiando Propiedades Visuales con CSS

• Archivos: Sample5.mxml, styles.css

• Importar CSS


Página 37

21/08/2009

Ejemplos Básicos 5

• Ejemplo de CSS para Flex


Página 38

21/08/2009

Ejemplos Básicos 5

• Resultado:



Página 39

21/08/2009


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


Página 41

21/08/2009


Página 42

21/08/2009

Ejemplos Básicos 6• Archivo Sample6.mxml

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


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?


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:


Página 45

21/08/2009

Ejemplos Básicos 6

• Utilizando Geoplanet desde Flex:

• Archivo samples/LocationLoader.as


Página 46

21/08/2009

Ejemplos Básicos 6


Página 47

21/08/2009

Ejemplos Básicos 6


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


Página 49

21/08/2009

Ejemplos Básicos 6

• Ejemplo de Respuesta GeoplanetUtilizando JSON


Página 50

21/08/2009

Ejemplos Básicos 6

• Ejemplo de Respuesta GeoplanetUtilizando XML


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


Página 52

21/08/2009

Ejemplos Básicos 6

• Resultado

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


Página 53

21/08/2009

Ejemplos Avanzados

Desarrollo de aplicaciones colaborativas utilizando Flex 3,

Facebook, BlazeDs, Spring, Java...


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.


Página 56

21/08/2009

Ejemplos Avanzados

•Demo: Aplicación Colaborativa Basada en Flex

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


Página 57

21/08/2009


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


Página 60

21/08/2009


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


Página 63

21/08/2009


Página 64

21/08/2009

• Operaciones Espaciales

Referencias

Enlaces seleccionados sobre Facebook, Flex, Spring, Java…


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


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/


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/


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


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/


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


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


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


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


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

kudos flashcamp bogota 2009

Technology