كيفية إنشاء تطبيق ويب ونشره باستخدام قاعدة بيانات PostgreSQL؟

ستتعلم في هذه المقالة كيفية إنشاء تطبيق ويب ونشره باستخدام قاعدة بيانات Postgres باستخدام تقنيات الذكاء الاصطناعي.

يمكن أن تكون إضافة الذكاء الاصطناعي إلى سير عمل التطوير مفيدًا لإنتاجيتك. يمكنك تقليل وقت التطوير وتوفير التكاليف من خلال أتمتة المهام المتكررة واستخدام ميزات الذكاء الاصطناعي مثل إنشاء التعليمات البرمجية.

مزايا استخدام الذكاء الاصطناعي في تطوير الويب

تتضمن بعض مزايا دمج الذكاء الاصطناعي في تطوير الويب الخاص بك ما يلي.

أتمتة المهام المتكررة

يمكن أن يساعدك إدخال الذكاء الاصطناعي في سير عمل التطوير لديك على أتمتة المهام المتكررة، مثل إنشاء بيانات وهمية وتعليمات برمجية نموذجية.

يمكن أن يساعد أيضًا في الاختبار لإنشاء اختبارات الوحدة والتكامل.

ومع ذلك، على الرغم من قدرة الذكاء الاصطناعي على أتمتة العديد من المهام، إلا أنه من المهم ملاحظة أنه ليس حلاً مضموناً ولا يزال يتطلب إشرافاً بشرياً.

قم دائمًا بمراجعة مخرجات أدوات الذكاء الاصطناعي والتحقق من صحتها للتأكد من دقتها.

إنشاء الرموز

يمكن لأدوات الذكاء الاصطناعي أن تساعدك في كتابة مقتطفات من التعليمات البرمجية أو حتى وظائف كاملة. تعمل هذه الأتمتة على تسريع عملية البرمجة الخاصة بك، مما يتيح لك التركيز على التصميم عالي المستوى وحل المشكلات.

ومع ذلك، يمكن أن تكون التعليمات البرمجية التي يتم إنشاؤها بالذكاء الاصطناعي مضللة وتؤدي إلى أخطاء يصعب اكتشافها في مرحلة لاحقة من دورة حياة تطوير البرمجيات؛ لذا، يجب فحصها قبل دفع التعليمات البرمجية إلى الإنتاج.

تحسين تحسين التعليمات البرمجية

يمكن لأدوات الذكاء الاصطناعي أن تساعدك على تحسين التعليمات البرمجية الخاصة بك من أجل السرعة من خلال اقتراح أجزاء من التعليمات البرمجية التي يمكنك إعادة كتابتها أو إعادة هيكلتها لإنتاج حلول أكثر كفاءة وقابلة للصيانة.

قد يتضمن ذلك تبسيط المنطق المعقد، أو التخلص من التعليمات البرمجية الزائدة، أو استخدام ميزات اللغة بشكل أفضل.

يمكن لأدوات الذكاء الاصطناعي أيضًا مساعدتك في اختيار خوارزميات وهياكل بيانات أكثر كفاءة لتحسين الأداء العام لرمزك وكفاءة العمليات على البيانات.

اكتشاف الأخطاء وتصحيحها

يمكن لأدوات الذكاء الاصطناعي أن تساعدك في تصحيح أخطاءك البرمجية بشكل أسرع من خلال تحليل أخطائك وتقديم حلول قابلة للتطبيق لأخطائك.

على سبيل المثال، عندما تقوم بنشر تطبيق باستخدام حاويات Back4app، يقوم الذكاء الاصطناعي Back4app AI بتحليل الأخطاء الناتجة عن أخطاء في ملف Dockerfile الخاص بك ويقدم اقتراحات يمكن أن تحل الأخطاء وتساعدك على نشر تطبيقك بنجاح.

بناء خلفية باستخدام وكيل الذكاء الاصطناعي Back4app AI Agent و PostgreSQL

في هذا البرنامج التعليمي، ستقوم ببناء واجهة برمجة تطبيقات مكتبة. سوف تتفاعل مع قاعدة بيانات PostgreSQL مع الجداول التالية: كتاب، ومؤلف، و BookCheckout، و LibraryMember.

هيكل قاعدة البيانات وتصميمها

يحتوي جدول الكتاب على معظم المعلومات عن الكتاب، مثل العنوان والمؤلف وسنة_النشر وإجمالي_النسخ والنسخ المتاحة.

