Configuração do Firebase
Se você ainda não tem uma conta do Firebase, pode criar uma na página inicial do Firebase.
Depois que sua conta estiver configurada, acesse o console do Firebase e clique no botão Adicionar projeto botão para adicionar um novo projeto.
Insira os detalhes do seu projeto e clique no botão Criar projeto botão quando terminar. Na próxima página, clique no link para Adicione o Firebase ao seu aplicativo Android.
Insira o nome do pacote do aplicativo. Meu pacote de aplicativos é com.tutsplus.code.android.tutsplusupload. Observe que o nome do pacote tem um namespace com uma string exclusiva que identifica você ou sua empresa. Uma maneira fácil de encontrar isso é abrir seu MainActivity arquivo e copie o nome do pacote da parte superior.
Quando terminar, clique em Registrar aplicativo. Na próxima página, você receberá uma google-services.json para baixar em seu computador. Copie e cole esse arquivo na pasta app do seu aplicativo. (O caminho deve ser algo como TutsplusUpload/app.)
Definir permissões do Firebase
Para permitir que seu aplicativo acesse o Firebase Storage, você precisa configurar permissões no Firebase console. No seu console, clique em Armazenare, em seguida, clique em Regras.
Cole a regra abaixo e publique.
1 |
service firebase.storage {
|
2 |
match /b/{bucket}/o {
|
3 |
match /{allPaths=**} {
|
4 |
allow read, write: if true; |
5 |
} |
6 |
} |
7 |
} |
Isso permitirá acesso de leitura e gravação ao seu armazenamento do Firebase.
Criar o Aplicativo
Abra o Android Studio e crie um novo projeto. Você pode chamar seu projeto como quiser. eu chamei o meu TutsplusUpload.
Antes de prosseguir, você precisará adicionar algumas dependências. No painel esquerdo do seu Android Studio, clique em Gradle Scripts.
Abrir construir.gradle (Projeto: TutsplusUpload)e adicione esta linha de código no bloco de dependências.
1 |
classpath 'com.google.gms:google-services:3.0.0' |
Em seguida, abra construir.gradle (Módulo: aplicativo) para adicionar as dependências para Firebase. Eles também estão no bloco de dependências.
1 |
compile 'com.google.firebase:firebase-storage:9.2.1' |
2 |
compile 'com.google.firebase:firebase-auth:9.2.1' |
Finalmente, fora do bloco de dependências, adicione o plugin para Serviços do Google.
1 |
apply plugin: 'com.google.gms.google-services' |
Salve quando terminar e deve sincronizar.
Configurar o MainActivity Disposição
O aplicativo precisará de um layout de atividade. Serão necessários dois botões – um para selecionar uma imagem do seu dispositivo e outro para carregar a imagem selecionada. Depois de selecionar a imagem que deseja carregar, a imagem será exibida no layout. Em outras palavras, a imagem não será definida a partir do layout, mas da atividade.
Na tua MainActivity layout, você usará dois layouts — aninhando o layout linear dentro do layout relativo. Comece adicionando o código para seu layout relativo
1 |
xml version="1.0" encoding="utf-8"?>
|
2 |
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android" |
3 |
xmlns:tools="https://schemas.android.com/tools" |
4 |
android:layout_width="match_parent" |
5 |
android:layout_height="match_parent" |
6 |
android:padding="16dp" |
7 |
tools:context="com.tutsplus.code.android.tutsplusupload.MainActivity"> |
8 |
RelativeLayout>
|
O RelativeLayout ocupa todo o espaço fornecido pelo dispositivo. O LinearLayout vai morar dentro do RelativeLayout, e terá os dois botões. Os botões devem ser colocados lado a lado, sendo assim a orientação a ser utilizada para o LinearLayout será horizontal.
Aqui está o código para o layout linear.
1 |
<LinearLayout |
2 |
android:id="@+id/layout_button" |
3 |
android:orientation="horizontal" |
4 |
android:layout_alignParentTop="true" |
5 |
android:weightSum="2" |
6 |
android:layout_width="match_parent" |
7 |
android:layout_height="wrap_content"> |
8 |
<Button |
9 |
android:id="@+id/btnChoose" |
10 |
android:text="Choose" |
11 |
android:layout_weight="1" |
12 |
android:layout_width="0dp" |
13 |
android:layout_height="wrap_content" /> |
14 |
<Button |
15 |
android:id="@+id/btnUpload" |
16 |
android:text="Upload" |
17 |
android:layout_weight="1" |
18 |
android:layout_width="0dp" |
19 |
android:layout_height="wrap_content" /> |
20 |
</LinearLayout> |
No código acima, você pode ver que ambos os botões têm IDs atribuídos. Os IDs serão usados para direcionar o botão da atividade principal de forma que, quando o botão for clicado, uma interação seja iniciada. Você verá isso em breve.
Abaixo de LinearLayoutadicione o código para o ImageView.
1 |
<ImageView |
2 |
android:id="@+id/imgView" |
3 |
android:layout_width="match_parent" |
4 |
android:layout_height="match_parent" /> |
Você também pode ver que o ImageView tem um id; você usará isso para preencher o layout da imagem selecionada. Isso será feito na atividade principal.
Pegar MainActivity Acima
Navegue até o seu MainActivity, e comece declarando campos. Esses campos serão usados para inicializar suas visualizações (os botões e ImageView), bem como o URI indicando de onde a imagem será selecionada. Adicione isso à sua atividade principal, acima do onCreate método
1 |
private Button btnChoose, btnUpload; |
2 |
private ImageView imageView; |
3 |
private Uri filePath; |
4 |
private final int PICK_IMAGE_REQUEST = 71; |
PICK_IMAGE_REQUEST é o código de solicitação definido como uma variável de instância.
Agora você pode inicializar suas visualizações assim:
1 |
//Initialize Views
|
2 |
btnChoose = (Button) findViewById(R.id.btnChoose); |
3 |
btnUpload = (Button) findViewById(R.id.btnUpload); |
4 |
imageView = (ImageView) findViewById(R.id.imgView); |
No código acima, você está criando novas instâncias de Button e ImageView. As instâncias apontam para os botões que você criou em seu layout.
Você precisa definir um ouvinte que ouça as interações nos botões. Quando ocorre uma interação, você deseja chamar um método que acione a seleção de uma imagem da galeria ou o upload da imagem selecionada para o Firebase.
Abaixo das exibições inicializadas, defina o ouvinte para ambos os botões. O ouvinte fica assim:
1 |
btnChoose.setOnClickListener(new View.OnClickListener() { |
2 |
@Override
|
3 |
public void onClick(View v) { |
4 |
chooseImage(); |
5 |
}
|
6 |
});
|
7 |
btnUpload.setOnClickListener(new View.OnClickListener() { |
8 |
@Override
|
9 |
public void onClick(View v) { |
10 |
uploadImage(); |
11 |
}
|
12 |
});
|
Isso deve estar no onCreate() método. Como mencionei acima, ambos os botões chamam um método diferente. O Escolher botão chama o chooseImage() método, enquanto o Carregar botão chama o uploadImage() método. Vamos adicionar esses métodos. Ambos os métodos devem ser implementados fora do onCreate() método.
Vamos começar com o método para escolher uma imagem. Aqui está como deve ficar:
1 |
private void chooseImage() { |
2 |
Intent intent = new Intent(); |
3 |
intent.setType("image/*"); |
4 |
intent.setAction(Intent.ACTION_GET_CONTENT); |
5 |
startActivityForResult(Intent.createChooser(intent, "Select Picture"), PICK_IMAGE_REQUEST); |
6 |
}
|
Quando este método é chamado, um novo Intent instância é criada. O tipo de intenção é definido como imagem e sua ação é definida para obter algum conteúdo. A intenção cria uma caixa de diálogo do seletor de imagens que permite ao usuário navegar pela galeria do dispositivo para selecionar a imagem. startActivityForResult é usado para receber o resultado, que é a imagem selecionada. Para exibir esta imagem, você usará um método chamado onActivityResult.
onActivityResult recebe um código de solicitação, código de resultado e os dados. Nesse método, você verificará se o código da solicitação é igual PICK_IMAGE_REQUESTcom o código de resultado igual a RESULT_OK e os dados disponíveis. Se tudo isso for verdade, você deseja exibir a imagem selecionada no ImageView.
Abaixo de chooseImage() método, adicione o seguinte código:
1 |
@Override
|
2 |
protected void onActivityResult(int requestCode, int resultCode, Intent data) { |
3 |
super.onActivityResult(requestCode, resultCode, data); |
4 |
if(requestCode == PICK_IMAGE_REQUEST && resultCode == RESULT_OK |
5 |
&& data != null && data.getData() != null ) |
6 |
{
|
7 |
filePath = data.getData(); |
8 |
try { |
9 |
Bitmap bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), filePath); |
10 |
imageView.setImageBitmap(bitmap); |
11 |
}
|
12 |
catch (IOException e) |
13 |
{
|
14 |
e.printStackTrace(); |
15 |
}
|
16 |
}
|
17 |
}
|
Fazendo o upload do arquivo para o Firebase
Agora podemos implementar o método de upload da imagem para o Firebase. Primeiro, declare os campos necessários para o Firebase. Faça isso abaixo dos outros campos que você declarou para sua classe:
1 |
//Firebase
|
2 |
FirebaseStorage storage; |
3 |
StorageReference storageReference; |
storage será usado para criar um FirebaseStorage instância, enquanto storageReference apontará para o arquivo carregado. dentro do seu onCreate() método, adicione o código para fazer isso – crie um FirebaseStorage instância e obter a referência de armazenamento. As referências podem ser vistas como ponteiros para um arquivo na nuvem:
1 |
storage = FirebaseStorage.getInstance(); |
2 |
storageReference = storage.getReference(); |
Aqui está o que uploadImage() método deve se parecer com:
1 |
private void uploadImage() { |
2 |
if(filePath != null) |
3 |
{
|
4 |
final ProgressDialog progressDialog = new ProgressDialog(this); |
5 |
progressDialog.setTitle("Uploading..."); |
6 |
progressDialog.show(); |
7 |
StorageReference ref = storageReference.child("images/"+ UUID.randomUUID().toString()); |
8 |
ref.putFile(filePath) |
9 |
.addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() { |
10 |
@Override
|
11 |
public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) { |
12 |
progressDialog.dismiss(); |
13 |
Toast.makeText(MainActivity.this, "Uploaded", Toast.LENGTH_SHORT).show(); |
14 |
}
|
15 |
})
|
16 |
.addOnFailureListener(new OnFailureListener() { |
17 |
@Override
|
18 |
public void onFailure(@NonNull Exception e) { |
19 |
progressDialog.dismiss(); |
20 |
Toast.makeText(MainActivity.this, "Failed "+e.getMessage(), Toast.LENGTH_SHORT).show(); |
21 |
}
|
22 |
})
|
23 |
.addOnProgressListener(new OnProgressListener<UploadTask.TaskSnapshot>() { |
24 |
@Override
|
25 |
public void onProgress(UploadTask.TaskSnapshot taskSnapshot) { |
26 |
double progress = (100.0*taskSnapshot.getBytesTransferred()/taskSnapshot |
27 |
.getTotalByteCount()); |
28 |
progressDialog.setMessage("Uploaded "+(int)progress+"%"); |
29 |
}
|
30 |
});
|
31 |
}
|
32 |
}
|
Quando o uploadImage() método é chamado, uma nova instância de ProgressDialog é inicializado. Um aviso de texto mostrando ao usuário que a imagem está sendo carregada é exibido. Em seguida, uma referência à imagem carregada, storageReference.child()é usado para acessar o arquivo carregado no imagens pasta. Esta pasta é criada automaticamente quando a imagem é carregada. Ouvintes também são adicionados, com mensagens de brinde. Essas mensagens são exibidas dependendo do estado do upload.
Definir permissão no aplicativo
Por fim, você precisa solicitar a permissão que seu aplicativo usará. Sem isso, os usuários de seu aplicativo não poderão navegar na galeria de dispositivos e se conectar à Internet com seu aplicativo. Fazer isso é fácil – basta colar o seguinte em seu Manifesto do Android arquivo. Cole-o logo acima do application marca de elemento:
1 |
<uses-permission android:name="android.permission.INTERNET" /> |
2 |
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> |
Agora vá em frente e execute seu aplicativo! Você deve ser capaz de selecionar uma imagem e carregá-la com sucesso no Firebase. Para confirmar a imagem carregada, volte ao seu console e verifique no arquivos parte do seu armazenamento.
