SharePoint Development এবং Customization Techniques

SharePoint Development এবং Customization Techniques হল SharePoint সাইটের কার্যকারিতা এবং ইন্টারফেস কাস্টমাইজ করার জন্য ব্যবহৃত পদ্ধতি এবং সরঞ্জাম। SharePoint এর সাশ্রয়ী কাস্টমাইজেশন পদ্ধতিগুলোর মাধ্যমে ডেভেলপাররা বিভিন্ন ধরনের সাইট, অ্যাপ্লিকেশন এবং কার্যকরী সমাধান তৈরি করতে পারেন। এখানে SharePoint ডেভেলপমেন্টের প্রধান কৌশল এবং কাস্টমাইজেশন টেকনিক সম্পর্কে আলোচনা করা হবে।

SharePoint Development কী?

SharePoint Development হল SharePoint সাইট বা অ্যাপ্লিকেশন কাস্টমাইজ করতে এবং নতুন ফিচার তৈরি করতে ব্যবহৃত একটি প্রক্রিয়া। এটি ডেভেলপারদের দ্বারা ব্যবহৃত হয় যাতে SharePoint সাইটের কার্যকারিতা বাড়ানো যায় এবং নির্দিষ্ট ব্যবসায়িক চাহিদা মেটানো যায়।

SharePoint Development এর উপাদানসমূহ

• Web Parts: SharePoint সাইটে কাস্টম ওয়েব পার্ট তৈরি করা, যেগুলি সাইটে ডাটা ডিসপ্লে বা কাস্টম ফাংশনালিটি প্রদান করে।
• Event Receivers: SharePoint সাইটের নির্দিষ্ট ইভেন্টগুলো ট্র্যাক করতে ব্যবহার করা হয়, যেমন ফাইল আপলোড বা ডকুমেন্টের মেটাডেটা পরিবর্তন।
• SharePoint Add-ins: কাস্টম অ্যাপ্লিকেশন বা ফিচার তৈরি করতে SharePoint Add-ins ব্যবহৃত হয়, যা SharePoint সাইটে এক্সটেনশন হিসেবে কাজ করে।
• Workflows: SharePoint Designer বা Visual Studio ব্যবহার করে ওয়র্কফ্লো তৈরি করা, যা নির্দিষ্ট কাজ বা কার্যক্রমকে অটোমেট করে।
• REST API এবং CSOM (Client-Side Object Model): SharePoint সাইটের ডাটা এবং ফিচারগুলো অ্যাক্সেস ও কাস্টমাইজ করতে।

SharePoint Customization Techniques

SharePoint Customization হল SharePoint সাইটের ইন্টারফেস এবং কার্যকারিতা কাস্টমাইজ করার প্রক্রিয়া। এটি UI ডিজাইন, সাইটের আর্কিটেকচার, ওয়েব পার্ট, ফর্ম এবং ওয়ার্কফ্লো কাস্টমাইজ করতে ব্যবহৃত হয়।

Site Design Customization

• Master Pages: SharePoint সাইটের UI কাস্টমাইজ করতে Master Pages ব্যবহার করা হয়। এগুলি পুরো সাইটের লেআউট এবং ডিজাইন নিয়ন্ত্রণ করে।
• Page Layouts: নির্দিষ্ট ধরনের কনটেন্ট ডিসপ্লে করার জন্য কাস্টম Page Layouts তৈরি করা যেতে পারে।
• Themes and Branding: SharePoint সাইটের লুক অ্যান্ড ফিল পরিবর্তন করতে Themes এবং Branding টেকনিক ব্যবহৃত হয়, যেমন কাস্টম লোগো, কালার স্কিম এবং ফন্ট পরিবর্তন করা।

Web Parts Customization

• Custom Web Parts: SharePoint সাইটে Custom Web Parts তৈরি করা হয় যা নির্দিষ্ট তথ্য বা কার্যকলাপ সাইটে ডিসপ্লে করতে ব্যবহৃত হয়। এটি .NET, JavaScript বা SharePoint Framework (SPFx) দিয়ে তৈরি করা যায়।
• SPFx Web Parts: SharePoint Framework (SPFx) ব্যবহার করে কাস্টম ওয়েব পার্ট তৈরি করা যায় যা সম্পূর্ণরূপে ক্লায়েন্ট-সাইড এবং রেসপনসিভ হয়।

Lists এবং Libraries Customization

• Custom Columns and Views: SharePoint Lists এবং Libraries-এ কাস্টম Columns এবং Views তৈরি করে আপনি ডেটাকে আরও সংগঠিত ও ব্যবহারযোগ্য করতে পারেন।
• Content Types: কাস্টম Content Types তৈরি করে ডেটার কাঠামো এবং আচরণ পরিবর্তন করা যায়।
• Event Handlers: List বা Library তে কোনো কার্যক্রম (যেমন আইটেম তৈরি বা আপডেট) ঘটলে Event Handlers ব্যবহার করা যায় যাতে স্বয়ংক্রিয় কাজ সম্পন্ন করা যায়।

Branding এবং UI Customization

