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

۱. قبل از شروع

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

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

پیش‌نیازها

  • دانش پایه در توسعه اندروید با کاتلین و (اختیاری) توسعه iOS با سوئیفت

آنچه خواهید ساخت

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

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

  • برای شروع کار با اندروید، به اندروید استودیو نیاز دارید. لطفاً قبل از ادامه، مطمئن شوید که نصب و کاملاً به‌روزرسانی شده است.
  • برای iOS، به Xcode نیاز دارید. می‌توانید آن را در اپ استور پیدا کنید. (اگر می‌خواهید فقط برنامه iOS بنویسید، مستقیماً به مرحله ۵ بروید.)

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

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

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

در اینجا، پوشه TextClassificationOnMobile را پیدا کنید و درون آنها زیرپوشه‌های Android و iOS را مشاهده خواهید کرد. این پوشه‌ها شامل زیرپوشه‌های TextClassificationStep1 خواهند بود که به ترتیب شامل برنامه در اندروید و iOS هستند.

968cc631a448a8ef.png

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

  1. اندروید استودیو را اجرا کنید.

4542b16e14c33eed.png

  1. گزینه «ایجاد پروژه جدید» را انتخاب کنید. پنجره‌ای را مشاهده خواهید کرد که از شما می‌خواهد یک الگوی پروژه (Project Template) انتخاب کنید.
  2. گزینه Empty Activity را انتخاب کرده و روی Next کلیک کنید. در مرحله بعد از شما خواسته می‌شود پروژه خود را پیکربندی کنید. هر آنچه را که دوست دارید انتخاب کنید، اما مطمئن شوید که زبان Kotlin و Minimum SDK، API 23 باشد.
  3. روی Finish کلیک کنید. پس از انجام این کار، اندروید استودیو با پروژه شما باز می‌شود. ممکن است چند لحظه طول بکشد تا همگام‌سازی gradle انجام شود تا مطمئن شوید همه چیز مرتب است، به خصوص اگر این اولین بار است که از اندروید استودیو استفاده می‌کنید.

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

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

  1. فایل را باز کنید. با استفاده از اکسپلورر در اندروید استودیو، روی app > res > layout > activity_main.xml کلیک کنید.

562f935ccaa9e666.png

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

3ae858bfe4ec100f.png

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

  1. کد را با این 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 وجود دارد که خروجی را نمایش می‌دهد و دکمه‌ای که کاربر برای فعال کردن طبقه‌بندی فشار می‌دهد.

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

۴. کنترل‌ها را وصل کنید و برنامه را بسازید

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

  1. در اندروید استودیو، روی app > java > MainActivity کلیک کنید.

c633c2293d0835b8.png

  1. فایل 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 روی آن رشته تنظیم می‌شود.

۵. اپلیکیشن پایه را در iOS ایجاد کنید

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

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

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

  1. با استفاده از الگوی پایه، یک برنامه جدید ایجاد کنید:

254c026ac66e32f9.png

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

d0bd704bfa657d5f.png

۶. استوری‌بورد را ویرایش کنید

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

a5203e9757e6b11e.png

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

۱۳d02aae8d8c4a13.png

  1. از دستیار (assistant) برای باز کردن یک نمای کنار هم در حالی که فایل‌های storyboard و ViewController.swift هر دو باز هستند، استفاده کنید. دستیار یک آیکون کوچک در سمت راست بالای صفحه است، همانطور که در اینجا نشان داده شده است:

d152cce014151f26.png

  1. کلید کنترل را فشار دهید و کنترل TextView را به سطح کد بکشید. هنگام کشیدن، باید یک فلش آبی ببینید.
  2. کد را درست زیر تعریف کلاس قرار دهید. یک پنجره بازشو ظاهر می‌شود که از شما نوع اتصال را می‌پرسد. باید چیزی شبیه به این باشد:

۴۵۵b8b131e5f3b3d.png

  1. Outlet را انتخاب کنید و نام آن را txtInput بگذارید.
  2. همین کار را برای برچسب انجام دهید، سپس نوع اتصال را Outlet قرار دهید و نام آن را txtOutput بگذارید.
  3. در نهایت، دکمه را به سمت بالا بکشید، اما این بار نوع اتصال را Action انتخاب کنید. ( از Outlet به عنوان نوع اتصال استفاده نکنید.)
  4. نام اکشن را btnSendText قرار دهید.

وقتی کارتان تمام شد، کد شما در بالای کلاس باید به این شکل باشد:

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

۷. کدنویسی اپلیکیشن پایه iOS را تمام کنید

از آنجایی که این view از یک UITextView استفاده می‌کند، برای اینکه بتواند به رویدادهای این view پاسخ دهد، باید یک UITextViewDelegate باشد.

می‌توانید با تغییر تعریف کلاس به این، این را دریافت کنید:

class ViewController: UIViewController, UITextViewDelegate {

سپس، در تابع viewDidLoad، نماینده‌ی UITextView (که هنگام تنظیم outlet، txtInput نامیده بودید) را به این کلاس به صورت زیر تنظیم کنید:

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

در نهایت، می‌خواهید حذف صفحه کلید از صفحه نمایش را پس از فشردن کلید Enter توسط کاربر مدیریت کنید. این کار از طریق Delegation که تنظیم کرده‌اید انجام می‌شود و می‌توانید این متد را در 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
}

۸. تبریک می‌گویم!

شما اکنون این آزمایشگاه کد را تکمیل کرده‌اید!

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