Share
Ce que vous allez créerAvec Firebase, la création d'applications sociales en temps réel est une promenade dans le parc. Et la meilleure chose à ce sujet: vous n'avez pas à écrire une seule ligne de code côté serveur.
Dans ce tutoriel, je vais vous montrer comment utiliser l'interface utilisateur de Firebase pour créer un groapplication de chat que vous pouvez partager avec vos amis. Cela va être une application très simple avec un seul salon de discussion, qui est ouvert à tous les utilisateurs.
Comme vous l'aurez deviné, l'application dépendra de Firebase Auth pour gérer l'enregistrement des utilisateurs et la connexion. Elle utilisera également la base de données en temps réel de Firebase pour stocker les messages de discussion en groupe..
Pour pouvoir suivre ce didacticiel pas à pas, vous devez disposer des éléments suivants:
Pour obtenir des instructions sur la configuration d'un compte Firebase et la préparation au développement de Firebase dans Android Studio, consultez mon tutoriel Prise en main de Firebase pour Android ici sur Envato Tuts.+.
Lancez Android Studio et créez un nouveau projet avec une activité vide appelée Activité principale.
Pour que le projet utilise la plate-forme Firebase, ouvrez la fenêtre de Firebase Assistant en cliquant sur Outils> Firebase.
Lorsque vous utilisez la plateforme Firebase, il est généralement judicieux d’ajouter Firebase Analytics au projet. Par conséquent, dans la fenêtre de l’assistant Firebase, accédez à la Analytique section et appuyez sur Enregistrer un événement Analytics.
Ensuite, appuyez sur le Se connecter à Firebase bouton et assurez-vous que le Créer un nouveau projet Firebase l'option est sélectionnée. Une fois la connexion établie, appuyez sur le bouton Ajouter des analyses à votre application bouton.
À ce stade, le projet Android Studio est non seulement intégré à Firebase Analytics, mais il est également prêt à utiliser tous les autres services Firebase..
Nous utiliserons deux bibliothèques dans ce projet: l'interface utilisateur de Firebase et la bibliothèque de prise en charge de la conception Android. Par conséquent, ouvrez le build.gradle fichier du app module et ajouter ce qui suit compiler dépendances à elle:
compiler 'com.android.support:design:23.4.0' compiler 'com.firebaseui: firebase-ui: 0.6.0'
appuyez sur la Synchroniser maintenant bouton pour mettre à jour le projet.
le activity_main.xml fichier, qui est déjà lié à Activité principale, définit le contenu de l'écran d'accueil de l'application. En d'autres termes, il représentera la salle de discussion.
Comme la plupart des autres applications de discussion de groupe disponibles aujourd'hui, notre application comportera les éléments d'interface utilisateur suivants:
Donc, activity_main.xml doit avoir un ListView, un Éditer le texte, et un FloatingActionButton. Après les avoir tous placés dans un Disposition relative widget, votre mise en page XML devrait ressembler à ceci:
Notez que j'ai placé le Éditer le texte widget à l'intérieur d'un TextInputLayout widget. Cela ajoute une étiquette flottante à la Éditer le texte, ce qui est important si vous souhaitez respecter les directives de conception des matériaux.
Maintenant que la disposition de l'écran d'accueil est prête, nous pouvons passer à la création d'une disposition pour les messages de discussion, qui seront des éléments à l'intérieur de la fenêtre. ListView. Commencez par créer un nouveau fichier XML de mise en page appelé message.xml, dont l'élément racine est Disposition relative.
La mise en page doit avoir Affichage des widgets pour afficher le texte du message de discussion, l'heure à laquelle il a été envoyé et son auteur. Vous êtes libre de les placer dans n'importe quel ordre. Voici la mise en page que je vais utiliser:
Autoriser les utilisateurs à publier anonymement des messages sur le salon de discussion serait une très mauvaise idée. Cela pourrait entraîner du spam, des problèmes de sécurité et une expérience de discussion moins qu'idéale pour les utilisateurs. Par conséquent, configurons maintenant notre application de sorte que seuls les utilisateurs enregistrés puissent lire et poster des messages..
Commencez par aller au Auth section de la console Firebase et permettant Mot de passe de l'email en tant que fournisseur de connexion.
N'hésitez pas à activer également les fournisseurs de connexion OAuth 2.0. Cependant, FirebaseUI v0.6.0 prend en charge de manière transparente uniquement Google Sign-In et Facebook Login..
Dès que l'application démarre, elle doit vérifier si l'utilisateur est connecté. Si c'est le cas, l'application doit continuer et afficher le contenu de la salle de discussion. Sinon, l'utilisateur doit être redirigé vers un écran de connexion ou un écran de connexion. Avec FirebaseUI, la création de ces écrans nécessite beaucoup moins de code que vous ne le pensez.
À l'intérieur de onCreate () méthode de Activité principale, vérifier si l'utilisateur est déjà connecté en vérifiant si le compte actuel FirebaseUser objet n'est pas nul. Si c'est nul, vous devez créer et configurer un Intention objet qui ouvre une activité de connexion. Pour ce faire, utilisez le SignInIntentBuilder classe. Une fois l’intention prête, vous devez lancer l’activité de connexion à l’aide du bouton startActivityForResult () méthode.
Notez que l'activité de connexion permet également aux nouveaux utilisateurs de s'inscrire. Par conséquent, vous n'avez pas à écrire de code supplémentaire pour gérer l'enregistrement de l'utilisateur.
Ajoutez le code suivant au onCreate () méthode:
if (FirebaseAuth.getInstance (). getCurrentUser () == null) // Début de la connexion / de l'activité d'activité startActivityForResult (AuthUI.getInstance () .createSignInIntentBuilder () .build (), construction (), SIGN_IN_REQUEST_CODE); else // L'utilisateur est déjà connecté. Par conséquent, affichez // un Toast Toast.makeText (this, "Welcome" + FirebaseAuth.getInstance () .getCurrentUser () .getDisplayName (), Toast.LENGTH_LONG) .show ( ) // Charge le contenu de la salle de discussion displayChatMessages ();
Comme vous pouvez le voir dans le code ci-dessus, si l’utilisateur est déjà connecté, nous affichons d’abord un Pain grillé accueillir l’utilisateur, puis appeler une méthode nommée displayChatMessages. Pour l'instant, créez simplement un talon pour cela. Nous ajouterons du code plus tard.
displayChatMessages () privé privé
Une fois que l'utilisateur s'est connecté, Activité principale recevra un résultat sous la forme d'un Intention. Pour le gérer, vous devez remplacer le onActivityResult () méthode.
Si le code du résultat est RESULT_OK, cela signifie que l'utilisateur s'est connecté avec succès. Si oui, vous devez appeler le displayChatMessages () méthode à nouveau. Sinon, appelez terminer() fermer l'application.
@Override protected void onActivityResult (int requestCode, int resultCode, données d'intention) super.onActivityResult (requestCode, resultCode, data); if (requestCode == SIGN_IN_REQUEST_CODE) if (resultCode == RESULT_OK) Toast.makeText (this, "Connexion réussie. Bienvenue!", Toast.LENGTH_LONG) .show (); displayChatMessages (); else Toast.makeText (this, "Nous ne pouvons pas vous connecter. Veuillez réessayer plus tard.", Toast.LENGTH_LONG) .show (); // Ferme l'application finish ();
À ce stade, vous pouvez exécuter l'application et consulter les écrans de connexion et d'inscription..
Par défaut, FirebaseUI utilise Smart Lock pour les mots de passe. Par conséquent, une fois les utilisateurs connectés, ils resteront connectés même si l'application est redémarrée. Pour permettre aux utilisateurs de se déconnecter, nous allons maintenant ajouter une option de déconnexion au menu de débordement de Activité principale.
Créez un nouveau fichier de ressources de menu appelé main_menu.xml et ajouter un seul article à qui, Titre attribut est mis à Déconnexion. Le contenu du fichier devrait ressembler à ceci:
Pour instancier la ressource de menu à l'intérieur Activité principale, remplacer le onCreateOptionsMenu () méthode et appelez le gonfler() méthode du MenuInflater objet.
@Override public boolean onCreateOptionsMenu (menu Menu) getMenuInflater (). Inflate (R.menu.main_menu, menu); retourne vrai;
Ensuite, remplacez le onOptionsItemSelected () méthode pour gérer les événements de clic sur l'élément de menu. Dans la méthode, vous pouvez appeler le Déconnexion() méthode du AuthUI classe pour déconnecter l'utilisateur. Comme l'opération de déconnexion est exécutée de manière asynchrone, nous ajouterons également un OnCompleteListener à cela.
@Override public boolean onOptionsItemSelected (élément MenuItem) if (item.getItemId () == R.id.menu_sign_out) AuthUI.getInstance (). SignOut (this) .addOnCompleteListener (new OnCompleteListener() @Override public void onComplete (@NonNull Task tâche) Toast.makeText (MainActivity.this, "Vous avez été déconnecté.", Toast.LENGTH_LONG) .show (); // Fermer l'activité finish (); ); return true;
Une fois l'utilisateur déconnecté, l'application devrait se fermer automatiquement. C’est la raison pour laquelle vous voyez un appel au terminer() méthode dans le code ci-dessus.
Afin de stocker les messages de discussion dans la base de données en temps réel Firebase, vous devez créer un modèle pour ces messages. La présentation du message de discussion, créée précédemment dans ce didacticiel, comporte trois vues. Pour pouvoir renseigner ces vues, le modèle doit également comporter au moins trois champs..
Créez une nouvelle classe Java appelée ChatMessage.java et ajoutez-y trois variables membres: messageTexte, messageUtilisateur, et messageTime. Ajoutez également un constructeur pour initialiser ces variables.
Pour rendre le modèle compatible avec FirebaseUI, vous devez également lui ajouter un constructeur par défaut, ainsi que des getters et des setters pour toutes les variables membres..
À ce stade, le ChatMessage la classe devrait ressembler à ceci:
Classe publique ChatMessage private String messageText; private String messageUser; privé long messageTime; public ChatMessage (String messageText, String messageUser) this.messageText = messageText; this.messageUser = messageUser; // Initialisation à l'heure actuelle messageTime = new Date (). GetTime (); public ChatMessage () public String getMessageText () return messageText; public void setMessageText (String messageText) this.messageText = messageText; public String getMessageUser () return messageUser; public void setMessageUser (String messageUser) this.messageUser = messageUser; public long getMessageTime () return messageTime; public void setMessageTime (long messageTime) this.messageTime = messageTime;
Maintenant que le modèle est prêt, nous pouvons facilement ajouter de nouveaux messages de discussion à la base de données en temps réel Firebase..
Pour poster un nouveau message, l'utilisateur appuiera sur la touche FloatingActionButton. Par conséquent, vous devez ajouter un OnClickListener à cela.
À l'intérieur de l'auditeur, vous devez d'abord obtenir un Référence de la base de données objet en utilisant le getReference () méthode du FirebaseDatabase classe. Vous pouvez alors appeler le pousser() et setValue () méthodes pour ajouter de nouvelles instances du ChatMessage classe à la base de données en temps réel.
le ChatMessage bien entendu, les instances doivent être initialisées avec le contenu du Éditer le texte et le nom d'affichage de l'utilisateur actuellement connecté.
En conséquence, ajoutez le code suivant à la onCreate () méthode:
Accentsconagua
FloatingActionButton fab = (FloatingActionButton) findViewById (R.id.fab); fab.setOnClickListener (nouvelle View.OnClickListener () @Override public void onClick (Vue) EditText input = (EditText) findViewById (R.id.input); // lit le champ de saisie et envoie une nouvelle instance // de ChatMessage à la base de données Firebase FirebaseDatabase.getInstance () .getReference () .push () .setValue (new ChatMessage (input.getText (). ToString (), FirebaseAuth.getInstance () .getCurrentUser () .getCurrentUser () .getDisplayName () .get; // Efface l'entrée input.setText (""););Les données de la base de données en temps réel Firebase sont toujours stockées sous forme de paires clé-valeur. Cependant, si vous observez le code ci-dessus, vous verrez que nous appelons setValue () sans spécifier aucune clé. Cela n'est autorisé que parce que l'appel du setValue () la méthode est précédée d'un appel à la pousser() méthode, qui génère automatiquement une nouvelle clé.
FirebaseUI a une classe très pratique appelée FirebaseListAdapter, qui réduit considérablement les efforts nécessaires pour peupler un ListView en utilisant les données présentes dans la base de données en temps réel Firebase. Nous allons l'utiliser maintenant pour récupérer et afficher tous les ChatMessage objets présents dans la base de données.
Ajouter un FirebaseListAdapter objet en tant que nouvelle variable membre de la Activité principale classe.
FirebaseListAdapter privéadaptateur;
À l'intérieur de displayChatMessages () méthode, initialisez l'adaptateur à l'aide de son constructeur, qui attend les arguments suivants:
Activitéclasse de l'objet qui vous intéresseRéférence de la base de données objetFirebaseListAdapter est une classe abstraite et a un résumé populateView () méthode, qui doit être remplacée.
Comme son nom l'indique, populateView () est utilisé pour renseigner les vues de chaque élément de la liste. Si vous connaissez le ArrayAdapter classe, vous pouvez penser à populateView () comme alternative au getView () méthode.
À l'intérieur de la méthode, vous devez d'abord utiliser findViewById () obtenir des références à chacun Affichage c'est présent dans le message.xml fichier de mise en page. Vous pouvez alors appeler leur Définir le texte() méthodes et les peupler en utilisant les getters de la ChatMessage classe.
À ce stade, le contenu de la displayChatMessages () méthode devrait ressembler à ceci:
ListView listOfMessages = (ListView) findViewById (R.id.list_of_messages); adaptateur = new FirebaseListAdapter(this, ChatMessage.class, R.layout.message, FirebaseDatabase.getInstance (). getReference ()) @Override protected void populateView (Afficher v, modèle ChatMessage, position int) // Récupère des références aux vues du message. xml TextView messageText = (TextView) v.findViewById (R.id.message_text); TextView messageUser = (TextView) v.findViewById (R.id.message_user); TextView messageTime = (TextView) v.findViewById (R.id.message_time); // Définit leur texte messageText.setText (model.getMessageText ()); messageUser.setText (model.getMessageUser ()); // Formate la date avant de l'afficher messageTime.setText (DateFormat.format ("jj-MM-aaaa (HH: mm: ss)", model.getMessageTime ()); ; listOfMessages.setAdapter (adaptateur);
L'application de discussion de groupe est prête. Exécuter et poster de nouveaux messages pour les voir apparaître immédiatement dans le ListView. Si vous partagez l'application avec vos amis, vous devriez également pouvoir voir leurs messages dès qu'ils les publient..
Dans ce didacticiel, vous avez appris à utiliser Firebase et FirebaseUI pour créer une application de discussion de groupe très simple. Vous avez également constaté à quel point il est facile de travailler avec les classes disponibles dans FirebaseUI pour créer rapidement de nouveaux écrans et implémenter des fonctionnalités complexes..
Pour en savoir plus sur Firebase et FirebaseUI, reportez-vous à la documentation officielle. Ou consultez certains de nos autres didacticiels Firebase ici sur Envato Tuts+!
