একটি ক্লাসরুম অ্যাড-অন তৈরি করুন

এটি ক্লাসরুম অ্যাড-অন ওয়াকথ্রু সিরিজের প্রথম ওয়াকথ্রু।

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

এই নির্দেশিকাটি অনুসরণ করার সময় আপনাকে নিম্নলিখিত কাজগুলো সম্পন্ন করতে হবে:

  • আপনার অ্যাড-অনের জন্য একটি নতুন গুগল ক্লাউড প্রজেক্ট তৈরি করুন।
  • প্লেসহোল্ডার সাইন-ইন বাটনসহ একটি কাঠামো ওয়েব অ্যাপ তৈরি করুন।
  • আপনার অ্যাড-অনের জন্য একটি গুগল ওয়ার্কস্পেস মার্কেটপ্লেস স্টোর লিস্টিং প্রকাশ করুন।

কাজ শেষ হলে, আপনি আপনার অ্যাড-অনটি ইনস্টল করে ক্লাসরুম অ্যাড-অন আইফ্রেমে লোড করতে পারবেন।

পূর্বশর্ত

উপযুক্ত পূর্বশর্তগুলো দেখতে একটি ভাষা নির্বাচন করুন:

পাইথন

আমাদের পাইথন উদাহরণটি ফ্লাস্ক ফ্রেমওয়ার্ক ব্যবহার করে। আপনি ওভারভিউ পৃষ্ঠা থেকে সমস্ত ওয়াকথ্রু-এর সম্পূর্ণ সোর্স কোড ডাউনলোড করতে পারেন। এই নির্দিষ্ট ওয়াকথ্রু-এর কোডটি /flask/01-basic-app/ ডিরেক্টরিতে পাওয়া যাবে।

প্রয়োজন হলে পাইথন ৩.৭+ ইনস্টল করুন এবং pip উপলব্ধ আছে কিনা তা নিশ্চিত করুন।

python -m ensurepip --upgrade

আমরা আপনাকে একটি নতুন পাইথন ভার্চুয়াল এনভায়রনমেন্ট সেট আপ এবং সক্রিয় করার পরামর্শ দিই।

python3 -m venv .classroom-addon-env
source .classroom-addon-env/bin/activate

ডাউনলোড করা উদাহরণগুলোর প্রতিটি ওয়াকথ্রু সাবডিরেক্টরিতে একটি requirements.txt থাকে। আপনি pip ব্যবহার করে দ্রুত প্রয়োজনীয় লাইব্রেরিগুলো ইনস্টল করতে পারেন। এই ওয়াকথ্রুটির জন্য প্রয়োজনীয় লাইব্রেরিগুলো ইনস্টল করতে নিম্নলিখিতটি ব্যবহার করুন।

cd flask/01-basic-app
pip install -r requirements.txt

নোড.জেএস

আমাদের Node.js উদাহরণটি Express ফ্রেমওয়ার্ক ব্যবহার করে। আপনি Overview পৃষ্ঠা থেকে সমস্ত ওয়াকথ্রু-এর সম্পূর্ণ সোর্স কোড ডাউনলোড করতে পারেন।

প্রয়োজন হলে NodeJS v16.13+ ইনস্টল করুন।

npm ব্যবহার করে প্রয়োজনীয় নোড মডিউলগুলো ইনস্টল করুন।

npm install

জাভা

আমাদের জাভা উদাহরণটি স্প্রিং বুট ফ্রেমওয়ার্ক ব্যবহার করে। আপনি ওভারভিউ পৃষ্ঠা থেকে সমস্ত ওয়াকথ্রু-এর সম্পূর্ণ সোর্স কোড ডাউনলোড করতে পারেন।

আপনার মেশিনে জাভা ১১+ ইনস্টল করা না থাকলে, তা ইনস্টল করুন।

