Come caricare le immagini su Firebase da un'app Android

Firebase è una piattaforma di sviluppo di applicazioni web e mobili e Firebase Storage fornisce upload e download di file sicuri per le app Firebase. In questo post, costruirai un'applicazione Android con la possibilità di caricare immagini su Storage di Firebase.

Configurazione Firebase

Se non hai ancora un account Firebase, puoi crearne uno nella home page di Firebase.

Una volta impostato l'account, vai alla console Firebase e fai clic su Aggiungi progetto pulsante per aggiungere un nuovo progetto.

Inserisci i dettagli del tuo progetto e fai clic su Crea progetto pulsante quando fatto. Nella pagina successiva, clicca sul link a Aggiungi Firebase alla tua app per Android.

Inserisci il nome del pacchetto dell'applicazione. Il mio pacchetto di applicazioni è com.tutsplus.code.android.tutsplusupload. Si noti che il nome del pacchetto è assegnato a un nome con una stringa univoca che identifica l'utente o la società. Un modo semplice per trovarlo è aprire il tuo Attività principale file e copia il nome del pacchetto dall'alto.

Al termine, fare clic su Registrati App. Nella pagina successiva, ti verrà dato un google-services.json per scaricare sul tuo computer. Copia e incolla il file nella cartella dell'app dell'applicazione. (Il percorso dovrebbe essere qualcosa di simile TutsplusUpload / app.)

Imposta le autorizzazioni Firebase

Per consentire alla tua app di accedere a Firebase Storage, devi impostare le autorizzazioni nella console di Firebase. Dalla tua console, clicca su Conservazione, e quindi fare clic su Regole.

Incolla la regola seguente e pubblica. 

service firebase.storage match / b / bucket / o match / allPaths = ** consenti lettura, scrittura: se vero; 

Ciò consentirà l'accesso in lettura e scrittura alla memoria di Firebase.

Crea l'applicazione

Apri Android Studio e crea un nuovo progetto. Puoi chiamare il tuo progetto tutto quello che vuoi. Ho chiamato il mio TutsplusUpload.

Prima di procedere, dovrai aggiungere un paio di dipendenze. Nel pannello di sinistra di Android Studio, fai clic su Script Gradle.

Aperto costruire.Gradle (Progetto: TutsplusUpload), e aggiungi questa linea di codice nel blocco delle dipendenze.

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

Avanti, aperto costruire.Gradle (Modulo: app) per aggiungere le dipendenze per Firebase. Questi vanno anche nel blocco delle dipendenze. 

 compila 'com.google.firebase: firebase-storage: 9.2.1' compila 'com.google.firebase: firebase-auth: 9.2.1'

Infine, al di fuori del blocco delle dipendenze, aggiungi il plugin per Servizi di Google.

 applica il plug-in: "com.google.gms.google-services"

Salva al termine e dovrebbe sincronizzarsi.

Impostare il Attività principale disposizione

L'applicazione avrà bisogno di un layout di attività. Saranno necessari due pulsanti: uno per selezionare un'immagine dal dispositivo e l'altro per caricare l'immagine selezionata. Dopo aver selezionato l'immagine che si desidera caricare, l'immagine verrà visualizzata nel layout. In altre parole, l'immagine non verrà impostata dal layout ma dall'attività.

Nel tuo Attività principale layout, utilizzerai due layout, annidando il layout lineare all'interno del layout relativo. Inizia aggiungendo il codice per il tuo layout relativo.

Il RelativeLayout occupa l'intero spazio fornito dal dispositivo. Il LinearLayout vivrà dentro il RelativeLayout, e avrà i due pulsanti. I pulsanti devono essere posizionati uno accanto all'altro, quindi l'orientamento da utilizzare per LinearLayout sarà orizzontale.

Ecco il codice per il layout lineare.

