Criar um app básico de mensagens

1. Antes de começar

Este codelab é a atividade 2 do programa de aprendizagem "Introdução à classificação de textos em dispositivos móveis".

Neste codelab, você criará um app de mensagens simples. Mais adiante no Programa de treinamentos, você vai atualizar este app com um modelo de machine learning que vai filtrar spam indesejado das mensagens.

Pré-requisitos

• Conhecimento básico de desenvolvimento para Android com Kotlin e, opcionalmente, desenvolvimento para iOS com Swift.

O que você vai criar

• Um app de mensagens simples

O que é necessário

• Para começar com Android, você precisa do Android Studio. Verifique se ele está instalado e totalmente atualizado antes de continuar.
• Para iOS, você precisará do Xcode. Você encontra esse recurso na App Store. Se quiser criar apenas o app para iOS, vá direto para a etapa 5.

Buscar o código

Se você não quiser seguir as etapas e só ver o código final deste Programa de treinamentos, está em

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

Encontre o diretório TextClassificationOnMobile. Dentro dele, você verá os subdiretórios Android e iOS. Esses diretórios conterão os subdiretórios TextClassificationStep1, que contêm o app no Android e no iOS, respectivamente.

2. Criar um novo projeto no Android Studio

1. Inicie o Android Studio.

1. Selecione Criar novo projeto. Será exibida uma caixa de diálogo que solicita a seleção de um modelo de projeto.
2. Selecione Empty Activity e clique em Next. Em seguida, você vai precisar configurar seu projeto. Escolha o que quiser, mas verifique se a linguagem é Kotlin e se o SDK mínimo é API 23.
3. Clique em Finish. Depois disso, o Android Studio será aberto com seu projeto. Pode levar alguns instantes para ele executar uma sincronização do Gradle para garantir que tudo esteja em ordem, especialmente se esta for a primeira vez que você usa o Android Studio.

3. Criar a interface do usuário

A interface do usuário de um app Android é criada usando um arquivo XML chamado arquivo de layout.

1. Abra o arquivo. Clique em Aplicativo > res > layout > activity_main.xml usando o explorador no Android Studio.

No lado superior direito da tela, você verá uma seleção que tem guias para código, divisão e design, como esta:

Certifique-se de que o "Código" está selecionada antes de passar para a próxima etapa.

2. Substitua o código por este 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>

Isso fornece uma interface do usuário básica contendo uma área de entrada com uma TextView, solicitando que você insira uma string e um EditText chamado txtInput, que pode ser usado para inserir uma string. Abaixo dela, há uma TextView que renderiza a saída e um botão que o usuário pressiona para acionar a classificação.

A próxima etapa é escrever o código que ativará essa interface do usuário.

4. Conectar os controles e criar o app

Você pode editar o código dessa atividade localizando o arquivo de código MainActivity.

1. No Android Studio, clique em app > java > MainActivity.

2. Abra o arquivo MainActivity para acessar o editor de código. Substitua tudo neste arquivo, exceto a primeira linha que começa com "package" por este código:

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
        }
    }
}

Esse código conecta os controles no layout a txtInput, txtOutput e btnSendText para que possam ser endereçados no código. Em seguida, ele configura uma OnClickListener para o botão. Assim, quando o usuário tocar nele, o texto de txtInput será lido e convertido em uma string. Em seguida, a propriedade txtOutput.text será definida como essa string.

Se você estiver acompanhando o programa Noções básicas sobre classificação de texto em dispositivos móveis, esse é o comportamento observado na atividade 1, o vídeo de demonstração, em que o app vai usar o que o usuário digitar, sem verificar spam.

No próximo codelab, você vai aprender a usar um modelo de machine learning neste app para filtrar spam de comentários.

Se você quiser criar o mesmo app no iOS, continue com este codelab.

5. Criar o app Basic no iOS

As etapas a seguir exigem alguma familiaridade com o desenvolvimento em Xcode e iOS com Swift.

Se você não quiser passar pelo processo de criação, clone o repositório e abra o app diretamente. Ele é chamado TextClassificationStep1 e está na pasta do iOS no repositório.

Para criar o app básico, comece com o Xcode.

1. Crie um novo App usando o modelo básico:

2. Escolha opções para seu novo projeto. Dê ao produto um Nome e um Identificador de organização. Você pode digitar o que desejar ou acompanhar o exemplo abaixo: (mas certifique-se de definir a interface como Storyboard e o ciclo de vida como UIKitApp Delegate, como mostrado).

6. Editar o storyboard

1. Abra Main.storyboard. Você vai encontrar uma superfície de design para adicionar controles.
2. Para adicionar controles, clique no botão + na parte superior da janela do Xcode.

3. Use-o para colocar um controle TextView, um controle de botão e um controle de rótulo na superfície de design. O código será semelhante a este:

4. Use o assistente para abrir uma visualização lado a lado com o storyboard e os arquivos ViewController.swift abertos. O assistente é um pequeno ícone no canto superior direito da tela, como mostrado aqui:

1. Pressione a tecla CONTROL e arraste o controle da TextView até a superfície do código. Você verá uma seta azul enquanto arrasta.
2. Coloque o código no código logo abaixo da declaração de classe. Você verá um pop-up perguntando o tipo de conexão. O código será semelhante a este:

3. Selecione Outlet e dê a ela o nome de txtInput.
4. Faça o mesmo para o rótulo, defina o tipo de conexão como Outlet e dê a ele o nome "txtOutput".
5. Por fim, arraste o botão, mas, desta vez, selecione Ação como o tipo de conexão. Não use Outlet como o tipo de conexão.
6. Nomeie a ação como btnSendText.

Quando você terminar, o código na parte superior da classe ficará assim:

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

7. Concluir a programação do app iOS básico

Como essa visualização usa uma UITextView, para que ela responda a eventos nessa visualização, ela precisa ser uma UITextViewDelegate.

Você consegue isso alterando a declaração de classe para:

class ViewController: UIViewController, UITextViewDelegate {

Em seguida, na função view DidLoad, defina o delegado para a UITextView (que você chamou de txtInput ao configurar a saída) para esta classe, desta forma:

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

Por fim, você quer remover o teclado da tela assim que o usuário pressionar Enter. Isso é feito com a delegação que você acabou de configurar, e você pode implementar esse método no ViewController para lidar com isso.

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

Neste app, a ação do botão é trivial. Vamos apenas transmitir o que o usuário digita para a saída. Mais adiante, você vai aprender como um modelo de PLN pode filtrar esse texto. Mas, por enquanto, vamos conectá-lo para simular uma passagem.

Como você já criou a ação "btnSendText", agora só precisa adicionar o código a ela:

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

8. Parabéns!

Você concluiu este codelab.

No Programa de treinamentos, você vai aprender a criar um modelo de PLN, que será usado posteriormente no app para que ele filtre o texto do usuário contra spam de comentários.