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

১. শুরু করার আগে

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

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

পূর্বশর্ত

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

তুমি কী তৈরি করবে

• একটি সহজ মেসেজিং অ্যাপ

তোমার যা লাগবে

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

কোডটি পান

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

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

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

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

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

1. নতুন প্রকল্প তৈরি করুন নির্বাচন করুন। আপনি একটি ডায়ালগ দেখতে পাবেন যা আপনাকে একটি প্রকল্প টেমপ্লেট নির্বাচন করতে বলবে।
2. Empty Activity নির্বাচন করুন এবং Next এ ক্লিক করুন। এরপর আপনাকে আপনার প্রকল্পটি কনফিগার করতে বলা হবে। আপনার পছন্দের যেকোনো একটি বেছে নিন, তবে নিশ্চিত করুন যে ভাষাটি Kotlin এবং সর্বনিম্ন SDK API 23 ।
3. Finish এ ক্লিক করুন। এটি সম্পন্ন হলে, Android Studio আপনার প্রকল্পের সাথে খুলবে। সবকিছু ঠিকঠাক আছে কিনা তা নিশ্চিত করার জন্য gradle sync করতে কয়েক মুহূর্ত সময় লাগতে পারে, বিশেষ করে যদি আপনি প্রথমবার Android Studio ব্যবহার করেন।

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

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

1. ফাইলটি খুলুন। অ্যান্ড্রয়েড স্টুডিওতে এক্সপ্লোরার ব্যবহার করে app > res > layout > 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, যা দিয়ে স্ট্রিং এন্টার করা যাবে। এর নিচে একটি টেক্সটভিউ থাকবে যা আউটপুট রেন্ডার করবে এবং একটি বোতাম থাকবে যা ব্যবহারকারী শ্রেণীবিভাগ শুরু করতে টিপবে।

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

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

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

1. অ্যান্ড্রয়েড স্টুডিওতে, app > 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 বৈশিষ্ট্যটি সেই স্ট্রিংয়ে সেট করা হয়।

যদি আপনি "Get Started with mobile text classification pathway" অনুসরণ করেন, তাহলে এই আচরণটি আপনি কার্যকলাপ #1, ডেমো ভিডিওতে দেখেছেন, যেখানে অ্যাপটি ব্যবহারকারী যা টাইপ করবে তা ব্যবহার করবে, স্প্যামের জন্য পরীক্ষা না করেই!

পরবর্তী কোডল্যাবে, আপনি দেখতে পাবেন কিভাবে এই অ্যাপে মেশিন লার্নিং মডেল ব্যবহার করে মন্তব্য স্প্যাম ফিল্টার করতে হয়।

আপনি যদি iOS-এ একই অ্যাপ তৈরি করতে চান, তাহলে অনুগ্রহ করে এই কোডল্যাবটি ব্যবহার করে এগিয়ে যান।

৫. iOS-এ বেসিক অ্যাপ তৈরি করুন

নিম্নলিখিত ধাপগুলির জন্য Xcode এবং Swift-এর সাথে iOS ডেভেলপমেন্টের সাথে কিছুটা পরিচিতি প্রয়োজন।

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

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

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

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

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

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

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

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

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

3. Outlet নির্বাচন করুন এবং এর নাম দিন txtInput।
4. লেবেলের জন্যও একই কাজ করুন, তারপর সংযোগটি Outlet টাইপ করুন এবং এটিকে txtOutput নাম দিন।
5. অবশেষে, বোতামটি টেনে আনুন, কিন্তু এবার সংযোগের ধরণ হিসেবে Action নির্বাচন করুন। (সংযোগের ধরণ হিসেবে Outlet ব্যবহার করবেন না।)
6. ক্রিয়াটির নাম দিন btnSendText ।

আপনার কাজ শেষ হয়ে গেলে, ক্লাসের শীর্ষে থাকা আপনার কোডটি এইরকম দেখাবে:

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

৭. বেসিক iOS অ্যাপ কোডিং শেষ করুন

যেহেতু এই ভিউটি একটি UITextView ব্যবহার করে, তাই এই ভিউতে ইভেন্টগুলিতে প্রতিক্রিয়া জানাতে এটিকে একটি UITextViewDelegate হতে হবে।

আপনি ক্লাস ঘোষণাটি এতে পরিবর্তন করে এটি পেতে পারেন:

class ViewController: UIViewController, UITextViewDelegate {

তারপর, viewDidLoad ফাংশনে, UITextView (যাকে আপনি আউটলেট সেট আপ করার সময় txtInput বলেছিলেন) এর জন্য ডেলিগেট এইভাবে সেট করুন:

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

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

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
}

৮. অভিনন্দন!

তুমি এখন এই কোডল্যাবটি সম্পন্ন করেছ!

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