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

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

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

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

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

Ejemplos Básicos

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

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

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

Ejemplos Básicos • Animación Simple (I) Página 10 21/08/2009 http://www.gkudos.com

Ejemplos Básicos Página 11 21/08/2009 http://www.gkudos.com

Ejemplos Básicos • Animación Simple (II) Página 12 21/08/2009 http://www.gkudos.com

Ejemplos Básicos • Arquitectura general de Aplicaciones Flash / Facebook Página 13 21/08/2009 http://www.gkudos.com

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

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

Ejemplos Básicos 1 4. Crear una nueva aplicación Página 16 21/08/2009 http://www.gkudos.com

Ejemplos Básicos 1 4. Crear una nueva aplicación Página 17 21/08/2009 http://www.gkudos.com

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

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

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

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

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

21/08/2009 http://www.gkudos.com

Ejemplos Básicos 1 • Resultado: • http://flashcamp.gkudos.com/facebo ok/Sample1.html Página 25 21/08/2009 http://www.gkudos.com

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

Ejemplos Básicos 3 Visualizando Fotos de Facebook • Archivo Sample3.mxml Página 29 21/08/2009 http://www.gkudos.com

Ejemplos Básicos 3 • Resultado http://flashcamp.gkudos.com/facebook/Sample3. html Página 31 21/08/2009 http://www.gkudos.com

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

Ejemplos Básicos 4 Página 33 21/08/2009 http://www.gkudos.com

Ejemplos Básicos 4 • Resultado • http://flashcamp.gkudos.com/facebo ok/Sample4.html Página 34 21/08/2009 http://www.gkudos.com

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

Ejemplos Básicos 5 • Ejemplo de CSS para Flex Página 37 21/08/2009 http://www.gkudos.com

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

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

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

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

Ejemplos Básicos 6 • Utilizando Geoplanet desde Flex: • Archivo samples/LocationLoader.as Página 45 21/08/2009 http://www.gkudos.com

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

Ejemplos Básicos 6 • Ejemplo de Respuesta Geoplanet Utilizando JSON Página 49 21/08/2009 http://www.gkudos.com

Ejemplos Básicos 6 • Ejemplo de Respuesta Geoplanet Utilizando XML Página 50 21/08/2009 http://www.gkudos.com

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

Ejemplos Básicos 6 • Resultado — http://flashcamp.gkudos.com/facebook/ Sample6.html Página 52 21/08/2009 http://www.gkudos.com

Ejemplos Avanzados Desarrollo de aplicaciones colaborativas utilizando Flex 3, Facebook, BlazeDs, Spring, Java...

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

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

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

Ejemplos Avanzados Arquitectura General

Publicación de Información en Facebook Página 61 21/08/2009 http://www.gkudos.com

Procesamiento de Información Geográfica Fotografías de Flickr y Panoramio

• Operaciones Espaciales Página 64 21/08/2009 http://www.gkudos.com

Referencias Enlaces seleccionados sobre Facebook, Flex, Spring, Java…

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

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

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

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

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

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

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

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

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

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

Gracias por su tiempo Más información en http://gkudos.com http://blog.gkudos.com

Kudos Flashcamp Bogota 2009

by guest218d0b

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Kudos Flashcamp Bogota 2009 Presentation Transcript