Workshop:

Integración de Social Media enAndroid

Appcircus Academy

Alberto Alonso Ruibalalberto.ruibal@mobialia.comT: @mobialia @albertoruibal

Quién soy

Ingeniero de Telecomunicación

System Manager

J2EE Developer

Desarrollador Android @ Mobialia

Mobialia Chess, Internet Chess Club App

Gasolineras España, Connect-4, Trivial, Slot Racing

Martin Varsavsky's RadioMe

Track my Followers for Twitter

Mi blog: http://www.alonsoruibal.com

Mi empresa: http://www.mobialia.com

Más recursos para aprender Android

Desarrollé la aplicación WikiPlaces como ejemplo para LabAndroid Málaga. Esta aplicación contiene varios ejemplos de cómo hacer muchas cosas comunes en Android

● Pantalla inicial con un Dashboard

● Crear pantallas de preferencias y obtener preferencias

● Usar la API de Google Maps API (incluyendo overlays) y la Location API para obtener la ubicación

● Usar servicios JSON externos

● Listas y adapters

● Lanzar aplicaciones externas con Intents

● Integración con AdMob para mostrar anuncios

http://www.mobialia.com/labandroid

¿Por qué integrar social media?

● Obtener datos de la red social● Conseguir visibilidad en redes sociales● Compartir datos de la aplicación● Simplificar el login para los usuarios

de tu aplicación● Obtener datos adicionales del usuario

Todos los ejemplos de esta presentaciónestán en una aplicación de código abierto:

http://www.mobialia.com/social_media_demo/

Aplicación de demostración

El botón de compartir

● Muy fácil de implementar● Lanzamos un intent de tipo “ACTION_SEND” que va a

ser recibido por las aplicaciones de social media

public void onShareChoose(View v) {

String shareText = ((EditText) findViewById(R.id.EditText)).getText().toString();

Intent intent = new Intent(android.content.Intent.ACTION_SEND);

intent.setType("text/plain");

intent.putExtra(android.content.Intent.EXTRA_TEXT, shareText);

startActivity(Intent.createChooser(intent, getResources().getText(R.string.share_choose)));

}

Intents en Android

Son un sistema en Android que podemos utilizar para lanzar actividades de la misma o de diferentes aplicaciones

Una actividad lanza un intent

El intent puede incluir datos “extra”

Otra actividad recibe el intent

Esto muesta el selector de actividad

Especificando el componente

Podemos lanzar una actividad específica

(en este ejemplo lanzamos la aplicación oficial de Twitter):

PackageManager packageManager = context.getPackageManager();

List<ResolveInfo> activityList = packageManager.queryIntentActivities(intent, 0);

for (ResolveInfo act : activityList) {

if (act.activityInfo.name.indexOf("com.twitter.") == 0) { // Check it if starts by...

ComponentName name = new ComponentName(act.activityInfo.applicationInfo.packageName, act.activityInfo.name);

intent.setComponent(name);

startActivity(intent);

...

Integración con Twitter

● En este ejemplo mostraremos el timeline del usuario

● Twitter utiliza autenticación OAUTH● La respuesta de la API de Twitter es JSON● Hay muchas opciones, yo prefiero signpost

http://code.google.com/p/oauth-signpost/

Añadiendo signpost

Hay tres versiones de la librería:● java.net.HttpUrlConnection● Apache Commons HTTP (usamos esta)● Jetty HTTP Client

Para integrarla es necesario descargar:● signpost-core-1.2.1.1.jar● signpost-commonshttp4-1.2.1.1.jar

Y añadirlos al build path de Eclipse

Obteniendo una API Key de Twitter (I)Registra tu aplicación en https://dev.twitter.com/apps

Obteniendo una API Key de Twitter (II)

Una vez registrado,puedes optener el “Consumer key” y el “Consumer secret” e insertarlos en el código:

OAuthConsumer oauthConsumer = new CommonsHttpOAuthConsumer(

// the consumer key of this app (replace this with yours)

"RFbRzd0BzYGZjrDd02ec5g" ,

// the consumer secret of this app (replace this with yours)

"wo9lKhzwpEfdXS2Z3dO2W092W9pMoJGrc5kUsBdA");

Interceptando la URL de callback

Interceptamos la URL de callback “socialmediademo://twitter” URL modificando el AndroidManifest.xml:<activity

android:name =".TwitterProviderActivity"

android:label ="@string/app_name">

<intent-filter>

<action android:name="android.intent.action.VIEW"></action>

<category android:name="android.intent.category.DEFAULT"></category>

<category android:name="android.intent.category.BROWSABLE"></category>

<data android:scheme="socialmediademo" android:host="twitter"></data>

</intent-filter>

</activity>

Autenticando al usuario

Ahora redirigimos al usuario a la URL de autenticación, especificando una URL de callback:public static String CALLBACK_URL = "socialmediademo://twitter";

//...

String authUrl = oauthProvider.retrieveRequestToken(oauthConsumer, CALLBACK_URL);

Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(authUrl));

// save token

accessToken = oauthConsumer.getToken();

tokenSecret = oauthConsumer.getTokenSecret();

intent.setFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP | Intent.FLAG_ACTIVITY_NO_HISTORY | Intent.FLAG_FROM_BACKGROUND | Intent.FLAG_ACTIVITY_NEW_TASK);

