PSA

  wifi: 01761550675

@.7-9.sio.pys.3-9

--------------------------------------

GSS

UNDERSTAND FRONTEND APPLICATION

 UNDERSTAND THE BIG PICTURE OF FRONTEND APPLICATION

UNDERSTAND THE BIG PICTURE OF FRONTEND APPLICATION

hello programmers আশা করি সবাই ভালো আছেন । আজকে মূলত আমরা ফ্রন্টএন্ড এর big picture সম্পর্কে ধারণা নিবো । বর্তমানে ফ্রন্টএন্ড টেকনোলজির দুনিয়াটা পুরোপুরি change হয়ে গিয়েছে । so আমরা এপ্লিকেশন ডেভেলপমেন্ট এ পুরপুরি jump করার পূর্বে আমাদের উচিত সবকিছু সম্পর্কে একটা proper overview নেওয়া । তো চলুন দেরি না করে শুরু করা যাক ।

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

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

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

প্রথম কনসেপ্ট টা হলো রিপ্রেসেন্টেশন লেয়ার - আমাদের এপ্লিকেশন এর যে পোরশন টাতে আমরা ui নিয়ে কাজ করি সে পোরশন টাকেই আমি বলছি রিপ্রেসেন্টেশন লেয়ার । এই লেয়ারে বেসিক্যালি আমরা এপ্লিকেশন এর ui টা দেখতে কেমন হবে তা বর্ণনা করে থাকি । সহজভাবে বললে এই রিপ্রেসেন্টেশন লেয়ারটা আমাদের এপ্লিকেশন এর ui কে রিপ্রেসেন্ট করার কাজটা করে । এই হলো রিপ্রেসেন্টেশন লেয়ার যে লেয়ারটা সব গুলা ফ্রন্টএন্ড application এই থাকে ।

দ্বিতীয় কনসেপ্ট টা হলো ডাটা লেয়ার - সাধারণত আমাদের এপ্লিকেশন এ কি থাকে ? ডাটা থাকে । ডাটা কে নিয়েই যত কাজকারবার । তাহলে এই ডাটা নিয়ে কাজ করতে হলে অবশ্যই আমাদের একটা স্টোরেজ দরকার আর এই স্টোরেজ কেই আমি বলছি ডাটা লেয়ার । এই লেয়ারেই আমার এপ্লিকেশন এর সমস্ত ডাটা থাকবে । ডাটা লেয়ারে মূলত দুই ধরণের ডাটা থাকে - একটা হচ্ছে এপ্লিকেশন ডাটা আরেকটা হচ্ছে সার্ভার ডাটা । এপ্লিকেশন ডাটা হলো সেই ডাটা যেই ডাটা টা শুধুমাত্র এপ্লিকেশন লেভেল এই ব্যবহার করা হয় এবং যে ডাটা টা নিয়ে সার্ভার এর সাথে কোনো ডিল করা হয় না বা প্রয়োজন পরে না সেগুলোই হলো এপ্লিকেশন ডাটা । আর সার্ভার ডাটা হলো সেই ডাটা যেই ডাটা গুলো আমরা সার্ভার থেকে পায় । তাহলে এইটা বোঝা গেলো যে আমাদের এপ্লিকেশন এর সমস্ত ডাটা এই ডাটা লেয়ার এ থাকবে হোক সেটা এপ্লিকেশন ডাটা অথবা হোক সেটা সার্ভার সাইড থেকে আসা ডাটা । আশা করি ডাটা লেয়ার এর বিষয় টা ক্লিয়ার ।

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

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

