1. 시작하기 전에
이 Codelab은 모바일 텍스트 분류 과정 시작하기의 활동 #2입니다.
이 Codelab에서는 간단한 메시지 앱을 빌드합니다. 과정의 뒷부분에서는 앱의 메시지에서 원치 않는 스팸을 필터링하는 머신러닝 모델을 사용하여 이 앱을 업데이트합니다.
기본 요건
- Kotlin을 사용한 Android 개발 및 Swift (선택사항)를 사용한 iOS 개발에 관한 기본 지식
빌드할 항목
- 간단한 메시지 앱
준비물
- Android를 시작하려면 Android 스튜디오가 필요합니다. 계속하기 전에 설치되었고 완전히 업데이트되었는지 확인하세요.
- iOS의 경우 Xcode가 필요합니다. App Store에서 확인할 수 있습니다. (iOS 앱만 작성하려면 5단계로 바로 건너뜁니다.
코드 가져오기
단계별 안내를 따르지 않고 이 과정의 최종 코드를 확인하는 방법은 다음을 참고하세요.
git clone https://github.com/googlecodelabs/odml-pathways
여기서 TextClassificationOnMobile 디렉터리를 찾습니다. 그러면 이 디렉터리에 Android 및 iOS 하위 디렉터리가 표시됩니다. 이러한 디렉터리에는 각각 Android 및 iOS 앱을 포함하는 TextClassificationStep1 하위 디렉터리가 포함됩니다.
2 Android 스튜디오에서 새 프로젝트 만들기
- Android 스튜디오를 실행합니다.
- Create New Project를 선택합니다. 프로젝트 템플릿을 선택하라는 대화상자가 나타납니다.
- Empty Activity를 선택하고 Next를 클릭합니다. 그러면 프로젝트를 구성하라는 메시지가 표시됩니다. 원하는 것을 선택하고 언어가 Kotlin이고 최소 SDK가 API 23인지 확인합니다.
- 마침을 클릭합니다. 이 과정을 완료하면 Android 스튜디오가 프로젝트로 열립니다. 특히 Android 스튜디오를 처음 사용하는 경우 Gradle 동기화를 실행하여 모든 항목이 정렬되었는지 확인하는 데 몇 분 정도 걸릴 수 있습니다.
3. 사용자 인터페이스 만들기
Android 앱의 사용자 인터페이스는 레이아웃 파일이라는 XML 파일을 사용하여 생성됩니다.
- 파일을 엽니다. Android 스튜디오의 탐색기를 사용하여 app > res > layout > activity_main.xml을 클릭합니다.
화면 오른쪽 상단에 다음과 같은 코드, 분할, 디자인 탭이 있는 선택 항목이 표시됩니다.
다음 단계로 넘어가기 전에 '코드'가 선택되었는지 확인합니다.
- 코드를 다음 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>
이를 통해 TextView가 있는 입력 영역이 포함된 기본 사용자 인터페이스가 표시되며, 문자열을 입력하는 데 사용할 수 있는 String 입력과 EditText라는 Text가 표시됩니다. 그 아래에는 출력을 렌더링할 TextView와 사용자가 버튼을 눌러 분류를 트리거합니다.
다음 단계는 이 사용자 인터페이스를 활성화할 코드를 작성하는 것입니다.
4. 컨트롤 연결 및 앱 만들기
MainActivity 코드 파일을 찾아서 이 활동의 코드를 수정할 수 있습니다.
- Android 스튜디오에서 app > java > MainActivity를 클릭합니다.
- MainActivity 파일을 열어 코드 편집기로 이동합니다. 'package'로 시작하는 첫 번째 행을 제외하고 이 파일의 모든 내용을 다음 코드로 바꿉니다.
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
}
}
}
이 코드는 레이아웃의 컨트롤을 txtInput, txtOutput, btnSendText에 연결하여 코드에서 처리할 수 있도록 합니다. 그런 다음 버튼의 OnClickListener를 설정합니다. 그러면 사용자가 터치할 때 txtInput의 텍스트를 읽고 문자열로 변환한 다음 txtOutput.text 속성을 다음과 같이 설정합니다. 문자열.
5 iOS에서 기본 앱 만들기
다음 단계를 진행하려면 Swift를 사용한 Xcode 및 iOS 개발에 관한 지식이 필요합니다.
생성 프로세스를 진행하지 않으려면 저장소를 클론하고 직접 앱을 열면 됩니다. 여기서는 TextClassificationStep1이라고 하며 저장소의 iOS 폴더에 있습니다.
기본 앱을 만들려면 Xcode로 시작합니다.
- 기본 템플릿을 사용하여 새 App을 만듭니다.
- 새 프로젝트의 옵션을 선택합니다. 제품의 이름과 조직 식별자를 지정합니다. 원하는 항목을 입력하거나 아래 예와 같이 입력할 수도 있습니다. 단, 인터페이스를 Storyboard로, 수명 주기를 UIKitApp Delegate로 설정해야 합니다. 표시됩니다.)
6. 스토리보드 수정
- Main.storyboard를 엽니다. 컨트롤을 추가할 수 있는 디자인 표면이 표시됩니다.
- 컨트롤을 추가하려면 Xcode 창 상단에서 + 버튼을 클릭합니다.
- 이를 사용하여 TextView 컨트롤, Button 컨트롤, Label 컨트롤을 디자인 노출 영역에 배치합니다. 예를 들면 다음과 같습니다.
- 어시스턴트를 사용하여 스토리보드와 ViewController.swift 파일이 모두 열려 있는 상태로 뷰를 나란히 엽니다. 어시스턴트는 아래와 같이 화면 오른쪽 상단에 있는 작은 아이콘입니다.
- CONTROL 키를 누르고 TextView 컨트롤을 코드 노출 영역으로 드래그합니다. 드래그할 때 파란색 화살표가 표시됩니다.
- 클래스 선언 바로 아래에 있는 코드를 드롭합니다. 연결 유형을 묻는 팝업이 표시됩니다. 예를 들면 다음과 같습니다.
- Outlet을 선택하고 이름을 txtInput으로 지정합니다.
- 라벨에도 같은 작업을 수행한 다음 연결 유형을 Outlet으로 지정하고 이름을 txtOutput으로 지정합니다.
- 마지막으로 버튼을 위로 드래그하지만 이번에는 연결 유형으로 작업을 선택합니다. 연결 유형으로 콘센트를 사용하지 마세요.
- 작업의 이름을 btnSendText로 지정합니다.
완료된 클래스 상단에 다음과 같은 코드가 표시됩니다.
@IBOutlet weak var txtInput: UITextView!
@IBOutlet weak var txtOutput: UILabel!
@IBAction func btnSendText(_ sender: Any) {
}
7 기본 iOS 앱 코딩 완료
이 뷰는 UITextView를 사용하므로 이 뷰의 이벤트에 응답하려면 UITextViewDelegate여야 합니다.
클래스 선언을 다음과 같이 변경하여 얻을 수 있습니다.
class ViewController: UIViewController, UITextViewDelegate {
그런 다음 viewDidLoad 함수에서 아웃렛을 설정할 때 txtInput을 호출한 UITextView의 대리자를 다음과 같이 설정합니다.
override func viewDidLoad() {
super.viewDidLoad()
txtInput.delegate = self
}
마지막으로 사용자가 키보드에서 Enter 키를 누르면 디스플레이에서 키보드 삭제를 처리하려고 합니다. 이 작업은 방금 설정한 위임을 통해 실행되며 ViewController에서 이 메서드를 구현하여 처리할 수 있습니다.
func textView(_ textView: UITextView, shouldChangeTextIn range:
NSRange, replacementText text: String) -> Bool {
if (text == "\n") {
textView.resignFirstResponder()
return false
}
return true
}
이 앱의 버튼 작업은 간단하며 사용자가 입력하는 내용을 출력에 전달합니다. NLP 모델에서 이 텍스트를 필터링하는 방법을 나중에 살펴보겠습니다. 지금은 패스 스루를 시뮬레이션하기 위해 연결해 봅시다.
btnSendText 작업을 이미 만들었으므로 이제 코드를 추가하기만 하면 됩니다.
@IBAction func btnSendText(_ sender: Any) {
txtOutput.text = "Sent :" + txtInput.text
}
8 축하합니다.
이제 이 Codelab을 완료했습니다.
이 과정에서는 NLP 모델을 만드는 방법을 알아봅니다. NLP 모델은 나중에 이 앱으로 돌아와서 사용자의 텍스트를 댓글 스팸용으로 필터링하도록 만듭니다.