פיתוח אפליקציה בסיסית של סגנון העברת הודעות

1. לפני שמתחילים

ה-codelab הזה הוא פעילות מספר 2 בתוכנית הלימודים Get started with mobile text classification (תחילת העבודה עם סיווג טקסט בנייד).

ב-codelab הזה תיצרו אפליקציית הודעות פשוטה. בהמשך תעדכנו את האפליקציה הזו באמצעות מודל למידת מכונה שיסנן ספאם לא רצוי מההודעות באפליקציה.

דרישות מוקדמות

ידע בסיסי בפיתוח ל-Android עם Kotlin, ו (אופציונלית) בפיתוח ל-iOS עם Swift

מה תפַתחו

אפליקציית הודעות פשוטה

הדרישות

כדי להתחיל ב-Android, צריך Android Studio. לפני שממשיכים, צריך לוודא שהאפליקציה מותקנת ומעודכנת.
ב-iOS, צריך להשתמש ב-Xcode. אפשר למצוא את האפליקציה ב-App Store. (אם רוצים לכתוב את אפליקציית iOS בלבד, מדלגים ישר לשלב 5.

קבל את הקוד

אם אתם לא רוצים לפעול לפי השלבים, ואתם רוצים לראות רק את הקוד הסופי של המסלול הזה, הוא מופיע בכתובת

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

בספרייה הזו, מחפשים את הספרייה TextClassificationOnMobile, ובתוכה מופיעות ספריות המשנה Android ו-iOS. הספריות האלה יכילו ספריות משנה של TextClassificationStep1, שמכילות את האפליקציה ב-Android וב-iOS בהתאמה.

2. יצירת פרויקט חדש ב-Android Studio

מפעילים את Android Studio.

בוחרים באפשרות יצירת פרויקט חדש. תופיע תיבת דו-שיח שבה תתבקשו לבחור תבנית פרויקט.
בוחרים באפשרות פעילות ריקה ולוחצים על הבא. בשלב הבא תתבקשו להגדיר את הפרויקט. בוחרים מה שרוצים, אבל מוודאים שהשפה היא Kotlin וגרסת ה-SDK המינימלית היא API 23.
לוחצים על סיום. לאחר מכן, Android Studio ייפתח עם הפרויקט שלכם. יכול להיות שיחלפו כמה רגעים עד שהמערכת תבצע סנכרון של gradle כדי לוודא שהכול תקין, במיוחד אם זו הפעם הראשונה שאתם משתמשים ב-Android Studio.

3. יצירת ממשק המשתמש

ממשק המשתמש של אפליקציית Android נוצר באמצעות קובץ XML שנקרא קובץ פריסה.

פתח את הקובץ. לוחצים על app > ‏res > ‏layout > ‏activity_main.xml באמצעות הסייר ב-Android Studio.

בפינה השמאלית העליונה של המסך, אמור להופיע קטע עם כרטיסיות של 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, שבו מוצגת ההנחיה Enter a String, ו-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. עריכת הסטוריבורד

פותחים את הקובץ Main.storyboard. יוצג לוח עיצוב שבו אפשר להוסיף רכיבי בקרה.
כדי להוסיף אמצעי בקרה, לוחצים על הלחצן + בחלק העליון של חלון Xcode.

משתמשים באפשרות הזו כדי למקם פקד TextView, פקד Button ופקד Label באזור העיצוב. הוא אמור להיראות כך:

משתמשים ב-Assistant כדי לפתוח תצוגה זה לצד זה עם לוח התכנון והקבצים 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, מגדירים את הנציג של 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. מעולה!

סיימתם את ה-Codelab הזה.

בהמשך מסלול הלמידה, תלמדו איך ליצור מודל NLP, שאחר כך תחזירו לאפליקציה הזו כדי להשתמש בו לסינון טקסט של משתמשים ולמנוע תגובת ספאם!