Spring Boot অ্যাপ্লিকেশনগুলো বিল্ড পরিচালনা এবং ডিপেন্ডেন্সি ব্যবস্থাপনার জন্য Gradle বা Maven ব্যবহার করতে পারে। এই উদাহরণটিতে Maven র‍্যাপারটি অন্তর্ভুক্ত রয়েছে, যা আপনাকে সরাসরি Maven ইনস্টল না করেই একটি সফল বিল্ড নিশ্চিত করে।

আমাদের দেওয়া উদাহরণটি চালানোর জন্য, আপনি যে ডিরেক্টরিতে প্রজেক্টটি ডাউনলোড করেছেন সেখানে নিম্নলিখিত কমান্ডগুলি চালান, যাতে প্রজেক্টটি চালানোর জন্য প্রয়োজনীয় পূর্বশর্তগুলি আপনার কাছে আছে কিনা তা নিশ্চিত করা যায়।

java --version
./mvnw --version

অথবা উইন্ডোজে:

java -version
mvnw.cmd --version

একটি গুগল ক্লাউড প্রজেক্ট সেট আপ করুন

ক্লাসরুম এপিআই-তে প্রবেশাধিকার এবং প্রয়োজনীয় প্রমাণীকরণ পদ্ধতিগুলো গুগল ক্লাউড প্রজেক্ট দ্বারা নিয়ন্ত্রিত হয়। নিম্নলিখিত নির্দেশাবলী আপনাকে আপনার অ্যাড-অনের সাথে ব্যবহারের জন্য একটি নতুন প্রজেক্ট তৈরি ও কনফিগার করার ন্যূনতম ধাপগুলো অনুসরণ করতে সাহায্য করবে।

প্রকল্পটি তৈরি করুন

প্রজেক্ট তৈরির পেজে গিয়ে একটি নতুন গুগল ক্লাউড প্রজেক্ট তৈরি করুন। নতুন প্রজেক্টটির জন্য আপনি যেকোনো নাম দিতে পারেন। 'Create' বাটনে ক্লিক করুন।

নতুন প্রজেক্টটি সম্পূর্ণরূপে তৈরি হতে কয়েক মুহূর্ত সময় লাগে। তৈরি হয়ে গেলে, প্রজেক্টটি নির্বাচন করতে ভুলবেন না; আপনি স্ক্রিনের উপরের প্রজেক্ট সিলেক্টর ড্রপ-ডাউন মেনু থেকে এটি বেছে নিতে পারেন, অথবা উপরের ডানদিকের নোটিফিকেশন মেনুতে থাকা 'সিলেক্ট প্রজেক্ট' (SELECT PROJECT) বোতামে ক্লিক করতে পারেন।

গুগল ক্লাউড কনসোলে প্রজেক্টটি নির্বাচন করুন

গুগল ক্লাউড প্রজেক্টের সাথে গুগল ওয়ার্কস্পেস মার্কেটপ্লেস এসডিকে সংযুক্ত করুন।

এপিআই লাইব্রেরি ব্রাউজারে যান। Google Workspace Marketplace SDK লিখে অনুসন্ধান করুন। আপনি ফলাফলের তালিকায় এসডিকে-টি দেখতে পাবেন।

গুগল ওয়ার্কস্পেস মার্কেটপ্লেস এসডিকে কার্ড

Google Workspace Marketplace SDK কার্ডটি নির্বাচন করুন, তারপর 'Enable'-এ ক্লিক করুন।

Google Workspace Marketplace SDK কনফিগার করুন

গুগল ওয়ার্কস্পেস মার্কেটপ্লেস সেই তালিকাটি সরবরাহ করে, যার মাধ্যমে ব্যবহারকারী এবং প্রশাসকগণ আপনার অ্যাড-অন ইনস্টল করেন। এগিয়ে যাওয়ার জন্য মার্কেটপ্লেস SDK-এর অ্যাপ কনফিগারেশন ও স্টোর লিস্টিং এবং OAuth কনসেন্ট স্ক্রিন কনফিগার করুন।