তাহলে একটা ফ্রন্টএন্ড এপ্লিকেশন এ টোটাল চারটা কাজ রয়েছে । এর মধ্যে প্রথম কাজটা হচ্ছে ui রিপ্রেসেন্ট করা । এই কাজটা করছে রিপ্রেসেন্টেশন লেয়ার । দ্বিতীয় কাজটা হচ্ছে এপ্লিকেশন এর ডাটা consistency বজায় রাখা বা ধরে রাখা । হতে পারে সেটা এপ্লিকেশন ডাটা অথবা সার্ভার থেকে আসা ডাটা । এই কাজটা করছে ডাটা লেয়ার । তৃতীয় কাজটা হচ্ছে ডাটা লেয়ার থেকে ডাটা নিয়ে ui তে রিপ্রেসেন্ট করা । অথবা ui থেকে ডাটা নিয়ে সেই ডাটা কে ডাটা লেয়ার এ রাখা । এই কাজটা করছে লজিক লেয়ার । এবং চতুর্থ কাজটা হচ্ছে নেটওয়ার্ক রিকোয়েস্ট হ্যান্ডেল করা । এই নেটওয়ার্ক রিকোয়েস্ট এর মাধ্যমেই আমরা ফ্রন্টএন্ড এবং ব্যাকএন্ড এর ডাটা একে ওপরের সাথে আদান প্রদান করতে পারি । আর এই কাজকে আমরা রাখছি নেটওয়ার্ক লেয়ার এ ।

এখন এই চারটা কাজকে যদি আমি story আকারে বলি তাহলে যা দাড়ায় - ব্যাকএন্ড থেকে somehow আমার ডাটা আসবে । so ডাটা গুলো আসবে নেটওয়ার্ক লেয়ার এর মাদ্ধমে । নেটওয়ার্ক লেয়ারের মাধ্যমে ডাটা এনে লজিক লেয়ারে ডাটাগুলো process করে ডাটা লেয়ার এ রাখবো । যাতে পরবর্তীতে এই ডাটাগুলো সুন্দর করে process করে রিপ্রেসেন্টেশন লেয়ার এ দেখাইতে পারি । এবং রিপ্রেসেন্টেশন লেয়ার থেকে ডাটা নিয়ে নেটওয়ার্ক লেয়ার ব্যবহার করে ব্যাকএন্ড এর কাছে ডাটা টা পৌঁছে দিতে পারি । that is the story…

এই হলো একটি ফ্রন্টএন্ড এপ্লিকেশন এর whole জিনিসপাতি বা বিষয় বস্তু । আমরা যদি এই কনসেপ্ট গুলো ভালোভাবে grab করতে পারি তাহলে আমরা সব ধরণের ফ্রন্টএন্ড এপ্লিকেশন নিয়ে খুব সহজেই কাজ করতে পারবো, হোক সেটা mobile application , web application অথবা desktop application. concept is same সব এপ্লিকেশনই same way তে কাজ করে । হইতে পারে তার ইমপ্লিমেন্টেশন একটু ভিন্ন । হইতে পারে সেখানে ব্যবহার করা প্রোগ্রামিং language একটু ভিন্ন । হইতে পারে সেখানে ব্যবহার করা framework বা library একটু ভিন্ন । কিন্তু the way of thinking is 100% same.

NOTE -কারেন্ট ছিল না তাই ভাবছিলাম কি করি । তখন মাথায় চিন্তা আসলো যে HM Nayem ভাইয়ের ফুল স্ট্যাক আর্মির লাস্ট দুই - তিনটা লেকচার থেকে যা শিখেছি তা লিখে প্রকাশ করলে কেমন হয় । so এই চিন্তা থেকেই আর্টিকেল টা লেখা । যদি কোথাও ভুল কিছু লিখে থাকি তাহলে please correct me i would massively appreciate it thank you

স্পেস কমপ্লিক্সিটি(Complexity)

 

স্পেস কমপ্লিক্সিটি(Complexity)

স্পেস কমপ্লিক্সিটি(complexity)

---