Dal codice precedente, puoi vedere che entrambi i pulsanti hanno ID assegnati. Gli ID verranno utilizzati per indirizzare il pulsante dall'attività principale in modo tale che quando viene premuto il pulsante, viene avviata un'interazione. Lo vedrai presto.

Sotto il LinearLayout, aggiungi il codice per ImageView.

Puoi anche vedere che il ImageView ha un id; lo userai per popolare il layout dell'immagine selezionata. Questo sarà fatto nell'attività principale.

Ottenere Attività principale Su

Vai al tuo Attività principale, e inizia con la dichiarazione dei campi. Questi campi verranno utilizzati per inizializzare le tue visualizzazioni (i pulsanti e ImageView), così come l'URI che indica da dove verrà prelevata l'immagine. Aggiungi questo alla tua attività principale, sopra il onCreate metodo.

 private Button btnChoose, btnUpload; imageView ImageView privato; Uri filePath privato; private final int PICK_IMAGE_REQUEST = 71;

PICK_IMAGE_REQUEST è il codice di richiesta definito come variabile di istanza.

Ora puoi inizializzare le tue visualizzazioni in questo modo:

 // Initialize Views btnChoose = (Button) findViewById (R.id.btnChoose); btnUpload = (Button) findViewById (R.id.btnUpload); imageView = (ImageView) findViewById (R.id.imgView);

Nel codice precedente, stai creando nuove istanze di Pulsante e ImageView. Le istanze indicano i pulsanti creati nel layout.

Devi impostare un ascoltatore che ascolti le interazioni sui pulsanti. Quando si verifica un'interazione, devi chiamare un metodo che attiva la selezione di un'immagine dalla galleria o il caricamento dell'immagine selezionata in Firebase.

Sotto le viste inizializzate, imposta l'ascoltatore per entrambi i pulsanti. L'ascoltatore ha questo aspetto.

 btnChoose.setOnClickListener (new View.OnClickListener () @ Override public void onClick (View v) chooseImage ();); btnUpload.setOnClickListener (new View.OnClickListener () @Override public void onClick (View v) uploadImage (););

Questo dovrebbe essere nel onCreate () metodo. Come ho detto sopra, entrambi i pulsanti chiamano un metodo diverso. Il Scegliere pulsante chiama il chooseImage () metodo, mentre il Caricare pulsante chiama il carica immagine() metodo. Aggiungiamo questi metodi. Entrambi i metodi dovrebbero essere implementati al di fuori del onCreate () metodo.

Iniziamo con il metodo per scegliere un'immagine. Ecco come dovrebbe apparire:

 private void chooseImage () Intent intent = new Intent (); intent.setType ( "image / *"); intent.setAction (Intent.ACTION_GET_CONTENT); startActivityForResult (Intent.createChooser (intent, "Seleziona immagine"), PICK_IMAGE_REQUEST); 

Quando viene chiamato questo metodo, un nuovo Intento l'istanza è creata. Il tipo di intento è impostato su immagine e la sua azione è impostata per ottenere del contenuto. L'intento crea una finestra di dialogo selettore di immagini che consente all'utente di navigare attraverso la galleria del dispositivo per selezionare l'immagine. startSubActivity è usato per ricevere il risultato, che è l'immagine selezionata. Per visualizzare questa immagine, farai uso di un metodo chiamato onActivityResult.

onActivityResult riceve un codice di richiesta, un codice di risultato e i dati. In questo metodo, verificherete per vedere se il codice di richiesta è uguale PICK_IMAGE_REQUEST, con il codice risultato uguale a RESULT_OK e i dati disponibili. Se tutto ciò è vero, si desidera visualizzare l'immagine selezionata in ImageView.

Sotto il chooseImage () metodo, aggiungere il seguente codice.

 @Override protetto void onActivityResult (int requestCode, int resultCode, Intent data) super.onActivityResult (requestCode, resultCode, data); if (requestCode == PICK_IMAGE_REQUEST && resultCode == RESULT_OK && data! = null && data.getData ()! = null) filePath = data.getData (); prova Bitmap bitmap = MediaStore.Images.Media.getBitmap (getContentResolver (), filePath); imageView.setImageBitmap (bitmap);  catch (IOException e) e.printStackTrace (); 