অ্যাপ কনফিগারেশন

মার্কেটপ্লেস SDK-এর অ্যাপ কনফিগারেশন পৃষ্ঠায় যান। নিম্নলিখিত তথ্যগুলো প্রদান করুন:

  • অ্যাপটির দৃশ্যমানতা Public অথবা Private করুন।

    • পাবলিক সেটিংটি এমন অ্যাপের জন্য তৈরি করা হয়েছে যা অবশেষে সাধারণ ব্যবহারকারীদের কাছে প্রকাশ করা হবে। একটি পাবলিক অ্যাপ সাধারণ ব্যবহারকারীদের কাছে প্রকাশ করার আগে অবশ্যই একটি অনুমোদন প্রক্রিয়ার মধ্য দিয়ে যেতে হয়, কিন্তু আপনি ড্রাফট হিসেবে নির্দিষ্ট করে দিতে পারেন যে কোন ব্যবহারকারীরা এটি ইনস্টল এবং পরীক্ষা করতে পারবে। এটি প্রকাশের পূর্ববর্তী একটি অবস্থা, যা আপনাকে অনুমোদনের জন্য পাঠানোর আগে আপনার অ্যাড-অনটি পরীক্ষা ও উন্নত করার সুযোগ দেবে।
    • প্রাইভেট সেটিং অভ্যন্তরীণ পরীক্ষা এবং উন্নয়নের জন্য উপযুক্ত। একটি প্রাইভেট অ্যাপ শুধুমাত্র সেই ডোমেইনের ব্যবহারকারীরাই ইনস্টল করতে পারেন, যে ডোমেইনে প্রজেক্টটি তৈরি করা হয়েছে। তাই, আপনার ভিজিবিলিটি শুধুমাত্র তখনই প্রাইভেট সেট করা উচিত, যদি প্রজেক্টটি এমন কোনো ডোমেইনে তৈরি করা হয়ে থাকে যেখানে Google Workspace for Education সাবস্ক্রিপশন রয়েছে ; অন্যথায় আপনার পরীক্ষামূলক ব্যবহারকারীরা ক্লাসরুম অ্যাড-অন চালু করতে পারবেন না।

  • যদি আপনি ইনস্টলেশনটি শুধুমাত্র ডোমেইন অ্যাডমিনিস্ট্রেটরদের জন্য সীমাবদ্ধ রাখতে চান, তাহলে ইনস্টলেশন সেটিংস ' Admin Only install এ সেট করুন।

  • অ্যাপ ইন্টিগ্রেশন-এর অধীনে, ক্লাসরুম অ্যাড-অন নির্বাচন করুন। আপনাকে সুরক্ষিত অ্যাটাচমেন্ট সেটআপ ইউআরআই (URI) দিতে বলা হবে; এটি সেই ইউআরএল (URL) যা কোনো ব্যবহারকারী আপনার অ্যাড-অনটি খুললে লোড হবে বলে আপনি আশা করেন। এই নির্দেশিকার জন্য, এটি হবে https://<your domain>/addon-discovery ।

  • The Allowed Attachment URI Prefixes are used to validate the URIs set in AddOnAttachment using the courses.*.addOnAttachments.create and the courses.*.addOnAttachments.patch methods. The validation is a literal string prefix match and doesn't allow for the use of wild cards at this time. Add at least the root domain of your content server, such as https://localhost:5000/ or https://cdn.myedtech.com/ .

  • পূর্ববর্তী ধাপে আপনার OAuth সম্মতি স্ক্রিনে দেওয়া একই OAuth স্কোপগুলো যোগ করুন।

  • ডেভেলপার লিঙ্কস-এর অধীনে আপনার প্রতিষ্ঠানের জন্য প্রযোজ্য ক্ষেত্রগুলি পূরণ করুন।

স্টোর তালিকা

