একটি মৌলিক মেসেজিং স্টাইল অ্যাপ তৈরি করুন

1. আপনি শুরু করার আগে

এই কোডল্যাব হল মোবাইল টেক্সট ক্লাসিফিকেশন পাথওয়ে দিয়ে শুরু করুন-এ কার্যকলাপ #2।

এই কোডল্যাবে, আপনি একটি সাধারণ মেসেজিং অ্যাপ তৈরি করবেন। পথের পরে, আপনি এই অ্যাপটিকে একটি মেশিন লার্নিং মডেলের সাথে আপডেট করবেন যা অ্যাপের বার্তাগুলি থেকে অবাঞ্ছিত স্প্যাম ফিল্টার করবে।

পূর্বশর্ত

• কোটলিনের সাথে অ্যান্ড্রয়েড বিকাশের একটি প্রাথমিক জ্ঞান এবং (ঐচ্ছিকভাবে) সুইফটের সাথে আইওএস বিকাশ

আপনি কি নির্মাণ করবেন

• একটি সাধারণ মেসেজিং অ্যাপ

আপনি কি প্রয়োজন হবে

• অ্যান্ড্রয়েডের জন্য, শুরু করতে আপনার অ্যান্ড্রয়েড স্টুডিওর প্রয়োজন হবে। চালিয়ে যাওয়ার আগে অনুগ্রহ করে নিশ্চিত করুন যে এটি ইনস্টল এবং সম্পূর্ণরূপে আপডেট হয়েছে।
• iOS এর জন্য, আপনার Xcode প্রয়োজন। আপনি অ্যাপ স্টোরে এটি খুঁজে পেতে পারেন। (আপনি যদি শুধুমাত্র iOS অ্যাপ লিখতে চান, তাহলে সরাসরি ধাপ 5 এ যান।

কোড পান

আপনি যদি ধাপে ধাপে অনুসরণ করতে না চান এবং এই পথের জন্য চূড়ান্ত কোডটি দেখতে চান, তাহলে এটি এখানে

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

এখানে, TextClassificationOnMobile ডিরেক্টরিটি খুঁজুন এবং এর মধ্যে আপনি Android এবং iOS সাব ডিরেক্টরি দেখতে পাবেন। এই ডিরেক্টরিগুলিতে TextClassificationStep1 উপ ডিরেক্টরি থাকবে, যা যথাক্রমে Android এবং iOS-এ অ্যাপ ধারণ করবে।

2. অ্যান্ড্রয়েড স্টুডিওতে একটি নতুন প্রকল্প তৈরি করুন৷

1. অ্যান্ড্রয়েড স্টুডিও চালু করুন।

1. নতুন প্রকল্প তৈরি করুন নির্বাচন করুন। আপনি একটি ডায়ালগ দেখতে পাবেন যা আপনাকে একটি প্রকল্প টেমপ্লেট নির্বাচন করতে বলবে।
2. খালি কার্যকলাপ নির্বাচন করুন এবং পরবর্তী ক্লিক করুন। আপনাকে পরবর্তীতে আপনার প্রকল্প কনফিগার করতে বলা হবে। আপনি যা চান তা চয়ন করুন, তবে নিশ্চিত করুন যে ভাষাটি কোটলিন , এবং সর্বনিম্ন SDK হল API 23 ।
3. শেষ ক্লিক করুন. এটি হয়ে গেলে, অ্যান্ড্রয়েড স্টুডিও আপনার প্রকল্পের সাথে খুলবে। সবকিছু ঠিকঠাক আছে কিনা তা নিশ্চিত করতে গ্রেডল সিঙ্ক করতে কয়েক মুহূর্ত সময় লাগতে পারে, বিশেষ করে যদি এটি আপনার প্রথমবার Android স্টুডিও ব্যবহার করে থাকে।

3. ইউজার ইন্টারফেস তৈরি করুন

একটি অ্যান্ড্রয়েড অ্যাপের জন্য ইউজার ইন্টারফেস একটি লেআউট ফাইল নামক একটি XML ফাইল ব্যবহার করে তৈরি করা হয়।

1. ফাইলটি খুলুন। অ্যান্ড্রয়েড স্টুডিওতে এক্সপ্লোরার ব্যবহার করে অ্যাপ > res > লেআউট > activity_main.xml-এ ক্লিক করুন।

স্ক্রিনের উপরের ডানদিকে, আপনি একটি নির্বাচন দেখতে পাবেন যাতে কোড, স্প্লিট এবং ডিজাইনের জন্য ট্যাব রয়েছে, যেমন:

পরবর্তী ধাপে যাওয়ার আগে নিশ্চিত করুন যে 'কোড' নির্বাচন করা হয়েছে।

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>

এটি আপনাকে একটি টেক্সটভিউ সহ একটি ইনপুট এলাকা সম্বলিত একটি মৌলিক ব্যবহারকারী ইন্টারফেস দেয়, যা আপনাকে একটি স্ট্রিং এবং একটি সম্পাদনা পাঠ লিখতে অনুরোধ করে যা txtInput নামক একটি স্ট্রিং প্রবেশ করতে ব্যবহার করা যেতে পারে। এটির নীচে একটি টেক্সটভিউ রয়েছে যা আউটপুট রেন্ডার করবে এবং একটি বোতাম যা ব্যবহারকারী শ্রেণিবিন্যাসটি ট্রিগার করতে টিপবে।

পরবর্তী ধাপ হল কোড লিখতে যা এই ইউজার ইন্টারফেসটিকে সক্রিয় করবে।

4. নিয়ন্ত্রণগুলি সংযুক্ত করুন এবং অ্যাপ তৈরি করুন৷

আপনি MainActivity কোড ফাইল খুঁজে এই কার্যকলাপের জন্য কোড সম্পাদনা করতে পারেন.

1. অ্যান্ড্রয়েড স্টুডিওতে, অ্যাপ > java > MainActivity-এ ক্লিক করুন।

2. কোড এডিটরে যেতে MainActivity ফাইলটি খুলুন। এই কোডের সাথে 'প্যাকেজ' দিয়ে শুরু হওয়া প্রথম লাইন ছাড়া এই ফাইলের সবকিছু প্রতিস্থাপন করুন:

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-এ মৌলিক অ্যাপ তৈরি করুন

নিম্নলিখিত পদক্ষেপগুলির জন্য সুইফটের সাথে Xcode এবং iOS বিকাশের সাথে কিছু পরিচিতি প্রয়োজন।

আপনি যদি তৈরির প্রক্রিয়ার মধ্য দিয়ে যেতে না চান তবে আপনি রেপো ক্লোন করতে পারেন এবং সরাসরি অ্যাপটি খুলতে পারেন। একে বলা হয় TextClassificationStep1, এবং এটি রেপোতে iOS ফোল্ডারে রয়েছে।

মৌলিক অ্যাপ তৈরি করতে, আপনি Xcode দিয়ে শুরু করবেন।

1. মৌলিক টেমপ্লেট ব্যবহার করে একটি নতুন অ্যাপ তৈরি করুন:

2. আপনার নতুন প্রকল্পের জন্য বিকল্প চয়ন করুন . আপনার পণ্যের একটি নাম এবং একটি প্রতিষ্ঠান শনাক্তকারী দিন। আপনি যা চান তা টাইপ করতে পারেন, বা নীচের উদাহরণ সহ অনুসরণ করতে পারেন: (তবে ইন্টারফেসটিকে স্টোরিবোর্ডে এবং লাইফ সাইকেলটি UIKitApp প্রতিনিধিতে সেট করতে ভুলবেন না, যেমন দেখানো হয়েছে।)

6. স্টোরিবোর্ড সম্পাদনা করুন

1. Main.storyboard খুলুন। আপনি একটি নকশা পৃষ্ঠ দেখতে পাবেন যেখানে আপনি নিয়ন্ত্রণ যোগ করতে পারেন।
2. নিয়ন্ত্রণ যোগ করতে, Xcode উইন্ডোর শীর্ষে + বোতামে ক্লিক করুন।

3. ডিজাইনের পৃষ্ঠে একটি টেক্সটভিউ নিয়ন্ত্রণ, একটি বোতাম নিয়ন্ত্রণ এবং একটি লেবেল নিয়ন্ত্রণ রাখতে এটি ব্যবহার করুন। এটি এই মত কিছু দেখা উচিত:

4. স্টোরিবোর্ড এবং ViewController.swift ফাইল উভয়ই খোলার সাথে পাশের দৃশ্য খুলতে সহকারী ব্যবহার করুন। সহকারী হল স্ক্রিনের উপরের ডানদিকে একটি ছোট আইকন, যেমনটি এখানে দেখানো হয়েছে:

1. কন্ট্রোল কী টিপুন, এবং টেক্সটভিউ কন্ট্রোলটিকে কোড পৃষ্ঠে টেনে আনুন। আপনি টেনে আনলে আপনাকে একটি নীল তীর দেখা উচিত।
2. শ্রেণী ঘোষণার ঠিক নীচে কোডটি ড্রপ করুন। আপনি সংযোগের ধরন জিজ্ঞাসা করে একটি পপআপ পাবেন। এটি এই মত কিছু দেখা উচিত:

3. আউটলেট নির্বাচন করুন এবং এটিকে txtInput নাম দিন।
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 {

তারপর, viewDidLoad ফাংশনে, এই ক্লাসে 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
}

এই অ্যাপের জন্য বোতামের ক্রিয়াটি তুচ্ছ, আমরা কেবল ব্যবহারকারীর আউটপুটে যা টাইপ করে তা দিয়ে যাব। পরে আপনি দেখতে পাবেন কিভাবে একটি NLP মডেল এই পাঠ্য ফিল্টার করতে পারে। কিন্তু আপাতত, এর একটি পাসথ্রু অনুকরণ করার জন্য এটিকে ওয়্যার আপ করা যাক।

আপনি ইতিমধ্যেই btnSendText অ্যাকশন তৈরি করেছেন, তাই এখন আপনাকে যা করতে হবে তা হল কোড যোগ করুন:

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

8. অভিনন্দন!

আপনি এখন এই কোডল্যাব সম্পূর্ণ করেছেন!

পথের পরে, আপনি কীভাবে একটি NLP মডেল তৈরি করবেন তা শিখবেন, যা আপনি পরে এই অ্যাপে ফিরিয়ে আনবেন যাতে আপনার ব্যবহারকারীর পাঠ্য মন্তব্য স্প্যামের জন্য ফিল্টার করার জন্য এটি সজ্জিত করা যায়!