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

منذ إصدار ChatGPT، حظيت أدوات الذكاء الاصطناعي باهتمام كبير، مما دفع العديد من مطوري الويب إلى دمج مستوى ما من الذكاء الاصطناعي في سير عملهم.

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

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

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

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

إنشاء الكود الآلي

يمكن أن تساعدك الأدوات القائمة على الذكاء الاصطناعي مثل ChatGPT وGitHub Copilot و Back4app Agent على تسريع عملية التطوير بشكل كبير.

ويمكنها توفير مقتطفات تعليمات برمجية مفيدة، وإكمال التعليمات البرمجية، وتحليل التعليمات البرمجية، وأتمتة عمليات التطوير، وغير ذلك الكثير.

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

تحسين اختبار الكود المحسّن

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

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

تحسين مُحسّنات محرّكات البحث SEO

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

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

إنشاء المحتوى وتنظيمه

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

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

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

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

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

المتطلبات الأساسية

• الفهم الأساسي لتطبيق Back4app
• خبرة في React وDocker، وJavaScript ES6
• حساب Back4app والوصول إلى Back4app Agent
• حساب GitHub

ما هو Back4app Agent؟

Back4app Agent هو برنامج AutoGPT للمطورين. فهو يدمج أدوات التطوير القائمة على الذكاء الاصطناعي مع التنفيذ السحابي، مما يتيح لك أداء المهام السحابية بقوة المحادثة.

تم تصميم Back4app Agent للتفاعل تلقائيًا مع Back4app BaaS وحاويات Back4app.

والأفضل من ذلك كله، يمكن لوكيل Back4app Agent أن يتعلم في الوقت الفعلي ويحسّن نفسه من خلال التفاعل المباشر مع البيئات السحابية. وهو متاح على منصة Back4app وكملحق ChatGPT.

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

إذا كنت ترغب في تحسين مطالبات LLM الخاصة بك، راجع كيفية إنشاء تطبيق باستخدام ChatGPT؟

نظرة عامة على المشروع

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

سنبني الواجهة الخلفية باستخدام Back4app ثم ننتقل إلى الواجهة الأمامية. ستصنع الواجهة الأمامية باستخدام React، ثم سنقوم بإرساءها ونشرها لاحقًا في حاويات Back4app. أخيرًا، لربط الواجهة الأمامية بالواجهة الخلفية، سنستخدم Parse SDK.

أنصحك بمتابعة تطبيق الويب لإدارة الأحداث. تم تصميم التطبيق ليمنحك فهمًا قويًا لمنصة Back4app Platform وكيفية عمل Back4app Agent عمليًا.

الواجهة الخلفية

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

تطبيق Back4app

أولاً، افتح متصفح الويب المفضل لديك وانتقل إلى صفحة Back4app Agent. قم بإنشاء وكيل جديد بالنقر على زر “وكيل جديد”.

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

اطلب من الوكيل إنشاء تطبيق Back4app جديد. سأسمي تطبيقي “Back4app-ai-agent”:

Create a new Back4app app named "back4app-ai-agent".

كما ترى، نجح الوكيل في إنشاء تطبيق Back4app بنجاح. لقد زودنا بـ “معرّف التطبيق” و “عنوان URL للوحة التحكم” وجميع المعلومات المفيدة الأخرى التي قد نحتاجها.

فكرة التطبيق وقاعدة البيانات

لتحسين استجابات الوكيل، نحتاج إلى إعطائه المزيد من السياق حول ما نقوم ببنائه.

انطلق واشرح فكرة التطبيق وهيكل قاعدة البيانات للوكيل:

We're building a backend for an event management app. The app will allow us to manage venues and events. Each event will happen in a specific venue. Please create the following database classes:

1. `Venue`: `name`, `location`, `capacity`
2. `Event`: `name`, `description`, `date`, `venue`

أنشأ الوكيل بنجاح فئات قاعدة البيانات المطلوبة. وقام تلقائيًا بتحديد العلاقة بين الأحداث والأماكن وأعطانا ملخصًا لحقول كل فئة من فئات قاعدة البيانات.

بعد ذلك، اطلب من الوكيل ملء قاعدة البيانات للحصول على بعض بيانات الاختبار للعمل بها لاحقًا:

