Kudos Flashcamp Bogota 2009
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here



  • <b>[Comment posted from</b> http://blog.gkudos.com/2009/08/22/desarrollo-de-aplicaciones-colaborativas-utilizando-flex-3-facebook-blazeds-spring-y-java/]
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,491
On Slideshare
2,051
From Embeds
440
Number of Embeds
9

Actions

Shares
Downloads
40
Comments
1
Likes
1

Embeds 440

http://blog.gkudos.com 344
http://gkudos.com 59
http://flashcamp.gkudos.com 13
http://www.gkudos.com 7
http://localhost 6
http://www.slideshare.net 5
http://192.168.1.136 3
http://translate.googleusercontent.com 2
http://portal2.gkudos.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 6. Ejemplos Básicos
  • 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
  • 10. Ejemplos Básicos • Animación Simple (I) Página 10 21/08/2009 http://www.gkudos.com
  • 11. Ejemplos Básicos Página 11 21/08/2009 http://www.gkudos.com
  • 12. Ejemplos Básicos • Animación Simple (II) Página 12 21/08/2009 http://www.gkudos.com
  • 13. Ejemplos Básicos • Arquitectura general de Aplicaciones Flash / Facebook Página 13 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
  • 22. Ejemplos Básicos 1 — Crear aplicación flex (Ver archivo Sample1.mxml) — Cargar archivo XML — Iniciar sesión en Facebook Página 22 21/08/2009 http://www.gkudos.com
  • 23. Página 23 21/08/2009 http://www.gkudos.com
  • 24. Página 24 21/08/2009 http://www.gkudos.com
  • 25. Ejemplos Básicos 1 • Resultado: • http://flashcamp.gkudos.com/facebo ok/Sample1.html Página 25 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
  • 27. Página 27 21/08/2009 http://www.gkudos.com
  • 28. Ejemplos Básicos 2 • Resultado: • http://flashcamp.gkudos.com/facebo ok/Sample2.html Página 28 21/08/2009 http://www.gkudos.com
  • 29. Ejemplos Básicos 3 Visualizando Fotos de Facebook • Archivo Sample3.mxml Página 29 21/08/2009 http://www.gkudos.com
  • 30. Página 30 21/08/2009 http://www.gkudos.com
  • 31. Ejemplos Básicos 3 • Resultado http://flashcamp.gkudos.com/facebook/Sample3. html Página 31 21/08/2009 http://www.gkudos.com
  • 32. Ejemplos Básicos 4 • Consultar Red Social del Usuario — Archivo Sample4.mxml — Cargar Lista de Amigos Página 32 21/08/2009 http://www.gkudos.com
  • 33. Ejemplos Básicos 4 Página 33 21/08/2009 http://www.gkudos.com
  • 34. Ejemplos Básicos 4 • Resultado • http://flashcamp.gkudos.com/facebo ok/Sample4.html Página 34 21/08/2009 http://www.gkudos.com
  • 35. Página 35 21/08/2009 http://www.gkudos.com
  • 36. Ejemplos Básicos 5 • Cambiando Propiedades Visuales con CSS • Archivos: Sample5.mxml, styles.css • Importar CSS Página 36 21/08/2009 http://www.gkudos.com
  • 37. Ejemplos Básicos 5 • Ejemplo de CSS para Flex Página 37 21/08/2009 http://www.gkudos.com
  • 38. Ejemplos Básicos 5 • Resultado: • http://flashcamp.gkudos.com/facebo ok/Sample5.html Página 38 21/08/2009 http://www.gkudos.com
  • 39. Página 39 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
  • 41. Página 41 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
  • 45. Ejemplos Básicos 6 • Utilizando Geoplanet desde Flex: • Archivo samples/LocationLoader.as Página 45 21/08/2009 http://www.gkudos.com
  • 46. Ejemplos Básicos 6 Página 46 21/08/2009 http://www.gkudos.com
  • 47. Ejemplos Básicos 6 Página 47 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
  • 49. Ejemplos Básicos 6 • Ejemplo de Respuesta Geoplanet Utilizando JSON Página 49 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
  • 52. Ejemplos Básicos 6 • Resultado — http://flashcamp.gkudos.com/facebook/ Sample6.html Página 52 21/08/2009 http://www.gkudos.com
  • 53. Página 53 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
  • 56. Ejemplos Avanzados • Demo: Aplicación Colaborativa Basada en Flex http://flashcamp.gkudos.com/facebo ok/ Página 56 21/08/2009 http://www.gkudos.com
  • 57. Página 57 21/08/2009 http://www.gkudos.com
  • 58. 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 Página 58 21/08/2009 http://www.gkudos.com
  • 59. Ejemplos Avanzados Arquitectura General
  • 60. Página 60 21/08/2009 http://www.gkudos.com
  • 61. Publicación de Información en Facebook Página 61 21/08/2009 http://www.gkudos.com
  • 62. Procesamiento de Información Geográfica Fotografías de Flickr y Panoramio
  • 63. Página 63 21/08/2009 http://www.gkudos.com
  • 64. • Operaciones Espaciales Página 64 21/08/2009 http://www.gkudos.com
  • 65. Referencias Enlaces seleccionados sobre Facebook, Flex, Spring, Java…
  • 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