• JavaScript: JavaScript ব্যবহার করে SharePoint সাইটের ইউজার ইন্টারফেস কাস্টমাইজ করা যায়। আপনি JavaScript দিয়ে ওয়েব পেজে ডায়নামিক ফিচার যুক্ত করতে পারেন, যেমন ড্রপডাউন মেনু বা ফর্ম ভ্যালিডেশন।
• CSS: SharePoint সাইটের স্টাইল পরিবর্তন করতে CSS ব্যবহার করা হয়। কাস্টম CSS কোড দিয়ে আপনি সাইটের লেআউট এবং ডিজাইন কাস্টমাইজ করতে পারেন।
• JavaScript Object Model (JSOM): SharePoint এর ডেটা অ্যাক্সেস এবং অপারেশন করতে JSOM ব্যবহার করা যায়, যা SharePoint সাইটের সাথে ইন্টারঅ্যাক্ট করার জন্য JavaScript-এ একটি API প্রদান করে।

SharePoint Framework (SPFx)

SharePoint Framework (SPFx) হল একটি আধুনিক এবং রেসপনসিভ পদ্ধতি যা SharePoint সাইট কাস্টমাইজ এবং এক্সটেন্ড করার জন্য ব্যবহৃত হয়। SPFx দিয়ে আপনি কাস্টম ওয়েব পার্ট, অ্যাপ্লিকেশন এবং এক্সটেনশন তৈরি করতে পারেন, যা SharePoint সাইটে ইনটিগ্রেট করা যায়।

SPFx এর সুবিধা

• Modern Development: SPFx হল একটি আধুনিক ক্লায়েন্ট-সাইড ডেভেলপমেন্ট ফ্রেমওয়ার্ক যা React, Angular, বা Vue.js-এর মতো JavaScript লাইব্রেরি ব্যবহার করে কাজ করতে দেয়।
• Cross-platform: SPFx ওয়েব পার্ট এবং এক্সটেনশন SharePoint Online এবং On-Premises উভয় সংস্করণে কাজ করে।
• Easy Integration: SPFx দিয়ে তৈরি ওয়েব পার্টগুলো সহজেই SharePoint সাইটে যুক্ত করা যায় এবং অন্যান্য সিস্টেমের সাথে ইন্টিগ্রেট করা যায়।

SPFx Development Environment Setup

1. Node.js Install করা: SPFx ডেভেলপমেন্টের জন্য Node.js প্রয়োজন।
2. Yeoman SharePoint Generator: Yeoman SharePoint Generator ব্যবহার করে SPFx প্রজেক্ট তৈরি করা যায়।
3. Visual Studio Code: কোড লেখার জন্য Visual Studio Code ব্যবহার করা হয়।

SharePoint Development Tools

• Visual Studio: SharePoint ডেভেলপমেন্টের জন্য এটি একটি পূর্ণাঙ্গ IDE (Integrated Development Environment)।
• SharePoint Designer: SharePoint সাইট কাস্টমাইজ এবং ওয়র্কফ্লো ডিজাইন করতে ব্যবহৃত হয়।
• PowerShell: SharePoint সাইটের প্রশাসনিক কাজ এবং কনফিগারেশন স্ক্রিপ্ট তৈরি করার জন্য PowerShell ব্যবহার করা হয়।
• REST API and CSOM: SharePoint এর ডেটা অ্যাক্সেস এবং ওয়েব সেবা তৈরি করতে REST API এবং CSOM (Client-Side Object Model) ব্যবহার করা যায়।

SharePoint Development এবং Customization techniques ব্যবহার করে আপনি SharePoint সাইটের কার্যকারিতা এবং ইন্টারফেস কাস্টমাইজ করে আপনার প্রয়োজনীয় ব্যবসায়িক প্রয়োজন পূরণ করতে পারবেন।

SharePoint Framework (SPFx) হল একটি আধুনিক এবং ওপেন সোর্স প্ল্যাটফর্ম যা SharePoint অ্যাপ্লিকেশন এবং এক্সটেনশন ডেভেলপমেন্টের জন্য ব্যবহৃত হয়। এটি বিশেষভাবে SharePoint Online এবং SharePoint Server এর জন্য ডিজাইন করা হয়েছে। SPFx এর মাধ্যমে ব্যবহারকারীরা SharePoint পেজে কাস্টম UI, ফিচার এবং ফাংশনালিটি তৈরি করতে পারে। SPFx ব্যবহার করে SharePoint পেজ এবং লিস্টের সাথে ইন্টারঅ্যাক্ট করা সম্ভব, এবং এটি React, Angular, Vue.js মতো আধুনিক জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলো সমর্থন করে।

SPFx হল একটি Client-Side ফ্রেমওয়ার্ক, অর্থাৎ কোডটি ব্রাউজারে রান করে এবং সার্ভার সাইডে কোনো অতিরিক্ত প্রসেসিং প্রয়োজন হয় না।

SPFx এর বৈশিষ্ট্য এবং সুবিধা

১. Client-Side Rendering

SPFx সম্পূর্ণরূপে Client-Side Rendering (CSR) সমর্থন করে। এর মানে হল যে, SPFx অ্যাপ্লিকেশন এবং এক্সটেনশনগুলি ব্রাউজারে রান হয় এবং সার্ভারে কোনো অতিরিক্ত কোড এক্সিকিউট করার প্রয়োজন হয় না। এই ফিচারটি পেজের লোড টাইম কমাতে সাহায্য করে এবং ব্যবহারকারীর ইন্টারঅ্যাকশনের দ্রুত প্রতিক্রিয়া দেয়।

২. Modern Web Development Techniques