Caricamento del file su Firebase

Ora possiamo implementare il metodo per caricare l'immagine su Firebase. Prima di tutto, dichiara i campi necessari per Firebase. Fallo sotto gli altri campi che hai dichiarato per la tua classe.

 // Archiviazione FirebaseStorage; StorageReference storageReference;

Conservazione sarà usato per creare un FirebaseStorage istanza, mentre storageReference punterà al file caricato. Dentro il tuo onCreate () metodo, aggiungi il codice per farlo: crea un FirebaseStorage istanza e ottenere il riferimento di archiviazione. I riferimenti possono essere visti come indicatori di un file nel cloud.

 storage = FirebaseStorage.getInstance (); storageReference = storage.getReference ();

Ecco cosa è carica immagine() il metodo dovrebbe assomigliare.

 private void uploadImage () if (filePath! = null) final ProgressDialog progressDialog = new ProgressDialog (this); progressDialog.setTitle ("Caricamento in corso ..."); progressDialog.show (); StorageReference ref = storageReference.child ("images /" + UUID.randomUUID (). ToString ()); ref.putFile (filePath) .addOnSuccessListener (nuovo OnSuccessListener() @Override public void onSuccess (UploadTask.TaskSnapshot taskSnapshot) progressDialog.dismiss (); Toast.makeText (MainActivity.this, "Uploaded", Toast.LENGTH_SHORT) .show (); ) .addOnFailureListener (new OnFailureListener () @Override public void onFailure (@NonNull Exception e) progressDialog.dismiss (); Toast.makeText (MainActivity.this, "Failed" + e.getMessage (), Toast.LENGTH_SHORT ) .show ();) .addOnProgressListener (new OnProgressListener() @Override public void onProgress (UploadTask.TaskSnapshot taskSnapshot) double progress = (100.0 * taskSnapshot.getBytesTransferred () / taskSnapshot .getTotalByteCount ()); progressDialog.setMessage ("Uploaded" + (int) progress + "%"); ); 

Quando il carica immagine() il metodo è chiamato, una nuova istanza di ProgressDialog è inizializzato. Viene visualizzato un avviso di testo che mostra all'utente che l'immagine viene caricata. Quindi un riferimento all'immagine caricata, storageReference.child (), è usato per accedere al file caricato nel immagini cartella. Questa cartella viene creata automaticamente quando l'immagine viene caricata. Vengono aggiunti anche gli ascoltatori, con messaggi brindisi. Questi messaggi vengono visualizzati in base allo stato del caricamento.

Imposta autorizzazione nell'app

Infine, è necessario richiedere il permesso che l'applicazione utilizzerà. Senza questo, gli utenti dell'applicazione non potranno navigare nella loro galleria di dispositivi e collegarsi a Internet con la propria applicazione. Fare questo è facile: basta incollare quanto segue nel tuo AndroidManifest file. Incollalo appena sopra il applicazione tag elemento.

Ciò richiede il permesso di utilizzare Internet e leggere la memoria esterna.

Testare l'app

Adesso vai avanti e avvia la tua applicazione! Dovresti essere in grado di selezionare un'immagine e caricarla correttamente in Firebase. Per confermare l'immagine caricata, torna alla tua console e controlla File parte del tuo spazio di archiviazione.

Conclusione

Firebase offre agli sviluppatori molti vantaggi e il caricamento di file con l'archiviazione è uno di questi. Caricare immagini dalla tua applicazione Android richiede di lavorare con le attività e gli intenti. Seguendo questo tutorial, la tua comprensione delle attività e degli intenti è stata approfondita. Spero ti sia piaciuto!

!