في هذه التدوينة، سنقوم ببناء تطبيق ويب متكامل باستخدام Django و React. سنبدأ بإعداد بيئة التطوير الخاصة بنا ثم ننتقل إلى إنشاء المكونات الضرورية لتطبيقنا.
المتطلبات الأساسية
قبل أن نبدأ، تأكد من تثبيت ما يلي على نظامك:
- بايثون 3
- جانغو 3
- Node.js
- npm أو yarn
- محرر التعليمات البرمجية (مثل Visual Studio Code)
كيفية استخدام Visual Studio Code مع Django
إعداد المشروع
لإنشاء مشروع Django جديد انتقل إلى الدليل الذي تريد إنشاء المشروع فيه. ثم قم بتشغيل الأمر التالي:
django-admin startproject myproject
إنشاء مشروع جانغو – الطريق الصحيح
سيؤدي هذا إلى إنشاء دليل جديد يسمى myproject بالبنية الأساسية لمشروع Django.
بعد ذلك، انتقل إلى دليل myproject وقم بإنشاء تطبيق جديد عن طريق تشغيل الأمر التالي:
python manage.py startapp myapp
سيؤدي هذا إلى إنشاء دليل جديد يسمى myapp بالبنية الأساسية لتطبيق Django.
الآن، لنقم بإعداد الواجهة الأمامية لتطبيقنا. افتح الطرفية وانتقل إلى دليل myproject. ثم قم بتشغيل الأوامر التالية:
npx create-react-app frontend
cd frontend
npm install axios react-router-dom
سيؤدي هذا إلى إنشاء تطبيق React جديد في دليل الواجهة الأمامية وتثبيت التبعيات الضرورية.
إنشاء النماذج
الآن بعد أن انتهينا من إعداد المشروع و التطبيق، فلنقم بإنشاء نماذج لتطبيقنا. افتح ملف models.py في دليل myapp وأضف الكود التالي:
from django.db import models
class Post(models.Model):
title = models.CharField(max_length=200)
content = models.TextField()
created_at = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.title
يؤدي هذا إلى إنشاء نموذج Post يحتوي على ثلاثة حقول: title و content و created_at. حقل title هو CharField بحد أقصى 200 حرف، وحقل content هو TextField، و الحقل create_at هو DateTimeField الذي يقوم تلقائيًا بتعيين التاريخ والوقت الحاليين عند إنشاء منشور جديد.
إنشاء العروض
بعد ذلك، لنقم بإنشاء عرض لتطبيقنا. افتح ملف view.py في دليل myapp وأضف الكود التالي:
from django.shortcuts import render
from django.http import JsonResponse
from .models import Post
def home(request):
return render(request, 'index.html')
def api_posts(request):
posts = Post.objects.all().values()
data = {'posts': list(posts)}
return JsonResponse(data)
يؤدي هذا إلى إنشاء عرضين : عرض home يعرض قالب Index.html، و عرض api_posts التي يسترد جميع كائنات Post من قاعدة البيانات وترجعها كبيانات JSON.
إنشاء القوالب
الآن، لنقم بإنشاء القوالب. قم بإنشاء دليل جديد يسمى templates في دليل myapp، ثم قم بإنشاء ملف جديد يسمى Index.html بالكود التالي:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Django React App</title>
<link rel="stylesheet" href="{% static 'css/app.css' %}">
</head>
<body>
<div id="root"></div>
<script src="{% static 'js/app.js' %}"></script>
</body>
</html>
يحدد هذا البنية الأساسية لمستند HTML و يتضمن رابطًا لملف CSS و علامة البرنامج النصي لملف JavaScript الخاص بنا.
إنشاء مكونات React
الآن، لنقم بإنشاء مكونات React لتطبيقنا. افتح ملف App.js في دليل frontend/src واستبدل الكود الموجود بما يلي:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
function App() {
const [posts, setPosts] = useState([]);
useEffect(() => {
axios.get('/api/posts/')
.then(response => {
setPosts(response.data.posts);
})
.catch(error => {
console.log(error);
});
}, []);
return (
<Router>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
</nav>
<Switch>
<Route exact path="/">
<h1>Blog Posts</h1>
<ul>
{posts.map(post => (
<li key={post.id}>
<Link to={`/post/${post.id}`}>{post.title}</Link>
</li>
))}
</ul>
</Route>
<Route path="/about">
<h1>About</h1>
<p>This is a simple blog application built with Django and React.</p>
</Route>
<Route path="/post/:id">
<PostDetail />
</Route>
</Switch>
</Router>
);
}
function PostDetail() {
const [post, setPost] = useState(null);
const postId = window.location.pathname.split('/').pop();
useEffect(() => {
axios.get(`/api/posts/${postId}/`)
.then(response => {
setPost(response.data);
})
.catch(error => {
console.log(error);
});
}, [postId]);
if (!post) {
return <p>Loading...</p>;
}
return (
<>
<h1>{post.title}</h1>
<p>{post.content}</p>
<p>{post.created_at}</p>
</>
);
}
export default App;
يؤدي هذا إلى إنشاء مكون App يسترد قائمة المنشورات من Django API ويعرضها في قائمة. ويتضمن أيضًا قائمة تنقل تحتوي على روابط إلى الصفحة الرئيسية وصفحة حول الموقع.
لقد أنشأنا أيضًا مكون PostDetail الذي يسترد منشورًا واحدًا بناءً على ID ويعرضه بالتفصيل.
إنشاء عناوين URL
أخيرًا، لنقم بإنشاء عناوين URL لتطبيقنا. افتح ملف urls.py في دليل myapp وأضف الكود التالي:
from django.urls import path
from .views import home, api_posts
urlpatterns = [
path('', home, name='home'),
path('api/posts/', api_posts, name='api_posts'),
]
يؤدي هذا إلى إنشاء نمطين لعنوان URL: أحدهما يعين عنوان URL الجذر للعرض home، والآخر يعين عنوان URL بالتنسيق api/posts/ إلى العرض api_posts.
تشغيل التطبيق
لتشغيل التطبيق، انتقل إلى دليل frontend. ثم قم بتشغيل الأمر التالي:
npm start
سيؤدي هذا إلى بدء تشغيل خادم التطوير للواجهة الأمامية لتطبيقنا.
بعد ذلك، افتح نافذة طرفية أخرى وانتقل إلى دليل myproject. ثم قم بتشغيل الأمر التالي:
python manage.py runserver
سيؤدي هذا إلى بدء تشغيل خادم التطوير للواجهة الخلفية.
يمكنك الآن الوصول إلى التطبيق بالانتقال إلى http://localhost:3000/ في متصفح الويب.
تعلمنا كيفية إنشاء تطبيق ويب متكامل باستخدام Django و React. بدأنا بإعداد بيئة التطوير ثم انتقلنا إلى إنشاء المكونات الضرورية لتطبيقنا، بما في ذلك النماذج و العروض والقوالب وعناوين URL. مع وضع هذه العناصر الأساسية في مكانها الصحيح، أنشأنا واجهة React الأمامية التي تسترد البيانات من واجهة برمجة تطبيقات Django الخاصة بنا وتعرضها بطريقة سهلة الاستخدام.
اكتشاف المزيد من بايثون العربي
اشترك للحصول على أحدث التدوينات المرسلة إلى بريدك الإلكتروني.