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

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

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

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

পূর্বশর্ত

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

আপনি যা তৈরি করবেন

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

আপনার যা যা লাগবে

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

কোডটি নিন

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

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

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

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

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

1. ‘Create New Project’ নির্বাচন করুন। আপনি একটি ডায়ালগ বক্স দেখতে পাবেন, যেখানে আপনাকে একটি প্রজেক্ট টেমপ্লেট বেছে নিতে বলা হবে।
2. এম্পটি অ্যাক্টিভিটি (Empty Activity) নির্বাচন করুন এবং নেক্সট (Next) ক্লিক করুন। এরপর আপনাকে আপনার প্রোজেক্ট কনফিগার করতে বলা হবে। আপনার পছন্দমতো যেকোনো কিছু বেছে নিন, তবে নিশ্চিত করুন যে ভাষাটি কোটলিন (Kotlin ) এবং মিনিমাম এসডিকে (Minimum SDK) হলো এপিআই ২৩ (API 23 )।
3. ফিনিশ- এ ক্লিক করুন। এটি সম্পন্ন হলে, আপনার প্রজেক্টসহ অ্যান্ড্রয়েড স্টুডিও খুলে যাবে। সবকিছু ঠিক আছে কিনা তা নিশ্চিত করার জন্য গ্রেডল সিঙ্ক করতে কয়েক মুহূর্ত সময় লাগতে পারে, বিশেষ করে যদি আপনি প্রথমবারের মতো অ্যান্ড্রয়েড স্টুডিও ব্যবহার করে থাকেন।

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

অ্যান্ড্রয়েড অ্যাপের ইউজার ইন্টারফেস লেআউট ফাইল নামক একটি 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 ফাইলটি খুলুন। '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 প্রপার্টিতে সেই স্ট্রিংটি সেট করা হয়।

আপনি যদি 'মোবাইল টেক্সট ক্লাসিফিকেশন দিয়ে শুরু করুন' পথটি অনুসরণ করে থাকেন, তাহলে এটিই সেই আচরণ যা আপনি অ্যাক্টিভিটি #১, অর্থাৎ ডেমো ভিডিওতে দেখেছেন, যেখানে অ্যাপটি স্প্যাম চেক না করেই ব্যবহারকারী যা টাইপ করে তা-ই ব্যবহার করে!

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

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

৫. 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. আউটলেট নির্বাচন করুন এবং এর নাম দিন txtInput।
4. লেবেলটির জন্যও একই কাজ করুন, তারপর সংযোগের ধরণটি Outlet করুন এবং এর নাম দিন txtOutput।
5. অবশেষে, বাটনটি টেনে আনুন, কিন্তু এবার সংযোগের ধরন হিসেবে ‘অ্যাকশন’ নির্বাচন করুন। (সংযোগের ধরন হিসেবে ‘আউটলেট’ ব্যবহার করবেন না।)
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
}

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

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

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

৮. অভিনন্দন!

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

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