استخدام Genkit في تطبيق Angular

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

توضّح هذه الصفحة كيفية استخدام مسارات Genkit في تطبيقات Angular.

قبل البدء

يجب أن تكون على دراية بمفهوم عمليات التنقّل في Genkit وكيفية كتابة هذه العمليات.

إنشاء مشروع Angular

سيستخدم هذا الدليل تطبيق Angular مع المعالجة التفاعلية للطلبات مع توجيه الخادم.

يمكنك إنشاء مشروع جديد باستخدام ميزة التوجيه من جهة الخادم باستخدام Angular CLI:

ng new --ssr --server-routing

يمكنك أيضًا إضافة التوجيه من جهة الخادم إلى مشروع حالي باستخدام الأمر ng add:

ng add @angular/ssr --server-routing

تثبيت تبعيات Genkit

ثبِّت تبعيات Genkit في تطبيق Angular بالطريقة نفسها التي تُثبِّت بها أي مشروع Genkit:

1. ثبِّت مكتبة Genkit الأساسية:

   npm i --save genkit

2. ثبِّت مكوّنًا إضافيًا واحدًا على الأقل لنموذج.

   على سبيل المثال، لاستخدام تكنولوجيات الذكاء الاصطناعي من Google:

   npm i --save @genkit-ai/googleai

   لاستخدام Vertex AI:

   npm i --save @genkit-ai/vertexai

3. ثبِّت مكتبة Genkit Express:

   npm i --save @genkit-ai/express

4. تثبيت Zod:

   npm i --save zod

5. إذا لم يتم تثبيت Genkit CLI بشكل عام، يمكنك تثبيته كأحد ملفّات الاعتماد اللازمة لتطوير التطبيقات. ننصح أيضًا باستخدام أداة tsx، لأنّها تسهّل اختبار الرمز البرمجي. ومع ذلك، كلا المكوّنين الإضافيَين اختياريَين.

   npm i --save-dev genkit-cli tsx

تحديد مسارات Genkit

أنشئ ملفًا جديدًا في مشروع Angular يحتوي على مسارات Genkit: على سبيل المثال، src/genkit.ts. يمكن أن يحتوي هذا الملف على مسارات الإحالات الناجحة بدون تعديلها.

على سبيل المثال:

import { gemini20Flash, googleAI } from "@genkit-ai/googleai";
import { genkit } from "genkit";
import { z } from "zod";

const ai = genkit({
  plugins: [googleAI()],
  model: gemini20Flash,
});

export const menuSuggestionFlow = ai.defineFlow(
  {
    name: "menuSuggestionFlow",
    inputSchema: z.string(),
    outputSchema: z.string(),
  },
  async (restaurantTheme) => {
    const { text } = await ai.generate(
      `Invent a menu item for a ${restaurantTheme} themed restaurant.`
    );
    return text;
  }
);

إضافة مسارات الخادم

أضِف عمليات الاستيراد التالية إلى src/server.ts:

import { expressHandler } from '@genkit-ai/express';
import { menuSuggestionFlow } from './genkit';

أضِف السطر التالي بعد تهيئة المتغيّر app:

app.use(express.json());

بعد ذلك، أضِف مسارًا لعرض مسار الإحالة الناجحة:

app.post('/menu', expressHandler(menuSuggestionFlow));

استدعاء مسارات الإحالات الناجحة

يمكنك الآن تنفيذ مسارات الإحالة الناجحة من تطبيق العميل.

على سبيل المثال، يمكنك استبدال محتوى src/app/app.component.ts بما يلي:

import { Component, resource, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { runFlow } from 'genkit/beta/client';

@Component({
  selector: 'app-root',
  imports: [FormsModule],
  templateUrl: './app.component.html',
})
export class AppComponent {
  menuInput = '';
  theme = signal('');

  menuResource = resource({
    request: () => this.theme(),
    loader: ({request}) => runFlow({ url: 'menu', input: request })
  });
}

عليك إجراء التعديلات المناسبة على src/app/app.component.html:

<h3>Generate a custom menu item</h3>
<input type="text" [(ngModel)]="menuInput" />
<button (click)="this.theme.set(menuInput)">Generate</button>
<br />
@if (menuResource.isLoading()) {
  Loading...
} @else {
  <pre>{{menuResource.value()}}</pre>
}

اختبار تطبيقك على الجهاز

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

بعد ذلك، يمكنك تشغيل تطبيقك على الجهاز كالمعتاد:

ng serve

تستمر جميع أدوات تطوير Genkit في العمل كالمعتاد. على سبيل المثال، لتحميل مسارات الإحالات الناجحة في واجهة مستخدم المطوّر:

npx genkit start -- ng serve

نشر تطبيقك

عند نشر تطبيقك، عليك التأكّد من توفّر بيانات الاعتماد لأي خدمات خارجية تستخدمها (مثل خدمة واجهة برمجة التطبيقات التي اخترتها لعرض النماذج) للتطبيق المنشور. اطّلِع على الصفحات التالية للحصول على معلومات خاصة بمنصّة النشر التي اخترتها:

• وظائف السحابة الإلكترونية لبرنامج Firebase
• Cloud Run
• منصات Node.js الأخرى

الخطوات التالية

• استكشاف Genkit في تطبيق Angular مُنشَط: اطّلِع على عملية تنفيذ مرجعية لمخططات Genkit المتعددة التي تشغِّل تطبيق Angular، ثم انتقِل إلى الرمز البرمجي في Firebase Studio.