SPFx আধুনিক ওয়েব ডেভেলপমেন্ট টুলকিট এবং ফ্রেমওয়ার্ক যেমন React, Angular, Vue.js, এবং TypeScript সমর্থন করে, যা ডেভেলপারদের আধুনিক ওয়েব অ্যাপ্লিকেশন তৈরির সুবিধা দেয়।

৩. Integration with Microsoft 365

SPFx অ্যাপ্লিকেশনগুলো সহজেই Microsoft 365 অ্যাপ্লিকেশন এবং সার্ভিসের সঙ্গে ইন্টিগ্রেট করা যায়। উদাহরণস্বরূপ, আপনি SPFx ব্যবহার করে Teams, Outlook, এবং Power BI এর সঙ্গে ডাটা এক্সচেঞ্জ করতে পারেন।

৪. Mobile-Responsive

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

৫. Security and Permissions

SPFx দ্বারা তৈরি অ্যাপ্লিকেশনগুলি SharePoint’s security model ব্যবহার করে, যা ডাটা সুরক্ষা এবং অ্যাক্সেস কন্ট্রোল নিশ্চিত করে। ব্যবহারকারী যে অ্যাক্সেস কন্ট্রোল পলিসি সেট করেছেন, সেটি SPFx অ্যাপ্লিকেশনে প্রযোজ্য হবে।

SPFx এর উপাদানসমূহ

১. Web Parts

SPFx ওয়েব পার্ট হলো একটি কাস্টম কন্ট্রোল যা SharePoint পেজে ইনস্টল এবং ডিসপ্লে করা হয়। ওয়েব পার্টের মাধ্যমে আপনি কাস্টম UI তৈরি করতে পারেন এবং SharePoint ডেটা প্রদর্শন, এডিট বা ম্যানিপুলেট করতে পারেন।

২. Extensions

SPFx এক্সটেনশনগুলি SharePoint পেজে কিছু অতিরিক্ত ফিচার বা কার্যকারিতা যোগ করতে ব্যবহৃত হয়। SPFx এর এক্সটেনশন তিনটি প্রধান ধরনের হতে পারে:

• Application Customizers: সাইটের হেডার বা ফুটারে কাস্টম কন্টেন্ট যোগ করা।
• Field Customizers: SharePoint ফিল্ড বা ডেটার উপর কাস্টম UI প্রদর্শন করা।
• ListView Command Sets: SharePoint লিস্টের মধ্যে কাস্টম কমান্ড অ্যাড করা, যেমন বাটন বা মেনু অপশন।

৩. SharePoint REST API

SPFx ডেভেলপাররা SharePoint REST API ব্যবহার করে SharePoint ডেটা অ্যাক্সেস করতে পারে। API এর মাধ্যমে আপনি ডকুমেন্ট লাইব্রেরি, লিস্ট, ফাইল এবং অন্যান্য SharePoint রিসোর্সের তথ্য নিয়ে কাজ করতে পারবেন।

৪. Property Pane

SPFx ওয়েব পার্টে একটি Property Pane থাকে, যা ব্যবহারকারীদের ওয়েব পার্ট কাস্টমাইজ করার সুযোগ দেয়। এই প্যানেলটি ওয়েব পার্টের বিভিন্ন সেটিংস এবং প্রপার্টি ম্যানেজ করতে ব্যবহৃত হয়।

SPFx এর সুবিধা এবং ব্যবহার

১. Customization and Flexibility

SPFx দিয়ে আপনি আপনার SharePoint সাইটকে আরও কাস্টমাইজ এবং ফ্লেক্সিবল করতে পারেন। আপনি নিজস্ব ওয়েব পার্ট বা এক্সটেনশন তৈরি করে সাইটের কার্যকারিতা বৃদ্ধি করতে পারবেন।

২. Scalability

SPFx ডেভেলপমেন্টে ব্যবহৃত টুলকিট ও ফ্রেমওয়ার্কগুলো স্কেলেবিলিটি নিশ্চিত করে। একাধিক ব্যবহারকারী বা বৃহত্তর ডেটাসেটের জন্য সাইটকে আরও দক্ষভাবে পরিচালনা করা সম্ভব।

৩. Cross-platform Support

SPFx অ্যাপ্লিকেশনগুলো ক্রস-প্ল্যাটফর্ম, অর্থাৎ বিভিন্ন ধরনের ব্রাউজারে কাজ করে। এটি ব্যবহারকারীদের জন্য সর্বাধিক সুবিধা প্রদান করে, যেহেতু তারা যে কোনো ডিভাইস বা প্ল্যাটফর্ম থেকে অ্যাপ্লিকেশন অ্যাক্সেস করতে পারে।

৪. Seamless Integration with SharePoint

SPFx সম্পূর্ণভাবে SharePoint এর সাথে ইন্টিগ্রেটেড, এবং এতে SharePoint এর নিরাপত্তা মডেল এবং ডেটা ম্যানেজমেন্ট সিস্টেম ব্যবহার করা হয়। এটি ডেভেলপারদের জন্য এমন একটি শক্তিশালী প্ল্যাটফর্ম প্রদান করে যেখানে তারা সহজে SharePoint ডেটা এবং রিসোর্স ব্যবহার করতে পারে।

SPFx এর সাহায্যে কী কী তৈরি করা যায়?