يحتوي جدول المؤلف على علاقة واحد إلى متعدد مع جدول الكتب، أي أن المؤلف الواحد يمكن أن يكون له العديد من الكتب، ولكن كل كتاب يمكن أن يكون له مؤلف واحد فقط. يحتوي أيضًا على تفاصيل دقيقة عن المؤلف، مثل الاسم الكامل للمؤلف.

يحتوي جدول LibraryMeemeber على معلومات عن أعضاء المكتبة، مثل الاسم والبريد الإلكتروني ورقم الهاتف.

يعمل جدول BookCheckout كجدول تقاطع بين جدولي Book و LibraryMemeber لإنشاء علاقة متعددة إلى متعددة بينهما.

على سبيل المثال، يمكن للعضو استعارة عدة كتب، ويمكن لعدة أعضاء استعارة كتاب واحد. يشير إلى الكتاب والعضو الذي استعاره مع تاريخ الخروج وتاريخ الاستحقاق وتاريخ الإرجاع.

إليك مخطط نموذج قاعدة البيانات لقاعدة البيانات.

إنشاء قاعدة البيانات على Back4app

انتقل إلى back4app.com، وقم بتسجيل الدخول (قم بإنشاء حساب إذا لم يكن لديك حساب)، وانقر على زر “تطبيق جديد” في الزاوية العلوية اليمنى من الشاشة.

حدد خيار الواجهة الخلفية كخدمة، كما هو موضح في الصورة أدناه.

قم بتسمية تطبيقك وحدد خيار PostgreSQL، كما هو موضح في الصورة أدناه.

انتقل إلى وكيل الذكاء الاصطناعي Back4app AI Agent وأدخل المطالبة أدناه:

"I need you to create database tables in my Back4app app; what do you need me to provide?"

سيقوم وكيل الذكاء الاصطناعي هذا بإرجاع قائمة بالأشياء التي يحتاجها لإنشاء جداول قاعدة البيانات لك. يجب أن تتضمن مفاتيح التطبيق وتعريف المخطط الخاص بك.

استنادًا إلى تصميم قاعدة البيانات في القسم السابق، يجب أن يكون تعريف المخطط الخاص بك مشابهًا للكتلة البرمجية أدناه:

1. **Authors Class:**
    - Class Name: `Authors`
    - Fields:
        - `authorId` (Auto-generated, Primary Key)
        - `authorName` (String, Required)
2. **Books Class:**
    - Class Name: `Books`
    - Fields:
        - `bookId` (Auto-generated, Primary Key)
        - `title` (String, Required)
        - `author` (Pointer to the `Authors` class)
        - `publicationYear` (Number)
        - `availableCopies` (Number)
        - `totalCopies` (Number)
3. **LibraryMembers Class:**
    - Class Name: `LibraryMembers`
    - Fields:
        - `memberId` (Auto-generated, Primary Key)
        - `name` (String, Required)
        - `email` (String, Required)
        - `phoneNumber` (String)
4. **BookCheckouts Class:**
    - Class Name: `BookCheckouts`
    - Fields:
        - `checkoutId` (Auto-generated, Primary Key)
        - `book` (Pointer to the `Books` class)
        - `member` (Pointer to the `LibraryMembers` class)
        - `checkoutDate` (Date)
        - `dueDate` (Date)
        - `returnDate` (Date)

تصف كتلة التعليمات البرمجية أعلاه مخطط قاعدة البيانات الخاصة بك بطريقة تسمح للذكاء الاصطناعي بإنشاء قاعدة البيانات الخاصة بك بدقة من خلال وصف أنواع البيانات والعلاقات بشكل صحيح.

بعد تقديم التفاصيل إلى وكيل الذكاء الاصطناعي وتأكيد الوكيل أنه قد أنشأ قاعدة بياناتك بنجاح، يمكنك التحقق من لوحة معلومات التطبيق للتحقق من إنشاء قاعدة البيانات.

بعد ذلك، اطلب من وكيل الذكاء الاصطناعي ملء قاعدة بياناتك ببيانات الاختبار باستخدام المطالبة أدناه.

Populate my database with test data for the Authors, their books, 
and some library members who have checked out books from the library.

الآن، لديك الآن بيانات اختبار على قاعدة بياناتك لتعمل عليها.

إنشاء الرمز السحابي

الآن بعد أن أصبح لديك بيانات اختبارية للعمل بها، ستحتاج إلى تنفيذ وظائف نظام إدارة المكتبات الخاص بك.