কোনো একটা অ্যালগরিদম/প্রোগ্রামে টাইম কমপ্লিক্সিটির(complexity) মতো স্পেস কমপ্লিক্সিটি(complexity)ও গুরুত্বপূর্ণ বিষয় । স্পেস কমপ্লিক্সিটি(complexity) এবং টাইম কমপ্লিক্সিটি(complexity) প্রায়ই একই কারণ তারা একটি অ্যালগরিদমের ইনপুট পরিমাণের সাথে সম্পর্কিত। যেখানে টাইম কমপ্লিক্সিটি(complexity) একটি অ্যালগরিদমে অপারেশনের পরিমাণের সাথে সম্পর্কিত, এবং স্পেস কমপ্লিক্সিটি(complexity) অ্যালগরিদম সম্পন্ন করার জন্য প্রয়োজনীয় মোট জায়গার সাথে সম্পর্কিত।

স্পেস কমপ্লিক্সিটি(complexity) কি ?

---

সহজভাবে বললে, একটি অ্যালগরিদম বা প্রোগ্রাম সম্পন্ন করার জন্য ঠিক কতটুকু জায়গা বা মেমরি নিলো তাকেই স্পেস কমপ্লিক্সিটি(complexity) বলে। কোনো অ্যালগরিদম বা প্রোগ্রামের জন্য আমাদের নির্দিষ্ট পরিমাণ মেমরি ব্যাবহার করতে হয়। কিন্তু আমরা যদি স্পেস কমপ্লিক্সিটির(complexity) হিসেব-নিকেশ বুঝি তাহলে সহজেই বলে দিতে পারবো যে একটি প্রোগ্রাম কার্যকর করার জন্য ঠিক কতটুকু মেমরি ব্যাবহার করতে হবে।

একটি অ্যালগরিদম/প্রোগ্রামের স্পেস কমপ্লিক্সিটি(complexity) বের করতে প্রোগ্রামে ব্যবহৃত ভেরিয়েবল দ্বারা দখলকৃত স্থান গণনা করা যথেষ্ট।

স্পেস কমপ্লিক্সিটি(complexity) কেন দরকার ?

---

একটি অ্যালগরিদমে যদি টাইম কমপ্লিক্সিটি(complexity) অনেক বেশিও হয়ে যায় তবুও কিন্তু প্রোগ্রাম দেরিতে হলেও রান হবে বা চলবে । কিন্তু যদি সেই অ্যালগরিদম/প্রোগ্রামের বরাদ্দকৃত মেমরি অতিক্রম করে অর্থাৎ বরাদ্দকৃত মেমরি থেকে বেশি মেমরি ব্যাবহার করা হয়, তাহলে এটি চলবে না। তাই কোনো অ্যালগরিদম রচনা করার সময় আমাদের খেয়াল রাখা দরকার যে ব্যবহৃত মেমরি যাতে বরাদ্দকৃত মেমরির মধ্যে সীমাবদ্ধ থাকে ।

উদাহরণ - ০১ :

জাভাস্ক্রিপ্ট প্রোগ্রামিং ভাষাতে, একটি নাম্বার মেমরিতে জায়গা নেয় 64 বিটস(bits) যাকে বাইটে কনভার্ট করলে হয় 8(আট) বাইটস(bytes) । এখন উপরোক্ত Add ফাংশনে লক্ষ্য করলে দেখবেন যে, প্রথমে এটি ২টা নাম্বার প্যাঁরামিটার হিসেবে নিচ্ছে এবং তাদের যোগফলকে sum নামের একটি ভ্যারিয়েবলে স্টোর করতেছে যা একটি নাম্বার ।

এই ফাংশনে মেমরি স্পেস হবে n1,n2,এবং sum তিনটি নাম্বার ভেরিয়েবলের ওপর নির্ভর করে । হিসাব করলে হয় 3*8 = 24 বাইটস(bytes) এখানে n1,n2 এর মান যতই হোক নাহ কেনো প্রত্যেকটার জন্য 8(আট) বাইটস(bytes) করেই মেমরি নিবে এবং তা sum ভেরিয়েবলে স্টোর হবে । তাহলে উপরোক্ত প্রোগ্রামে যেকোনো পরিস্থিতিতে n1,n2,এবং sum তিনটি নাম্বার ভেরিয়েবলের মেমরি খরচ করে ফেলবে যা একটি কন্সটেন্ট(Constant) নাম্বার । এখন বলতে পারি উপরোক্ত প্রোগ্রামের স্পেস কমপ্লিক্সিটি(complexity) অর্ডার অব ওয়ান O(1) ।

