1 / 47

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

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. FINALIDAD DEL PROYECTO. FINALIDAD DEL PROYECTO.

nell-cantu
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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.

More Related