بالنسبة لهذا البرنامج التعليمي، سيكون لتطبيقك الوظائف التالية.

• احصل على جميع الكتب الموجودة في المكتبة.
• عرض كتاب معين في المكتبة.
• عرض جميع كتب مؤلف معين.
• استعر كتاباً من المكتبة.
• إعادة كتاب مستعار إلى المكتبة.

يمكنك تنفيذ هذه الوظيفة باستخدام دوال التعليمات البرمجية السحابية الخاصة بـ Back4app، والتي تسمح لتطبيقك بتشغيل دوال JavaScript على Back4app استجابةً للأحداث التي يتم تشغيلها بواسطة طلبات HTTP.

يمكنك إنشاء وظائف مخصصة للتعليمات البرمجية السحابية باستخدام عامل الذكاء الاصطناعي Back4app لتبسيط عملية التطوير.

أعط وكيل الذكاء الاصطناعي Back4app المطالبة أدناه لإنشاء الرمز السحابي للحصول على جميع الكتب الموجودة في المكتبة.

Create a cloud code function called `getAllBooks` 
that will return all the books in the database with their respective authors.

بعد ذلك، أعطِ وكيل الذكاء الاصطناعي Back4app المطالبة أدناه لإنشاء الرمز السحابي لجلب كتاب على المعرف.

Create a cloud code function called `viewBook(bookId)`
that allows me to provide a book ID and return a book with the matching ID.

بعد ذلك، أعط وكيل Back4app للذكاء الاصطناعي المطالبة أدناه لإنشاء الرمز السحابي للحصول على جميع الكتب لمؤلف معين.

Create a cloud code function called `getByAuthor(authorName)` that allows me to provide an author name and return all the books by the author.

بعد ذلك، أعط وكيل الذكاء الاصطناعي Back4app المطالبة أدناه لإنشاء الرمز السحابي لاستعارة كتاب من المكتبة.

Create a cloud code function called `borrowBookFromLibrary(libraryMemberId, bookId)` that allows me to provide a Library member ID and a Book ID  and records a book checkout for the member with the due date and return date set to a month from the current date. 

The function should also check if the book is available (ie `availableCopies` != 0). The book should display a proper error message if it is unavailable.

أخيرًا، أعط وكيل Back4app للذكاء الاصطناعي المطالبة أدناه لإنشاء الرمز السحابي لإعادة كتاب إلى المكتبة.

Create a cloud code function called `returnBookToLibrary(libraryMemberId, bookId)` that allows me to provide a Library member ID and a Book ID. 

The function should fetch the BookCheckout record  with the libraryMemberId and bookId provided and update  the return date of the BookCheckout record to the current date. 

The function should also increment the book's `availableCopies` by 1.

يمكنك التحقق مما إذا كان وكيل الذكاء الاصطناعي قد أنشأ وظائفك السحابية بشكل صحيح من خلال مراجعتها على لوحة تحكم Back4app الخاص بك ← الرمز السحابي ← الوظائف واستضافة الويب ← السحابة ← main.js.

الآن، لديك خلفية وظيفية تم إنشاؤها من بعض المطالبات. بعد ذلك، ستنشئ واجهة مستخدم تسمح لك بالتفاعل مع الواجهة الخلفية.

بناء واجهة أمامية باستخدام وكيل الذكاء الاصطناعي Back4app

في هذا القسم، ستقوم ببناء واجهة المستخدم لتطبيق الويب الخاص بك باستخدام React.

أولاً، أعط وكيل الذكاء الاصطناعي المطالبة أدناه للحصول على نظرة عامة عالية المستوى للخطوات المطلوبة لإنشاء واجهة مستخدم لتطبيقك.

Describe the steps required to build a React Frontend for my backend. I want the app to have the following routes
1. `/books` to display all the books in the library
2. `/books/:bookId` to view a specific book
3. `/books/authors/:authorName` to view all books by a specific author
4. `/books/:bookId/borrow` allows a member to borrow a book
5. `/books/:bookId/return-to-library` allows a member to return a book to the library
I also want the app to be created using vite

يجب أن يستجيب الوكيل ببعض الخطوات، والتي قد تختلف عن الخطوات أدناه ولكنها تؤدي في النهاية إلى نفس النتيجة. إذا كانت أي من الخطوات التي حددها الذكاء الاصطناعي غير واضحة بما فيه الكفاية، يمكنك أن تطلب من الذكاء الاصطناعي التوضيح في مطالبة أخرى.

الخطوة 1: تهيئة مشروع Vite جديد وتثبيت التبعيات