অনেকের মনে প্রশ্ন আসতে পারে যে ভাই, আমরা উপরে যে sum কে রিটার্ন এবং ফাংশনকে কল করলাম এগুলোর জন্য কি মেমরি নেয় নাহ ? উত্তর হবে হ্যাঁ নেয় কিন্তু সেগুলো অস্থায়ী(temporary) যা কাউন্ট করা হয় নাহ এসব মেমরিকে বলা হয় অক্সিলারি মেমরি(Auxiliary Space) ।

অক্সিলারি মেমরি(Auxiliary Space) কি ?

অক্সিলারি মেমরি(Auxiliary Space) হলো অতিরিক্ত বা অস্থায়ী(temporary) মেমরি যা প্রোগ্রাম এক্সিকিউশনের(Execution) সময় ব্যাবহার হয় এবং এটিকে ইনপুট মেমরিতে কাউন্ট করা হয় নাহ । উপরোক্ত ফাংশনে n1,n2,এবং sum তিনটি নাম্বার ভেরিয়েবলের মেমরিই হলো ইনপুট মেমরি ।

উদাহরণ - ০২ :

এই ফাংশনে মেমরি স্পেস হবে sum এবং i দুইটি নাম্বার ভেরিয়েবলের ওপর নির্ভর করে যাকে আমরা ইনপুট মেমরিও বলতে পারি । তাছাড়াও উপরোক্ত প্রোগ্রামে রিটার্ন স্টেটমেন্ট, ফাংশন কল, এবং ফর লুপ আছে যারা অক্সিলারি মেমরি(Auxiliary Space) এর অন্তর্ভুক্ত । এখন তাহলে এই প্রোগ্রামের স্পেস কমপ্লিক্সিটি(complexity) নির্ণয় করা যাক -

দেখতে পাচ্ছি, ফাংশনটি একটি অ্যারে(Array) প্যাঁরামিটার হিসেবে নিচ্ছে যার নির্দিষ্ট কোনো সাইজ বলে দেওয়া নেই যখন ফাংশনকে কল করা হবে তখন যেকোন সাইজের অ্যারে(Array) প্যাঁরামিটার হিসেবে পাস করতে পারি ।

যদি প্রথমে ৫ সাইজের একটি অ্যারেকে প্যাঁরামিটার হিসেবে পাস করি, তাহলে ফর লুপটি ৫ বার চলবে এবং sum এর সাথে অ্যারে এলিমেন্টের যোগ হবে অর্থাৎ প্রত্যেক এক্সিকিউশনে i এর মান ১ করে বাড়াবে এবং sum কে আপডেট করে ফেলবে । এখানে কিন্তু অ্যারের সবগুলো মান হবে নাম্বার ডাটা-টাইপ যা প্রত্যেকে মেমরিতে ৮ বাইটস করে নেয় -

মেমরিতে জায়গা নিচ্ছে ৫৬ বাইটস । এখন প্যাঁরামিটারে ৫ এরে পরিবর্তে ১০ সাইজের একটি অ্যারেকে পাঠায় -

এখন মেমরিতে জায়গা নিচ্ছে ৯৬ বাইটস । এখানে কিন্তু এই প্রোগ্রামের মেমরি অ্যারের সাইজের উপর নির্ভর করেতেছে যা লিনিয়ার । তাহলে এখন খুব সহজেই বলতে পারি যে, এই প্রোগ্রামের স্পেস কমপ্লিক্সিটি(complexity) অর্ডার অব এন O(n) ।

