11.9: Un “blog” personale per Android sfruttando Firebase: la schermata di login

Condividi su:

Stiamo iniziando lo sviluppo della nostra nuova app. Nell’articolo precedente ci siamo dedicati alla registrazione dell’app all’interno di un progetto di Firebase; l’integrazione di questo all’interno del progetto su Android Studio e del layout della MainActivity, che abbiamo deciso essere la schermata di login.




Implementazione della gestione del login

Veniamo ora al codice dell’activity, che dovreste essere già in grado di implementare autonomamente, poiché non fa uso di nulla di diverso da quanto già visto. Iniziamo comunque a vederlo insieme:

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private FirebaseAuth mAuth;
    private FirebaseAuth.AuthStateListener mAuthListener;
    private FirebaseUser mUser;
    private EditText emailField;
    private EditText passwordField;
    private Button loginButton;
    private Button createActButton;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        /*
         * Istanziazione dei widget presenti all'interno dell'interfaccia
         */
        emailField = (EditText) findViewById(R.id.emailLoginET);
        passwordField = (EditText) findViewById(R.id.passwordLoginET);
        loginButton = (Button) findViewById(R.id.loginBT);
        createActButton = (Button) findViewById(R.id.createAccountBT);
        
        //Recupero dell'istanza di autenticazione di Firebase
        mAuth = FirebaseAuth.getInstance();
        
        //Istanziazione del listener che monitora lo stato di autenticazione
        mAuthListener = new FirebaseAuth.AuthStateListener() {
            @Override
            public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {
                //Recupero dell'utente corrente
                mUser = firebaseAuth.getCurrentUser();
                
                //Se mUser non è null l'utente è autenticato
                if (mUser != null){
                    Toast.makeText(MainActivity.this, getResources().getString(R.string.signed_in), Toast.LENGTH_LONG).show();
                }else{
                    Toast.makeText(MainActivity.this, getResources().getString(R.string.not_signed_in), Toast.LENGTH_LONG).show();
                }

            }
        };
        
        /*
         *Settaggio dei listener sui pulsanti
         */
        loginButton.setOnClickListener(this);
        createActButton.setOnClickListener(this);
    }

    @Override
    protected void onStart() {
        super.onStart();
        //Aggiunta del listener all'istanza di FirebaseAuth quando l'activity diventa visibile
        mAuth.addAuthStateListener(mAuthListener);
    }

    @Override
    protected void onStop() {
        super.onStop();
        //Rimozione del listener all'istanza di FirebaseAuth quando l'activity va in background
        if (mAuthListener != null)
            mAuth.removeAuthStateListener(mAuthListener);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            //Gestione del click sul pulsante di login
            case R.id.loginBT:
                /*
                 * Se le due EditText contengono dati li si recuperano e si richiama il metodo
                 * di login passandovi le credenziali appena salvate 
                 */
                if (!TextUtils.isEmpty(emailField.getText().toString())
                        && !TextUtils.isEmpty(passwordField.getText().toString())){
                    
                    String email = emailField.getText().toString();
                    String pwd =passwordField.getText().toString();
                    login(email,pwd);
                }else{
                    //ToDo: codice per gestire il mancato inserimento delle credenziali
                }

                break;
            //Gestione del click sul pulsante di creazione nuovo account    
            case R.id.createAccountBT:
                    //ToDo: codice per richiamare la schermata di creazione account
                break;
        }



    }

    private void login(String email, String pwd) {
        /*
         * Chiamata del metodo per effettuare l'autenticazione tramite email e password
         * con aggiunta del listener per monitorare l'esito della procedura
         */
        mAuth.signInWithEmailAndPassword(email, pwd)
                .addOnCompleteListener(MainActivity.this, new OnCompleteListener<AuthResult>() {
                    @Override
                    public void onComplete(@NonNull Task<AuthResult> task) {
                        if (task.isSuccessful()){
                            //Se l'autenticazione va a buon fine lo si segnala all'utente
                            Toast.makeText(MainActivity.this, getResources().getString(R.string.signed_in), Toast.LENGTH_LONG).show();
                        }else{
                            //ToDo: codice per gestire il fallimento della procedura di login
                        }
                    }
                });
    }
}

Per prima cosa abbiamo fatto un po’ di ordine all’interno del codice, lasciando all’interno dell'”onCreate()” solo l’istanziazione dei vari oggetti e il listener sullo stato di autenticazione. Il click sui due pulsanti lo gestiamo tramite la MainActivity, quindi implementando l’interfaccia “OnClickListener()” e il metodo “onClick()”.