মার্কেটপ্লেস SDK-এর স্টোর লিস্টিং পৃষ্ঠায় যান। নিম্নলিখিত তথ্য প্রদান করুন:

  • অ্যাপের বিবরণের অধীনে, একটি ভাষা যোগ করুন অথবা আগে থেকে তালিকাভুক্ত ভাষার পাশের ড্রপ-ডাউনটি প্রসারিত করুন। একটি অ্যাপ্লিকেশনের নাম এবং বিবরণ দিন; এগুলি আপনার অ্যাড-অনের গুগল ওয়ার্কস্পেস মার্কেটপ্লেস স্টোর লিস্টিং পৃষ্ঠায় প্রদর্শিত হবে। সংরক্ষণ করতে 'সম্পন্ন' (Done ) ক্লিক করুন।
  • আপনার অ্যাড-অনের জন্য একটি বিভাগ নির্বাচন করুন।
  • গ্রাফিক্স অ্যাসেটস- এর অধীনে, প্রয়োজনীয় ফিল্ডগুলোর জন্য ছবি দিন। এগুলো পরে পরিবর্তন করা যাবে এবং আপাতত প্লেসহোল্ডার হিসেবে থাকতে পারে।
  • ‘সাপোর্ট লিঙ্কস’- এর অধীনে, অনুরোধ করা URL-গুলো প্রদান করুন। আপনি যদি পূর্ববর্তী ধাপে ‘অ্যাপ ভিজিবিলিটি’ ‘প্রাইভেট’ সেট করে থাকেন, তবে এগুলি প্লেসহোল্ডার হতে পারে।

If you set the App Visibility to Private in the previous step, click PUBLISH ; your app is immediately available for installation. If you set the App Visibility to Public , add email addresses in the Draft Testers area for any test users and click Save Draft .

ব্যবহারকারীরা যখন প্রথমবার আপনার অ্যাপকে অনুমোদন দেন, তখন OAuth সম্মতি স্ক্রিনটি প্রদর্শিত হয়। আপনার সক্রিয় করা স্কোপ অনুযায়ী, এটি তাদের ব্যক্তিগত এবং অ্যাকাউন্টের তথ্য অ্যাক্সেস করার জন্য আপনার অ্যাপকে অনুমতি দিতে বলে।

OAuth সম্মতি স্ক্রিন তৈরির পৃষ্ঠায় যান। নিম্নলিখিত তথ্য প্রদান করুন:

  • ব্যবহারকারীর ধরন ‘এক্সটার্নাল’ হিসেবে সেট করুন। ‘ক্রিয়েট’-এ ক্লিক করুন।
  • পরবর্তী পৃষ্ঠায়, অ্যাপের প্রয়োজনীয় বিবরণ এবং যোগাযোগের তথ্য পূরণ করুন। আপনার অ্যাপ হোস্টকারী যেকোনো ডোমেইন ‘অনুমোদিত ডোমেইন’ (Authorized Domains) এর অধীনে প্রদান করুন। ‘সংরক্ষণ করুন এবং চালিয়ে যান’ (SAVE AND CONTINUE) এ ক্লিক করুন।

  • আপনার ওয়েব অ্যাপের জন্য প্রয়োজনীয় যেকোনো OAuth স্কোপ যোগ করুন। স্কোপ এবং সেগুলোর উদ্দেশ্য সম্পর্কে বিস্তারিত আলোচনার জন্য OAuth কনফিগারেশন গাইড দেখুন।

    Google-কে login_hint কোয়েরি প্যারামিটার পাঠানোর জন্য আপনাকে অবশ্যই নিম্নলিখিত স্কোপগুলির মধ্যে অন্তত একটির জন্য অনুরোধ করতে হবে। এই আচরণের আরও বিস্তারিত ব্যাখ্যা আমাদের OAuth কনফিগারেশন গাইডে পাওয়া যাবে:

    • https://www.googleapis.com/auth/userinfo.email (ইতিমধ্যে অন্তর্ভুক্ত)
    • https://www.googleapis.com/auth/userinfo.profile (ইতিমধ্যে অন্তর্ভুক্ত)

    নিম্নলিখিত স্কোপগুলি ক্লাসরুম অ্যাড-অনগুলির জন্য নির্দিষ্ট:

    • https://www.googleapis.com/auth/classroom.addons.teacher
    • https://www.googleapis.com/auth/classroom.addons.student

    এছাড়াও, আপনার অ্যাপের জন্য ব্যবহারকারীদের কাছ থেকে প্রয়োজনীয় অন্য যেকোনো গুগল এপিআই স্কোপ অন্তর্ভুক্ত করুন।

    সংরক্ষণ করুন এবং চালিয়ে যান-এ ক্লিক করুন।

  • টেস্ট ইউজার্স পেজে যেকোনো টেস্টিং অ্যাকাউন্টের ইমেল ঠিকানাগুলো তালিকাভুক্ত করুন। সেভ অ্যান্ড কন্টিনিউ-তে ক্লিক করুন।