• Custom Web Parts: SharePoint পেজে কাস্টম ওয়েব পার্ট তৈরি করে যেগুলোর মাধ্যমে ডেটা শো করা, ইউজার ইন্টারঅ্যাকশন এবং কাস্টম ইউআই তৈরি করা সম্ভব।
• Integration with External Services: SPFx ব্যবহার করে আপনি বাহ্যিক API এবং সেবা (যেমন: Microsoft Graph API, REST APIs) এর সাথে ইন্টিগ্রেট করতে পারবেন।
• Branding and UI Customization: SharePoint এর ডিজাইন এবং UI কাস্টমাইজ করা, যেমন SharePoint সাইটের লেআউট এবং থিম পরিবর্তন করা।
• Automated Workflows: SPFx এর মাধ্যমে আপনি কাস্টম অটোমেটেড workflows তৈরি করতে পারেন যা SharePoint এর ডেটা ম্যানিপুলেশন এবং প্রসেসিংয়ে সহায়ক হবে।

SPFx ডেভেলপমেন্টের জন্য প্রয়োজনীয় টুলস

• Node.js: SPFx ডেভেলপমেন্টের জন্য Node.js এবং NPM (Node Package Manager) এর সর্বশেষ সংস্করণ ইনস্টল করা প্রয়োজন।
• Yeoman Generator: SPFx প্রকল্প শুরু করার জন্য Yeoman Generator ব্যবহার করা হয়। এটি একটি scaffolding টুল যা ডেভেলপারকে একটি নতুন SPFx প্রকল্প তৈরি করতে সাহায্য করে।
• Visual Studio Code: SPFx কোডিং এবং ডেভেলপমেন্টের জন্য Visual Studio Code একটি জনপ্রিয় IDE।
• SharePoint Workbench: SharePoint Workbench একটি স্থানীয় ডেভেলপমেন্ট পরিবেশ যা SPFx কোড পরীক্ষা করতে সাহায্য করে।

সারাংশ

SPFx হল SharePoint এর জন্য একটি আধুনিক, শক্তিশালী এবং কাস্টমাইজেবল ফ্রেমওয়ার্ক যা ডেভেলপারদের ক্লায়েন্ট-সাইড অ্যাপ্লিকেশন এবং এক্সটেনশন তৈরি করার সুযোগ দেয়। এটি আধুনিক ওয়েব ডেভেলপমেন্টের প্রযুক্তি যেমন React, Angular, এবং TypeScript এর সাথে কাজ করে এবং Microsoft 365 এর বিভিন্ন সেবার সাথে সহজে ইন্টিগ্রেট করতে সক্ষম। SPFx এর সাহায্যে SharePoint সাইটের কার্যকারিতা এবং ইউজার এক্সপেরিয়েন্স অত্যন্ত কাস্টমাইজ করা সম্ভব।

SharePoint এ Custom Web Part এবং Extensions তৈরি করার মাধ্যমে আপনি আপনার SharePoint সাইটে নতুন ফিচার যোগ করতে পারেন এবং সাইটের কার্যক্ষমতা বাড়াতে পারেন। এই কাস্টম উপাদানগুলি বিশেষভাবে আপনার প্রয়োজন অনুযায়ী তৈরি করা হয় এবং SharePoint এর ব্যাকএন্ড বা ফ্রন্টএন্ডের সাথে সংযুক্ত থাকে। SharePoint Framework (SPFx) ব্যবহার করে Custom Web Part এবং Extensions তৈরি করা যায়, যা একটি আধুনিক, স্পষ্ট এবং ব্যবহারে সহজ পদ্ধতি।

Custom Web Part তৈরি করা

Custom Web Part হচ্ছে একটি কাস্টমাইজড SharePoint উপাদান যা আপনার সাইটে ডাটা প্রদর্শন করতে, ইউজার ইন্টারফেস তৈরি করতে, অথবা কোনো স্পেসিফিক ফাংশনালিটি যুক্ত করতে ব্যবহৃত হয়। Web Parts সাধারণত একটি ছোট কোড ফ্র্যাগমেন্ট হিসেবে কাজ করে এবং SharePoint সাইটে ডায়নামিক কনটেন্ট প্রদান করে।

Custom Web Part তৈরি করার প্রক্রিয়া

1. SharePoint Framework (SPFx) সেটআপ: Custom Web Part তৈরি করতে প্রথমে SharePoint Framework (SPFx) সেটআপ করতে হবে। SPFx হল একটি ক্লায়েন্ট-সাইড ফ্রেমওয়ার্ক যা আপনাকে modern SharePoint সাইটের জন্য কাস্টম Web Parts তৈরি করতে সহায়তা করে। SPFx ব্যবহার করতে Node.js, Yeoman এবং Gulp টুলস ইনস্টল করা থাকতে হবে।

2. নতুন Web Part তৈরি করা: Yeoman Generator ব্যবহার করে একটি নতুন SPFx Web Part তৈরি করুন। Yeoman একটি স্ক্যাফোল্ডিং টুল, যা SharePoint Web Part তৈরি করার জন্য প্রোজেক্টের স্ট্রাকচার জেনারেট করে।

   কমান্ড:

   yo @microsoft/sharepoint
   

   এরপর, নির্দেশাবলী অনুসরণ করে Web Part এর নাম, ধরণ এবং অন্যান্য কনফিগারেশন সেট করুন।

