این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

یک برنامه سبک پیام رسانی اولیه بسازید

1. قبل از شروع

این آزمایشگاه کد فعالیت شماره 2 در مسیر طبقه‌بندی متن موبایل شروع به کار است.

در این نرم افزار کد، شما یک برنامه پیام رسانی ساده خواهید ساخت. بعداً در مسیر، این برنامه را با یک مدل یادگیری ماشینی به‌روزرسانی خواهید کرد که هرزنامه‌های ناخواسته را از پیام‌های موجود در برنامه فیلتر می‌کند.

پیش نیازها

دانش اولیه توسعه اندروید با Kotlin و (اختیاری) توسعه iOS با Swift

چیزی که خواهی ساخت

یک برنامه پیام رسانی ساده

آنچه شما نیاز دارید

برای Android، برای شروع به Android Studio نیاز دارید. لطفاً قبل از ادامه، مطمئن شوید که نصب شده و به طور کامل به روز شده است.
برای iOS، به Xcode نیاز دارید. شما می توانید این را در فروشگاه App پیدا کنید. (اگر می خواهید فقط برنامه iOS را بنویسید، مستقیماً به مرحله 5 بروید.

کد را دریافت کنید

اگر نمی خواهید گام به گام را دنبال کنید و فقط کد نهایی این مسیر را ببینید، در

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

در اینجا، دایرکتوری TextClassificationOnMobile را بیابید، و در داخل آن، دایرکتوری های فرعی Android و iOS را خواهید دید. این دایرکتوری ها حاوی زیر دایرکتوری های TextClassificationStep1 هستند که به ترتیب حاوی برنامه در اندروید و iOS هستند.

2. یک پروژه جدید در اندروید استودیو ایجاد کنید

اندروید استودیو را راه اندازی کنید.

ایجاد پروژه جدید را انتخاب کنید. گفتگویی را خواهید دید که از شما می خواهد یک الگوی پروژه را انتخاب کنید.
Empty Activity را انتخاب کرده و Next را بزنید. در مرحله بعد از شما خواسته می شود که پروژه خود را پیکربندی کنید. هر چیزی را که دوست دارید انتخاب کنید، اما مطمئن شوید که زبان Kotlin است و حداقل SDK API 23 است.
روی Finish کلیک کنید. پس از انجام این کار، Android Studio با پروژه شما باز می شود. ممکن است چند لحظه طول بکشد تا همگام سازی gradle را انجام دهد تا مطمئن شود همه چیز مرتب است، به خصوص اگر اولین بار است که از Android Studio استفاده می کنید.

3. رابط کاربری را ایجاد کنید

رابط کاربری یک برنامه اندروید با استفاده از یک فایل XML به نام فایل layout ایجاد می شود.

فایل را باز کنید. با استفاده از کاوشگر در Android Studio، روی app > res > layout > activity_main.xml کلیک کنید.

در سمت راست بالای صفحه، باید انتخابی را ببینید که دارای برگه‌هایی برای Code، Split و Design است، مانند این:

قبل از رفتن به مرحله بعدی مطمئن شوید که «کد» انتخاب شده است.

کد را با این 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 می دهد که از شما می خواهد یک رشته و یک EditText به نام txtInput را وارد کنید که می تواند برای وارد کردن یک رشته استفاده شود. در زیر آن یک TextView وجود دارد که خروجی را ارائه می‌کند و یک دکمه که کاربر برای فعال کردن طبقه‌بندی فشار می‌دهد.

مرحله بعدی نوشتن کدی است که این رابط کاربری را فعال می کند.

4. کنترل ها را وصل کرده و برنامه را ایجاد کنید

با یافتن فایل کد MainActivity می توانید کد این فعالیت را ویرایش کنید.

در Android Studio، روی 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. اپلیکیشن Basic را در iOS ایجاد کنید

مراحل زیر نیاز به آشنایی با Xcode و توسعه iOS با Swift دارد.

اگر نمی‌خواهید مراحل ایجاد را طی کنید، می‌توانید مخزن را شبیه‌سازی کنید و برنامه را مستقیماً باز کنید. TextClassificationStep1 نام دارد و در پوشه iOS در مخزن قرار دارد.

برای ایجاد برنامه اصلی، با Xcode شروع می‌کنید.

یک برنامه جدید با استفاده از الگوی اصلی ایجاد کنید:

گزینه هایی را برای پروژه جدید خود انتخاب کنید . به محصول خود یک نام و یک شناسه سازمان بدهید. می‌توانید آنچه را که می‌خواهید تایپ کنید یا مثال زیر را دنبال کنید: (اما حتماً رابط را روی Storyboard و چرخه زندگی را روی UIKitApp Delegate تنظیم کنید، همانطور که نشان داده شده است.)

6. Storyboard را ویرایش کنید

Main.storyboard را باز کنید. یک سطح طراحی می بینید که می توانید کنترل ها را روی آن اضافه کنید.
برای افزودن کنترل‌ها، روی دکمه + در بالای پنجره Xcode کلیک کنید.

از این برای قرار دادن یک کنترل TextView، یک کنترل دکمه و یک کنترل برچسب روی سطح طراحی استفاده کنید. باید چیزی شبیه این باشد:

از دستیار برای باز کردن نمای کنار هم با استوری برد و فایل های ViewController.swift هر دو باز استفاده کنید. دستیار یک نماد کوچک در سمت راست بالای صفحه است، همانطور که در اینجا نشان داده شده است:

کلید CONTROL را فشار دهید و کنترل TextView را روی سطح کد بکشید. در حین کشیدن باید یک فلش آبی ببینید.
روی کد درست زیر اعلان کلاس رها کنید. یک پنجره بازشو خواهید دید که از شما نوع اتصال را می پرسد. باید چیزی شبیه این باشد:

Outlet را انتخاب کرده و نام txtInput را به آن بدهید.
همین کار را برای برچسب انجام دهید، سپس نوع اتصال را Outlet کنید و نام آن را txtOutput بگذارید.
در نهایت، دکمه را روی آن بکشید، اما این بار Action را به عنوان نوع اتصال انتخاب کنید. ( از Outlet به عنوان نوع اتصال استفاده نکنید.)
نام عمل را 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، delegate را برای UITextView (که هنگام راه‌اندازی خروجی آن را txtInput نامیدید) به این کلاس تنظیم کنید:

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. تبریک می گویم!

شما اکنون این کد را تکمیل کرده اید!

در ادامه مسیر، یاد خواهید گرفت که چگونه یک مدل NLP ایجاد کنید، که بعداً آن را به این برنامه بازگردانید تا آن را برای فیلتر کردن متن کاربر برای هرزنامه نظرات تجهیز کنید!