مبتدئ
⏱ قراءة لمدة ٤٥ دقيقة
© بوابة الذكاء الاصطناعي ٢٠٢٦-٠٤-٠٧
تعلم كيفية بناء تطبيق ويب بسيط مدعوم بالذكاء الاصطناعي باستخدام Next.js وOpenAI’s API وFirebase. سيقدم لك هذا المشروع كيفية دمج الذكاء الاصطناعي مع أطر تطوير الويب الحديثة.
المتطلبات الأساسية
- Node.js v١٦.٠.٠ أو أعلى
- Next.js v١٢.٠.٠ أو أعلى
- مفتاح OpenAI API
- حساب Firebase مع تمكين Firestore
- فهم أساسي لـ JavaScript وReact
ما الذي نبنيه
في هذا الدرس، ستقوم بإنشاء تطبيق ويب بسيط مدعوم بالذكاء الاصطناعي باستخدام Next.js. سيمكن التطبيق المستخدمين من إدخال الأسئلة، والتي سيتم معالجتها بعد ذلك بواسطة OpenAI’s API لتوليد الردود. سيتم تخزين هذه الردود في Firestore الخاص بـ Firebase، وسيتمكن المستخدمون من عرض وإدارة هذه الردود من خلال واجهة مستخدم متجاوبة مصممة باستخدام Tailwind CSS.
يوضح المشروع كيفية دمج الذكاء الاصطناعي في حزمة ويب حديثة، مما يوفر رؤى عملية حول استخدام APIs وإدارة الحالة باستخدام Firestore وإنشاء واجهة مستخدم سهلة الاستخدام. بنهاية هذا الدرس، سيكون لديك تطبيق وظيفي وفهم أعمق لكيفية تحسين الذكاء الاصطناعي لتطبيقات الويب.
الإعداد والتثبيت
أولاً، سنقوم بإعداد مشروع Next.js جديد وتثبيت التبعيات اللازمة. يتضمن ذلك Tailwind CSS للتصميم وFirebase لإدارة قواعد البيانات وAxios لإجراء طلبات API.
npx create-next-app ai-nextjs-app
cd ai-nextjs-app
npm install tailwindcss firebase axiosبعد ذلك، قم بتكوين Tailwind CSS عن طريق إنشاء ملف تكوين واستيراده إلى مشروعك.
npx tailwindcss initقم بإنشاء ملف .env.local لتخزين متغيرات البيئة الخاصة بك، بما في ذلك مفتاح OpenAI API وتفاصيل تكوين Firebase.
OPENAI_API_KEY=your_openai_api_key
FIREBASE_API_KEY=your_firebase_api_key
FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
FIREBASE_PROJECT_ID=your_project_id
FIREBASE_STORAGE_BUCKET=your_project_id.appspot.com
FIREBASE_MESSAGING_SENDER_ID=your_sender_id
FIREBASE_APP_ID=your_app_idالخطوة ١: إعداد Firebase
سيتم استخدام Firebase لتخزين وإدارة الردود المولدة بواسطة الذكاء الاصطناعي. سنقوم بإعداد Firestore، وهي قاعدة بيانات مرنة وقابلة للتوسع لتطوير التطبيقات المحمولة والويب والخوادم من Firebase ومنصة Google Cloud.
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';const firebaseConfig = {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.FIREBASE_APP_ID
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
export { db };
يقوم هذا الكود بتهيئة Firebase باستخدام التكوين الخاص بك وإعداد Firestore. يتم تصدير مثيل قاعدة البيانات db لاستخدامه في أجزاء أخرى من تطبيقك.
الخطوة ٢: إنشاء واجهة المستخدم
سنستخدم Tailwind CSS لإنشاء واجهة مستخدم بسيطة ومتجاوبة. ستتضمن هذه الواجهة نموذجًا للمستخدمين لإدخال أسئلتهم وقسمًا لعرض الردود المولدة بواسطة الذكاء الاصطناعي.
import React, { useState } from 'react';
import { db } from './firebase';
import { collection, addDoc } from 'firebase/firestore';function App() {
const [question, setQuestion] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
try {
const docRef = await addDoc(collection(db, 'questions'), { question });
console.log('Document written with ID: ', docRef.id);
} catch (e) {
console.error('Error adding document: ', e);
}
};
return (
<div className="container mx-auto p-4">
<form onSubmit={handleSubmit}>
<input type="text" value={question} onChange={(e) => setQuestion(e.target.value)} className="border p-2 w-full" />
<button type="submit" className="bg-blue-500 text-white p-2 mt-2">Submit</button>
</form>
</div>
);
}
export default App;
يحدد هذا المكون نموذجًا حيث يمكن للمستخدمين إدخال أسئلتهم. عند الإرسال، تتم إضافة السؤال إلى قاعدة بيانات Firestore. تُستخدم فئات Tailwind CSS لتصميم النموذج والزر، مما يوفر تصميمًا متجاوبًا.
الخطوة ٣: دمج OpenAI’s API
في هذه الخطوة، سنقوم بدمج OpenAI’s API لمعالجة أسئلة المستخدمين وتوليد الردود. سنستخدم Axios لإجراء طلبات HTTP إلى API.
import axios from 'axios';
import { useEffect, useState } from 'react';
import { collection, query, onSnapshot } from 'firebase/firestore';
import { db } from './firebase';function Responses() {
const [responses, setResponses] = useState([]);
useEffect(() => {
const q = query(collection(db, 'questions'));
const unsubscribe = onSnapshot(q, (querySnapshot) => {
const data = [];
querySnapshot.forEach((doc) => {
data.push({ ...doc.data(), id: doc.id });
});
setResponses(data);
});
return () => unsubscribe();
}, []);
const generateResponse = async (question) => {
try {
const response = await axios.post('https://api.openai.com/v1/engines/davinci-codex/completions', {
prompt: question,
max_tokens: 150
}, {
headers: {
'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`
}
});
console.log(response.data.choices[0].text);
} catch (error) {
console.error('Error fetching AI response:', error);
}
};
return (
<div>
{responses.map((resp) => (
<div key={resp.id}>
<p>{resp.question}</p>
<button onClick={() => generateResponse(resp.question)}>Get AI Response</button>
</div>
))}
</div>
);
}
export default Responses;
يستمع هذا المكون للأسئلة الجديدة المضافة إلى Firestore ويعرضها. يمكن للمستخدمين النقر على زر لجلب الردود المولدة بواسطة الذكاء الاصطناعي لكل سؤال. يتم تسجيل الردود في وحدة التحكم، ولكن يمكنك توسيع ذلك لعرضها في واجهة المستخدم.
اختبار تنفيذك
لاختبار تنفيذك، قم بتشغيل تطبيق Next.js الخاص بك وتفاعل مع النموذج. أدخل بعض الأسئلة وتأكد من ظهورها في Firestore. انقر على زر “Get AI Response” وتحقق من وحدة التحكم للحصول على الردود المولدة بواسطة الذكاء الاصطناعي.
npm run devافتح متصفحك وانتقل إلى http://localhost:3000 لعرض تطبيقك. تحقق من أن الأسئلة مخزنة في Firestore وأن الردود المولدة بواسطة الذكاء الاصطناعي يتم إنشاؤها بشكل صحيح.
ما الذي تبنيه بعد ذلك
- حسّن واجهة المستخدم لعرض الردود المولدة بواسطة الذكاء الاصطناعي مباشرة في التطبيق بدلاً من تسجيلها في وحدة التحكم.
- قم بتنفيذ المصادقة باستخدام Firebase لتقييد الوصول إلى ميزات معينة من تطبيقك.
- أضف معالجة الأخطاء وحالات التحميل لتحسين تجربة المستخدم عند التفاعل مع API.