Créer une application de messagerie basique

1. Avant de commencer

Cet atelier de programmation est l'activité 2 du parcours "Premiers pas avec la classification de texte sur mobile".

Dans cet atelier de programmation, vous allez créer une application de messagerie simple. Plus tard dans le parcours, vous mettrez à jour cette application avec un modèle de machine learning qui filtrera les spams indésirables des messages de l'application.

Prérequis

Connaissances de base en développement Android avec Kotlin et (facultativement) en développement iOS avec Swift

Ce que vous allez faire

Une application de messagerie simple

Prérequis

Pour Android, vous aurez besoin d'Android Studio pour commencer. Veuillez vous assurer qu'il est installé et entièrement à jour avant de continuer.
Pour iOS, vous aurez besoin de Xcode. Vous le trouverez sur l'App Store. (Si vous souhaitez écrire l'application iOS uniquement, passez directement à l'étape 5.

Obtenir le code

Si vous ne souhaitez pas suivre les étapes une par une et que vous voulez simplement voir le code final de ce parcours, il se trouve à l'adresse

git clone https://github.com/googlecodelabs/odml-pathways

Dans ce répertoire, recherchez le répertoire TextClassificationOnMobile, qui contient les sous-répertoires Android et iOS. Ces répertoires contiendront des sous-répertoires TextClassificationStep1, qui contiennent l'application sur Android et iOS, respectivement.

2. Créer un projet dans Android Studio

Lancez Android Studio.

Sélectionnez Créer un projet. Une boîte de dialogue s'affiche et vous invite à sélectionner un modèle de projet.
Sélectionnez Empty Activity (Activité vide), puis cliquez sur Next (Suivant). Vous serez ensuite invité à configurer votre projet. Choisissez ce que vous voulez, mais assurez-vous que le langage est Kotlin et que le SDK minimal est API 23.
Cliquez sur Terminer. Une fois cette opération terminée, Android Studio s'ouvre avec votre projet. La synchronisation Gradle peut prendre quelques instants pour s'assurer que tout est en ordre, en particulier si vous utilisez Android Studio pour la première fois.

3. Créer l'interface utilisateur

L'interface utilisateur d'une application Android est créée à l'aide d'un fichier XML appelé fichier de mise en page.

Ouvrez le fichier. Dans l'explorateur d'Android Studio, cliquez sur app > res > layout > activity_main.xml.

En haut à droite de l'écran, vous devriez voir une sélection avec des onglets pour le code, la division et la conception, comme ceci :

Avant de passer à l'étape suivante, assurez-vous que "Code" est sélectionné.

Remplacez le code par ce code XML :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

 <LinearLayout android:orientation="vertical"
      android:layout_height="match_parent"
      android:layout_width="match_parent">
      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="horizontal">
          <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Enter a string:"></TextView>
          <EditText
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:id="@+id/txtInput"></EditText>

      </LinearLayout>

      <TextView
          android:id="@+id/txtOutput"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Output Goes here"
          android:textSize="36sp"></TextView>
     <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:id="@+id/btnSendText"
          android:text="Send"></Button>

 </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Vous obtenez ainsi une interface utilisateur de base contenant une zone de saisie avec un TextView, vous invitant à Enter a String (Saisir une chaîne) et un EditText appelé txtInput qui peut être utilisé pour saisir une chaîne. En dessous se trouve une TextView qui affichera le résultat et un bouton sur lequel l'utilisateur appuiera pour déclencher la classification.

L'étape suivante consiste à écrire le code qui activera cette interface utilisateur.

4. Associer les commandes et créer l'application

Vous pouvez modifier le code de cette activité en recherchant le fichier de code MainActivity.

Dans Android Studio, cliquez sur app > java > MainActivity.

Ouvrez le fichier MainActivity pour accéder à l'éditeur de code. Remplacez tout le contenu de ce fichier sauf la première ligne commençant par "package" par ce code :

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView

class MainActivity : AppCompatActivity() {
    lateinit var txtInput: EditText
    lateinit var btnSendText: Button
    lateinit var txtOutput: TextView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        txtInput = findViewById(R.id.txtInput)
        txtOutput = findViewById(R.id.txtOutput)
        btnSendText = findViewById(R.id.btnSendText)
        btnSendText.setOnClickListener {
            var toSend:String = txtInput.text.toString()
            txtOutput.text = toSend
        }
    }
}