আজকের পর্ব শেষ করার পূর্বে, চলুন জেনে নেওয়া যাক জাভাস্ক্রিপ্টে কিছু ডাটা-টাইপের স্পেস কমপ্লিক্সিটি(complexity) -

আশা করি আপনি পুরো আর্টিকেল বুঝতে পেরেছেন ।

WBG link

Channel : WBG
8.6 PDF CLICK 

S_100
Docs Admt

Siam PUBLIC

Seljuk Link 

--------------------------------------------------------------------------------------------

উয়ানিসঃ বয়ুক সেলজুক বা

(সেলজুকদের জাগরণ)

উয়ানিস বুয়ুক সেলজুক

সিজনঃ ১ সকল ভলিউম একসাথে 

🔴উয়ানিস বয়ুক সেলজুক সিজন-০১ লিংকঃ

বুয়ুক সেলজুক

সিজন-১ এর সবগুলো ভলিউম একসাথে

°°°°°°°°°°°°°°°°°°°°°°°°

ভলিউম-১ঃ

ভলিউম-২ঃ

ভলিউম-৩ঃ

ভলিউম-৪ঃ

ভলিউম-৫ঃ

°°°°°°°°°°°°°°°°°°°°°°°°

ভলিউম-৬ঃ

ভলিউম-৭ঃ

ভলিউম-৮ঃ

ভলিউম-৯ঃ

ভলিউম-১০ঃ

°°°°°°°°°°°°°°°°°°°°°°°°

ভলিউম-১১ঃ

ভলিউম-১২ঃ

ভলিউম-১৩ঃ

ভলিউম-১৪ঃ

ভলিউম-১৫ঃ

°°°°°°°°°°°°°°°°°°°°°°°°

ভলিউম-১৬ঃ

ভলিউম-১৭ঃ

ভলিউম-১৮ঃ

ভলিউম-১৯ঃ

ভলিউম ২০ঃ

°°°°°°°°°°°°°°°°°°°°°°°°

ভলিউম ২১ঃ

ভলিউম ২২ঃ

ভলিউম ২৩ঃ

ভলিউম ২৪ঃ

ভলিউম ২৫ঃ

°°°°°°°°°°°°°°°°°°°°°°°°

ভলিউম ২৬ঃ

ভলিউম ২৭ঃ

ভলিউম ২৮ঃ

ভলিউম ২৯ঃ

ভলিউম ৩০ঃ

°°°°°°°°°°°°°°°°°°°°°°°°

ভলিউম ৩১ঃ

ভলিউম ৩২ঃ

ভলিউম ৩৩ঃ

ভলিউম ৩৪ঃ

°°°°°°°°°°°°°°°°°°°°°°°°

🔹সিজন ১ সমাপ্ত🔸

HSC BOOKS 📚 COLLECTION

 HSC BOOKS 📚 COLLECTION

FB Link

 

API কি ? API কেন ব্যবহার করা হয়? (what is API)

আজকে আমরা আলোচনা করব API কি?(what is API)। ইপিআই(API) অর্থ হচ্ছে application programming interface.

API কি সেটা বোঝার আগে একটি উদাহরণ দেওয়া যাক। ধরুন আপনি একটা কোম্পানি চালান। সেই কোম্পানির জন্য একটি ওয়েবসাইট তৈরি করলেন। ওয়েবসাইটি তৈরি করার পর আপনি খেয়াল করলেন যে আপনার বেশিভাগ কাস্টমার ওয়েবসাইট ব্যবহার করতে পছন্দ করে না। তাদের একটি মোবাইল অ্যাপ্লিকেশন দরকার ।

তো আপনি একটি মোবাইল অ্যাপ্লিকেশন বানাতে গেলেন। আপনার কোম্পানির মে ডাটাগুলো আছে সেগুলো দিয়ে একটি মোবাইল অ্যাপ্লিকেশন তৈরি করবে। আপনার server-side এর যে লজিক আছে সেগুলো দিয়ে একটি মোবাইল অ্যাপ্লিকেশন বানাবেন।

