Integrando aplicações Android com o Facebook
Veja neste artigo como fazer a integração da sua aplicação Android com o Facebook.
Com a febre das redes sociais, fica evidente que algumas aplicações (as que estão abertas ao público principalmente) necessitam de uma integração com as principais redes sociais do momento. Atualmente, quem está no auge é o Facebook, devido a isso, iremos fazer a integração da nossa aplicação com essa rede social.
Registrando a nossa aplicação
Primeiramente, para conseguir fazer a integração de sua app com o Facebook, é preciso possuir uma conta na rede social. Tendo uma conta no Facebook, o que é preciso agora é registrar nossa aplicação no mesmo. Para fazer isso, teremos que acessar o Facebook Developer. Faça o login com sua conta do Facebook (o ideal é ser uma conta que você não utilize para uso pessoal e sim para desenvolvimento de sistemas), e após isso clique em Register as a Developer, assim como mostra a Figura 1.
Após isso, aparecerá uma tela como mostra a Figura 2 marque a opção “I accept the Facebook Platform Policy and the Facebook Privacy Policy” e em seguida clique em Continuar.
Agora digite o número do seu celular para que o Facebook possa enviar um SMS para que possamos continuar o processo de registro da aplicação, esse procedimento é usado como procedimento de segurança para o Facebook. Após digitar o número do telefone, clique em continuar, assim como mostra a Figura 3.
Após isso, você receberá um SMS com um código para confirmação, digite-o e clique em continuar. Agora você colocará a linguagem na qual estará desenvolvendo a aplicação, no nosso caso iremos marcar a opção Android, assim como mostra a Figura 4.
Após isso aparecerá uma tela confirmando o procedimento, clique em Done para continuar. Após isso você será direcionado para a página principal, onde aparecerá à opção Criar novo aplicativo, após clicar nessa opção aparecerá uma tela como mostra a Figura 5.
Preencha as informações solicitadas de acordo com seu software e clique em Continuar.
Agora teremos que preencher um campo chamado Key Hashes, nessa nova tela que aparecerá, esse campo é justamente a assinatura do nosso projeto. Teremos que gerar ele a partir do arquivo *.keystore. Para isso teremos que baixar o OpenSSL que serve para gerar essa assinatura. Após baixar, descompacte o zip na pasta C:. Feito isso, teremos que gerar o Key Hashes. Primeiramente, abra o prompt de comando e digite o comando da Listagem 1 para adicionar o diretório do OpenSSL no path.
set PATH=%PATH%;C:\openssl-0.9.8k_WIN32\binListagem 1. Adicionando o diretório do OpenSSL ao path
Para gerar a chave, digite esse comando da Listagem 2:
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore |
openssl sha1 -binary | openssl base64Listagem 2. Gerando a chave
Copie a hash que foi gerada, cole no campo Android Key Hash e conclua o cadastro da aplicação no Facebook. As configurações deverão ficar parecidas com as da Figura 6.
Nota: Copie o AppID e o App Secret, pois iremos precisar deles na hora da implementação do código fonte, o app ID será responsável por identificar sua aplicação.
Download da API do Facebook para o Android
Após registrar a nossa aplicação junto ao Facebook, iremos agora acessar a página https://github.com/facebook/facebook-android-sdk/ e iremos fazer o download da API, assim como mostra a Figura 7.
Após clicar em ZIP, irá aparecer uma página para realizar o download. Baixe esse arquivo e salve no local que desejar dentro do seu computador, esse projeto que foi baixado será integrado ao que iremos desenvolver mais adiante.
Importando o projeto do facebook SDK
Iremos agora criar, no Eclipse, um novo projeto. Clique em File > New > AndroidProject, o nome do projeto será facebooksdk (coloque esse nome no projeto) e selecione a opção Create project from existing source. Clique em Browser e escolha o diretório onde você descompactou a API do Facebook, que foi baixada, escolha a pasta facebook dentro do projeto e clique em OK. Feito isso clique em Finish.
Após isso, teremos que importar a biblioteca android-support-v4.jar, ela está na pasta libs do projeto do Facebook que foi baixado para seu computador. Para importamos essa biblioteca, teremos que adicioná-la ao Build Path. Para fazer isso, basta clicar com o botão direito sobre o projeto e selecionar Build Path > Configure Build Path. Na janela que for exibida, na aba Libraries, clique no botão Add External JARs, vá até o diretório onde você salvou o projeto do Facebook (projeto que foi feito download). Dentro da pasta libs estará o arquivo .jar, clique nele e em seguida em Abrir.
Nota: Se o projeto apresentar erros em relação a anotações @Override, você pode removê-las.
Criando o nosso projeto
Para começarmos, teremos que criar um novo projeto no Eclipse. Clique em File > New > AndroidProject e coloque o nome do projeto como quiser, neste exemplo irá se chamar DevmediaFacebook. Após termos criado o nosso projeto, teremos que adicionar a referência do projeto facebooksdk ao nosso projeto, para isso, clique com o botão direito sobre o projeto e selecione Properties.
No lado esquerdo, selecione Android e na parte inferior adicione a referência ao projeto clicando em Add... e selecionando o facebooksdk, assim como mostra a Figura 8.
O projeto que iremos fazer é bem simples, ele irá fazer login no Facebook ao iniciar e teremos como função atualizar nossos status com apenas texto e também poderemos fazer uma postagem com texto e imagem.
Implementando o código fonte da aplicação
Antes de continuarmos, teremos que declarar no AndroidManifest.xml a permissão de internet, para isso basta deixar o XML igual ao da Listagem 3.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="devmedia.artigo.weslley"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk android:minSdkVersion="10" />
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name" >
<activity
android:name=".DevmediaFacebookActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Listagem 3. XML responsável por declarar permissão de acesso à internet
Criando a tela do aplicativo
Iremos agora desenhar nossa tela principal, para isso teremos que abrir o nosso main.xml e teremos que deixá-lo como o da Figura 9.
Para fazer uma tela como essa, basta deixar o nosso main.xml como a Listagem 4, esse XML é o responsável por deixar a tela inicial da nossa app igual ao da Figura 9.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ScrollView
android:id="@+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="O que você está pensando?"
android:textAppearance="?android:attr/textAppearanceLarge" />
<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:hint="Digite algo para seus amigos"
android:layout_height="wrap_content" />
<ImageView
android:id="@+id/imageView1"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:maxHeight="64dp"
android:maxWidth="64dp"
android:minHeight="64dp"
android:minWidth="64dp"
android:scaleType="fitXY"
android:src="@drawable/semimg" />
<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="@+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="galleryButtonClick"
android:text="Buscar Imagem" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="updateStatusClick"
android:text="Postar" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
Listagem 4. XML responsável pela tela inicial da nossa app
Agora iniciaremos a implementação do código para enviar posts ao Facebook, para isso teremos que utilizar o app ID, aquele código foi gerado pela API do Facebook para identificar sua aplicação, iremos utilizá-lo como mostra na Listagem 5.
package devmedia.artigo.weslley;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.net.MalformedURLException;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.content.pm.ActivityInfo;
import android.database.Cursor;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.net.Uri;
import android.os.Bundle;
import android.provider.MediaStore;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.Toast;
import com.facebook.android.AsyncFacebookRunner;
import com.facebook.android.AsyncFacebookRunner.RequestListener;
import com.facebook.android.DialogError;
import com.facebook.android.Facebook;
import com.facebook.android.Facebook.DialogListener;
import com.facebook.android.FacebookError;
public class DevmediaFacebookActivity extends Activity {
private static final String APP_ID = "AQUI IRÁ O APP ID DE SUA APLICAÇÃO";
private static final String ACCESS_EXPIRES = "access_expires";
private static final String ACCESS_TOKEN = "access_token";
private Facebook facebook;
private SharedPreferences prefs;
private Bitmap fotoTirada;
private ImageView imageView1;
private File caminhoFoto;
private Bitmap image;
String[] salvarimg = new String[0];
String corpo;
private int cont = 0;
Listagem 5. Trecho de código responsável por identificar aplicação e sincronizá-la com a app do Facebook
Dentro do nosso método onCreate(), implementaremos justamente a chamada da tela do login do Facebook, caso o usuário não esteja logado na rede social, ele abrirá a janela de login semelhante à da Figura 10.
Ainda dentro do método onCreate(), iremos implementar a orientação da tela, que estará sempre “travada” como portrait (em retrato), e chamaremos nossa imageView, com a imagem padrão da tela iniciar. Veja como ficaria na Listagem 6.
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
facebook = new Facebook(APP_ID);
prefs = getPreferences(MODE_PRIVATE);
// Carrega a accessToken para saber se o usuário
// já se autenticou.
loadAccessToken();
// Caso não tenha se autenticado, abre o login
if (!facebook.isSessionValid()) {
// Chama a tela de login do facebook
facebook.authorize(this, new String[] { "publish_stream" },
new DialogListener() {
// Login com sucesso, salva o accessToken
public void onComplete(Bundle values) {
saveAccessToken();
}
// Os métodos abaixo devem ser
// implementados para tratatmento dos
// fluxos width="640" alternativos
public void onFacebookError(FacebookError error) {
}
public void onError(DialogError e) {
}
public void onCancel() {
}
});
this.setRequestedOrientation
(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
}
imageView1 = (ImageView) findViewById(R.id.imageView1);
} Listagem 6. Código responsável por exibir tela de login do Facebook
Após isso, iremos apenas implementar os métodos de buscar imagem na galeria de imagens, identificar se será enviado apenas post ou post e foto juntos, e os demais métodos de envio. Não estenderemos tanto explicando método a método, pois o código está todo comentado e se auto explica tranquilamente, os métodos devem ficar da forma da Listagem 7.
public void galleryButtonClick(View v) {
// apagaTemp();
Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
intent.setType("image/*");
startActivityForResult(intent, 0);
cont++;
}
// Evento de clique do botão para atualizar o status
public void updateStatusClick(View v) {
EditText edt = (EditText) findViewById(R.id.editText1);
if ((edt.getText().toString().trim().equals(""))
|| (edt.getText().toString() == null)) {
Toast.makeText(this, "Ops!!!, Digite algo para seus amigos...",
Toast.LENGTH_LONG).show();
} else if ((edt.getText().toString().trim().equals(""))
|| (edt.getText().toString() == null) || cont > 0) {
corpo = edt.getText().toString();
sendPhoto(edt.getText().toString());
} else if (cont == 0) {
corpo = edt.getText().toString();
updateStatus(edt.getText().toString());
}
edt.setText("Aguarde enquanto publicamos o seu post, isso pode demorar um pouco...");
edt.setEnabled(false);
}
private RequestListener requestListener = new RequestListener() {
public void onMalformedURLException(MalformedURLException e,
Object state) {
showToast("URL mal formada");
}
public void onIOException(IOException e, Object state) {
showToast("Problema de comunicação");
}
public void onFileNotFoundException(FileNotFoundException e,
Object state) {
showToast("Recurso não existe");
}
public void onFacebookError(FacebookError e, Object state) {
showToast("Erro no Facebook: " + e.getLocalizedMessage());
}
public void onComplete(String response, Object state) {
showToast("Publicação realizada com sucesso");
}
};
// Método que efetivamente atualiza o status
private void updateStatus(String status) {
AsyncFacebookRunner runner = new AsyncFacebookRunner(facebook);
Bundle params = new Bundle();
params.putString("message", status);
runner.request("me/feed", params, "POST", requestListener, null);
}
// Método que efetivamente atualiza o status com imagem
private void sendPhoto(String status) {
AsyncFacebookRunner runner = new AsyncFacebookRunner(facebook);
ByteArrayOutputStream baos = new ByteArrayOutputStream();
image.compress(Bitmap.CompressFormat.PNG, 100, baos);
byte[] bytes = baos.toByteArray();
Bundle params = new Bundle();
params.putByteArray("picture", bytes);
params.putString("message", status);
runner.request("me/photos", params, "POST", requestListener, null);
}
private void showToast(final String s) {
final Context ctx = DevmediaFacebookActivity.this;
runOnUiThread(new Runnable() {
public void run() {
Toast.makeText(ctx, s, Toast.LENGTH_SHORT).show();
}
});
}
private void saveAccessToken() {
SharedPreferences.Editor editor = prefs.edit();
editor.putString(ACCESS_TOKEN, facebook.getAccessToken());
editor.putLong(ACCESS_EXPIRES, facebook.getAccessExpires());
editor.commit();
}
private void loadAccessToken() {
String access_token = prefs.getString(ACCESS_TOKEN, null);
long expires = prefs.getLong(ACCESS_EXPIRES, 0);
if (access_token != null) {
facebook.setAccessToken(access_token);
}
if (expires != 0) {
facebook.setAccessExpires(expires);
}
}
public void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (cont == 0) {
// A API do Facebook exige essa chamada para
// concluir o processo de login.
facebook.authorizeCallback(requestCode, resultCode, data);
} else {
if (resultCode == RESULT_OK) {
switch (requestCode) {
case 0:
Uri selectedImage = data.getData();
String[] filePathColumn = { MediaStore.Images.Media.DATA };
Cursor cursor = getContentResolver().query(selectedImage,
filePathColumn, null, null, null);
cursor.moveToFirst();
int columnIndex = cursor.getColumnIndex(filePathColumn[0]);
String filePath = cursor.getString(columnIndex); // file
// path of selected image
cursor.close();
Bitmap yourSelectedImage = BitmapFactory
.decodeFile(filePath);
imageView1.setImageBitmap(yourSelectedImage);
image = yourSelectedImage;
break;
case 1:
fotoTirada = BitmapFactory.decodeFile(caminhoFoto
.getAbsolutePath());
imageView1.setImageBitmap(fotoTirada);
break;
}
}
}
}
}
Listagem 7. Métodos da aplicação
Realizando os testes
Após termos implementado todas essas funcionalidades, chegou enfim a grande hora de testar.
Após termos realizado o login no Facebook, como mostrou a Figura 10, iremos nos deparar com a tela que irá instalar o serviço do Facebook no nosso aparelho e de fato sincronizar nossa app com a API deles (Facebook). Após essa tela ser exibida, escolha a opção Install, assim como mostra a Figura 11.
Após instalarmos o serviço da API do Facebook, temos que permitir que o mesmo escreva no nosso perfil através de um app de terceiros, como é o caso da gente. Para isso, escolha a opção Allow All, assim como mostra a Figura 12.
Agora iremos publicar apenas um post, para isso iremos digitar “Ola Facebook” e escolheremos a opção Postar, como mostra na Figura 13.
Veja a imagem do post na Figura 14.
Para postarmos um post com imagem é simples, basta digitar uma mensagem, clicar em Buscar imagem, escolher a imagem e clicar em Postar, assim como mostra a Figura 15.
Veja a imagem do post na Figura 16.
Conclusão
Bom, pessoal, trabalhar com API de terceiros nem sempre é fácil, mas vale a pena tentar implementar esse exemplo de publicação na rede social Facebook.
Com isso finalizamos mais um artigo, muito obrigado pela atenção de todos.
Referências
Artigos relacionados
-
Artigo
-
Artigo
-
Vídeo
-
Artigo
-
DevCast