USO DEL API DE REDES SOCIALES PARA LA CREACIÓN DE SERVICIOS DE VALOR AÑADIDO

1. USO DEL API DE REDES SOCIALES PARA LA CREACIÓN DE SERVICIOS DE VALOR AÑADIDO Carlos Fernández Durán Manuel Molina Menéndez Tutor: Miguel Gea Megías

2. FINALIDAD DEL PROYECTO

3. FINALIDAD DEL PROYECTO Estudio sobre el desarrollo de aplicaciones en redes sociales, orientadas a la creación de un servicio de valor añadido: la geolocalización social.

4. ÍNDICE • INTRODUCCIÓN • DESARROLLO APLICACIONES EN FACEBOOK • GEOLOCALIZACIÓN Y GOOGLE MAPS • APLICACIÓN DEMOSTRATIVA • CONCLUSIONES

5. ÍNDICE • INTRODUCCIÓN • DESARROLLO APLICACIONES EN FACEBOOK • GEOLOCALIZACIÓN Y GOOGLE MAPS • APLICACIÓN DEMOSTRATIVA • CONCLUSIONES

6. ÍNDICE • INTRODUCCIÓN 1.1 Objetivos planteados 1.2 Situación actual

7. 1. INTRODUCCIÓN 1.1 Objetivos planteados Entorno de programación bajo un modelo social, en concreto, Facebook.

8. 1. INTRODUCCIÓN 1.1 Objetivos planteados Estudio del desarrollo de aplicaciones sobre APIs y SDKs propias de Facebook.

9. 1. INTRODUCCIÓN 1.1 Objetivos planteados Desarrollo servicio valor añadido para esta comunidad: Geolocalización social Complementada con la API de Google Maps.

10. 1. INTRODUCCIÓN 1.2 Situación actual Web 2.0 y Redes Sociales El uso de internet Geolocalización Social

11. 1. INTRODUCCIÓN 1.2 Situación actual Web 2.0 y Redes Sociales El uso de internet Geolocalización Social

12. 1. INTRODUCCIÓN 1.2 Situación actual Web 2.0 y Redes Sociales El uso de internet Geolocalización Social

13. 1. INTRODUCCIÓN 1.2 Situación actual Web 2.0 y Redes Sociales El uso de internet Geolocalización Social

14. ÍNDICE • INTRODUCCIÓN • DESARROLLO APLICACIONES EN FACEBOOK • GEOLOCALIZACIÓN Y GOOGLE MAPS • APLICACIÓN DEMOSTRATIVA • CONCLUSIONES

15. ÍNDICE 2. DESARROLLO APLICACIONES EN FACEBOOK 2.1 Social Graph: el núcleo de Facebook 2.2 Graph API: Acceso a los datos 2.3 Herramientas y SDKs

16. 2. DESARROLLO APLICACIONES EN FACEBOOK 2.1 Social Graph: el núcleo de Facebook Red de elementos de facebook conectados entre relaciones. Elementos: • Usuarios • Páginas • Imágenes y Vídeos • Aplicaciones Relaciones: • Amigo • Me gusta • Etiqueta • Permisos

17. 2. DESARROLLO APLICACIONES EN FACEBOOK 2.2 Graph API: Acceso a los datos Interfaz de conexión entre una aplicación y los datos de facebook.

18. 2. DESARROLLO APLICACIONES EN FACEBOOK 2.2 Graph API: Acceso a los datos Consultas de datos https://graph.facebook.com/220439 { "id": "220439", "name": "Bret Taylor", "first_name": "Bret", "last_name": "Taylor", "link": "http://www.facebook.com/btaylor", "username": "btaylor", "gender": "male", "locale": "en_US" } Consultas sobre elementos (objetos) Todos los elementos en facebook tienen un ID único https://graph.facebook.com/ID

19. 2. DESARROLLO APLICACIONES EN FACEBOOK 2.2 Graph API: Acceso a los datos Consultas de datos https://graph.facebook.com/me/friends { "data": [ { "name": "Demo Geolocaliza", "id": "100001861697401" }, { "name": "Manu Molina", "id": "100001254034995" }, { "name": "Carlos Fern\u00e1ndez", "id": "100000306140880" }] } Consultas sobre elementos relacionados https://graph.facebook.com/ID/RELACION

20. 2. DESARROLLO APLICACIONES EN FACEBOOK 2.2 Graph API: Acceso a los datos Autenticación Facebook utiliza el protocolo oAuth 2.0 para la autenticación y autorización. Para que una aplicación acceda a los datos de un usuario necesita un token de acceso, previa confirmación del usuario.