আপনার সেটিংস সঠিক আছে কিনা তা নিশ্চিত করুন, তারপর ড্যাশবোর্ডে ফিরে যান।

অ্যাড-অনটি ইনস্টল করুন

এখন আপনি মার্কেটপ্লেস SDK-এর স্টোর লিস্টিং পেজের উপরের লিঙ্কটি ব্যবহার করে আপনার অ্যাড-অনটি ইনস্টল করতে পারেন। লিস্টিংটি দেখতে পেজের উপরে থাকা ‘View In Marketplace’-এ ক্লিক করুন, তারপর ‘Install’ বেছে নিন।

একটি বেসিক ওয়েব অ্যাপ তৈরি করুন

দুটি রুট সহ একটি কাঠামোবদ্ধ ওয়েব অ্যাপ্লিকেশন তৈরি করুন। পরবর্তী ধাপে এই অ্যাপ্লিকেশনটিকে আরও বিস্তারিত করা হবে, তাই আপাতত শুধু /addon-discovery অ্যাড-অনটির জন্য একটি ল্যান্ডিং পেজ এবং আমাদের 'কোম্পানি সাইট' / এর জন্য একটি নমুনা ইনডেক্স পেজ তৈরি করুন।

আইফ্রেমে ওয়েব অ্যাপের উদাহরণ

এই দুটি এন্ডপয়েন্ট বাস্তবায়ন করুন:

  • / : একটি স্বাগত বার্তা এবং বর্তমান ট্যাব ও অ্যাড-অন আইফ্রেম উভয়ই বন্ধ করার জন্য একটি বাটন প্রদর্শন করে।
  • /addon-discovery : একটি স্বাগত বার্তা এবং দুটি বাটন প্রদর্শন করে: একটি অ্যাড-অন আইফ্রেমটি বন্ধ করার জন্য এবং অন্যটি একটি নতুন ট্যাবে ওয়েবসাইট খোলার জন্য।

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

ইউটিলিটি স্ক্রিপ্ট তৈরি করুন

static/scripts একটি ডিরেক্টরি তৈরি করুন। addon-utils.js একটি নতুন ফাইল তৈরি করুন। নিম্নলিখিত দুটি ফাংশন যোগ করুন।

/**
 *   Opens a given destination route in a new window. This function uses
 *   window.open() so as to force window.opener to retain a reference to the
 *   iframe from which it was called.
 *   @param {string} destinationURL The endpoint to open, or "/" if none is
 *   provided.
 */
function openWebsiteInNewTab(destinationURL = '/') {
  window.open(destinationURL, '_blank');
}

/**
 *   Close the iframe by calling postMessage() in the host Classroom page. This
 *   function can be called directly when in a Classroom add-on iframe.
 *
 *   Alternatively, it can be used to close an add-on iframe in another window.
 *   For example, if an add-on iframe in Window 1 opens a link in a new Window 2
 *   using the openWebsiteInNewTab function, you can call
 *   window.opener.closeAddonIframe() from Window 2 to close the iframe in Window
 *   1.
 */
