إنشاء تطبيق بأسلوب أساسي للمراسلة

1. قبل البدء

هذا الدرس التطبيقي حول الترميز هو النشاط رقم 2 في مسار "البدء في تصنيف النصوص على الأجهزة الجوّالة".

في هذا الدرس التطبيقي، ستنشئ تطبيق مراسلة بسيطًا. وفي وقت لاحق من المسار التعليمي، ستعدّل هذا التطبيق باستخدام نموذج تعلّم آلي يعمل على فلترة الرسائل غير المرغوب فيها من الرسائل الواردة في التطبيق.

المتطلبات الأساسية

معرفة أساسية بتطوير تطبيقات Android باستخدام Kotlin، و (اختياريًا) تطوير تطبيقات iOS باستخدام Swift

ما ستنشئه

تطبيق بسيط للمراسلة

المتطلبات

لبدء استخدام Android، عليك تثبيت استوديو Android. يُرجى التأكّد من تثبيته وتحديثه بالكامل قبل المتابعة.
بالنسبة إلى نظام التشغيل iOS، ستحتاج إلى Xcode. يمكنك العثور على هذا التطبيق في App Store. (إذا كنت تريد كتابة تطبيق iOS فقط، انتقِل مباشرةً إلى الخطوة 5.

الحصول على الرمز

إذا كنت لا تريد اتّباع الخطوات بالتفصيل، وتريد الاطّلاع على الرمز النهائي لهذا المسار فقط، يمكنك العثور عليه على الرابط

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

ابحث هنا عن دليل TextClassificationOnMobile، وستظهر لك ضمنه الأدلة الفرعية Android وiOS. ستحتوي هذه الأدلة على أدلة فرعية باسم TextClassificationStep1، والتي تحتوي على التطبيق على Android وiOS على التوالي.

2. إنشاء مشروع جديد في "استوديو Android"

افتح "استوديو Android".

انقر على إنشاء مشروع جديد. سيظهر مربّع حوار يطلب منك اختيار "نموذج مشروع".
اختَر نشاط فارغ وانقر على التالي. سيُطلب منك بعد ذلك ضبط مشروعك. اختَر ما تريد، ولكن تأكَّد من أنّ اللغة هي Kotlin وأنّ الحد الأدنى من حزمة تطوير البرامج (SDK) هو المستوى 23 من واجهة برمجة التطبيقات.
انقر على إنهاء. بعد الانتهاء من ذلك، سيتم فتح "استوديو Android" مع مشروعك. قد يستغرق الأمر بضع لحظات لإجراء مزامنة Gradle للتأكّد من أنّ كل شيء على ما يرام، خاصةً إذا كانت هذه هي المرة الأولى التي تستخدم فيها استوديو Android.

3- إنشاء واجهة المستخدم

يتم إنشاء واجهة مستخدم لتطبيق Android باستخدام ملف XML يُسمى ملف تصميم.

افتح الملف. انقر على app > res > layout > activity_main.xml باستخدام المستكشف في "استوديو Android".

في أعلى يسار الشاشة، من المفترض أن يظهر لك خيار يتضمّن علامات تبويب خاصة بـ "الرمز" و"التقسيم" و"التصميم"، على النحو التالي:

تأكَّد من اختيار "الرمز" قبل الانتقال إلى الخطوة التالية.

استبدِل الرمز بملف 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، انقر على 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.

أنشئ تطبيقًا جديدًا باستخدام النموذج الأساسي:

اختيار خيارات لمشروعك الجديد أدخِل اسمًا ومعرّف المؤسسة لمنتجك. يمكنك كتابة ما تريد، أو اتّباع المثال أدناه: (ولكن تأكَّد من ضبط الواجهة على لوحة العرض ودورة الحياة على UIKitApp Delegate، كما هو موضّح).

6. تعديل لوحة العمل

افتح Main.storyboard. ستظهر لك مساحة تصميم يمكنك إضافة عناصر تحكّم إليها.
لإضافة عناصر تحكّم، انقر على الزر + في أعلى نافذة Xcode.

استخدِم هذا الخيار لوضع عنصر تحكّم TextView وعنصر تحكّم Button وعنصر تحكّم Label على سطح التصميم. من المفترض أن تظهر بشكلٍ مشابه لما يلي:

استخدِم المساعد لفتح عرض جنبًا إلى جنب مع لوحة العرض القصصي وملفَي ViewController.swift. المساعد هو رمز صغير في أعلى يسار الشاشة، كما هو موضّح هنا:

اضغط على مفتاح CONTROL، واسحب عنصر تحكّم TextView إلى مساحة الرمز. من المفترض أن يظهر سهم أزرق أثناء السحب.
أسقِطها على الرمز أسفل تعريف الفئة مباشرةً. ستظهر نافذة منبثقة تسألك عن نوع الاتصال. من المفترض أن تظهر بشكلٍ مشابه لما يلي:

اختَر Outlet وامنحه الاسم txtInput.
كرِّر الخطوات نفسها للتسمية، ثم اجعل نوع الاتصال منفذًا، وأدخِل الاسم 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
}

بالنسبة إلى هذا التطبيق، يكون إجراء الزر بسيطًا، إذ سننقل فقط ما يكتبه المستخدم إلى الناتج. سنوضّح لك لاحقًا كيف يمكن لنموذج معالجة اللغة الطبيعية فلترة هذا النص. ولكن في الوقت الحالي، لنربطها لمحاكاة عملية نقل البيانات.

لقد سبق لك إنشاء الإجراء btnSendText، لذا كل ما عليك فعله الآن هو إضافة الرمز إلى هذا الإجراء:

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

8. تهانينا!

لقد أكملت الآن هذا الدرس التطبيقي حول الترميز.

في الخطوة التالية من المسار، ستتعرّف على كيفية إنشاء نموذج معالجة اللغة الطبيعية، والذي ستعيده لاحقًا إلى هذا التطبيق لتجهيزه بفلترة النص الذي يكتبه المستخدم بحثًا عن التعليقات غير المرغوب فيها.