मैसेज की स्टाइल वाला एक बेसिक ऐप्लिकेशन बनाएं

1. शुरू करने से पहले

यह कोडलैब, मोबाइल टेक्स्ट क्लासिफ़िकेशन के साथ शुरू करने के पाथवे में गतिविधि #2 है.

इस कोडलैब में, आपको एक सामान्य मैसेजिंग ऐप्लिकेशन बनाना है. बाद में, पाथवे में आपको इस ऐप्लिकेशन को मशीन लर्निंग मॉडल के साथ अपडेट करना होगा. यह मॉडल, ऐप्लिकेशन पर मौजूद मैसेज से अवांछित स्पैम को फ़िल्टर करेगा.

ज़रूरी शर्तें

Kotlin के साथ Android डेवलपमेंट की बुनियादी जानकारी और (ज़रूरी नहीं) Swift के साथ iOS डेवलपमेंट की जानकारी

आपको क्या बनाना है

मैसेजिंग ऐप्लिकेशन

आपको किन चीज़ों की ज़रूरत होगी

Android के लिए, आपको Android Studio की ज़रूरत होगी. जारी रखने से पहले, कृपया पक्का करें कि यह इंस्टॉल हो और पूरी तरह से अपडेट हो.
iOS के लिए, आपको Xcode की ज़रूरत होगी. यह आपको App Store में दिखेगा. (अगर आपको सिर्फ़ iOS ऐप्लिकेशन के लिए लिखना है, तो सीधे पांचवें चरण पर जाएं.

कोड पाएं

अगर आपको एक-एक करके निर्देशों का पालन नहीं करना है और सिर्फ़ इस पाथवे का फ़ाइनल कोड देखना है, तो यह यहां दिया गया है

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

यहां TextClassificationOnMobile डायरेक्ट्री ढूंढें. इसके अंदर आपको Android और iOS सब डायरेक्ट्री दिखेंगी. इन डायरेक्ट्री में TextClassificationStep1 सब डायरेक्ट्री होंगी. इनमें Android और iOS पर ऐप्लिकेशन मौजूद होगा.

2. Android Studio में नया प्रोजेक्ट बनाना

Android Studio लॉन्च करें.

नया प्रोजेक्ट बनाएं को चुनें. आपको एक डायलॉग दिखेगा, जिसमें आपसे प्रोजेक्ट टेंप्लेट चुनने के लिए कहा जाएगा.
Empty Activity चुनें और आगे बढ़ें पर क्लिक करें. इसके बाद, आपसे प्रोजेक्ट को कॉन्फ़िगर करने के लिए कहा जाएगा. अपनी पसंद के हिसाब से कोई भी विकल्प चुनें. हालांकि, यह पक्का करें कि भाषा Kotlin हो और कम से कम एसडीके API 23 हो.
पूरा करें पर क्लिक करें. इसके बाद, Android Studio आपके प्रोजेक्ट के साथ खुल जाएगा. यह पक्का करने के लिए कि सब कुछ सही तरीके से काम कर रहा है, Gradle सिंक करने में कुछ समय लग सकता है. ऐसा खास तौर पर तब होता है, जब पहली बार Android Studio का इस्तेमाल किया जा रहा हो.

3. यूज़र इंटरफ़ेस बनाना

Android ऐप्लिकेशन का यूज़र इंटरफ़ेस, लेआउट फ़ाइल नाम की एक्सएमएल फ़ाइल का इस्तेमाल करके बनाया जाता है.

फ़ाइल खोलें. Android Studio में एक्सप्लोरर का इस्तेमाल करके, app > res > layout > activity_main.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 होता है. इसमें आपको कोई स्ट्रिंग डालने के लिए कहा जाता है. साथ ही, इसमें txtInput नाम का एक EditText होता है, जिसका इस्तेमाल स्ट्रिंग डालने के लिए किया जा सकता है. इसके नीचे एक 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 प्रॉपर्टी को उस स्ट्रिंग पर सेट किया जा सके.

अगर आपने 'मोबाइल टेक्स्ट क्लासिफ़िकेशन का इस्तेमाल शुरू करना' पाथवे को फ़ॉलो किया है, तो आपको गतिविधि #1, डेमो वीडियो में यही व्यवहार देखने को मिला होगा. इसमें ऐप्लिकेशन, स्पैम की जांच किए बिना, सिर्फ़ उपयोगकर्ता के टाइप किए गए टेक्स्ट का इस्तेमाल करेगा!

अगले Codelab में, आपको इस ऐप्लिकेशन में मशीन लर्निंग मॉडल का इस्तेमाल करके, स्पैम टिप्पणियों को फ़िल्टर करने का तरीका बताया जाएगा.

अगर आपको iOS पर भी यही ऐप्लिकेशन बनाना है, तो कृपया इस कोडलैब को जारी रखें.

5. iOS पर Basic ऐप्लिकेशन बनाना

नीचे दिए गए चरणों को पूरा करने के लिए, आपको Xcode और Swift की मदद से iOS डेवलपमेंट के बारे में थोड़ी जानकारी होनी चाहिए.

अगर आपको बनाने की प्रोसेस पूरी नहीं करनी है, तो repo को क्लोन करके सीधे तौर पर ऐप्लिकेशन खोला जा सकता है. इसे TextClassificationStep1 कहा जाता है. यह repo में iOS फ़ोल्डर में मौजूद है.

बुनियादी ऐप्लिकेशन बनाने के लिए, Xcode का इस्तेमाल करें.

बेसिक टेंप्लेट का इस्तेमाल करके, नया ऐप्लिकेशन बनाएं:

अपने नए प्रोजेक्ट के लिए विकल्प चुनें. अपने प्रॉडक्ट को नाम और संगठन का आइडेंटिफ़ायर दें. आपको जो चाहिए उसे टाइप करें या यहां दिए गए उदाहरण का पालन करें: (हालांकि, इंटरफ़ेस को Storyboard और लाइफ़ साइकल को UIKitApp Delegate पर सेट करना न भूलें, जैसा कि दिखाया गया है.)

6. स्टोरीबोर्ड में बदलाव करना

Main.storyboard खोलें. आपको एक डिज़ाइन सर्फ़ेस दिखेगा, जिस पर कंट्रोल जोड़े जा सकते हैं.
कंट्रोल जोड़ने के लिए, Xcode विंडो में सबसे ऊपर मौजूद + बटन पर क्लिक करें.

इसका इस्तेमाल, डिज़ाइन सर्फ़ेस पर TextView कंट्रोल, Button कंट्रोल, और Label कंट्रोल को रखने के लिए करें. यह कुछ ऐसी नज़र आनी चाहिए:

सहायक का इस्तेमाल करके, स्टोरीबोर्ड और ViewController.swift फ़ाइलों को एक साथ खोलें. Assistant, स्क्रीन के सबसे ऊपर दाईं ओर मौजूद एक छोटा आइकॉन है. इसे यहां दिखाया गया है:

CONTROL कुंजी को दबाकर रखें और TextView कंट्रोल को कोड की जगह पर खींचें और छोड़ें. ड्रैग करते समय, आपको नीले रंग का ऐरो दिखेगा.
क्लास डिक्लेरेशन के ठीक नीचे मौजूद कोड पर छोड़ें. आपको एक पॉप-अप दिखेगा, जिसमें आपसे कनेक्शन टाइप के बारे में पूछा जाएगा. यह कुछ ऐसी नज़र आनी चाहिए:

आउटलेट चुनें और इसे txtInput नाम दें.
लेबल के लिए भी ऐसा ही करें. इसके बाद, कनेक्शन टाइप को आउटलेट के तौर पर सेट करें और इसे txtOutput नाम दें.
आखिर में, बटन को खींचकर ऊपर ले जाएं. हालांकि, इस बार कनेक्शन टाइप के तौर पर ऐक्शन चुनें. (कनेक्शन टाइप के तौर पर 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 फ़ंक्शन में, 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. बधाई हो!

अब आपने यह कोडलैब पूरा कर लिया है!

इसके बाद, आपको एनएलपी मॉडल बनाने का तरीका बताया जाएगा. इस मॉडल को बाद में इस ऐप्लिकेशन में वापस लाया जाएगा, ताकि यह टिप्पणी वाले स्पैम के लिए उपयोगकर्ता के टेक्स्ट को फ़िल्टर कर सके!