تعلم كيفية بناء تطبيق ويب بسيط مدعوم بالذكاء الاصطناعي باستخدام 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 لاستخدامه في أجزاء أخرى من تطبيقك.