Créer une application de style de messagerie de base

1. Avant de commencer

Cet atelier de programmation est l'activité 2 de la procédure de classification de texte pour mobile.

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

Prérequis

Une connaissance de base du développement Android avec Kotlin et (éventuellement) du développement iOS avec Swift

Ce que vous allez faire

Une appli de chat simple

Prérequis

Pour Android, vous devez commencer par Android Studio. Avant de continuer, veuillez vérifier qu'elle est installée et complètement mise à jour.
Pour iOS, vous aurez besoin de Xcode. Vous le trouverez dans l'App Store. (Si vous souhaitez écrire uniquement l'application iOS, passez directement à l'étape 5.

Obtenir le code

Si vous ne souhaitez pas suivre la procédure étape par étape et si vous souhaitez simplement consulter le code final de ce parcours, cliquez sur

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

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

2. Créer un projet dans Android Studio

Lancez Android Studio.

Sélectionnez Create New Project (Créer un projet). Une boîte de dialogue 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 le code de votre choix, mais assurez-vous que le langage est Kotlin et que le SDK minimal est l'API 23.
Cliquez sur Terminer. Une fois cette opération effectuée, Android Studio s'ouvre avec votre projet. La synchronisation de Gradle peut prendre quelques instants pour s'assurer que tout fonctionne correctement, surtout 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. Cliquez sur app > res > layout > activity_main.xml à l'aide de l'explorateur dans Android Studio.

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

Assurez-vous de sélectionner "Code" avant de passer à l'étape suivante.

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 obtiendrez ainsi une interface utilisateur de base contenant une zone d'entrée avec TextView, vous invitant à saisir une chaîne et un élément TextText intitulé txtInput qui peut être utilisé pour saisir une chaîne. En dessous se trouve un TextView qui affiche le résultat, ainsi qu'un bouton sur lequel l'utilisateur appuie pour déclencher la classification.

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

4. Associez les commandes et créez 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 qui commence par "package" par le code suivant:

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 associe les commandes de la mise en page à txtInput, txtOutput et btnSendText pour 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 soit lu, converti en chaîne, puis la propriété txtOutput.text soit définie sur cela. chaîne

5. Créer l'application Basic sur iOS

La procédure suivante nécessite une certaine connaissance de Xcode et du développement sur 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'agit de 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 des options pour votre nouveau projet. Attribuez un nom et un identifiant d'organisation à votre produit. Vous pouvez saisir le texte souhaité ou suivre l'exemple ci-dessous (mais assurez-vous de définir l'interface sur Storyboard et le cycle de vie sur UIKitApp Delegate, comme affiché).

6. Modifier le storyboard

Ouvrez Main.storyboard. Vous verrez apparaître une surface sur laquelle vous pourrez ajouter des commandes.
Pour ajouter des commandes, cliquez sur le bouton + en haut de la fenêtre Xcode.

Permet de placer une commande TextView, une commande Bouton et une commande de libellé sur la surface de conception. Exemple :

Utilisez l'Assistant pour ouvrir un affichage côte à côte avec le storyboard et les fichiers ViewController.swift ouverts. L'assistant est une petite icône en haut à droite de l'écran, comme illustré ci-dessous:

Appuyez sur la touche de commande et faites glisser la commande TextView vers la surface du code. Une flèche bleue devrait s'afficher à mesure que vous faites glisser la souris.
Placez le code juste en dessous de la déclaration de classe. Un pop-up s'affiche, pour vous demander le type de connexion. Exemple :

Sélectionnez Prise et nommez-la "txtInput".
Procédez de la même manière pour l'étiquette, créez le type de connexion Outlet, puis attribuez-lui le nom txtOutput.
Pour finir, faites glisser le bouton en sélectionnant l'option Action comme type de connexion. N'utilisez pas Prise en tant que type de connexion.
Nommez l'action btnSendText.

Lorsque vous avez terminé, votre code en haut du cours doit ressembler à ceci:

@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, pour qu'elle puisse répondre aux événements de cette vue, il doit s'agir d'un UITextViewDelegate.

Vous pouvez l'obtenir en modifiant la déclaration de classe comme suit:

class ViewController: UIViewController, UITextViewDelegate {

Ensuite, dans la fonction view DidLoad, définissez le délégué pour l'UITextView (que vous avez appelé txtInput lors de la configuration de la sortie) comme suit:

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

Enfin, vous souhaitez gérer la suppression du clavier de l'affichage lorsque l'utilisateur appuie sur la touche Entrée. Cette opération s'effectue via 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 passer en revue ce que l'utilisateur saisit dans le résultat. Vous verrez plus tard comment un modèle de TLN peut filtrer ce texte. Pour l'instant, attachons-le simplement pour simuler un passthrough.

Vous avez déjà créé l'action btnSendText. Il vous suffit donc d'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, vous allez apprendre à créer un modèle de TLN, que vous utiliserez ensuite dans cette application pour filtrer le texte des utilisateurs afin de filtrer les spams.