Kudos Flashcamp Bogota 2009
-
Upload
kudos-ltda -
Category
Technology
-
view
1.266 -
download
1
description
Transcript of 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