הכוונה – איך לפתח פרויקט Full-Stack – אפליקציה למעקב אחר כושר גופני

הכוונה – איך לפתח פרויקט Full-Stack – אפליקציה למעקב אחר כושר גופני

במאמר זה נלמד כיצד לפתח אפליקציה למעקב אחר כושר גופני (Fitness Tracking App) צעד אחר צעד. נשתמש בטכנולוגיות מודרניות כמו React לצד ה-Client ו-Node.js לצד ה-Server, ונלמד כיצד לחבר את כל החלקים יחד כדי ליצור אפליקציה שימושית ומעשית למעקב אחר פעילות גופנית ובריאות.

שלב ראשון: תכנון ועיצוב

השלב הראשון בפיתוח הפרויקט הוא תכנון האפליקציה. נתחיל בעיצוב הממשק משתמש (UI) ובתכנון בסיס הנתונים שיכיל את נתוני האימונים, המשתמשים והסטטיסטיקות. חשוב לקבוע מה יהיו הפונקציות העיקריות של האפליקציה, כמו מעקב אחר אימונים, הוספת אימונים חדשים, ניהול משתמשים ותצוגת סטטיסטיקות.

שלב שני: פיתוח Front-End

בשלב הזה נתחיל בפיתוח הצד הלקוח של האפליקציה באמצעות React. נבנה את המבנה הבסיסי של האפליקציה וניצור את הקומפוננטות הדרושות.

יצירת מבנה התיקיות

נתחיל ביצירת מבנה התיקיות לפרויקט. חשוב לשמור על מבנה מסודר כדי להקל על הפיתוח והתחזוקה.

mkdir fitness-tracker
cd fitness-tracker
npx create-react-app client
mkdir server
cd server
npm init -y

פיתוח קומפוננטת מעקב אימונים

ניצור קומפוננטה ב-React שתאפשר למשתמשים לעקוב אחר האימונים שלהם.

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

function WorkoutList() {
  const [workouts, setWorkouts] = useState([]);

  useEffect(() => {
    fetch('/api/workouts')
      .then(response => response.json())
      .then(data => setWorkouts(data));
  }, []);

  return (
    <div>
      {workouts.map(workout => (
        <div key={workout.id}>
          <h2>{workout.name}</h2>
          <p>{workout.date}</p>
          <p>{workout.duration} דקות</p>
        </div>
      ))}
    </div>
  );
}

export default WorkoutList;

שלב שלישי: פיתוח Back-End

בשלב הזה נפתח את הצד השרת של האפליקציה באמצעות Node.js ו-Express. ניצור API שינהל את האימונים והמשתמשים ויתקשר עם בסיס הנתונים.

הגדרת השרת ויצירת API

נגדיר את השרת ונתחיל ביצירת מסלולי API שיטפלו בפניות מהלקוח. נשתמש ב-Express ליצירת השרת וב-MongoDB כבסיס הנתונים.

cd ../server
npm install express mongoose cors
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

mongoose.connect('mongodb://localhost:27017/fitness-tracker', { useNewUrlParser: true, useUnifiedTopology: true });

const workoutSchema = new mongoose.Schema({
  name: String,
  date: Date,
  duration: Number
});

const Workout = mongoose.model('Workout', workoutSchema);

app.get('/api/workouts', async (req, res) => {
  const workouts = await Workout.find();
  res.json(workouts);
});

app.post('/api/workouts', async (req, res) => {
  const workout = new Workout(req.body);
  await workout.save();
  res.sendStatus(201);
});

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

חיבור ה-Front-End ל-Back-End

לאחר שהגדרנו את ה-API, נחבר את ה-Front-End ל-Back-End כדי לאפשר שליפה והצגת נתונים מתוך בסיס הנתונים.

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

שלב רביעי: ניהול משתמשים ואבטחה

בשלב זה נבנה את המערכת לניהול משתמשים ואבטחת הנתונים. נשתמש ב-JWT לאימות משתמשים וב-BCrypt להצפנת סיסמאות.

npm install jsonwebtoken bcryptjs
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');

const userSchema = new mongoose.Schema({
  username: String,
  password: String
});

const User = mongoose.model('User', userSchema);

app.post('/api/register', async (req, res) => {
  const hashedPassword = await bcrypt.hash(req.body.password, 10);
  const user = new User({ username: req.body.username, password: hashedPassword });
  await user.save();
  res.sendStatus(201);
});

app.post('/api/login', async (req, res) => {
  const user = await User.findOne({ username: req.body.username });
  if (user && await bcrypt.compare(req.body.password, user.password)) {
    const token = jwt.sign({ id: user._id }, 'secret');
    res.json({ token });
  } else {
    res.sendStatus(401);
  }
});

שלב חמישי: פריסה ותחזוקה

בשלב זה נפרוס את הפרויקט על גבי שרת וננהל את התחזוקה השוטפת. נשתמש בכלים כמו Docker ו-Kubernetes לפריסה ולניהול הסביבה.

docker build -t fitness-tracker .
docker run -p 80:80 fitness-tracker

שימוש ב-Docker ליצירת קונטיינר

Docker מאפשר לנו ליצור קונטיינרים המכילים את כל התלויות של האפליקציה שלנו, מה שמבטיח שהאפליקציה תפעל באותו אופן בכל סביבה.

docker build -t fitness-tracker .
docker run -p 80:80 fitness-tracker

אם אתם מעוניינים ללמוד בצורה מעמיקה יותר אתם מוזמנים להתייעץ איתנו על קורס Full-Stack.

שתפו את הפוסט

דילוג לתוכן