function closeAddonIframe() {
  window.parent.postMessage({
    type: 'Classroom',
    action: 'closeIframe',
  }, '*');
};

রুট তৈরি করুন

/addon-discovery এবং / এন্ডপয়েন্টগুলো বাস্তবায়ন করুন।

পাইথন

অ্যাপ্লিকেশন ডিরেক্টরি সেট আপ করুন

এই উদাহরণের জন্য, অ্যাপ্লিকেশন লজিকটিকে একটি পাইথন মডিউল হিসেবে গঠন করুন। আমাদের প্রদত্ত উদাহরণে এটি হলো webapp ডিরেক্টরি।

সার্ভার মডিউলের জন্য একটি ডিরেক্টরি তৈরি করুন, যেমন webapp । static ডিরেক্টরিটি মডিউল ডিরেক্টরির ভেতরে নিয়ে যান। মডিউল ডিরেক্টরির ভেতরে একটি template ডিরেক্টরিও তৈরি করুন; আপনার HTML ফাইলগুলো এখানে থাকবে।

সার্ভার মডিউল তৈরি করুন *

আপনার মডিউল ডিরেক্টরিতে __init__.py ফাইলটি তৈরি করুন এবং নিম্নলিখিত ইম্পোর্ট ও ডিক্লারেশনগুলো যোগ করুন।

from flask import Flask
import config

app = Flask(__name__)
app.config.from_object(config.Config)

# Load other module script files. This import statement refers to the
# 'routes.py' file described below.
from webapp import routes

এরপর ওয়েব অ্যাপের রাউটগুলো পরিচালনা করার জন্য একটি ফাইল তৈরি করুন। আমাদের দেওয়া উদাহরণে এটি হলো webapp/routes.py । এই ফাইলে দুটি রাউট প্রয়োগ করুন।

from webapp import app
import flask

@app.route("/")
def index():
    return flask.render_template("index.html",
                                message="You've reached the index page.")

@app.route("/classroom-addon")
def classroom_addon():
    return flask.render_template(
        "addon-discovery.html",
        message="You've reached the addon discovery page.")

লক্ষ্য করুন যে আমাদের উভয় রাউটই তাদের নিজ নিজ জিনজা টেমপ্লেটে একটি message ভেরিয়েবল পাঠায়। ব্যবহারকারী কোন পৃষ্ঠায় পৌঁছেছেন তা শনাক্ত করতে এটি সহায়ক।

কনফিগারেশন এবং লঞ্চ ফাইল তৈরি করুন

আপনার অ্যাপ্লিকেশনের রুট ডিরেক্টরিতে main.py এবং config.py ফাইল দুটি তৈরি করুন। config.py ফাইলে আপনার সিক্রেট কী কনফিগার করুন। 

import os

class Config(object):
    # Note: A secret key is included in the sample so that it works.
    # If you use this code in your application, replace this with a truly secret
    # key. See https://flask.palletsprojects.com/quickstart/#sessions.
    SECRET_KEY = os.environ.get(
        'SECRET_KEY') or "REPLACE ME - this value is here as a placeholder."

আপনার main.py ফাইলে আপনার মডিউলটি ইম্পোর্ট করুন এবং Flask সার্ভারটি চালু করুন। 

from webapp import app

if __name__ == "__main__":
    # Run the application over HTTPs with a locally stored certificate and key.
    # Defaults to https://localhost:5000.
    app.run(
        host="localhost",
        ssl_context=("localhost.pem", "localhost-key.pem"),
        debug=True)

নোড.জেএস

app.js ফাইলে নিম্নলিখিত লাইনগুলোর মাধ্যমে রাউটগুলো রেজিস্টার করা হয়। 

const websiteRouter = require('./routes/index');
const addonRouter = require('./routes/classroom-addon');

app.use('/', websiteRouter);
app.use('/addon-discovery', addonRouter);

