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

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 की सब डायरेक्ट्री शामिल होंगी. इनमें iOS और Android पर इस्तेमाल किए जाने वाले ऐप्लिकेशन भी शामिल होंगे.

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

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

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

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

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

1. फ़ाइल खोलें. ऐप्लिकेशन पर क्लिक करें > res > लेआउट > activity_main.xml शामिल है. यह Android Studio में एक्सप्लोरर का इस्तेमाल करता है.

स्क्रीन के सबसे ऊपर दाईं ओर, आपको एक विकल्प दिखेगा जिसमें कोड, स्प्लिट, और डिज़ाइन टैब के लिए कुछ इस तरह के टैब होंगे:

पक्का करें कि 'कोड' का चयन अगले चरण पर जाने से पहले किया जाता है.

2. कोड को इस एक्सएमएल से बदलें:

<?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 के साथ इनपुट एरिया वाला बेसिक यूज़र इंटरफ़ेस मिलता है. इससे आपको स्ट्रिंग डालें और txtइनपुट नाम का एक एडिट टेक्स्ट डालने के लिए कहा जाता है जिसका इस्तेमाल स्ट्रिंग डालने के लिए किया जा सकता है. इसके नीचे एक TextView है, जो आउटपुट रेंडर करेगा. साथ ही, एक बटन भी होगा जिसे उपयोगकर्ता, क्लासिफ़िकेशन को ट्रिगर करने के लिए दबाएगा.

अगला चरण एक कोड लिखना है जिससे यह यूज़र इंटरफ़ेस चालू हो जाएगा.

4. कंट्रोल को कनेक्ट करें और ऐप्लिकेशन बनाएं

इस गतिविधि के लिए कोड में बदलाव करने के लिए, MainActivity कोड फ़ाइल को ढूंढें.

1. Android Studio में, ऐप्लिकेशन > 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. iOS पर बेसिक ऐप्लिकेशन बनाना

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

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

बेसिक ऐप्लिकेशन बनाने के लिए, आपको Xcode से शुरुआत करनी होगी.

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

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

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

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

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

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

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

3. आउटलेट चुनें और इसे txtइनपुट नाम दें.
4. लेबल के लिए भी ऐसा ही करें, फिर कनेक्शन को एक आउटलेट टाइप करें और उसे txtOutput नाम दें.
5. आखिर में, बटन को खींचकर छोड़ें, लेकिन इस बार कनेक्शन टाइप के तौर पर कार्रवाई चुनें. (कनेक्शन टाइप के तौर पर आउटलेट का इस्तेमाल न करें.)
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 {

इसके बाद, viewIdLoad फ़ंक्शन में, इस क्लास के लिए UITextView (जिसे आपने आउटलेट सेट अप करते समय txtइनपुट कहा जाता है) का डेलिगेट सेट करें:

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. बधाई हो!

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

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