Créer une application de messagerie basique

1. Avant de commencer

Cet atelier de programmation correspond à 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 chat simple. Plus tard dans le parcours, vous mettrez à jour cette application avec un modèle de machine learning qui filtrera le spam indésirable des messages dans l'application.

Prérequis

• Connaissances de base du développement Android avec Kotlin et (éventuellement) du développement iOS avec Swift

Ce que vous allez faire

• Une application de chat simple

Prérequis

• Pour Android, vous aurez besoin d'Android Studio pour commencer. Assurez-vous qu'il est installé et mis à jour avant de continuer.
• Pour iOS, vous aurez besoin de Xcode. Vous le trouverez dans l'App Store. (Si vous voulez uniquement écrire l'application iOS, passez directement à l'étape 5.

Obtenir le code

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

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

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

2. Créer un projet dans Android Studio

1. Lancez Android Studio.

1. Sélectionnez Créer un projet. Une boîte de dialogue vous invite à sélectionner un modèle de projet.
2. Sélectionnez Empty Activity (Activité vide) et 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.
3. Cliquez sur Terminer. Une fois cette opération effectuée, Android Studio s'ouvre avec votre projet. La synchronisation Gradle peut prendre quelques instants afin de 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.

1. Ouvrez le fichier. Cliquez sur App > res > layout > activity_main.xml à l'aide de l'explorateur d'Android Studio.

En haut à droite de l'écran, vous devriez voir une sélection comportant des onglets pour "Code", "Split" (Diviser) et "Design" (Conception), comme ceci:

Assurez-vous que l'option "Code" est sélectionnée avant de passer à l'étape suivante.

2. Remplacez le code par le code XML suivant:

<?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 une interface utilisateur de base contenant une zone de saisie avec un élément TextView, qui vous invite à saisir une chaîne et à un élément EditText appelé txtInput qui peut être utilisé pour saisir une chaîne. En dessous se trouve un élément TextView qui affiche la sortie, ainsi qu'un bouton sur lequel l'utilisateur doit appuyer pour déclencher la classification.

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

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

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

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

2. 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. Ainsi, lorsque l'utilisateur appuie dessus, le texte de txtInput est lu, converti en chaîne, puis la propriété txtOutput.text est définie sur cette chaîne.

Si vous suivez le parcours de classification de texte "Premiers pas avec l'application mobile", c'est le comportement que vous avez vu dans l'activité 1, la vidéo de démonstration, dans laquelle l'application utilise simplement le texte saisi par l'utilisateur, sans vérifier la présence de spam.

Dans le prochain atelier de programmation, vous découvrirez comment filtrer le spam dans les commentaires à l'aide d'un modèle de machine learning dans cette application.

Si vous souhaitez créer la même application sur iOS, veuillez poursuivre cet atelier de programmation.

5. Créer l'application Basic sur iOS

Les étapes suivantes nécessitent une certaine connaissance de Xcode et du développement iOS avec Swift.

Si vous ne souhaitez pas lancer 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 commencez par Xcode.

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

2. Choisissez des options pour 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: (Veillez toutefois à définir l'interface sur Storyboard et le cycle de vie sur Délégué UIKitApp, comme indiqué ci-dessous.)

6. Modifier le storyboard

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

3. Utilisez-le pour placer une commande TextView, "Bouton" et une commande "Libellé" sur la surface de conception. Voici un exemple :

4. À l'aide de l'assistant, ouvrez une vue côte à côte du storyboard et des fichiers ViewController.swift ouverts. L'assistant est une petite icône en haut à droite de l'écran, comme illustré ci-dessous:

1. Appuyez sur la touche CONTROL et faites glisser la commande TextView sur la surface de code. Vous devriez voir une flèche bleue lorsque vous faites glisser.
2. Déposez l'élément dans le code situé juste en dessous de la déclaration de classe. Un pop-up vous demandant le type de connexion s'affiche. Voici un exemple :

3. Sélectionnez Prise et nommez-la "txtInput".
4. Procédez de la même manière pour l'étiquette, puis définissez le type de connexion sur Outlet (Prise) et nommez-le "txtOutput".
5. Enfin, faites glisser le bouton tout en sélectionnant cette fois Action comme type de connexion. (N'utilisez pas le type de connexion Prise.)
6. 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 le codage de l'application iOS de base

Comme cette vue utilise un UITextView, il doit s'agir d'un UITextViewDelegate pour pouvoir lui répondre aux événements de cette vue.

Pour l'obtenir, modifiez la déclaration de classe comme suit:

class ViewController: UIViewController, UITextViewDelegate {

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

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

Enfin, vous devez gérer la suppression du clavier de l'affichage lorsque l'utilisateur appuie sur la touche Entrée du clavier. Cela se fait par le biais de la délégation que vous venez de configurer, et vous pouvez 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 simple. Nous allons simplement transmettre ce que l'utilisateur saisit à la sortie. Vous verrez plus tard comment un modèle de TLN peut filtrer ce texte. Mais pour l'instant, branchons-le pour simuler un passthrough.

Comme vous avez déjà créé l'action btnSendText, il ne vous reste plus qu'à y ajouter le code:

@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 allez apprendre à créer un modèle de TLN. Vous le réutiliserez plus tard dans cette application pour lui permettre de filtrer le texte de vos utilisateurs contre le spam dans les commentaires.