Utilisation de Firebase comme stockage d'images pour une application Android

Dans cet article, vous apprendrez à extraire une image du stockage Firebase pour une application Android.

Firebase

Firebase est une plateforme de développement d'applications mobiles et Web développée par Firebase en 2011 et acquise par Google en 2014. En octobre 2018, la plate-forme Firebase comptait 18 produits utilisés dans 1,5 million d'applications. Il permet de développer rapidement des applications de haute qualité, d'élargir la base d'utilisateurs et de gagner plus d'argent.

Glide

Glide est une bibliothèque de téléchargement d'images vers des applications Android développée par Bump Tech et recommandée par Google. Il est utilisé par de nombreux projets open source de Google, y compris l'application officielle Google I / O 2014. Glide prend en charge le téléchargement, le décodage et l'affichage d'images, de vidéos et de GIF animés.

Configurer Firebase

Configurons Firebase pour notre projet Android.

• Ouvrez firebase.google.com .

  
  

• Cliquez sur "Démarrer le projet" .

  
  

• Cliquez sur Ajouter un projet .

  
  

• Donnez un nom à votre projet.

  
  

• Cliquez sur le bouton Créer un projet ci-dessous.

  
  

• Cliquez sur l'icône Android .

  
  

• Vous verrez une page intitulée «Ajouter Firebase à votre application Android» .

• Ajoutez le nom du package de votre application Android .

Par exemple → com.example.retrieving_images_from_firebase .

• Ajoutez la clé SHA1 et cliquez sur "Enregistrer l'application" .

  
  

• Cliquez sur le bouton "Télécharger google-services.json" pour télécharger ce fichier.

  
  

• Ajoutez ensuite google-services.json au dossier d' application de votre projet.

  
  

• Ouvrez le fichier de notes au niveau du projet. Ajoutez cette dépendance à l'intérieur du bloc de dépendance:

 classpath "com.google.gms:google-services:3.0.0" 

Il devrait donc ressembler à:

• Ouvrez le fichier de notes de niveau application. Ajouter des dépendances:

 androidTestImplementation 'com.android.support.test:runner:1.0.2' androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2' implementation 'com.squareup.picasso:picasso:2.71828' testImplementation 'junit:junit:4.12' implementation 'com.github.bumptech.glide:glide:4.7.1' compile 'com.android.support.constraint:constraint-layout:1.1.3' compile 'com.google.firebase:firebase-database:11.0.2' compile 'com.google.firebase:firebase-storage:11.0.2' compile 'com.google.firebase:firebase-auth:11.0.2' compile 'com.firebaseui:firebase-ui-database:2.1.0' 

Il devrait donc ressembler à:

• Ajoutez maintenant packagingOptions au bas du bloc buildTypes :

 packagingOptions { exclude 'META-INF/LICENSE' exclude 'META-INF/LICENSE-FIREBASE.txt' exclude 'META-INF/NOTICE' } 

Il devrait donc ressembler à:

• Ouvrez firebase.google.com , sélectionnez votre projet.

Cliquez maintenant sur Base de données → Règles . Ajoutez les lignes suivantes:

 service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write; } } } 

Cliquez sur Stockage → Règles . Ajoutez les lignes suivantes:

 service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write: if request.auth != null; } } } 

• Cliquez maintenant sur Stockage → Fichiers . Téléchargez l'image à l'aide du bouton «Télécharger le fichier» .

• Cliquez sur une image téléchargée. Ensuite, en bas à droite, vous trouverez Télécharger URL1 . Copiez ceci.

Activity_main.xml

Créez une ImageView dans laquelle l'image sera affichée.

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="RETRIEVE FROM FIREBASE" android:gravity="center" android:textSize="30dp" android:textColor="#000000"/> <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/image"/> </LinearLayout> 

MainActivity.java

 package com.example.retrieving_images_from_firebase; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.widget.ImageView; import com.bumptech.glide.Glide; public class MainActivity extends AppCompatActivity { ImageView imageView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); imageView=findViewById(R.id.image); // URL ,     String url="https://firebasestorage.googleapis.com/v0/b/retrieve-images-958e5.appspot.com/o/9.PNG?alt=media&token=6bd05383-0070-4c26-99cb-dcb17a23f7eb"; Glide.with(getApplicationContext()).load(url).into(imageView); } } 

Félicitations! Vous pouvez maintenant lancer votre application.

Après avoir démarré l'application, vous verrez votre image.

Vous pouvez télécharger tout le code de notre référentiel sur GitHub .