/01-basic-app/routes/index.js খুলুন এবং কোডটি পর্যালোচনা করুন। ব্যবহারকারী যখন কোম্পানির ওয়েবসাইটে যান, তখন এই রুটটি ব্যবহৃত হয়। রুটটি index Handlebars টেমপ্লেট ব্যবহার করে একটি রেসপন্স রেন্ডার করে এবং টেমপ্লেটটিতে title ও message ভ্যারিয়েবল সম্বলিত একটি data অবজেক্ট পাঠায়। 

router.get('/', function (req, res, next) {
  res.render('index', {
    title: 'Education Technology',
    message: 'Welcome to our website!'
  });
});

দ্বিতীয় রুট /01-basic-app/routes/classroom-addon.js খুলুন এবং কোডটি পর্যালোচনা করুন। যখন এন্ড-ইউজার অ্যাড-অনটি ভিজিট করেন, তখন এই রুটে পৌঁছানো যায়। লক্ষ্য করুন যে, এই রুটটি কোম্পানির ওয়েবসাইটের চেয়ে ভিন্নভাবে পেজটি রেন্ডার করার জন্য discovery হ্যান্ডেলবারস টেমপ্লেট এবং অতিরিক্তভাবে addon.hbs লেআউট ব্যবহার করে। 

router.get('/', function (req, res, next) {
  res.render('discovery', {
    layout: 'addon.hbs',
    title: 'Education Technology Classroom add-on',
    message: `Welcome.`
  });
});

জাভা

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

এন্ডপয়েন্টগুলো নির্ধারণ করার জন্য একটি কন্ট্রোলার ক্লাস তৈরি করুন, এই উদাহরণ প্রজেক্টে Controller.java । এই ফাইলে, spring-boot-starter-web ডিপেন্ডেন্সি থেকে @GetMapping অ্যানোটেশনটি ইম্পোর্ট করুন। 

import org.springframework.web.bind.annotation.GetMapping;

ক্লাসের উদ্দেশ্য বোঝানোর জন্য ক্লাস ডেফিনিশনের উপরে স্প্রিং ফ্রেমওয়ার্ক কন্ট্রোলার অ্যানোটেশনটি অন্তর্ভুক্ত করুন। 

@org.springframework.stereotype.Controller
public class Controller {

এরপর দুটি রাউট এবং ত্রুটি ব্যবস্থাপনার জন্য একটি অতিরিক্ত রাউট বাস্তবায়ন করুন। 

/** Returns the index page that will be displayed when the add-on opens in a
*   new tab.
*   @param model the Model interface to pass error information that's
*   displayed on the error page.
*   @return the index page template if successful, or the onError method to
*   handle and display the error message.
*/
@GetMapping(value = {"/"})
public String index(Model model) {
  try {
    return "index";
  } catch (Exception e) {
    return onError(e.getMessage(), model);
  }
}

/** Returns the add-on discovery page that will be displayed when the iframe
*   is first opened in Classroom.
*   @param model the Model interface to pass error information that's
*   displayed on the error page.
*   @return the addon-discovery page.
*/
@GetMapping(value = {"/addon-discovery"})
public String addon_discovery(Model model) {
  try {
    return "addon-discovery";
  } catch (Exception e) {
    return onError(e.getMessage(), model);
  }
}

/** Handles application errors.
*   @param errorMessage message to be displayed on the error page.
*   @param model the Model interface to pass error information to display on
*   the error page.
*   @return the error page.
*/
@GetMapping(value = {"/error"})
public String onError(String errorMessage, Model model) {
  model.addAttribute("error", errorMessage);
  return "error";
}

অ্যাড-অনটি পরীক্ষা করুন

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

অভিনন্দন! আপনি এখন পরবর্তী ধাপে যাওয়ার জন্য প্রস্তুত: গুগল এসএসও (Google SSO) ব্যবহার করে ব্যবহারকারীদের সাইন ইন করানো ।