Ce code connecte les commandes de la mise en page à txtInput, txtOutput et btnSendText afin qu'elles puissent être traitées dans le code. Ensuite, il configure un OnClickListener pour le bouton, de sorte que lorsque l'utilisateur le touche, le texte de txtInput est lu, converti en chaîne, puis la propriété txtOutput.text est définie sur cette chaîne.

5. Créer l'application de base sur iOS

Les étapes suivantes nécessitent une certaine familiarité avec Xcode et le développement iOS avec Swift.

Si vous ne souhaitez pas suivre le processus de création, vous pouvez cloner le dépôt et ouvrir l'application directement. Il s'appelle "TextClassificationStep1" et se trouve dans le dossier iOS du dépôt.

Pour créer l'application de base, vous allez commencer par Xcode.

Créez une application à l'aide du modèle de base :

Choisissez les options de votre nouveau projet. Attribuez un nom et un identifiant d'organisation à votre produit. Vous pouvez saisir ce que vous souhaitez ou suivre l'exemple ci-dessous (mais veillez à définir l'interface sur Storyboard et le cycle de vie sur UIKitApp Delegate, comme indiqué).

6. Modifier le storyboard

Ouvrez Main.storyboard. Une surface de conception sur laquelle vous pouvez ajouter des commandes s'affiche.
Pour ajouter des commandes, cliquez sur le bouton + en haut de la fenêtre Xcode.

Utilisez-le pour placer un contrôle TextView, un contrôle Button et un contrôle Label sur la surface de conception. Voici un exemple :

Utilisez l'assistant pour ouvrir une vue côte à côte avec le storyboard et les fichiers ViewController.swift. L'assistant est une petite icône en haut à droite de l'écran, comme indiqué ici :

Appuyez sur la touche CONTROL et faites glisser le contrôle TextView sur la surface du code. Une flèche bleue devrait s'afficher lorsque vous faites glisser l'élément.
Déposez-le sur le code juste en dessous de la déclaration de classe. Un pop-up vous demandera le type de connexion. Voici un exemple :

Sélectionnez Outlet et attribuez-lui le nom txtInput.
Faites de même pour le libellé, puis définissez le type de connexion sur Sortie et nommez-le txtOutput.
Enfin, faites glisser le bouton, mais cette fois, sélectionnez Action comme type de connexion. (N'utilisez pas Point de vente comme type de connexion.)
Nommez l'action btnSendText.

Lorsque vous avez terminé, votre code en haut de la classe doit se présenter comme suit :

@IBOutlet weak var txtInput: UITextView!
@IBOutlet weak var txtOutput: UILabel!
@IBAction func btnSendText(_ sender: Any) {
}

7. Terminer de coder l'application iOS de base

Comme cette vue utilise une UITextView, elle doit être une UITextViewDelegate pour répondre aux événements sur cette vue.

Pour ce faire, modifiez la déclaration de classe comme suit :

class ViewController: UIViewController, UITextViewDelegate {

Ensuite, dans la fonction viewDidLoad, définissez le délégué pour UITextView (que vous avez appelé txtInput lorsque vous avez configuré le point de vente) sur cette classe comme ceci :

override func viewDidLoad() {
    super.viewDidLoad()
    txtInput.delegate = self
}

Enfin, vous devez gérer la suppression du clavier de l'écran une fois que l'utilisateur appuie sur la touche Entrée. Pour ce faire, vous devez utiliser la délégation que vous venez de configurer et implémenter cette méthode sur le ViewController pour la gérer.

func textView(_ textView: UITextView, shouldChangeTextIn range: 
              NSRange, replacementText text: String) -> Bool {
    if (text == "\n") {
        textView.resignFirstResponder()
        return false
    }
    return true
}

Pour cette application, l'action du bouton est triviale. Nous allons simplement transmettre ce que l'utilisateur saisit à la sortie. Vous verrez plus tard comment un modèle de traitement du langage naturel peut filtrer ce texte. Mais pour l'instant, connectons-le simplement pour simuler un transfert.

Vous avez déjà créé l'action btnSendText. Il vous suffit donc d'y ajouter le code suivant :

@IBAction func btnSendText(_ sender: Any) {
    txtOutput.text = "Sent :" + txtInput.text
}

8. Félicitations !

Vous avez terminé cet atelier de programmation.

Dans la suite du parcours, vous apprendrez à créer un modèle de traitement du langage naturel (NLP), que vous réintégrerez ensuite dans cette application pour lui permettre de filtrer le texte de vos utilisateurs et d'identifier les commentaires contenant du spam.