3. Web Part কোড লেখা: Web Part তৈরি হওয়ার পর, আপনি JavaScript (React, Angular, বা অন্য কোনো লাইব্রেরি) বা TypeScript ব্যবহার করে আপনার কাস্টম Web Part এর কোড লিখতে পারেন। এখানে আপনি ডেটা এক্সেস, কনটেন্ট প্রদর্শন, ইন্টারঅ্যাকটিভ ফিচার যোগ করতে পারেন।

   উদাহরণস্বরূপ, একটি সিম্পল React Web Part এর কোড:

   import * as React from 'react';
   import { IHelloWorldProps } from './IHelloWorldProps';
   
   const HelloWorld: React.FC<IHelloWorldProps> = (props) => {
     return (
       <div>
         <h1>Hello, {props.description}!</h1>
       </div>
     );
   }
   
   export default HelloWorld;
   

4. Web Part ডিপ্লয় এবং টেস্টিং: Web Part তৈরি করার পর, আপনি এটি SharePoint Online বা On-Premises সাইটে ডিপ্লয় করতে পারবেন। Gulp Serve ব্যবহার করে আপনি লোগাল সার্ভারে ডেভেলপমেন্ট এবং টেস্টিং করতে পারবেন।

   কমান্ড:

   gulp serve
   

5. Web Part ডিপ্লয় করা: Web Part তৈরি হয়ে গেলে, এটি একটি SharePoint App Catalog এ ডিপ্লয় করুন। এরপর, SharePoint সাইটে গিয়ে সেই Web Part আপনার পেজে অ্যাড করতে পারবেন।

Extensions তৈরি করা

Extensions হলো কাস্টম ইউজার ইন্টারফেস এবং ফাংশনালিটি যুক্ত করার জন্য SharePoint সাইটে ব্যবহৃত উপাদান। SharePoint Extensions ব্যবহৃত হয় সাইটের কনটেক্সটে পরিবর্তন আনার জন্য, যেমন মেনু আইটেম, সাইট অ্যাকশন, বা টুলবার কাস্টমাইজেশন।

SharePoint Extension-এর ধরন

1. Application Customizer: Application Customizer এর মাধ্যমে আপনি SharePoint সাইটে কাস্টম হেডার, ফুটার, বা অন্যান্য সাধারণ UI উপাদান যোগ করতে পারেন। উদাহরণস্বরূপ, একটি কাস্টম হেডার বা নোটিফিকেশন বার তৈরি করা।
2. Field Customizer: Field Customizer ব্যবহার করে আপনি SharePoint লিস্ট ফিল্ডের কাস্টম ভিউ তৈরি করতে পারেন। এটি SharePoint List এর একটি নির্দিষ্ট কলাম বা ফিল্ডের UI কাস্টমাইজেশন করে।
3. Command Set: Command Set ব্যবহার করে SharePoint সাইটের কাস্টম মেনু আইটেম এবং টুলবার বাটন তৈরি করা যায়। এটি আপনাকে ডকুমেন্ট লাইব্রেরি বা লিস্টের জন্য কাস্টম মেনু অ্যাকশন যোগ করতে দেয়।

Extension তৈরি করার প্রক্রিয়া

1. Extension তৈরি করা: SPFx Extension তৈরি করতে Yeoman Generator ব্যবহার করতে হবে। Command Set বা Application Customizer তৈরি করার জন্য আপনি নির্দিষ্ট টেমপ্লেট নির্বাচন করতে পারেন।

   কমান্ড:

   yo @microsoft/sharepoint
   

2. Extension কোড লেখা: একটি Extension তৈরি হওয়ার পর, আপনি JavaScript বা TypeScript ব্যবহার করে সেই Extension এর কাস্টম লজিক এবং UI ডেভেলপ করবেন। উদাহরণস্বরূপ, Application Customizer এর জন্য একটি কোড:

   import * as React from 'react';
   import { IApplicationCustomizerContext } from '@microsoft/sp-application-base';
   
   export default class ApplicationCustomizer extends React.Component<IApplicationCustomizerContext> {
     public render(): React.ReactElement<{}> {
       return (
         <div>
           <h1>Welcome to my custom header!</h1>
         </div>
       );
     }
   }
   

3. Extension ডিপ্লয় এবং টেস্টিং: Extension তৈরি করার পর, আপনি এটি SharePoint App Catalog-এ আপলোড করে SharePoint সাইটে ডিপ্লয় করতে পারবেন।

Custom Web Part এবং Extensions এর সুবিধা

• Customization: Custom Web Part এবং Extensions ব্যবহার করে আপনি SharePoint সাইটে আপনার নিজস্ব কনটেন্ট এবং ফিচার যোগ করতে পারেন।
• Enhanced User Experience: কাস্টম Web Parts এবং Extensions এর মাধ্যমে ইউজারদের জন্য আরও ইন্টারঅ্যাকটিভ এবং কাস্টমাইজড ইউজার ইন্টারফেস তৈরি করা যায়।
• Integration: আপনি সহজে SharePoint সাইটে অন্যান্য অ্যাপ্লিকেশন, ডেটাবেস, বা সার্ভিসের সাথে ইন্টিগ্রেটেড ফিচার যোগ করতে পারেন।
• Scalability: SPFx Web Parts এবং Extensions স্কেলেবল হয়, যা বড় সিস্টেম বা অর্গানাইজেশনগুলোর জন্য উপযুক্ত।