قم بتشغيل الأمر أدناه في طرفك الطرفي لسقالة تطبيق React جديد مع Vite:

npm create vite@latest library-app -- --template react

انتقل إلى دليل المشروع وقم بتشغيل تثبيت التبعيات عن طريق تشغيل الأمر أدناه:

cd library-app && npm install

قم بتثبيت React Router للتوجيه و Parse SDK للتفاعل مع Back4app عن طريق تشغيل الأمر أدناه:

npm install react-router-dom parse

الخطوة 2: قم بتهيئة JavaScript Parse SDK

أضف الكتلة البرمجية أدناه إلى ملف main.jsx لتهيئة Parse في تطبيقك.

import Parse from "parse";

const PARSE_APPLICATION_ID = "YOUR_APPLICATION_ID";
const PARSE_HOST_URL = "<https://parseapi.back4app.com/>";
const PARSE_JAVASCRIPT_KEY = "YOUR_JAVASCRIPT_KEY";

Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
Parse.serverURL = PARSE_HOST_URL;

تذكر أن تستبدل “Your_APPLICATION_ID” و “Your_JAVASCRIPT_KEY” بقيمهما الفعلية، والتي يمكنك العثور عليها في لوحة تحكم Back4app ← إعدادات التطبيق ← الأمان والمفاتيح.

الخطوة 3: إعداد التوجيه

استبدل الشيفرة في ملف App.jsx الخاص بك بالكتلة البرمجية أدناه:

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Books from './components/Books';
import BookDetails from './components/BookDetails';
import BooksByAuthor from './components/BooksByAuthor';
import BorrowBook from './components/BorrowBook';
import ReturnBook from './components/ReturnBook';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/books" element={<Books />} />
        <Route path="/books/:bookId" element={<BookDetails />} />
        <Route path="/books/authors/:authorName" element={<BooksByAuthor />} />
        <Route path="/books/:bookId/borrow" element={<BorrowBook />} />
        <Route path="/books/:bookId/return-to-library" element={<ReturnBook />} />
      </Routes>
    </Router>
  );
};

export default App;

الخطوة 4: مكونات البناء والتصميم

وفقًا لعامل الذكاء الاصطناعي، يجب أن يحتوي تطبيقك على خمسة مكونات:

• مكون الكتب
• مكوّن BooksDetails
• مكوِّن BooksByAuthor
• مكون كتاب الاقتراض
• مكون كتاب الإرجاع

أولًا، أنشئ مجلد “مكونات” في دليل مشروعك وأنشئ كل ملف من ملفات مكوناتك. بعد ذلك، أنشئ مجلد CSS في مجلد “المكونات” الخاص بك وأنشئ ملفات CSS لكل مكون من المكونات.

يجب أن يبدو مجلد المكونات الخاص بك مثل الصورة أدناه:

بعد ذلك، قم بإعطاء الذكاء الاصطناعي المطالبة أدناه لإنشاء مكون الكتب الخاص بك وتصميمه:

Create the component for the `books` route. 

Be sure to add proper class names for styling and ensure that you are accessing the correct properties returned by the Parse server (Plain JavaScript Objects). 

When the book card is clicked, I want to go to the route /books/:bookId ⁠ using the bookId ⁠ of the bookcard I clicked. 

For the styling, the books should be displayed in a grid at the center of the webpage, taking the full width of the browser. 

The component should also have a proper header like "Books".

يجب أن يستجيب الذكاء الاصطناعي بورقة أنماط لملف Books.css الخاص بك ومقتطف كود jsx لملف Books.jsx الخاص بك.

أضف الكتل البرمجية إلى الملفات الخاصة بكل منها واستورد Books.css إلى ملف main.jsx الخاص بك.

هكذا:

//main.jsx
import "./components/css/Books.css";

ملاحظة: قم بتعطيل ملفindex.css الخاص بك لمنع الأنماط من تجاوز تصميمك المخصص.

أعط الذكاء الاصطناعي المطالبة أدناه لإنشاء مكون BookDetails الخاص بك وتصميمه.

Create a component for the `books/:bookId` route. The component should have a button that takes you to the `books/:bookId/borrow` route to allow the user to borrow the book. 

The component should also have a button that takes you to the `books/:bookId/return-to-library` route that allows a user to return a book.  

The component should also include a link to the author names of the book that takes the user to the `/books/authors/:authorName` route, allowing them to view books from other authors. 

Be sure to add proper class names for styling and ensure that you are accessing the correct properties returned by the Parse server (Plain JavaScript Objects).

