Criar um app básico de mensagens

1. Antes de começar

Este codelab é a atividade nº 2 do programa de treinamentos "Introdução à classificação de texto para dispositivos móveis".

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

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 no Android, você vai precisar do Android Studio. Verifique se ele está instalado e totalmente atualizado antes de continuar.
• Para iOS, você vai precisar do Xcode. Você pode encontrar essa opção na App Store. Se você quiser escrever apenas o app iOS, pule direto para a etapa 5.

Buscar o código

Se você não quiser seguir as etapas e apenas ver o código final deste programa de treinamentos, acesse

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

Encontre o diretório "TextClassificationOnMobile" e, dentro dele, os subdiretórios "Android" e "iOS". Esses diretórios vão conter subdiretórios TextClassificationStep1, que contêm o app no Android e no iOS, respectivamente.

2. Criar um projeto no Android Studio

1. Inicie o Android Studio.

1. Selecione Criar projeto. Uma caixa de diálogo vai aparecer pedindo para você selecionar um modelo de projeto.
2. Selecione Empty Activity e clique em Next. Em seguida, você vai precisar configurar o projeto. Escolha o que quiser, mas verifique se a linguagem é Kotlin e o SDK mínimo é API 23.
3. Clique em Concluir. Depois disso, o Android Studio vai abrir com seu projeto. Pode levar alguns momentos para que ele faça uma sincronização do Gradle e verifique se está tudo em ordem, principalmente se esta for sua primeira vez usando 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 app > res > layout > activity_main.xml usando o explorador no Android Studio.

No canto superior direito da tela, você vai encontrar uma seleção com guias para "Code", "Split" e "Design", assim:

Verifique se "Código" está selecionado 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 oferece uma interface do usuário básica que contém uma área de entrada com um TextView, solicitando que você Insira uma string e um EditText chamado txtInput que pode ser usado para inserir uma string. Abaixo dele, há um TextView que vai renderizar a saída e um botão que o usuário vai pressionar para acionar a classificação.

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

4. Conectar os controles e criar o app

Para editar o código dessa atividade, encontre 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 abordados no código. Em seguida, ele configura um OnClickListener para o botão. Assim, quando o usuário tocar nele, o texto de txtInput será lido, convertido em uma string e a propriedade txtOutput.text será definida como essa string.

Se você estiver acompanhando o Programa de treinamentos "Começar a usar a classificação de texto para dispositivos móveis", esse é o Comportamento que você viu na atividade 1, o vídeo de demonstração, em que o app usa apenas o que o usuário digita, sem verificar se há 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 Xcode e o desenvolvimento para iOS com Swift.

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

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

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

2. Escolha as opções do novo projeto. Dê um Nome e um Identificador da organização ao produto. Você pode digitar o que quiser ou seguir o exemplo abaixo. Mas não se esqueça de definir a interface como Storyboard e o ciclo de vida como Delegado do UIKitApp, conforme mostrado.

6. Editar o storyboard

1. Abra Main.storyboard. Você vai ver uma superfície de design em que é possível adicionar controles.
2. Para adicionar controles, clique no botão + na parte de cima da janela do Xcode.

3. Use isso para colocar um controle TextView, um controle Button e um controle Label 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, conforme mostrado aqui:

1. Pressione a tecla CONTROL e arraste o controle TextView para a superfície do código. Uma seta azul vai aparecer enquanto você arrasta.
2. Solte o código logo abaixo da declaração de classe. Um pop-up vai perguntar o tipo de conexão. O código será semelhante a este:

3. Selecione Outlet e dê o nome txtInput.
4. Faça o mesmo para o rótulo, defina o tipo de conexão como Outlet e dê 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 Tomada como o tipo de conexão.
6. Nomeie a ação como btnSendText.

Quando terminar, o código na parte de cima da classe vai 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, é preciso ser uma UITextViewDelegate.

Para isso, mude a declaração da classe para:

class ViewController: UIViewController, UITextViewDelegate {

Em seguida, na função viewDidLoad, defina o delegado da UITextView (que você chamou de txtInput ao configurar o outlet) para essa classe desta forma:

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

Por fim, você precisa remover o teclado da tela quando o usuário pressionar "Enter". Isso é feito pela delegação que você acabou de configurar, e é possível implementar esse método no ViewController para processá-lo.

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

Para esse 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 ver como um modelo de PLN pode filtrar esse texto. Mas, por enquanto, vamos conectá-lo para simular uma transmissão direta.

Você já criou o btnSendText da ação. Agora, basta adicionar o código a ele:

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

8. Parabéns!

Você concluiu este codelab.

Em seguida, você vai aprender a criar um modelo de PLN, que será usado neste app para filtrar o texto do usuário e evitar spam de comentários.