Criar um app de estilo de mensagem básico

1. Antes de começar

Este codelab é a atividade 2 no programa de primeiros passos da classificação de texto para dispositivos móveis.

Neste codelab, você criará um app de mensagens simples. Mais adiante no programa, você atualizará este app com um modelo de aprendizado de máquina que filtrará o spam indesejado das mensagens do app.

Prerequisites

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

O que você criará

• Um app de mensagens simples

Pré-requisitos

• Para começar, você precisa do Android Studio. Verifique se ele está instalado e atualizado antes de continuar.
• Para iOS, você precisará do Xcode. Você pode encontrá-lo na App Store. Se você quiser escrever somente o app para iOS, pule para a etapa 5.

Buscar o código

Se você não quiser seguir passo a passo e apenas ver o código final deste caminho, consulte

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

Encontre o diretório TextClassificationOnMobile para ver os subdiretórios do Android e do iOS. Esses diretórios conterão subdiretórios de TextClassificationStep1, que contêm o aplicativo no Android e no iOS, respectivamente.

2. Criar um novo projeto no Android Studio

1. Inicie o Android Studio.

1. Selecione Create New Project. Será exibida uma caixa de diálogo para selecionar um modelo de projeto.
2. Selecione Empty Activity e clique em Next. Em seguida, você precisará configurar o projeto. Escolha o que quiser, mas verifique se a linguagem é Kotlin e se o SDK mínimo é a API 23.
3. Clique em Finish. Depois disso, o Android Studio será aberto com o projeto. Pode levar alguns instantes para que ele faça 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 app > res > layout > activity_main.xml usando o explorador no Android Studio.

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

Confira se a opção "Código" está selecionada antes de seguir 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 de usuário básica contendo uma área de entrada com um TextView, solicitando que você insira uma string e um EditText chamado txtInput que possa ser usado para inserir uma string. Abaixo dela, há uma TextView que renderiza o resultado e um botão que o usuário pressiona para acionar a classificação.

A próxima etapa é programar 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 encontrando o arquivo de código da MainActivity.

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

2. Abra o arquivo MainActivity para acessar o editor de código. Substitua tudo nesse arquivo, exceto a primeira linha que comece 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 do layout a txtInput, txtOutput e btnSendText para que eles possam ser abordados no código. Em seguida, configura um OnClickListener para o botão, de modo que, quando o usuário tocar nele, o texto de txtInput será lido, convertido em uma string, e a propriedade txtOutput.text será definida como string.

Se você estiver acompanhando o caminho da classificação de Primeiros passos com textos para dispositivos móveis, esse será o comportamento visto na atividade 1, o vídeo de demonstração, em que o app usará qualquer coisa que o usuário digitar, sem a verificação de spam.

No próximo codelab, você 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 requerem alguma familiaridade com o desenvolvimento Xcode e iOS com o Swift.

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

Para criar o app básico, você precisa começar com o Xcode.

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

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

6. Editar o storyboard

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

3. Use essa opção para colocar um controle de TextView, um botão e um 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 abaixo:

1. Pressione a tecla CTRL e arraste o controle da TextView até a superfície do código. Você verá uma seta azul enquanto arrasta.
2. Solte no código abaixo da declaração da 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 ele o nome txtInput.
4. Faça o mesmo para o rótulo, defina o tipo de conexão como Saída e dê o nome txtOutput a ele.
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 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 codificação do app básico para iOS

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

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

class ViewController: UIViewController, UITextViewDelegate {

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

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

Por fim, você quer processar a remoção do teclado quando o usuário pressionar Enter no teclado. Isso é feito por meio da delegação que você acabou de configurar e pode 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, mas apenas passamos o que o usuário digita para a saída. Mais tarde, você verá 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, basta adicionar o código a ela:

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

8. Parabéns!

Você concluiu este codelab.

Em seguida, você aprenderá a criar um modelo PLN, que depois colocará de volta no app para filtrá-lo por spam de comentários.