Please populate my database with 5 venues and 10 events. Some of the events should be music events.

تأكد من عمل كل شيء عن طريق التحقق يدويًا من بنية قاعدة البيانات ومحتوياتها. للقيام بذلك، افتح لوحة تحكم Back4app، وحدد تطبيقك، وانقر على “قاعدة البيانات > المتصفح” على الشريط الجانبي.

يجب أن تكون فئتا الحدث والمكان في قاعدة البيانات الخاصة بك، ويجب أن تحتوي كل منهما على بعض الصفوف النموذجية.

رمز السحابة

Back4app Agent رائع أيضًا في كتابة وظائف الرموز السحابية المخصصة. لنفترض أننا أردنا نقطة نهاية واجهة برمجة التطبيقات التي من شأنها إرجاع جميع الأحداث في مكان معين.

اطلب من الوكيل إنشاء الوظيفة المذكورة للتو ونشرها:

Create a Cloud Code function called `eventsByVenue(venueId)` that will allow me to provide a venue ID, and it'll return all the events happening in that venue.

لاختباره، اطلب من الوكيل إنشاء أمر cURL يصل إلى نقطة نهاية واجهة برمجة التطبيقات:

Write me a cURL command that hits `eventsByVenue(venueId)` to get all the events of some venue in my database.

انسخ الأمر واستبدل العناصر النائبة وقم بتشغيله في وحدة التحكم الخاصة بك:

$ curl -X POST \
    -H "X-Parse-Application-Id: <Your-App-Id>" \
    -H "X-Parse-REST-API-Key: <Your-REST-API-Key>" \
    -H "Content-Type: application/json" \
    -d '{"venueId":"<Venue-Object-Id>"}' \
    https://<Your-Parse-Server-Url>/functions/eventsByVenue

يجب أن تحصل على رد مماثل:

{
   "result": [
      {
         "id": "peae9x7MAH",
         "name": "Classical Evening",
         "description": "...",
         "date": "2023-07-15T19:30:00.000Z"
      },
      {
         "id": "uIeSmK0KJj",
         "name": "Symphonic Extravaganza",
         "description": "...",
         "date": "2023-12-25T19:30:00.000Z"
      }
   ]
}

إذا كان لديك فضول بشأن الرمز الذي تم إنشاؤه في الخلفية، انتقل إلى لوحة تحكم Back4app، وحدد تطبيقك، وانقر على “الرمز السحابي > الوظائف واستضافة الويب” على الشريط الجانبي.

عظيم، هذا كل شيء!

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

الواجهة الأمامية

في هذا القسم من المقالة، سنقوم ببناء ونشر الواجهة الأمامية لتطبيق الويب الخاص بنا.

بداية المشروع

عند العمل مع أعضاء LLM، من الحكمة أن تسأل عن الخطوات العامة أولاً. بمجرد معرفة الخطوات، يمكنك طلب المزيد من التوضيحات. دعنا نجرب ذلك.

اشرح فكرة الواجهة الأمامية للوكيل واطلب دليلاً تفصيلياً خطوة بخطوة:

Describe the steps of building a React application for my backend. I want my app to have three endpoints:

1. `/` displays all the events
2. `/<objectId>/` displays the specific event's details
3. `/venue/<objectId>/` displays all the events in a specific venue 

Please use Vite to generate a React application.

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

تمهيد مشروع React جديد باستخدام Vite:

$ npm create vite@latest my-app -- --template react 
$ cd my-app

قم بتثبيت التبعيات:

$ npm install

ابدأ تشغيل خادم التطوير:

$ npm run dev

افتح متصفح الويب المفضل لديك وانتقل إلى http://localhost:5173/. يجب أن تكون قادرًا على رؤية صفحة Vite الافتراضية المقصودة.

المسارات

كما اقترح وكيل الذكاء الاصطناعي، سنستخدم React-router-dom للتعامل مع التوجيه. يعد React Router DOM حزمة ممتازة للتعامل مع التوجيه في تطبيقات React دون تحديث الصفحة.

أولاً، اطلب توضيحات حول كيفية إعداد واستخدام react-router-dom:

How to install and use `react-router-dom` to implement the previously-mentioned routes?

زود الوكيل بنجاح الشيفرة بموجه يفي بمتطلباتنا. يُصيِّر كل مسار مكوِّن React مختلفًا من مجلد المكونات (والذي سننشئه في الخطوة التالية).