21. 2. DESARROLLO APLICACIONES EN FACEBOOK 2.3 Herramientas y SDKs Sitios Web Aplicaciones Aplicaciones Móviles JavaScript SDK Android SDK PHP SDK iOS SDK Social Plugins

22. ÍNDICE • INTRODUCCIÓN • DESARROLLO APLICACIONES EN FACEBOOK • GEOLOCALIZACIÓN Y GOOGLE MAPS • APLICACIÓN DEMOSTRATIVA • CONCLUSIONES

23. ÍNDICE 3. GEOLOCALIZACIÓN Y GOOGLE MAPS 3.1 Geolocalización 3.2 Métodos de geolocalización 3.3 Utilidades de Google Maps 3.4 Desarrollo sobre API Google Maps

24. 3. GEOLOCALIZACIÓN Y GOOGLE MAPS 3.1 Geolocalización Determina el posicionamiento de un objeto en un sistema de coordenadas. En la actualidad además de en dispositivos móviles, podemos geolocalizar un equipo a través de su navegador html5: API de geolocalización W3C

25. 3. GEOLOCALIZACIÓN Y GOOGLE MAPS 3.2 Métodos de geolocalización Métodos ubicación del estándar W3C incluido en HTML5

26. 3. GEOLOCALIZACIÓN Y GOOGLE MAPS 3.2 Métodos de geolocalización Gelolocalización sin GPS: servidores de localización wifi Base de datos con información de ubicación de redes wifi, identificadas por la dirección MAC del punto de acceso (skyhook). Origen de los datos: • Recorrido en coche por zonas (streetview). • Auto actualización a través de cada conexión.

27. 3. GEOLOCALIZACIÓN Y GOOGLE MAPS 3.2 Métodos de geolocalización Gelolocalización sin GPS: servidores de localización wifi

28. 3. GEOLOCALIZACIÓN Y GOOGLE MAPS 3.2 Métodos de geolocalización W3C Geolocation: 1. Permiso del navegador para georreferenciar Navigatior.geolocation() 2. Obtiene las coordenadas de ubicación navigator.geolocation.getCurrentPosition()

29. 3. GEOLOCALIZACIÓN Y GOOGLE MAPS 3.3 Utilidades de Google Maps • Visualización y manipulación de mapas. • Superposición de marcas e información sobre los mapas. • Código libre. • Permite trabajar con coordenadas geográficas obtenidas en la geolocalización. • Forma intuitiva de representar ubicaciones.

30. 3. GEOLOCALIZACIÓN Y GOOGLE MAPS 3.4 Desarrollo sobre API Google Maps MAPS JAVASCRIPT API -Librería para la visualización de mapas en páginas web. -Rápido y eficiente para su ejecución en navegadores. -Proporciona utilidades para la manipulación de mapas y para añadir contenido al mismo.

31. 3. GEOLOCALIZACIÓN Y GOOGLE MAPS 3.4 Desarrollo sobre API Google Maps MAPS JAVASCRIPT API CARGA API EN NAVEGADOR DIBUJAR MAPA SUPERPONER MARCAS DE UBICACIÓN

32. ÍNDICE • INTRODUCCIÓN • DESARROLLO APLICACIONES EN FACEBOOK • GEOLOCALIZACIÓN Y GOOGLE MAPS • APLICACIÓN DEMOSTRATIVA • CONCLUSIONES

33. ÍNDICE 4. APLICACIÓN DEMOSTRATIVA 4.1 Objetivos y requisitos 4.2 Arquitectura del sistema 4.3 Objetos básicos 4.4 Funcionalidades

34. 4. APLICACIÓN DEMOSTRATIVA 4.1 Objetivos y requisitos Objetivo: Desarrollo de una aplicación integrada en facebookque haga uso de la geolocalización como valor añadido utilizando las APIs y herramientas estudiadas. Requisitos: • Integración en Facebook. • Georreferenciar ubicación del usuario. • Georreferenciar amigos del usuario. • Compartir ubicación a través de facebook. • Mostrar información contenida en facebook. • Mostrar todos los datos a través de mapas.

35. 4. APLICACIÓN DEMOSTRATIVA 4.2 Arquitectura del sistema Modelo cliente / servidor: (esquema) CLIENTE SERVIDOR

36. 4. APLICACIÓN DEMOSTRATIVA 4.3 Objetos básicos Checkin (Visitas): Representa una visita del usuario a una localización de Facebook Places. El usuario y la página están conectados por una relación denominada también checkin. Información contenida: • Usuarios que hacen el checkin o están etiquetados. • Nombre y geolocalización del lugar. • Aplicación con la que se hizo.

