HTML ትምህርት - ክፍል 15

🟢

Node.js ምንድን ነው? // What is Node.js?

Node.js — JavaScript ን Browser ሳይሆን Server (computer) ላይ ለማስሮጥ! Chrome ውስጥ ያለ V8 engine ይጠቀማል!
Node.js lets JavaScript run on the server — not just in the browser! Same language, both sides!

💡

ቁልፍ ሐሳብ: Browser = Frontend JS | Node.js = Backend JS — አንድ ቋንቋ ሁለቱም ቦታ!
One language (JavaScript) for both frontend and backend — that's the power of Node.js!

🏗️ Frontend vs Backend — ልዩነቱ:

🖥️ Frontend (React)

Browser ውስጥ ይሰራል
UI — ምን ይታያል
HTML, CSS, React
User ያያዋል

⟷

HTTP
Request
/Response

🟢 Backend (Node.js)

Server ላይ ይሰራል
API — ውሂብ ይሰጣል
Node.js, Express
Database ጋር ይነጋገራል

⚙️

Step 1 — Node.js Server // http module

server.js — ፊተኛ Node.js Server

// Node.js built-in http module
const http = require('http');

// Server ስራ
const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('ሰላም Node.js! 🟢');
});

// Port 3000 ላይ listen
server.listen(3000, () => {
  console.log('Server running on port 3000!');
});

// Terminal ውስጥ: node server.js
// Browser: http://localhost:3000

Express — Node.js ላይ የተሰራ Framework። HTTP server ን ቀላሉን ለማስሮጥ! Routes, Middleware ሁሉም አብሮ!
Express makes building servers much easier — routing, middleware, JSON responses, all simplified!

📦

Install: npm init -y ከዚያ npm install express
npm = Node Package Manager — packages ለማውረድ!

🚀

Step 2 — Express Server // Routes & API

app.js — Express Server ሙሉ ምሳሌ

const express = require('express');
const app = express();

// Middleware — JSON ለማንበብ
app.use(express.json());

// ── ዋና data ──────────────────────────────
let users = [
  { id: 1, name: 'Abel',  role: 'admin'     },
  { id: 2, name: 'Sara',  role: 'developer' },
  { id: 3, name: 'Kebe',  role: 'designer'  },
];

// ── GET /api/users — ሁሉም users ──────────
app.get('/api/users', (req, res) => {
  res.json({ success: true, data: users });
});

// ── GET /api/users/:id — አንድ user ────────
app.get('/api/users/:id', (req, res) => {
  const user = users.find(u => u.id === +req.params.id);
  if (!user) return res.status(404).json({ error: 'Not found' });
  res.json({ success: true, data: user });
});

// ── POST /api/users — አዲስ user ───────────
app.post('/api/users', (req, res) => {
  const newUser = { id: Date.now(), ...req.body };
  users.push(newUser);
  res.status(201).json({ success: true, data: newUser });
});

// ── DELETE /api/users/:id ─────────────────
app.delete('/api/users/:id', (req, res) => {
  users = users.filter(u => u.id !== +req.params.id);
  res.json({ success: true, message: 'Deleted!' });
});

// ── Server ጀምር ───────────────────────────
app.listen(3000, () =>
  console.log('🟢 Server on http://localhost:3000')
);

📡

HTTP Methods — CRUD // GET POST PUT DELETE

GET

ውሂብ ማንበብ / Read data
GET /api/users

POST

አዲስ ውሂብ / Create new
POST /api/users

PUT

ሙሉ ለውጥ / Full update
PUT /api/users/1

PATCH

ከፊል ለውጥ / Partial update
PATCH /api/users/1

DELETE

ውሂብ ማስወጣት / Delete
DELETE /api/users/1

🎮

Live Demo — API Simulator! // Try REST API

Express REST API ምሳሌ! GET, POST, DELETE ሞክር — Server response ያሳያል! 🔥
Simulate a real Express REST API — send requests and see JSON responses!

🟢 Express Server — localhost:3000

API Simulator

REQUEST

← Request ምረጥ...

RESPONSE

← Response ይጠብቃል...

DATABASE (in-memory)

🔗

React + Express — Full Stack! // fetch API

React — Express API ጋር ለመነጋገር

import { useState, useEffect } from 'react';

function Users() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  // useEffect — page ሲጫን API call
  useEffect(() => {
    fetch('http://localhost:3000/api/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data.data);
        setLoading(false);
      });
  }, []);

  // POST — አዲስ user ለማስጨምር
  async function addUser(name) {
    const res = await fetch('/api/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name }),
    });
    const data = await res.json();
    setUsers(prev => [...prev, data.data]);
  }

  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map(u => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

📌

ዋና ዋና ነጥቦች // Key Takeaways

1

🟢 Node.js = Server-side JavaScript

JavaScript ን Browser ሳይሆን Computer (server) ላይ ያስሮጣል! V8 engine ይጠቀማል!
Same JS you know, now running on the server side!

2

🚀 Express = Node.js Framework

npm install express → const app = express() → app.get('/route', handler)
Express makes routing, middleware and JSON APIs super simple.

3

📡 REST API — CRUD Operations

GET (read), POST (create), PUT/PATCH (update), DELETE (delete) — ሁሉም routes ይሰራሉ!
REST API = standard way for frontend and backend to communicate via HTTP.

4

🔗 React + Express = Full Stack!

React ን fetch() ተጠቅሞ Express API ን ያነጋግራል — ሙሉ Full Stack App!
React (frontend) + Express (backend) = complete web application!

🎯

Quiz // ምን ተማርን?

❓ REST API ውስጥ አዲስ ውሂብ ለመፍጠር (Create) የቱ HTTP method ይጠቀማሉ?
Which HTTP method is used to CREATE new data in a REST API?

A GET

B POST ✅

C DELETE

D CONNECT

Node.js & Express 🟢Backend Development!

🖥️ Frontend (React)

🟢 Backend (Node.js)

Node.js & Express 🟢
Backend Development!