Custom Web Part এবং Extensions তৈরি করার মাধ্যমে আপনি SharePoint সাইটে নতুন ফিচার, কাস্টমাইজড ইউজার ইন্টারফেস এবং ডেটা ম্যানিপুলেশন ক্ষমতা যোগ করতে পারবেন। SPFx এর মাধ্যমে এগুলি করার সুবিধা হলো, এটি modern SharePoint সাইটে একীভূত এবং ব্যবহারে সহজ।

SharePoint এ JavaScript Object Model (JSOM) এবং REST API দুটি জনপ্রিয় এবং শক্তিশালী টুল, যা SharePoint সাইটের সাথে ইন্টারঅ্যাক্ট করার জন্য ব্যবহৃত হয়। এগুলির মাধ্যমে আপনি SharePoint সাইটের তথ্য, ডেটা, লিস্ট, ডকুমেন্ট লাইব্রেরি এবং অন্যান্য সম্পদ এক্সেস করতে পারেন। JSOM এবং REST API এর মাধ্যমে আপনি ক্লায়েন্ট-সাইড অ্যাপ্লিকেশন বা কাস্টম স্ক্রিপ্ট তৈরি করতে পারেন, যা SharePoint সাইটের কার্যক্ষমতা এবং ফিচার বাড়িয়ে তোলে।

JavaScript Object Model (JSOM)

JavaScript Object Model (JSOM) হচ্ছে একটি ক্লায়েন্ট-সাইড API, যা JavaScript এর মাধ্যমে SharePoint সাইটের সাথে ইন্টারঅ্যাকশন করতে ব্যবহৃত হয়। JSOM এর মাধ্যমে আপনি SharePoint সাইটে থাকা তথ্য, লিস্ট, ডকুমেন্ট লাইব্রেরি এবং অন্যান্য রিসোর্সের সাথে কাজ করতে পারেন।

JSOM এর মূল বৈশিষ্ট্য

• Client-side Interaction: JSOM ক্লায়েন্ট-সাইড ইন্টারঅ্যাকশন প্রদান করে, যার মাধ্যমে ব্রাউজারে সরাসরি SharePoint সাইটের সাথে কাজ করা যায়।
• Asynchronous Requests: JSOM সাধারণত asynchronous ভাবে কাজ করে, অর্থাৎ এটি সাইটের রিসোর্স থেকে ডেটা লোড বা ম্যানিপুলেট করার সময় পেজের অন্য কার্যক্রমে কোনো প্রভাব ফেলে না।
• Easy to Use: JavaScript ব্যবহারকারীরা সহজেই JSOM কে কাজে লাগাতে পারেন, কারণ এটি JavaScript এর সাথে পুরোপুরি একীভূত।
• Full CRUD Operations: JSOM ব্যবহার করে আপনি Create, Read, Update, এবং Delete (CRUD) অপারেশন সম্পাদন করতে পারবেন।

JSOM দিয়ে SharePoint থেকে তথ্য পাওয়ার উদাহরণ

ধরা যাক, একটি SharePoint সাইটে থাকা List থেকে ডেটা রিট্রাইভ করতে চান:

// SharePoint context এবং web তৈরি করুন
var clientContext = SP.ClientContext.get_current();
var oWebsite = clientContext.get_web();

// SharePoint List এর রেফারেন্স তৈরি করুন
var oList = oWebsite.get_lists().getByTitle('Your List Name');

// List থেকে Item সংগ্রহ করা
var camlQuery = new SP.CamlQuery();
var collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);

// Execute করা
clientContext.executeQueryAsync(
    function() {
        var listItemEnumerator = collListItem.getEnumerator();
        while (listItemEnumerator.moveNext()) {
            var listItem = listItemEnumerator.get_current();
            console.log('Item Title: ' + listItem.get_item('Title'));
        }
    },
    function(sender, args) {
        console.log('Error: ' + args.get_message());
    }
);

এই কোডের মাধ্যমে আপনি একটি SharePoint List থেকে সমস্ত আইটেমের শিরোনাম (Title) বের করতে পারবেন।

REST API

REST API (Representational State Transfer Application Programming Interface) হল একটি HTTP ভিত্তিক API যা ক্লায়েন্ট-সাইড অ্যাপ্লিকেশনগুলি SharePoint এর সাথে ইন্টারঅ্যাক্ট করতে ব্যবহার করে। REST API অত্যন্ত জনপ্রিয় কারণ এটি cross-platform এবং সহজে ব্যবহারযোগ্য।

REST API এর বৈশিষ্ট্য

• HTTP Requests: REST API HTTP রিকোয়েস্ট (GET, POST, PUT, DELETE) ব্যবহার করে SharePoint ডেটার সাথে ইন্টারঅ্যাক্ট করতে পারে।
• JSON Format: SharePoint REST API সাধারণত ডেটা JSON (JavaScript Object Notation) ফরম্যাটে প্রদান করে, যা অনেক ক্লায়েন্ট সাইড অ্যাপ্লিকেশনে সহজেই ব্যবহার করা যায়।
• Cross-platform: REST API সব ধরনের প্ল্যাটফর্মে কাজ করে, যেমন JavaScript, .NET, বা অন্যান্য ওয়েব অ্যাপ্লিকেশন ফ্রেমওয়ার্ক।

