في هذا المقال، سنتعلم طريقة ربط تطبيق Flutter مع Gemini AI. وسنستكشف كيفية استخدام Gemini API لتحسين تطبيقات Flutter الخاصة بنا باستخدام الذكاء الاصطناعي الجيل الجديد. سنتمكن من تضمين ميزات Gemini في التطبيقات التي نبنيها، مثل إنشاء محادثات ذكية وإضافة وظائف تحليل الصور والنص وغيرها.
الخطوة 1: الحصول على API_KEY
أول خطوة نحتاج إليها هي الحصول على API_KEY من Google AI Studio. يمكننا استخدام هذا المفتاح للاتصال بخدمة Gemini API. يمكن الحصول على المفتاح عن طريق التسجيل في Google AI Studio ومتابعة الإرشادات الموجودة هناك.
“اقرأ أيضاً: التنقل بين الصفحات في فلاتر: Navigation & Routing“
الخطوة 2: إضافة حزمة google_generative_ai للمشروع
بعد الحصول على API_KEY، يمكننا إضافة حزمة google_generative_ai إلى مشروعنا في Flutter. يمكننا القيام بذلك باستخدام الأمر التالي في تطبيق Flutter:
dart pub add google_generative_ai
أو باستخدام الأمر التالي إذا كنت تستخدم Flutter:
flutter pub add google_generative_ai
“اقرأ أيضاً: شرح استخدام Share_Plus في Flutter“
الخطوة 3: استخدام حزمة google_generative_ai
بعد إضافة حزمة google_generative_ai للمشروع، يمكننا الآن استخدامها في تطبيقنا. يمكننا استيراد الحزمة باستخدام الأمر التالي:
import 'package:google_generative_ai/google_generative_ai.dart';
ثم يمكننا استخدام الحزمة للتفاعل مع Gemini API في تطبيقنا. هنا مثال بسيط على كيفية استخدامها:
const apiKey = 'YOUR_API_KEY';
void main() async {
final model = GenerativeModel(model: 'gemini-pro', apiKey: apiKey);
final prompt = 'Write a story about a magic backpack.';
final content = [Content.text(prompt)];
final response = await model.generateContent(content);
print(response.text);
}
“اقرأ أيضاً: شرح استخدام ويدجت Container في فلاتر“
مثال: طريقة عمل بوت محادثة مع Gemini AI
لقد قمت برفع المشروع كامل على GitHub وسنقوم بشرحه هنا، في بداية الكود ، يتم استيراد المكتبات اللازمة من حزم Flutter وهي:
material.dart: تحتوي على واجهات ومكونات تصميم المواد (Material Design) في Flutter.services.dart: توفر واجهات للتعامل مع خدمات النظام في Flutter.flutter_markdown.dart: تستخدم لعرض النصوص المنسقة باستخدام تنسيق Markdown.google_generative_ai.dart: تحتوي على واجهات للتواصل مع خدمة Google Generative AI.dart:io: تستخدم للتعامل مع عمليات الملفات والمجلدات في نظام التشغيل.image_picker.dart: تستخدم لاختيار الصور من معرض الصور أو التقاطها باستخدام الكاميرا.
ثم يتم تعريف الدالة main() التي تقوم بتشغيل التطبيق وعرض MyApp كواجهة المستخدم الأولية.
قمنا بعمل الكلاس MyApp هو واجهة المستخدم الأولية للتطبيق. ويتم استخدام MaterialApp كمظهر للتطبيق ويحتوي على عنوان وشريط التطبيق ومحتوى التطبيق الرئيسي الممثل بكلاس ChatWidget الذي يتم تمرير API_KEY إليه.
الكلاس ChatWidget هو واجهة المستخدم التي تحتوي على مربع الدردشة. يحتوي على API_KEY الذي يأتي من كلاس MyApp.
الكلاس _ChatWidgetState هو حالة واجهة المستخدم ChatWidget. يحتوي على متغيرات ودوال لإدارة حالة واجهة المستخدم والتفاعل مع المستخدم. قمنا بانشاء دالة initState() لإعداد Gemini AI وبدء جلسة الدردشة. ودالة build() تستخدم لإنشاء وترتيب مكونات واجهة المستخدم لصندوق الدردشة.
الكلاس MessageWidget هو ويدجت يستخدم لعرض رسائل الدردشة. يأخذ صورة ونص ومتغير لتحديد إذا ما كانت الرسالة من المستخدم أو الذكاء الاصطناعي. يتم استخدامه في دالة build() لبناء وعرض ويدجت Card يحتوي على الصورة والنص.
تستخدم دالة _sendChatMessage() لإرسال رسالة جديدة إلى صندوق الدردشة عند النقر على زر “إرسال” وإضافة الرسالة الجديدة إلى قائمة الرسائل وتحديث واجهة المستخدم.
يمكنك الحصول على المشروع كامل على GitHub من هنا، ولكن يجب التأكد من اضافة الـ API_KEY الخاص بك بعد الحصول عليه كما شرحنا في الخطوه الأولى.
يرجى العلم أن الحصول على الـ API_KEY واستخدامه سيكون مجاني حتى تاريخ 1/5/2024 وبعد ذلك سيتم محاسبتك حسب الاستخدام لخدمة Gemini API.
“اقرأ أيضاً: 10 تمارين محلولة على Null Safety في لغة دارت Dart“
الأخطاء المحتملة عند تنفيذ الكود:
- عدم توفر الـ API_KEY الصحيح لخدمة Google Generative AI.
- عدم تضمين Permission إذن بالوصول إلى الكاميرا أو معرض الصور في ملف
AndroidManifest.xmlأوInfo.plist. - عدم تضمين حزم Flutter اللازمة في ملف
pubspec.yaml. - عدم الوصول إلى الخدمات اللازمة، مثل الإنترنت أو خدمات Google.
- إمكانية حدوث أخطاء في استدعاء الواجهات المستخدمة، مثل
GoogleGenerativeAIأوImagePicker.
“اقرأ أيضاً: شرح عمل شريط تنقل مخصص“
بهذا نكون قد تعلمنا كيفية ربط تطبيق Flutter مع Gemini AI. يمكننا الآن استغلال قوة Gemini API وتضمين الذكاء الاصطناعي في تطبيقاتنا المبنية بواسطة Flutter. الرجاء ملاحظة أنه يجب الحفاظ على سرية الـ API_KEY وعدم تضمينه مباشرة في التطبيقات حتى لا يتم استخدامه دون علمك.
