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

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"

1. شغِّل "استوديو Android".

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

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

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

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

في أعلى الجانب الأيمن من الشاشة، يُفترض أن ترى تحديداً يحتوي على علامات تبويب لـ "Code" و"تقسيم" و"تصميم"، على النحو التالي:

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

2. استبدِل الرمز بنموذج 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.

1. في "استوديو Android"، انقر على التطبيق > java > MainActivity:

2. افتح ملف 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 على تلك السلسلة.

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

في الدرس التالي حول الترميز، ستتعرَّف على كيفية استخدام نموذج تعلُّم الآلة في هذا التطبيق لفلترة التعليقات غير المرغوب فيها.

إذا أردت إنشاء التطبيق نفسه على نظام التشغيل iOS، يُرجى مواصلة هذا الدرس التطبيقي حول الترميز.

5- إنشاء التطبيق Basic على iOS

تتطلب الخطوات التالية بعض الإلمام بتطوير Xcode وiOS مع Swift.

إذا كنت لا تريد إجراء عملية الإنشاء، يمكنك استنساخ Repo وفتح التطبيق مباشرةً. يُطلق عليها TextClassificationStep1، وهي موجودة في مجلد iOS في المستودع.

لإنشاء التطبيق الأساسي، ستبدأ بـ Xcode.

1. إنشاء تطبيق جديد باستخدام النموذج الأساسي:

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

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

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

3. استخدم هذا لوضع عنصر التحكم TextView، وعناصر التحكم في الأزرار، وعناصر التحكم في التسمية على سطح التصميم. من المفترض أن تظهر بشكلٍ مشابه لما يلي:

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

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

3. اختَر Outlet (منفذ) واعطه الاسم txtInput.
4. نفِّذ الأمر نفسه مع التصنيف، ثم اجعل نوع الاتصال Outlet، وامنحه الاسم txtOutput.
5. أخيرًا، اسحب الزر للأعلى، ولكن هذه المرة حدد إجراء كنوع الاتصال. (لا تستخدم Outlet كنوع الاتصال.
6. أدخِل اسمًا للإجراء btnSendText.

عند الانتهاء، يُفترض أن تظهر التعليمة البرمجية في أعلى الصف على النحو التالي:

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

7. إنهاء عملية ترميز تطبيق iOS الأساسي

بما أنّ طريقة العرض هذه تستخدم UITextView، يجب أن تكون UITextViewDelegate لتتمكّن من الردّ على الأحداث في طريقة العرض هذه.

يمكنك الحصول عليه من خلال تغيير بيان الفئة إلى ما يلي:

class ViewController: UIViewController, UITextViewDelegate {

بعد ذلك، في الدالة view DidLoad، عيّن التفويض لـ UITextView (والذي يُسمى txtInput عند إعداد المقبس) على هذه الفئة على النحو التالي:

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

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

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. تهانينا!

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

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