REST API দিয়ে SharePoint থেকে তথ্য পাওয়ার উদাহরণ

ধরা যাক, আপনি SharePoint এর একটি List থেকে ডেটা রিট্রাইভ করতে চান, নিচের কোডটি ব্যবহার করতে পারেন:

var siteUrl = "https://yoursite.sharepoint.com";
var listName = "Your List Name";
var queryUrl = siteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items";

// AJAX কল ব্যবহার করে REST API এর মাধ্যমে ডেটা আনা
$.ajax({
    url: queryUrl,
    method: "GET",
    headers: {
        "Accept": "application/json;odata=verbose"
    },
    success: function(data) {
        var results = data.d.results;
        for (var i = 0; i < results.length; i++) {
            console.log("Item Title: " + results[i].Title);
        }
    },
    error: function(error) {
        console.log("Error: " + error);
    }
});

এই কোডের মাধ্যমে আপনি একটি SharePoint List থেকে সমস্ত আইটেমের শিরোনাম (Title) রিট্রাইভ করতে পারবেন।

JSOM এবং REST API এর মধ্যে পার্থক্য

JSOM এবং REST API এর ব্যবহার ক্ষেত্র

• JSOM:
  • ক্লায়েন্ট-সাইড স্ক্রিপ্টে SharePoint ডেটার সঙ্গে সরাসরি ইন্টারঅ্যাক্ট করার জন্য।
  • SharePoint সাইটে কাস্টম UI বা জাভাস্ক্রিপ্ট ফিচার তৈরি করতে।
  • Client Context ব্যবহার করে SharePoint সাইটের বিভিন্ন উপাদানের সাথে ইন্টারঅ্যাক্ট করার জন্য।
• REST API:
  • External applications বা ওয়েব অ্যাপ্লিকেশন থেকে SharePoint এর সাথে ইন্টারঅ্যাক্ট করার জন্য।
  • Cross-platform অ্যাপ্লিকেশন তৈরিতে ব্যবহার করা যায়।
  • JSON ফরম্যাটের ডেটা রিট্রাইভ করা বা ম্যানিপুলেট করার জন্য।

সারাংশ
JSOM এবং REST API দুটি শক্তিশালী টুল, যা SharePoint সাইটের সাথে ক্লায়েন্ট-সাইড ইন্টারঅ্যাকশন করতে ব্যবহৃত হয়। JSOM মূলত SharePoint সাইটের অভ্যন্তরে কাজ করে, যেখানে REST API cross-platform এবং বহিরাগত অ্যাপ্লিকেশনে ব্যবহৃত হয়। দুইটি টুলই SharePoint ডেটা এবং রিসোর্সের সাথে সহজে ইন্টারঅ্যাক্ট করার জন্য অত্যন্ত কার্যকরী।

SharePoint Framework (SPFx) একটি মডার্ন JavaScript ভিত্তিক ফ্রেমওয়ার্ক যা ব্যবহার করে SharePoint এর জন্য কাস্টম ওয়েব পার্ট, এক্সটেনশন এবং অন্যান্য ফিচার ডেভেলপ করা যায়। SPFx ডেভেলপমেন্ট করার জন্য আপনাকে কিছু টুল এবং পরিবেশ সেটআপ করতে হবে। এই টিউটোরিয়ালে আমরা আলোচনা করব কিভাবে Visual Studio Code (VS Code) এবং SPFx ডেভেলপমেন্ট পরিবেশ সেটআপ করতে হয়।

Visual Studio Code (VS Code) ইনস্টলেশন

Visual Studio Code কী?

Visual Studio Code (VS Code) একটি শক্তিশালী এবং লাইটওয়েট সোর্স কোড এডিটর, যা প্রধানত ওয়েব ডেভেলপমেন্টের জন্য ব্যবহৃত হয়। এটি বিভিন্ন প্লাগইন সমর্থন করে, যেগুলি SPFx ডেভেলপমেন্টে খুবই কার্যকরী।

VS Code ইনস্টলেশন প্রক্রিয়া

1. VS Code ডাউনলোড করুন: VS Code অফিসিয়াল ওয়েবসাইট থেকে আপনার অপারেটিং সিস্টেম অনুযায়ী সংস্করণ ডাউনলোড করুন।
2. ইন্সটলেশন শুরু করুন: ডাউনলোড করার পর, ইন্সটলেশন ফাইল রান করুন এবং নির্দেশনা অনুযায়ী ইন্সটল করুন।
3. ইন্সটলেশনের পর কনফিগারেশন: ইন্সটল হওয়ার পর VS Code ওপেন করুন এবং প্রথমে কিছু গুরুত্বপূর্ণ এক্সটেনশন ইনস্টল করুন, যেমন:
   • ESLint: কোডের স্টাইল এবং গুণগত মান বজায় রাখতে।
   • Prettier: কোড অটোফরম্যাটিংয়ের জন্য।
   • SPFx Extensions: SPFx ডেভেলপমেন্টে ব্যবহৃত কিছু নির্দিষ্ট এক্সটেনশন।

SPFx Development Environment Setup

SPFx ডেভেলপমেন্ট করার জন্য কিছু টুলস এবং সফটওয়্যার ইনস্টল করতে হবে, যেমন Node.js, Yeoman এবং Gulp। এগুলি SPFx অ্যাপ্লিকেশন তৈরি এবং বিল্ড করার জন্য প্রয়োজনীয় টুলস।