কিন্তু  ওই একই সার্ভার এবং একই ডাঁটা দিয়ে মোবাইল অ্যাপ্লিকেশন বানাইতে গেলেন। তখন কি হলো আপনার মোবাইলেও সার্ভারের এইচটিএমএল জাভাস্ক্রিপ্ট সিএসএস রিটার্ন করে। অর্থাৎ যখন আপনি সার্ভারে রিকুয়েস্ট পাঠান তখনই সার্ভার HTML JavaScript CSS ডাটা পাঠায়। কিন্তু এগুলো তো আপনার দরকার না। এগুলো দিয়ে আপনি মোবাইল ফোনে কি করব।

আবার আরেকটা  বিষয় চিন্তা করেন যে আপনার কোম্পানি অনেক বড় হয়ে গেল। আর আপনার কোম্পানী থেকে অনেকগুলো সাব কোম্পানি তৈরি হলো। 

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

এই দুইটা সমস্যার সমাধান আমরা একটা মাধ্যমে দিতে পারেন। সেটা হচ্ছে API(application programming interface). কিন্তু কিভাবে? ওকে আমি ভেঙ্গে বলি।

ওয়েবসাইট বানানোর ক্ষেত্রে সার্ভার থেকে আমরা কী করি। সার্ভার মূলত আমাদের HTML JavaScript CSS ফাইল তৈরি করে  দে। কিন্তু আমরা যদি এইচটিএমএল জাভাস্ক্রিপ্ট সিএসএস এর পুরো ফাইলটা না নিয়ে সার্ভার থেকে শুধু এইটুকুই ডাটা নেই যেটুকু ডাটা আমাদের দরকার, তাহলে কেমন হয়?

মনে করুন  প্রোফাইল পেজের জন্য ইমেজ লাগবে  তাহলে শুধু  ইমেজের  লিংকট নিব। নাম লাগবে তাহলে শুধু নামটা নিব কয়জন ফ্রেন্ড আছে শুধু ফ্রেন্ডলিস্ট নিব। এই অল্প কিছু ডাটা লাগবে এগুলাই শূধু নিব।। পুরো এইচটিএমএল সিএসএস জাভাস্ক্রিপ্ট ফাইল না নিয়ে শুধুমাত্র যে যে কনটেন্টগুলো আমার লাগবে সেগুলোর ডাটা নিব। 

যখন একটা সার্ভার এরকম  ভাবে শুধু প্রয়োজনীয় কনটেন্ট গুলো শেয়ার করবে তখন শেয়ার করার এই পুরো প্রক্রিয়াটাকে বলা হয়  API। 

এখন চিন্তা করেন যে আপনার একটা সার্ভার আছে। যেটাতে একটা এপিআই জেনারেট করা যায়। আরেকটা সার্ভার আছে যেখানে ওয়েবসাইট আছে। ওয়েবসাইটা আপনি নরমালি ডিজাইন করলেন। ডিজাইন করার পরে এই যে ডাটা গুলো আপনার সার্ভার থেকে আসছে সেই সার্ভার ডাটা গুলো দিয়ে আপনি ওয়েবসাইটা ফিলাপ করে দিলেন। অর্থাৎ যেখানে নাম দরকার সেখানে নাম বসিয়ে দিলেন। যেখানে ইমেজ দরকার সেখানে ইমেজ বাসায় দিলেন। যেখানে  যা যা দরকার সেখানে আপনি তা তা বসিয়ে দিলেন।

ঠিক একই ডাটা ব্যবহার করে আপনি আপনার মোবাইল ফোনের অ্যাপ্লিকেশন তৈরি করে ফেললেন। তখন আর এইচটিএমএল জাভাস্ক্রিপ্ট সিএসএস আসছে না। আপনার যা যা দরকার যেই ডাটা গুলো দরকার ছিল সেগুলোই আসছে।

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

