Module‌‌‌ ‌‌‌৩২ ‌‌‌এ‌‌‌ ‌‌‌আমরা‌‌‌ ‌‌‌যাকিছু‌‌‌ ‌‌‌শিখেছি‌‌‌

: Getting started with API

গুগলে সার্চ দাও what is an API (Application Programming Interface) {server থেকে ডাটা লোড করে ওয়েবসাইটে দেখায় }
JavaScript Object Notation (JSON)
Object কে স্ট্রিং আকারে দেখাতে চাইলে আমরা কি করতে পারি ? (JSON.stringify() এই ফাংশনটা ব্যাবহার করতে পারি )

const user = { name: "rashedul", id: 12, location: "joypurhat" };

const stringified = JSON.stringify(user);

আমরাতো Object কে stringify করতে পারলাম । কিন্তু কেও যদি তোমাকে stringify করেই দেয় তাহলে কি তুমি কিভাবে তাকে Object এ কনভার্ট করবে ?

const convert = JSON.parse(stringified);

console.log(convert);

তুমি যখন কোণ সার্ভার থেকে ডাটা নিতে যাবে তখন সার্ভার তোমাকে stringify অবস্থায় দিবে । তখন তোমাকে সেগুলোকে JSON.parse() করতে হবে ।
তুমি গুগলে সার্চ দিবে JSON placeholder লিখে । তার পর ওয়েবসাইট এ ধুকে জাবা । গিয়ে Try it টাকে কপি করে নিবা

JSON placeholder সার্ভার থেকে ১০টা ইউজার এর বর্ণনা এনে দেখাও । ইউজার লিঙ্কঃ https://jsonplaceholder.typicode.com/users
JSON placeholder ওয়েবসাইট এর সব Resources গুলো চেষ্টা করে দেখবে । তুমি সব কিছু লোড করতে পারতেছ কিনা ?
এবার তোমার কাজ হলো সার্ভার থেকে ১০ টা নাম লোড করে সেগুলোকে বাটনে Onclick() এর মাধ্যমে ওয়েবসাইট সব নামগুল অ্যাড করে দাও

function loadData() {

fetch("https://jsonplaceholder.typicode.com/comments?postId=1")

.then((res) => res.json())

.then((data) => idReturn(data));

}

function idReturn(data) {

const ul = document.getElementById("users");

for (user of data) {

console.log(user.name);

const li = document.createElement("li");

// li.innerText = user.name;

li.innerText = `name: ${user.name}`; // using template String

ul.appendChild(li);

}

এখন তোমার কাজ হল JSON placeholder Resources থেকে posts এর লিঙ্কটাকে নাও । তারপর তাকে বাটন ক্লিক এর মাধ্যমে পোস্ট এর Title এবং body গুলোকে ওয়েবসাইটে অ্যাড কর । তবে সেখানে যেন স্টাইল যুক্ত থাকে

function loadPost() {

fetch("https://jsonplaceholder.typicode.com/posts")

.then((res) => res.json())

.then((data) => post(data));}

function post(posts) {

const postContainer = document.getElementById("posts");

for (const post of posts) {

const div = document.createElement("div");

div.classList.add("post");

div.innerHTML = `

<h3>${post.title}</h3>

postContainer.appendChild(div);

}

API এর পূর্ণরুপ কি ? (application programming interface)
কিছু technical ভাষা

নতুন করে অ্যাড করা = post

কার পোস্ট করা ডাটা দেখালে = get

কিছু এডিট (update) করলে = patch

ডিলিট করলে = delete

কিছু থাকলে অ্যাড করবে না থাকলে করবে না = PUT

এগুলোর আবার আর একটা ভার্সন আছে CRUD নামে (Create, Read, Update and Delete)
Google কর CRUD vs REst API
Google কর http vs post

এতক্ষণতো আমরা একটা সার্ভার থেকে ডাটা লোড করে অউটপুট নিতে পারলাম । কিন্তু আমরা কিভাবে আর কিছু ডাটা অ্যাড করতে পারি সেটা করতে পারবে ? না পারলে JSON placeholder guide দেখে নাও ।
HTTP status code এর মান গুলো গুগল থেকে দেখে নিবে
Browser এ debug করতে পার কিনা চেষ্টা করে দেখো ।

All module link

আর আমার github এ যাইতে চাইলে এই লিঙ্কে ক্লিক করুন

About

Md: Rashedul Islam Shihab

Writer of this note

Batch4

Social accounts

Module‌‌‌ ‌‌‌৩২ ‌‌‌এ‌‌‌ ‌‌‌আমরা‌‌‌ ‌‌‌যাকিছু‌‌‌ ‌‌‌শিখেছি‌‌‌

نموذج الاتصال