2.3 פיתוח fullstack הרצאה

פיתוח Fullstack – Frontend ו-Backend¶

הקדמה¶

פיתוח Fullstack היא דרך לפתח אתרים.
אשר משלבת בין צד הלקוח (Frontend) וצד השרת (Backend) כדי ליצור אפליקציות ווב שלמה. ה-Frontend אחראי על חוויית המשתמש, בעוד שה-Backend מנהל נתונים ולוגיקה עסקית.

אפשר להקביל זאת למה שלמדנו עד כו שכאשר הAPI הוא יהיה backend, והfrontend היה html שהבאנו שג'נרטנו עם הphp.

הבדלים בין Frontend ו-Backend¶

היבט	Frontend	Backend
שפה	HTML, CSS, JavaScript	Node.js, Python, C#, PHP
ספריות	React, Vue, Angular	Express, Django, ASP.NET
מיקום	רץ בדפדפן	רץ בשרת
אחריות	עיצוב וממשק משתמש	ניהול מסד נתונים, לוגיקה עסקית, אימות משתמשים

דוגמאות קוד¶

אחת הדרכים הנפוצות לפתח frontend היא באמצעות react.
ריאקט היא ספריית js מאוד גדולה שמאפשרת לנו לכתוב frontend-ים מורכבים עם javascript בצורה קלה יחסית ומודרנית.
כאשר אנחנו מחלקים את הקוד לקומפוננטות, דמיינו שכל קומפוננטה היא אלמנט custome שאנחנו יוצרים בhtml שלנו.

קוד Frontend – יצירת ממשק משתמש עם React¶

דוגמה להגדרה של קומפוננטה בשם Users שנוכל להשתמש בה ב "html" שלנו.

import React, { useState, useEffect } from 'react';

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

    useEffect(() => {
        fetch('http://localhost:5000/api/users')
            .then(response => response.json())
            .then(data => setUsers(data));
    }, []);

    return (
        <div>
            <h1>רשימת משתמשים</h1>
            <ul>
                {users.map(user => (
                    <li key={user.id}>{user.name}</li>
                ))}
            </ul>
        </div>
    );
}

export default Users;

הסבר:

הקומפוננטה Users משתמשת ב-useEffect (פונקציה מיוחדת של react) כדי למשוך נתונים מה-Backend.
הפונקציה fetch מבצעת בקשת GET לשרת ומביא רשימת משתמשים.
התוצאה מוצגת כרשימה של שמות משתמשים.
הקומפוננטה משתמשת במידע כדי להציג אותו בצורה יפה יותר למשתמש.

חשבו על כך, שבסופו של דבר יצרנו סוג חדש של "אלמנט" בשם Users שיודע לשלוף מהbackend את היוזרים במערכת, ולהציג אותם בצורה יפה.

קוד Backend – יצירת API עם Node.js ו-Express¶

הנה דרך שבה עם javascript נוכל לבנות קוד צד שרת (backend) שיודע להחזיר רשימה של משתמשים כאשר פונים אילו ב"/api/users"

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

app.use(cors());

const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' }
];

app.get('/api/users', (req, res) => {
    res.json(users);
});

app.listen(5000, () => {
    console.log('Server is running on port 5000');
});

הסבר:

יצרנו שרת Express שמאזין לבקשות בכתובת http://localhost:5000.
הנתיב /api/users מחזיר רשימת משתמשים בפורמט JSON.

כיצד ה-Frontend וה-Backend מתקשרים¶

המשתמש גולש לאתר ומריץ את קוד ה-Frontend בדפדפן.
ה-Frontend מבצע בקשת HTTP לשרת כדי לקבל נתונים.
ה-Backend מעבד את הבקשה, ניגש למסד הנתונים ומחזיר תשובה בפורמט JSON.
ה-Frontend מקבל את הנתונים ומציג אותם למשתמש.

סיכום¶

פיתוח Fullstack משלב בין Frontend ל-Backend כדי לבנות אפליקציות שלמות. בעוד שה-Frontend אחראי על הצגת הנתונים ואינטראקציה עם המשתמש, ה-Backend מטפל בניהול הנתונים ובבקשות השרת. ההבנה של שתי השכבות מאפשרת יצירת מערכות חזקות ויעילות.

זוהי השיטה הנפוצה ביותר לפיתוח אתרים, כמובן שגם בphp אפשר לפתח בחלוקה של frontend backend, אך אם נרצה לקחת את זה שלב אחד קדימה, נוכל להשתמש בreact לfrontend או בטכנולוגית backend כמו express (מה שהראינו למעלה)