ঠিক যতটুকু আপনার এক্সেস  দেওয়া দরকার ঠিক ততটুকুই আপনি এক্সেস দিলেন। যে মনে করুন আপনি তাদেরকে নির্দিষ্ট কোন পেইজ  অ্যাক্সিস দিবেন। এক জায়গায় দিলেন গেজেট পোস্ট এক জায়গায় রিভিউ পোস্ট।

 এর বেশি আপনি কিছু পাবেন না। আপনি এই জায়গা থেকে গেট রিকোয়েস্ট করতে পারবেন এই এই জায়গায় পোস্ট রিকোয়েস্ট করতে পারবা। আপনি চাইলেও কখনো আপনার পাসওয়ার্ড চেঞ্জ করতে পারবেন বা আপনার ইমেইল চেঞ্জ করতে পারবেন না কিন্তু আপনার নাম চেঞ্জ করতে পারবেন। এরকম অ্যাক্সেস দিতে পারবেন। আপনি যতটা চান প্রাইভেসি আপনি তা আপনার পেইজে দিতে পারেন।

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

ধরুন আমি কোথাও একটি ওয়েবসাইটে  অ্যাকাউন্ট  খুলতে চাচ্ছি । কিন্তু সেখানে বলতেছে you can log in with Facebook account . এখন আমার যদি একটি ফেসবুক অ্যাকাউন্ট থাকেই এবং সে একাউন্ট দিয়ে তাদের ওখানের লগইন করি তাহলে তাদের কি লাভ? কোন কি আদৌ লাভ আছে?

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

সব মাথায় রাখ, কোন ইমেইল দিয়ে কোন একাউন্ট খুলছিলাম কোন নাম্বার দিয়েছিলাম কি পাসওয়ার্ড দিছিলাম। এত কিছু যেন মনে রাখতে না লাগে তার জন্যই এই ব্যবস্থাটা করা হয়েছে।

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

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

সেক্ষেত্রে ফেসবুক বলে দে যে যদি ইউজারের কাছে পারমিশন পান সে ক্ষেত্রে কিছু কিছু তথ্য পাইতে পারেন  যেমন ফেসবুক প্রোফাইল পিক কভার ফটো এরকম কিছু কিছু ইনফরমেশন ফেসবুকের কাছ থেকে নিতে পারবে। এর থেকে বেশি কিছু পাবেনা।

যে ইনফরমেশনগুলো ফেসবুক তাদেরকে অ্যাক্সিস দিচ্ছে সেই ইনফরমেশন গুলো সেই ওয়েবসাইট গুলোর জন্যে যথেষ্ট।

একটা ওয়েবসাইটের একাউন্ট করার  জন্য সাধারণত কি দরকার? একটা নাম দরকার একটা প্রোফাইল পিক ইমেইল দরকার জন্মতারিখ দরকার, এগুলো তারা ফেসবুক থেকেই নিয়ে নিচ্ছে।

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

 

Top 10 Games using Html CSS and Javascript from Codepen.

01) Menja by Caleb Miller

https://codepen.io/MillerTime/pen/BexBbE

02) Snake Game by Fariat

https://codepen.io/fariati/pen/mdRpEYP

03) Color Blast By Nate Wiley

https://codepen.io/natewiley/pen/EGyiF

04) Bullseye Game By Elliot Geno

https://codepen.io/pyrografix/pen/qrqpJN

05) Tower Blocks by Steve Gardner

https://codepen.io/ste-vg/full/ppLQNW

 

06) Pure CSS Tic-tac-toe By Žiga Miklič

https://codepen.io/ziga-miklic/pen/Fagmh

07) Javascript Planet Defence Game By Marc López

https://codepen.io/Loopez10/full/dMaVdQ

08) Flip - card memory game By Codrin Pavel

https://codepen.io/zerospree/pen/bNWbvW

09) COLORON GAME By Greg Hovanesyan

https://codepen.io/gregh/full/yVLOyO

10) A generic Infinite Runner game By Eduardo Lopes 

https://codepen.io/EduardoLopes/pen/IJnAr