Il codice è già sufficientemente documentato oltre che simile a quanto già visto, quindi non necessita di ulteriori spiegazioni. L’unico elemento di novità consiste nell’utilizzo della classe TextUtils ed in particolare del suo metodo statico “isEmpty()” per verificare se le due EditText contengono dati o meno. Il metodo ritorna true se la sequenza di caratteri ricevuta come parametro è null o vi sono 0 (zero) caratteri. Abbiamo fatto spesso controlli sul contenuto delle EditText, questo è solo una delle svariate alternative, scegliete quella che più vi aggrada.

L’app è già parzialmente funzionante. Se avete registrato manualmente un utente all’interno della console di Firebase potete verificare il funzionamento di quanto implementato finora.

Aggiungere un menu

Prima di fermarci e prenderci una pausa fino al prossimo articolo, aggiungiamo anche il codice necessario per permettere all’utente di effettuare il logout. Sapete infatti che questo rimane autenticato anche in caso di chiusura dell’app, quindi dobbiamo dargli la possibilità di de-autenticarsi. Sappiamo che è sufficiente richiamare un semplice metodo dell’istanza di FirebaseAuth, ma dove lo richiamiamo?

Allo scopo possiamo prevedere un menù. Questo è quello che vedete all’interno della toolbar nella parte destra della maggior parte delle app. È in genere composto da due sezioni, una nascosta, richiamabile cliccando sul pulsante coi tre puntini, l’altra con pulsanti a vista sulla toolbar.
Come tutti gli oggetti di questo genere in Android, è descrivibile tramite un’apposita risorsa.

La risorsa per il menù

Non ci resta da fare altro che creare la cartella “menu” all’interno della cartella “res” facendo attenzione a scegliere “menu” come “Resource type”. All’interno di questa creeremo il file “main_menu.xml”.

Questo lo strutturiamo nel seguente modo:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/action_add"
        android:icon="@drawable/ic_note_add_white_24dp"
        android:title="@string/add_post"
        app:showAsAction="always" />
    <item android:id="@+id/action_signout"
        android:title="@string/signout"
        app:showAsAction="never" />
</menu>

Al suo interno prevediamo due item: uno per aggiungere un nuovo post al blog, l’altro per effettuare il logout. Le varie proprietà sono abbastanza esplicative, l’unica degna di nota è “showAsAction”. Questa permette di stabilire se rendere o meno visibile un item. “never” lo nasconderà all’interno del menù contrassegnato dall’icona coi tre puntini; “always” lo terrà sempre visibile all’interno della toolbar.

Per il pulsante di aggiunta post abbiamo previsto anche un titolo oltre all’icona. In linea generale Android visualizzerà l’icona, ma in determinati casi, ad esempio in condizioni particolari di accessibilità, il titolo rimane comunque fondamentale, quindi è buona regola prevederlo a prescindere.

Il codice di gestione del menù

Il menù va inserito adesso all’interno della toolbar. In una delle scorse app abbiamo sfruttato un’activity basica come template, piuttosto che una vuota, quindi avete già avuto la possibilità di vedere il codice di gestione dei menù, anche se non l’abbiamo sfruttato. È sufficiente richiamare due metodi in override all’interno dell’activity in cui si vuole sfruttarlo, “onCreateOptionsMenu()” e “onOptionItemSelected()” :

//Metodo chiamato dalla piattaforma per la creazione del menù
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    //Recupero dell'inflater e inflate del layout predisposto
    getMenuInflater().inflate(R.menu.main_menu, menu);
    return super.onCreateOptionsMenu(menu);
}

//Metodo chiamato dalla piattaforma quando l'utente seleziona un item del menù
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if (item.getItemId() == R.id.action_signout){
        if (mAuth != null) {
            mAuth.signOut();
        }
    }
    return super.onOptionsItemSelected(item);
}

Il primo metodo viene invocato al momento della creazione del menù; il secondo quando si verifica un evento su questo. All’interno del primo metodo facciamo semplicemente l’inflate del layout creato appositamente; il secondo metodo riceve come parametro l’item selezionato. Controllando l’id di questo possiamo stabilire il da farsi, al momento a noi interessa solo gestire il logout dell’utente, quindi richiamiamo il metodo apposito.


Conclusioni

L’app a questo punto apparirà così:

App

col pulsante di logout non direttamente visibile, ma richiamabile cliccando sul pulsante coi tre puntini.

Con questo articolo possiamo fermarci qui. Nel prossimo articolo inizieremo ad occuparci dell’activity dedicata alla visualizzazione dei post.

Condividi su:

label, , , ,

About the author