يجب أن يستجيب الذكاء الاصطناعي بورقة أنماط لملف BookDetails.css الخاص بك ومقتطف كود jsx لملف BookDetails.jsx الخاص بك. أضف كتل التعليمات البرمجية إلى الملفات الخاصة بها.

أعط الذكاء الاصطناعي المطالبة أدناه لإنشاء مكون BooksByAuthor الخاص بك:

Create a component for the `books/authors/:authorName` route. 

Be sure to add proper class names for styling and ensure you are accessing the correct properties returned by the Parse server (Plain JavaScript Objects).  

When the book card is clicked, I want to go to the route /books/:bookId ⁠ using the bookId ⁠ of the bookcard I clicked.

For the styling, the books should be displayed in a grid at the center of the webpage, taking the full width of the browser. 

The component should also have a proper header, such as `AuthorName's Books` for example "Jane Austen's Books".

أضف الكود الذي تم إنشاؤه إلى الملفات المناسبة.

أعط الذكاء الاصطناعي المطالبة أدناه لإنشاء مكون كتاب الاقتراض الخاص بك:

Create a component for the `/books/:bookId/borrow`. 

The component should display a form that allows users to enter their `libraryMemberId` and borrow the book. 

Be sure to add proper class names for styling and ensure you are accessing the correct properties returned by the Parse server (Plain JavaScript Objects). 

For the styling, the elements should be properly spaced and have a proper header like "Borrow <NAME_OF_BOOK>". 
The form should be at the center of the webpage, taking the full width of the browser. 

The component should also display the number of remaining books.

أضف الكود الذي تم إنشاؤه إلى الملفات المناسبة.

أعط الذكاء الاصطناعي المطالبة أدناه لإنشاء مكون كتاب الإرجاع الخاص بك:

Create a component for the `/books/:bookId/return-to-library`.

The component should display a form that allows users to enter their `libraryMemberId` and `bookId` of the book they want to return. 

For the styling, the elements should be properly spaced and have a proper header like "Return Book". 

The form should be at the center of the webpage, taking the full width of the browser.

أضف الكود الذي تم إنشاؤه إلى الملفات المناسبة.

نشر تطبيق الويب الخاص بك على حاويات Back4app

الآن بعد أن انتهيت من بناء تطبيقك، ستحتاج إلى نشره لجعله متاحًا للعامة. في هذا البرنامج التعليمي، ستنشر تطبيقك باستخدام حاويات Back4app.

أعط المطالبة أدناه إلى وكيل الذكاء الاصطناعي:

What steps do I need to follow to deploy my app on Back4app containers?

يجب أن يستجيب الذكاء الاصطناعي بخطوات مشابهة لما يلي:

1. إنشاء ملف Dockerfile
2. ادفع الكود الخاص بك إلى مستودع عام
3. ربط مستودعك العام بـ back4app
4. النشر

قم بإعطاء المطالبة إلى وكيل الذكاء الاصطناعي:

Generate a dockerfile for my application

قم بإنشاء ملف Dockerfile في الدليل الجذر للتطبيق الخاص بك وأضف الشيفرة التي تم إنشاؤها.

بعد ذلك، ادفع التعليمات البرمجية إلى مستودع عام وأعطِ المطالبة أدناه إلى وكيل الذكاء الاصطناعي الخاص بك:

Connect to my "YOUR_REPOSITORY_URL" repository on GitHub and deploy it to Back4app Containers.

لكي تعمل المطالبة أعلاه، يجب أن يكون تطبيق Back4app’s GitHub الخاص بـ Back4app مدمجًا بشكل مناسب مع حساب GitHub الخاص بك. بدلاً من ذلك، يمكنك نشر تطبيق React يدويًا باستخدام حاويات Back4app.

الخاتمة

يعمل وكيل الذكاء الاصطناعي Back4app AI Agent على تبسيط دورة حياة التطوير بأكملها، بدءًا من إنشاء جداول قاعدة البيانات إلى إنشاء وظائف التعليمات البرمجية السحابية إلى إنشاء واجهة مستخدم React للواجهة الأمامية وحتى نشر التطبيق.

يتيح لك هذا النهج تطوير الواجهة الخلفية والواجهة الأمامية لتطبيقك بأقل جهد يدوي ممكن.

ومع ذلك، من المهم مراجعة مخرجات أدوات الذكاء الاصطناعي لضمان الدقة ومعالجة أي مشاكل محتملة.