context.startActivity(intent);

Autenticación de Twitter

La página de Twitter se abre en el navegador del sistema

Este ejemplo es de sólo lectura (no se puede hacer follow o enviar mensajes)

Verificando el login del usuario

Entonces, en la actividad que recibe el callback (TwitterProviderActivity):

Uri uri = this.getIntent().getData();

String verifier = uri.getQueryParameter(OAuth.OAUTH_VERIFIER);

oauthConsumer.setTokenWithSecret(accessToken, tokenSecret);

oauthProvider.retrieveAccessToken(oauthConsumer, verifier);

// save new token

accessToken = oauthConsumer.getToken();

tokenSecret = oauthConsumer.getTokenSecret();

Obteniendo los mensajes del timeline

Ahora podemos lanzar peticiones contra los métodos de la API REST:

String url = "http://api.twitter.com/1/statuses/home_timeline.json?count=100";

HttpGet request = new HttpGet(url);

HttpClient httpClient = new DefaultHttpClient();

// sign the request

oauthConsumer.setTokenWithSecret(accessToken, tokenSecret);

oauthConsumer.sign(request);

HttpResponse response = httpClient.execute(request);

Interpretando la respuesta JSON

La API de Android integra un parser JSON

JSONArray array = new JSONArray(response);

for (int i = 0; i < array.length(); i++) {

JSONObject user = object.getJSONObject("user");

Update update = new Update();

update.setMessage(Html.fromHtml(object.getString("text")).toString());

update.setUserId(user.getString("screen_name"));

update.setUserName(user.getString("name"));

// ...

Finalmente mostramos el timeline

En el código fuente también se puede encontrar:● Adapter de lista para

las actualizaciones de estado

● Cache de imágenes

Integración con LinkedIn

● Muy similar a Twitter, también podemos usar libsignpost

● API XML/JSON● Un pequeña diferencias: se necesita

especificarle a signpost que LinkedIn utiliza OAUTH version 1.0a:

oauthProvider.setOAuth10a(true);

Obteniendo una API Key de LinkedIn

https://www.linkedin.com/secure/developer

Autenticación de LinkedIn

Funciona como la de Twitter, abriendo el navegador del sistema

También tenemos una URL de Callback

Llamando a la API de LinkedIn

Por defecto en XML, debemos enviarle el parámetro “&format=json”

String response = httpRequest("http://api.linkedin.com/v1/people/~/network/updates?count=100&format=json");

if (response != null) {

JSONObject object = new JSONObject(response);

//...

Resultado de LinkedIn

Muestra las actualizaciones de estado de tus contactos de LinkedIn

Integrando Google+

● Soporte OAuth 1.0a y 2.0 (experimental)● Podríamos usar google-api-java-client:

http://code.google.com/p/google-api-java-client/● En nuestro ejemplo utilizamos libsignpost con

OAUTH 1.0a, también es necesario especificárselo explícitamente a libsignpost

Limitaciones de la API de Google+

● Sólo lectura● No podemos acceder a los “Circles” del usuario● No se puede acceder al “Timeline”

Qué se puede hacer:● Obtener información de un usuario● Listar las “Actividades” de un usuario● Hacer búsquedas

Registrar un dominio para OAUTH 1

https://accounts.google.com/ManageDomains

Crear aplicación en Google API Console

Registramos la aplicación para obtener una “API key”

https://code.google.com/apis/console/

Configurando OAUTH para Google+

● Se crea el Consumer OAUTH con el dominiooauthConsumer = new CommonsHttpOAuthConsumer("mobialia.com",

"xxxxxxxxxxxxx");

● Al crear el proveedor OAUTH le pasamos como parámetro una URL para el “scope”

String URL = "https://www.googleapis.com/auth/plus.me";

oauthProvider = new CommonsHttpOAuthProvider(

"https://www.google.com/accounts/OAuthGetRequestToken?scope=" +

URLEncoder.encode(URL, "utf-8"),

"https://www.google.com/accounts/OAuthGetAccessToken",

"https://www.google.com/accounts/OAuthAuthorizeToken?hd=default");

Llamando a Google+

● La autenticación funciona igual que la de Twitter

● La key de la Google APIs console se le pasa en el momento de la llamada:

String response =

httpRequest("https://www.googleapis.com/plus/v1/ people/me/activities/public?key=AIzaSyBRloeHFF1G2_GafnnbhthvnYXljIi4oc4");

Resultado de Google+

En nuestro ejemplo mostramos las “Actividades” del usuario que se ha autenticado en Google+

Utilizar el social media para login

No hace falta pedirle todos los datos al usuario

Yo recomiendo Facebook:● Más usuarios● Más datos de cada usuario

Podemos obtener datos adicionales del usuario:● Género● Edad● ...

Integración con Facebook

● Utiliza OAUTH 2.0, libsignpost no lo soporta● Necesitamos el SDK de Facebook de Github:

https://github.com/facebook/facebook-android-sdk/

● Configuramos el SDK de Facebook como un proyecto “Librería” y añadimos una dependencia a esa librería

● Usamos la nueva Graph API

Obteniendo una API Key de Facebook (I)

https://www.facebook.com/developers/

Obteniendo una API Key de Facebook (II)

Aquí tenemos el identificador de la aplicación

Necesitamos especificarle un hash de la clave de nuestro certificado: keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

Preparando el objeto de Facebook

Y lanzando la autenticación de Facebook

final int ACTIVITY_CODE = 777;

final String appId = "219172308103195";

final String[] PERMISSIONS = new String[] { "user_birthday" };

Facebook fb = new Facebook(appId);

fb.authorize(this, PERMISSIONS, ACTIVITY_CODE, this);

// (Callback not detailed)

Login con Facebook

Abre una Actividad de Facebook solicitando los datos de autenticación

Obtener datos del usuario de Facebook

Una vez autenticados podemos lanzar peticiones, “/me” obtiene la información del usuario

String res = fb.request("/me");

JSONObject object = new JSONObject(res);

Log.d(TAG, object.getString("id"));

Log.d(TAG, object.getString("name"));

Log.d(TAG, object.getString("gender"));

Log.d(TAG, object.getString("birthday"));

Mejorando los anuncios con los datos del usuario

● Podemos especificarle a AdMob el sexo del usuario y su edad:

AdRequest adRequest = new AdRequest();

adRequest.setGender(Gender.FEMALE);

adRequest.setBirthday("19790129");

AdView adView = (AdView) this.findViewById(R.id.adView);

adView.loadAd(adRequest);

Resultado de FacebookLa aplicación de demo muestra los datos del usuario

El anuncio mostrado se puede con los datos del usuario

Podemos utilizar los datos del usuario en varias partes de la application

¡Cuidado con la LOPD si los guardamos en un servidor nuestro!

Más ideas

● Se puede utilizar una WebView para integrar Social Media

● Botón para hacer “Follow” integrando la API de Twitter

● Botón “Like” para facebook: necesita crear una página en Facebook

● “Foursquare” API integration

Redes sociales para gaming

Redes sociales específicas para compartir LeaderBoards, Achievements...● OpenFeint● ScoreLoop

Preguntas...

Gracias por vuestra atención!

Alberto Alonso Ruibalalberto.ruibal@mobialia.com

http://www.mobialia.comT: @mobialia @albertoruibal