توضیح اپلیکیشن Task Tracker:
برنامه ردیاب وظیفه یک برنامه نرم افزاری است که به کاربران کمک می کند وظایف خود را سازماندهی و مدیریت کنند. این به کاربران امکان می دهد وظایف ایجاد کنند، اولویت ها را تعیین کنند و پیشرفت را دنبال کنند. یک برنامه ردیاب وظیفه می تواند برای افراد یا تیم هایی مفید باشد که باید از حجم کاری خود مراقبت کنند و اطمینان حاصل کنند که وظایف به موقع انجام می شوند.
نمای کلی React و JSON Server:
React یک کتابخانه محبوب جاوا اسکریپت برای ساخت رابط کاربری است. این به توسعه دهندگان اجازه می دهد تا اجزای رابط کاربری قابل استفاده مجدد را ایجاد کنند و برنامه های پیچیده وب را با استفاده از یک نحو اعلانی بسازند. React به طور گسترده برای ساخت برنامه های تک صفحه ای (SPA) استفاده می شود و دارای یک جامعه بزرگ و فعال از توسعه دهندگان است.
JSON Server ابزاری است که به توسعه دهندگان اجازه می دهد تا با استفاده از یک فایل JSON یک REST API جعلی ایجاد کنند. می توان از آن برای شبیه سازی یک API سمت سرور برای اهداف آزمایش و نمونه سازی استفاده کرد. راه اندازی و استفاده از سرور JSON آسان است و می تواند ابزاری عالی برای ساخت سریع برنامه ردیاب وظیفه باشد.
هدف این مقاله:
هدف از این مقاله ارائه راهنمای گام به گام در مورد نحوه ساخت اپلیکیشن ردیاب وظیفه با استفاده از React و JSON Server است. تا پایان این مقاله، خوانندگان باید بتوانند یک برنامه ردیاب وظیفه اصلی ایجاد کنند که به آنها امکان اضافه کردن، حذف و ویرایش وظایف را می دهد و داده های کار را در یک فایل JSON ذخیره می کند. این مقاله برای توسعه دهندگان سطح متوسط است که با جاوا اسکریپت و React آشنا هستند، اما ممکن است تجربه ای با JSON Server نداشته باشند.
نصب Node.js و React:
قبل از شروع، باید مطمئن شوید که Node.js و React را روی رایانه خود نصب کرده اید. برای نصب Node.js به وب سایت رسمی Node.js رفته و آخرین نسخه پایدار را برای سیستم عامل خود دانلود کنید. هنگامی که Node.js را نصب کردید، می توانید از npm (Node Package Manager) برای نصب React استفاده کنید. ترمینال یا خط فرمان خود را باز کنید و دستور زیر را تایپ کنید:
npx create-react-app a-task-tracker-app
دستور بالا یک دایرکتوری جدید به نام my-task-tracker-app ایجاد می کند و یک پروژه React جدید را در داخل آن راه اندازی می کند. همچنین تمام وابستگی های لازم را نصب می کند.
نصب سرور JSON:
برای نصب سرور JSON، ترمینال یا خط فرمان خود را باز کنید و به فهرست پروژه خود بروید:
cd a-task-tracker-app
هنگامی که در دایرکتوری پروژه خود قرار گرفتید، دستور زیر را برای نصب سرور JSON تایپ کنید:
npm install -g json-server
دستور بالا JSON Server را به صورت جهانی بر روی کامپیوتر شما نصب می کند. اکنون می توانید از JSON Server برای ایجاد یک REST API جعلی برای برنامه ردیاب وظیفه خود استفاده کنید.
تعریف اجزای برنامه و رابط کاربری:
قبل از شروع به نوشتن کد، مهم است که اجزای برنامه و رابط کاربری آن را تعریف کنید. در برنامه ردیاب وظیفه، اجزای اصلی معمولاً فهرستی از وظایف، فرمی برای افزودن وظایف جدید و راهی برای ویرایش یا حذف وظایف موجود هستند. رابط کاربری باید ساده و آسان برای استفاده، با نشانه های بصری واضح برای کاربر باشد.
ایجاد اجزای React لازم:
اکنون که ایده واضحی از اجزای برنامه و رابط کاربری دارید، زمان آن رسیده است که ساخت اجزای React را شروع کنید. در فهرست پروژه خود، به پوشه src بروید و یک پوشه جدید به نام Components ایجاد کنید. در داخل پوشه کامپوننت ها، سه فایل جدید ایجاد کنید: TaskList.js، TaskForm.js و Task.js.
TaskList.js باید حاوی کدی برای نمایش لیستی از وظایف باشد.
AddTask.js باید حاوی کد فرم مورد استفاده برای افزودن کارهای جدید باشد.
Task.js باید کد مربوط به تک تک وظایف موجود در لیست را داشته باشد.
در اینجا قطعه کد برای TaskList.js آمده است:
import Task from "./Task"
const TaskList = ({ tasks,onDelete,onToggle}) => {
return (
<>
{tasks. Map((task, index) => (
<Task key={index} task={task}
onDelete={onDelete} OnToggle={onToggle}/>
))}
</>
)
}
export default TaskList
در اینجا یک قطعه کد برای AddTask.js آمده است:
/* import {useState} from 'react'
const AddTask = ({onAdd}) => {
const [text,setText] = useState('')
const [day,setDay] = useState('')
const [reminder,setReminder] = useState(false)
const onSubmit = (e) => {
e.preventDefault() //prevent the page from reloading
if(!text) {
alert('please add a task')
return
} //validating the input
onAdd({text,day,reminder})
setText('')
setDay('')
setReminder(false)
}
*/
return (
<form className="add-form" onSubmit={handleSubmit}>
<div className="form-control">
<label>Task</label>
<input
type="text"
placeholder="Add Task"
value={text}
onChange={(e) => setText(e.target.value)}
/>
</div>
<div className="form-control">
<label>Day & Time</label>
<input
type="text"
placeholder="Add Day & Time"
value={day}
onChange={(e) => setDay(e.target.value)}
/>
</div>
<div className="form-control form-control-check">
<label>Set Reminder</label>
<input
type="checkbox"
checked={reminder}
value={reminder}
onChange={(e) => setReminder(e.currentTarget.checked)}
/>
</div>
<input type="submit" value="save Task" className="btn btn-block" />
</form>
);
}
export default AddTask
در اینجا یک قطعه کد برای Task.js آمده است:
import {FaTimes} from 'react-icons/fa'
const Task = ({task,onDelete,onToggle}) => {
return (
<div className={`task ${task. Reminder ?
'reminder' : ''}`} //using condition to style the div
onDoubleClick={() =>
onToggle(task.id)}>
<h3>{task. Text} {' '}
<FaTimes
style={{color:'red',cursor:'pointer'}}
onClick={() => onDelete(task.id)}
/>
</h3>
<p>{task. Day}</p>
</div>
)
}
export default Task
استایل دادن به برنامه با CSS:
برای استایل دادن به برنامه، می توانید یک فایل جدید به نام index.css در پوشه src خود ایجاد کنید و استایل های CSS را برای اجزای خود اضافه کنید. در اینجا یک قطعه کد CSS برای برنامه آمده است:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
}
.container {
max-width: 500px;
margin: 30px auto;
overflow: auto;
min-height: 300px;
border: 1px solid steelblue;
padding: 30px;
border-radius: 5px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.btn {
display: inline-block;
background: #000;
color: #fff;
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
font-size: 15px;
font-family: inherit;
}
.btn:focus {
outline: none;
}
.btn:active {
transform: scale(0.98);
}
.btn-block {
display: block;
width: 100%;
}
.task {
background: #f4f4f4;
margin: 5px;
padding: 10px 20px;
cursor: pointer;
}
.task. Reminder {
border-left: 5px solid green;
}
.task h3 {
display: flex;
align-items: center;
justify-content: space-between;
}
.add-form {
margin-bottom: 40px;
}
.form-control {
margin: 20px 0;
}
.form-control label {
display: block;
}
.form-control input {
width: 100%;
height: 40px;
margin: 5px;
padding: 3px 7px;
font-size: 17px;
}
.form-control-check {
display: flex;
align-items: center;
justify-content: space-between;
}
.form-control-check label {
flex: 1;
}
.form-control-check input {
flex: 2;
height: 20px;
}
footer {
margin-top: 30px;
text-align: center;
}
مطمئن شوید که فایل CSS خود را در فایل App.js وارد کرده و کلاس های مناسب را به اجزای خود اضافه کنید.
ایجاد یک فایل JSON جدید برای داده های وظیفه:
برای ایجاد یک REST API جعلی برای برنامه ردیاب وظیفه خود، باید یک فایل JSON جدید ایجاد کنید که داده های وظیفه را ذخیره می کند. در پوشه پروژه خود یک پوشه جدید به نام db ایجاد کنید و در داخل آن یک فایل جدید به نام db.json ایجاد کنید.
در اینجا یک کد مثال برای db.json آمده است:
{
"tasks": [
{
"text": "DummyAPI is a RESTful online fake API, publicly accessible via https.
",
"day": "March 1",
"reminder": true,
"id": 2
},
{
"text": "LAST one",
"day": "Tuesday",
"reminder": true,
"id": 3
},
{
"text": "fake dummy",
"day": "february 20",
"reminder": true,
"id": 5
},
{
"text": " jinni",
"day": "march 1",
"reminder": true,
"id": 6
}
]
}
راه اندازی سرور JSON:
برای راه اندازی سرور JSON، ترمینال یا خط فرمان خود را باز کنید و به فهرست پروژه خود بروید. سپس دستور زیر را تایپ کنید:
json-server --watch db/db.json --port 5000
این دستور سرور JSON را راه اندازی می کند و تغییرات را در فایل db.json مشاهده می کند. همچنین سرور را روی پورت 5000 اجرا می کند.
تست اتصال سرور:
برای تست اتصال سرور، مرورگر خود را باز کنید و به http://localhost:5000/tasks بروید. اگر سرور به درستی کار می کند، باید داده های کار را در قالب JSON نمایش دهید.
همچنین می‌توانید عملیات CRUD را با استفاده از ابزاری مانند Postman برای ارسال درخواست‌های GET، POST، PUT و DELETE به سرور آزمایش کنید.
به عنوان مثال، برای افزودن یک کار جدید، می توانید یک درخواست POST را به آن ارسال کنید http://localhost:5000/tasks با داده های وظیفه جدید در بدنه درخواست. سرور با داده های وظیفه جدید، از جمله شناسه منحصر به فرد تولید شده توسط سرور، پاسخ خواهد داد.
ایجاد یک کار جدید:
برای ایجاد یک کار جدید، باید عملیات ایجاد را پیاده سازی کنیم. در کامپوننت AddTask، می‌توانیم یک تابع handleSubmit تعریف کنیم که یک درخواست POST را برای افزودن یک کار جدید به سرور JSON ارسال می‌کند.
در اینجا یک قطعه کد آمده است:
export const handleSubmit = async (e) => {
e.preventDefault();
const AddTasks = async (task) => {
const response = await fetch('http://localhost:5000/tasks',{
method:'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(task),
})
const data = await response.json()
setTasks([...tasks, data]);
}
}
خواندن همه کارها:
برای خواندن تمام وظایف از سرور، باید عملیات خواندن را پیاده سازی کنیم. در کامپوننت App، می‌توانیم یک قلاب useEffect تعریف کنیم که هنگام نصب مؤلفه، داده‌های وظیفه را از سرور واکشی می‌کند.
این قطعه کد است:
const [tasks, setTasks] = useState([]);
useEffect(() => {
const getTasks = async () => {
const tasksFromServer = await fetchTasks();
setTasks(tasksFromServer);
};
getTasks();
}, []);
const fetchTasks = async () => {
const res = await fetch('http://localhost:5000/tasks');
const data = await res.json();
return data;
};
به روز رسانی یک کار:
برای به روز رسانی یک کار موجود، باید عملیات به روز رسانی را پیاده سازی کنیم. در کامپوننت Task، می‌توانیم یک تابع Toggle تعریف کنیم که درخواست PUT را برای به‌روزرسانی وضعیت یادآوری کار به سرور ارسال می‌کند.
این قطعه کد است:
export const onToggle = async (e) => {
e.preventDefault();
const updateTask = async (id, updatedTask) => {
const res = await fetch(`http://localhost:5000/tasks/${id}`, {
method: 'PUT',
headers: {
'Content-type': 'application/json',
},
body: JSON.stringify(updatedTask),
})
const data = await res.json()
setTasks(
tasks. Map((task) =>
task.id === id ? { ...task, reminder: data. Reminder } : task
)
)
}
}
قطعه کد بالا از fetch API برای ارسال یک درخواست PUT به سرور با داده های کار به روز شده در قالب JSON استفاده می کند. پس از پاسخ سرور با داده های کار به روز شده، وضعیت وظایف به روز می شود تا تغییرات را منعکس کند.
حذف یک کار:
برای حذف یک کار، باید یک درخواست DELETE را با شناسه وظیفه به سرور JSON ارسال کنید.
در اینجا قطعه کد برای حذف یک کار آمده است:
const deleteTask = async (id) => {
await fetch(`http://localhost:5000/tasks/${id}`, { method: 'DELETE' })
setTasks(tasks. Filter((task) => task.id !== id))
}
این کد از fetch API برای ارسال درخواست DELETE به سرور با شناسه وظیفه استفاده می کند. پس از اینکه سرور تایید کرد که وظیفه حذف شده است، با استفاده از روش فیلتر از وضعیت وظایف حذف می شود.
به روز رسانی UI بر اساس داده های سرور:
پس از ارسال درخواست به سرور و دریافت پاسخ، باید رابط کاربری برنامه را با داده های برگردانده شده از سرور به روز کنید. به عنوان مثال، پس از ایجاد یک کار جدید، باید وظیفه جدید را به وضعیت وظایف اضافه کنید و لیست وظایف نمایش داده شده در رابط کاربری را به روز کنید.
در اینجا یک کد مثال است که برنامه را به سرور JSON متصل می کند و پاسخ های سرور را مدیریت می کند:
import { useState, useEffect } from 'react'
const App = () => {
const [tasks, setTasks] = useState([])
useEffect(() => {
const getTasks = async () => {
const tasksFromServer = await fetchTasks()
setTasks(tasksFromServer)
}
getTasks()
}, [])
const fetchTasks = async () => {
const res = await fetch('http://localhost:5000/tasks')
const data = await res.json()
return data
}
const addTask = async (task) => {
const res = await fetch('http://localhost:5000/tasks', {
method: 'POST',
headers: {
'Content-type': 'application/json',
},
body: JSON.stringify(task),
})
const data = await res.json()
setTasks([...tasks, data])
}
const deleteTask = async (id) => {
await fetch(`http://localhost:5000/tasks/${id}`, { method: 'DELETE' })
setTasks(tasks.filter((task) => task.id !== id))
}
return (
<div className="container">
<Header />
<AddTask onAdd={addTask} />
{tasks.length > 0 ? (
<Tasks tasks={tasks} onDelete={deleteTask} />
) : (
'No tasks to show'
)}
</div>
)
}
export default App
در مثال کد بالا، برنامه از قلاب useEffect برای واکشی وظایف از سرور هنگام نصب مؤلفه برنامه استفاده می کند. تابع fetchTasks یک درخواست GET برای بازیابی داده های وظیفه به سرور ارسال می کند. تابع addTask یک درخواست POST را برای افزودن یک کار جدید به سرور ارسال می کند. تابع deleteTask یک درخواست DELETE برای حذف یک کار به سرور ارسال می کند. رابط کاربری برنامه با استفاده از تابع setTasks برای افزودن یا حذف وظایف از وضعیت وظایف به روز می شود.
نتیجه
این مقاله راهنمای گام به گام ساخت برنامه ردیاب وظیفه با React و JSON Server را ارائه کرده است. این مقاله راه اندازی محیط توسعه، طراحی اجزای برنامه و UI، راه اندازی سرور JSON، اجرای عملیات CRUD و اتصال برنامه به سرور JSON را پوشش می دهد.
در اینجا فکر نهایی من است
ساخت یک برنامه ردیاب وظیفه با React و JSON Server یک راه عالی برای یادگیری و تمرین مهارت های توسعه وب است. React مجموعه ابزار قدرتمندی را برای ایجاد رابط های کاربری پویا و پاسخگو فراهم می کند، در حالی که سرور JSON تنظیم یک REST API جعلی را برای اهداف آزمایش و توسعه آسان می کند.
در اینجا پیوندی به مخزن در Github برای مرجع وجود دارد
پروژه
در اینجا همچنین پیوندی به نسخه زنده نسخه آزمایشی وجود دارد
لطفا مرا دنبال کنید توییتر