قم بتثبيت الحزمة عبر NPM:

$ npm install react-router-dom

بعد ذلك، استبدل محتويات App.jsx بما يلي:

// src/App.jsx

import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import './index.css';

import EventsList from './components/EventList';
import EventDetails from './components/EventDetails';
import EventsByVenue from './components/EventsByVenue';

function App() {
  return (
    <Router>
      <Routes>
        <Route exact path='/' element={<EventsList/>}/>
        <Route path='/:objectId' element={<EventDetails/>}/>
        <Route path="/venue/:venueId" element={<EventsByVenue/>}/>
      </Routes>
    </Router>
  );
}

export default App;

ثم، قم بإنشاء بنية الملف التالية في مجلد src الخاص بك:

src/
└── components/
    ├── EventDetails.jsx
    ├── EventList.jsx
    └── EventsByVenue.jsx

بعد ذلك، ضع ما يلي في ملف EventsList.jsx:

// src/components/EventsList.jsx

import React from 'react';

const EventsList = () => {
  // fetch the events from the backend

  return (
    <div>
      {/* Map through the events data and display them */}
    </div>
  );
};

export default EventsList;

ثم ملف EventDetails.jsx:

// src/components/EventDetails.jsx

import React from 'react';
import {useParams} from 'react-router-dom';

const EventDetails = () => {
  let {objectId} = useParams();

  // use objectId to fetch data from the backend

  return (
    <div>
      {/* render the specific event details using objectId */}
    </div>
  );
};

export default EventDetail;

وأخيرًا ملف VenueEventsList.jsx:

// src/components/VenueEventsList.jsx

import React from 'react';
import {useParams} from 'react-router-dom';

const VenueEventsList = () => {
  let {objectId} = useParams();

  // use objectId to fetch data from the backend

  return (
    <div>
      {/* render the events for a specific venue using objectId */}
    </div>
  );
};

export default VenueEventsList;

ابدأ تشغيل خادم التطوير واختبر ما إذا كانت المسارات تعمل كما هو متوقع.

Parse SDK

أسهل طريقة لتوصيل الواجهة الأمامية بالواجهة الخلفية المستندة إلى Back4app هي عبر Parse SDK.

دعنا نطلب من الوكيل أن يوضح أكثر كيف يتم ذلك:

How to install and use Parse SDK to connect my frontend with the backend?

يحتوي الرد على خطأ بسيط. فبدلاً من index.jsx يجب أن تقول main.jsx، لأننا نستخدم مشروع Vite. ومع ذلك، دعنا ننفذ الخطوات.

قم بتثبيت الحزمة:

$ npm install parse

بعد ذلك، قم بتعديل main.jsx قليلاً لتهيئة مثيل Parse:

// src/main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';
import Parse from 'parse';

Parse.initialize(
  '<parse-application-id>',  // replace me with your actual app id
  '<parse-javascript-key>',  // replace me with your actual js key
);
Parse.serverURL = 'https://parseapi.back4app.com/';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>,
);

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

منطق التطبيق

للمضي قدمًا، اطلب من الوكيل إنشاء منطق التطبيق الفعلي:

Write me the code for `EventList.jsx`, `EventDetails.jsx`, and `EventsByVenue.jsx`. 
Use Parse to fetch the required information. I want each page to have a `loading`
and `error` state.

سيوفر وكيل الذكاء الاصطناعي الرمز لكل مسار من المسارات. إليك مثال على ذلك

// src/components/EventList.jsx

import {useEffect, useState} from 'react';
import {Link} from 'react-router-dom';
import Parse from 'parse';