37. 4. APLICACIÓN DEMOSTRATIVA 4.3 Objetos básicos Marcas de posición: • Objeto con información de geolocalización. • Se muestra con un icono dibujado sobre el mapa en la ubicación que indica. • Icono personalizable. • Se vincula a una ventana de información extra en contenido html.

38. 4. APLICACIÓN DEMOSTRATIVA 4.4 Funcionalidades Solicitud de permisos / autenticación: Comprueba si un usuario está conectado a Facebook y conectado a la aplicación. FB.getLoginStatus(function(response) { if (response.authResponse) { // Está conectado, se inicia la aplicación } else { // No está logeado o conectado a la aplicación //Redirigir a inicio sesión/solicitud de permisos } });

39. 4. APLICACIÓN DEMOSTRATIVA 4.4 Funcionalidades Mi ubicación: • Obtención de la posición del usuario mediante la API de geolocallización W3C. • Añadir icono de usuario al mapa en su posición. • if(navigator.geolocation) { // Intenta la geolocalización W3C navigator.geolocation.getCurrentPosition(function(position){ //Crear y posicionar marca de usuario }); } • elseif (google.gears) { //Si no, intenta mediante googlegears geo.getCurrentPosition(function(position) { //Crear y posicionar marca de usuario }); } • else { //No se encuentra la ubicación del usuario }

40. 4. APLICACIÓN DEMOSTRATIVA 4.4 Funcionalidades Compartir mi ubicación: • El usuario elige entre los sitios registrados en Facebook places más cercanos. • Crea una entrada de visita (checkin) en Facebook con el lugar seleccionado. • functionviewPlaces() { • // llamada a Graph API con una búsqueda de lugares centrados en la ubicación actual • FB.api('search?type=place&center=' + initialLocation.lat() + ','+ initialLocation.lng(), function(response) { • //Crear marca para cada lugar obtenido }}); } • functionpublishCheck(placeID) { // POST a Graph API con los datos del checkin • FB.api('/me/checkins', 'post', { place : placeID, coordinates: { //lat y long}}); • }

41. 4. APLICACIÓN DEMOSTRATIVA 4.4 Funcionalidades Mis amigos: • Muestra marcas de la última ubicación chequeada por cada uno de nuestros amigos. • Cada marca muestra dónde, cuándo, con quién y con qué aplicación se realizó el checkin. • functiongetFriendsCheckins() { • // Obtenemos el listado de amigos • FB.api('me/friends', function(response) { • //Para cada amigo se crea una marca en el mapa de su último checkin • }); • }

42. 4. APLICACIÓN DEMOSTRATIVA 4.4 Funcionalidades Cercanos: • Igual que en Mis Amigos mostrando sólo las marcas más cercanas a la posición del usuario. • //Cálculo de la distancia • google.maps.geometry.spherical.computeDistanceBetween(initialLocation, posicion);

43. 4. APLICACIÓN DEMOSTRATIVA 4.4 Funcionalidades Historial: • Muestra marcas de todos los checkins realizados por el usuario. • Cada marca muestra dónde, cuándo, con quién y con qué aplicación se realizó el checkin. • functiongetMeCheckins() { • // Llamada a Graph API para obtener los checkins del usuario activo (me) • FB.api('me/checkins', function(response) { • //Para cada lugar se crea una marca. • }; • }

44. 4. APLICACIÓN DEMOSTRATIVA 4.4 Funcionalidades Invitar: • Permite enviar solicitudes de aplicación de Facebook a los amigos seleccionados. • functioninviteFriends() { • FB.ui({ • method : 'apprequests', • message: ‘xxx', • data : ‘xxx' • }); • }

45. ÍNDICE • INTRODUCCIÓN • DESARROLLO APLICACIONES EN FACEBOOK • GEOLOCALIZACIÓN Y GOOGLE MAPS • APLICACIÓN DEMOSTRATIVA • CONCLUSIONES

46. 5. CONCLUSIONES • Redes sociales • Rápida difusión de la información. • Gran “base de datos” en continua actualización. • Aplicaciones personalizadas. • Desarrollo sobre APIs y utilización de SDKs. • Reducción en tiempo de desarrollo. • Continuo crecimiento de las funcionalidades ofrecidas. • Geolocalización. • Crecimiento del uso de la georreferencia, extendiéndose a equipos de escritorio. • Múltiples aplicaciones personales y comerciales.