স্টেপ ১: Node.js ইনস্টল করা

SPFx ডেভেলপমেন্টের জন্য Node.js প্রয়োজন, যেহেতু SPFx JavaScript ভিত্তিক।

1. Node.js ডাউনলোড করুন: Node.js ওয়েবসাইট থেকে লেটেস্ট স্টেবল ভার্সন ডাউনলোড করুন।
2. ইন্সটলেশন: Node.js ইনস্টল করার সময়, "Install npm" অপশনটি সিলেক্ট করুন।
3. ইন্সটলেশন পরীক্ষা করুন: ইনস্টল হওয়ার পর, কমান্ড প্রম্পট বা টার্মিনাল এ গিয়ে node -v এবং npm -v কমান্ড দিয়ে নিশ্চিত করুন যে Node.js এবং npm সঠিকভাবে ইনস্টল হয়েছে।

স্টেপ ২: Yeoman এবং SharePoint Framework Generator ইনস্টল করা

Yeoman হলো একটি স্ক্যাফোল্ডিং টুল, যা SPFx প্রজেক্ট স্ক্যাফোল্ড করার জন্য ব্যবহার করা হয়। এছাড়া, SharePoint Framework Generator SPFx প্রজেক্ট তৈরি করতে সহায়তা করে।

1. Yeoman ইনস্টল করা: কমান্ড প্রম্পট বা টার্মিনাল এ গিয়ে নিচের কমান্ডটি রান করুন:

   npm install -g yo
   

2. SharePoint Framework Generator ইনস্টল করা: Yeoman ইনস্টল হওয়ার পর, SharePoint Framework Generator ইনস্টল করতে নিচের কমান্ডটি রান করুন:

   npm install -g @microsoft/generator-sharepoint
   

স্টেপ ৩: Gulp ইনস্টল করা

Gulp একটি টাস্ক রানার, যা SPFx প্রজেক্টের বিল্ড, লোড এবং ডেভেলপমেন্ট সার্ভার চালাতে ব্যবহৃত হয়।

1. Gulp ইনস্টল করা: Gulp ইনস্টল করতে নিচের কমান্ডটি রান করুন:

   npm install -g gulp
   

স্টেপ ৪: SPFx প্রজেক্ট তৈরি করা

1. প্রজেক্ট ডিরেক্টরি তৈরি করুন: নতুন SPFx প্রজেক্ট তৈরি করার জন্য একটি নতুন ফোল্ডার তৈরি করুন এবং সেই ফোল্ডারে নেভিগেট করুন।

   mkdir spfx-project
   cd spfx-project
   

2. Yeoman Generator চালান: SPFx প্রজেক্ট স্ক্যাফোল্ড করতে Yeoman Generator চালান:

   yo @microsoft/sharepoint
   

   এই কমান্ডটি আপনাকে কিছু কনফিগারেশন অপশন প্রদান করবে, যেমন:

   • প্রজেক্টের নাম
   • ওয়েব পার্ট অথবা এক্সটেনশন তৈরি করার সিদ্ধান্ত
   • JavaScript অথবা TypeScript ব্যবহার করার অপশন

3. ডেভেলপমেন্ট সার্ভার চালানো: প্রজেক্ট তৈরি হয়ে গেলে, আপনার ডেভেলপমেন্ট পরিবেশ পরীক্ষা করতে gulp serve কমান্ড চালিয়ে লোকাল ডেভেলপমেন্ট সার্ভার শুরু করুন:

   gulp serve
   

SPFx Development Environment Testing

Local Workbench

Local Workbench হলো একটি স্থানীয় ডেভেলপমেন্ট পরিবেশ যা আপনাকে SharePoint এর ভিতরে কোডটি টেস্ট করার আগে একে প্রিভিউ এবং টেস্ট করতে সাহায্য করে। gulp serve চালানোর পর, আপনাকে একটি URL প্রদান করা হবে (সাধারণত https://localhost:4321), যা আপনি আপনার ব্রাউজারে দেখতে পারবেন।

SharePoint Workbench

আপনি যদি প্রকৃত SharePoint সাইটে আপনার ডেভেলপমেন্ট টেস্ট করতে চান, তবে SharePoint Workbench ব্যবহার করতে পারেন, যা SharePoint সাইটে লাইভ প্রিভিউ দেখতে দেয়। Workbench এ আপনার পরিবর্তনগুলি পরীক্ষা করতে আপনি SharePoint সাইটে লগ ইন করে /_catalogs/instance/SPFx/WorkBench.aspx URL এ নেভিগেট করতে পারবেন।

SPFx Development Tools

SPFx ডেভেলপমেন্টের জন্য কিছু অন্যান্য টুলসও ব্যবহার করা যেতে পারে, যেমন:

• SPFx DevTools: SPFx কোড ডিবাগ করার জন্য DevTools এর জন্য একটি প্লাগইন।
• SPFx Yeoman Generator Options: Yeoman Generator এর মাধ্যমে আরও বিভিন্ন কাস্টমাইজড অপশন পাওয়া যায়।

এই স্টেপগুলির মাধ্যমে আপনি Visual Studio Code এবং SPFx Development Environment সঠিকভাবে সেটআপ করতে পারবেন এবং SPFx এর উপর কাজ শুরু করতে পারবেন।