const EventsList = () => {

  const [events, setEvents] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const eventObject = Parse.Object.extend('Event');
    const query = new Parse.Query(eventObject);

    query.find().then((results) => {
      const eventsData = results.map((event) => ({
        id: event.id,
        ...event.attributes,
      }));
      setEvents(eventsData);
      setLoading(false);
    }, (error) => {
      console.error('Error while fetching events', error);
      setError(error);
      setLoading(false);
    });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Event List</h1>
      <p>Here is a list of all the events.</p>
      <ul>
        {events.map((event) => (
          <li key={event.id}>
            <Link to={`/${event.id}`}>
              {event.name}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default EventsList;

انسخ الكود والصقه في EventsList.jsx. ثم قم بتغيير الملفين الآخرين وفقًا لذلك:

1. EventDetails.jsx
2. EventsByVenue.jsx

بمجرد الانتهاء من ذلك، تكتمل الواجهة الأمامية بشكل أو بآخر. ابدأ تشغيل خادم التطوير:

$ npm run dev

افتح متصفح الويب المفضل لديك وانتقل إلى http://localhost:5173/. سترى أن البيانات يتم جلبها الآن من الواجهة الخلفية. حاول النقر لمعرفة ما إذا كان كل شيء يعمل.

الإرساء

سنستخدم Back4pp Containers، وهي منصة CaaS مجانية الاستخدام، لنشر واجهتنا الأمامية. كما يوحي الاسم، تُستخدم المنصة لنشر الحاويات؛ وبالتالي، لنشر واجهتنا الأمامية، يجب أن نقوم بإرساءها أولاً.

أنشئ ملف Dockerfile في جذر المشروع هكذا:

# Dockerfile

FROM node:18-alpine3.17 as build

WORKDIR /app
COPY . /app

RUN npm install
RUN npm run build

FROM ubuntu

RUN apt-get update
RUN apt-get install nginx -y

COPY --from=build /app/dist /var/www/html/

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

يستخدم Dockerfile هذا Dockerfile إنشاءات متعددة المراحل. يتألف من مرحلتين، مرحلة الإنشاء ومرحلة التشغيل.

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

ولتقليل حجم الصورة، يمكننا أيضًا تحديد ملف .dockerignore:

# .dockerignore

.idea/

node_modules/
out/
build/

تأكد من تكييف ملف .dockerignore وفقًا لذلك .

قبل نشر صورة Docker، من الحكمة اختبارها محلياً.

أنشئ صورة Docker:

$ docker build -t back4app-events:1.0 .

قم بتشغيل حاوية باستخدام الصورة التي تم إنشاؤها حديثاً:

$ docker run -it -p 80:80 back4app-events:1.0

يجب أن يكون تطبيق الويب الخاص بك متاحاً على http://localhost/.

رمز الدفع

تم دمج حاويات Back4app Containers بإحكام مع GitHub. لنشر التعليمات البرمجية الخاصة بك عليه، يجب عليك أولاً دفعها إلى مستودع GitHub البعيد.

أولاً، انتقل إلى GitHub وأنشئ مستودعًا جديدًا. قم بتدوين عنوان URL البعيد، على سبيل المثال:

git@github.com:<username>/<repository-name>.git

Example:
git@github.com:duplxey/back4app-ai-agent.git

بعد ذلك، قم بتهيئة Git، و VCS جميع الملفات، والتزم بها:

$ git init
$ git add .
$ git commit -m "project init"

استخدم جهاز التحكم عن بُعد من الخطوة السابقة لدفع الرمز:

$ git remote add origin <your_remote_url>
$ git push origin master

يجب أن يتم عرض ملفاتك في ريبو GitHub إذا كنت قد فعلت كل شيء بشكل صحيح.

نشر الكود

بمجرد وضع الكود على GitHub، يمكننا نشره بسرعة عن طريق مطالبة وكيل الذكاء الاصطناعي:

Connect to my "<username>/<repository-name>" repository on GitHub and deploy it to Back4app Containers.

انتظر بضع دقائق حتى يتم نشر المشروع.

بمجرد أن تصبح جاهزاً، انقر على عنوان URL الخاص بالتطبيق وتأكد من أن كل شيء يعمل من خلال اختبار التطبيق.

الخاتمة

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

على الرغم من أننا لم نكتب الكثير من التعليمات البرمجية بشكل مستقل، إلا أن الكثير من المعرفة التقنية كانت لا تزال مطلوبة.

يمكن لـ Back4app Agent، بالاشتراك مع أدوات أخرى قائمة على الذكاء الاصطناعي مثل GitHub Copilot، تسريع عملية التطوير بشكل كبير.

يتيح لك استخدامها أتمتة المهام العادية والمتكررة والتركيز على الأشياء الأكثر إثارة.

احصل على الكود المصدري النهائي من مستودع Back4app-ai-agent GitHub.