واکشی داده ها در مسیر ‘/برنامه ها در بستر منبع باز ACI.DEV.

در این مقاله ، ما قصد داریم Layer API را در مسیر /برنامه ها در پلت فرم ACI.DEV بررسی کنیم. ما نگاه خواهیم کرد:

1. یافتن مسیر /برنامه ها

2. پوشه برنامه ها

3. لایه API در برنامه ها/page.tsx

مسیر این /برنامه ها صفحه ای را که در زیر به نظر می رسد بارگیری می کند:

ACI.DEV بستر منبع باز است که عوامل AI شما را به ادغام ابزار 600+ با AUTH چند مستاجر ، مجوزهای دانه ای و دسترسی از طریق تماس با عملکرد مستقیم یا یک سرور MCP یکپارچه متصل می کند.

یافتن مسیر /برنامه ها

ACI.DEV منبع باز است ، می توانید کد آنها را در Aipotheosis-LABS/ACI پیدا کنید. این پایگاه کد دارای ساختار پروژه زیر است:

1. برنامه

2. پشت

3. جبهه

جبهه

aci.dev با استفاده از next.js ساخته شده است ، من معمولاً این موضوع را با جستجوی Next.config.ts در ریشه پوشه جلوی آن تأیید می کنم.

و وجود دارد src پوشه و app پوشه درون این src پوشه این بدان معنی است که این پروژه با استفاده از روتر برنامه ساخته شده است.

از اینجا به بعد ، پیدا کردن مسیر /برنامه های بسیار آسان را آسان می کند زیرا این یک پوشه خواهد بود ، با توجه به نحوه کار روتر برنامه در Next.js

پوشه برنامه ها را در تصویر بالا پیدا خواهید کرد.

پوشه برنامه ها

پوشه برنامه ها ساختار زیر را دارد:

1. [appName]- پوشه

2. page.tsx- پرونده

لایه API در برنامه ها/page.tsx

در برنامه ها/page.tsx ، قطعه کد زیر را پیدا خواهید کرد که داده ها را بدست می آورد.

// TODO: implement pagination once we have a lot of apps
useEffect(() => {
  async function loadApps() {
    setLoading(true);
    try {
      const apiKey = getApiKey(activeProject);
      const apps = await getAllApps(apiKey);

      setApps(apps);
    } catch (error) {
      console.error("Error fetching apps:", error);
    } finally {
      setLoading(false);
    }
  }
  loadApps();
}, [activeProject]);

بار

async function loadApps() {
    setLoading(true);
    try {
      const apiKey = getApiKey(activeProject);
      const apps = await getAllApps(apiKey);

      setApps(apps);
    } catch (error) {
      console.error("Error fetching apps:", error);
    } finally {
      setLoading(false);
    }
  }

LoadApps بارگیری را به True تنظیم می کند و برای GetApikey تماس می گیرد و از آن استفاده می کند که Apikey به عنوان یک پارام در متغیر GetAllApps و Apps به روز می شود. BTW ، این /apps/page.tsx مؤلفه مشتری است زیرا در بالای پرونده “از مشتری” استفاده می کند.

گلی

GetApikey همانطور که در زیر مشاهده می شود وارد می شود:

import { getApiKey } from "@/lib/api/util";

و کد زیر را از Lib/API/UTIL.TS انتخاب کرده است

export async function getAllApps(apiKey: string): Promise<App[]> {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/v1/apps`, {
    method: "GET",
    headers: {
      "X-API-KEY": apiKey,
    },
  });

  if (!response.ok) {
    throw new Error(
      `Failed to fetch app: ${response.status} ${response.statusText}`,
    );
  }

  const apps = await response.json();
  return apps;
}

آنها از یک ساده استفاده می کنند fetch برای به دست آوردن کلید API؟ جالب

getAllapps

GetApikey همانطور که در زیر مشاهده می شود وارد می شود:

import { getAllApps } from "@/lib/api/app";

و کد زیر را از Lib/API/UTIL.TS انتخاب کرده است

export async function getAllApps(apiKey: string): Promise<App[]> {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/v1/apps`, {
    method: "GET",
    headers: {
      "X-API-KEY": apiKey,
    },
  });

  if (!response.ok) {
    throw new Error(
      `Failed to fetch app: ${response.status} ${response.statusText}`,
    );
  }

  const apps = await response.json();
  return apps;
}

در اینجا آنها نیز از یک واکشی ساده استفاده می کنند.

درباره من:

سلام ، نام من رامو ناراسینگا است. من پروژه های بزرگ منبع باز را مطالعه می کنم و در مورد معماری پایگاه کد آنها و بهترین شیوه ها مطالب ایجاد می کنم و آن را از طریق مقاله ، فیلم به اشتراک می گذارم.

ویژگی هایی مانند Changesets ، احراز هویت supabase را در پروژه بعدی خود با استفاده از آن پیکربندی کنید فکر کنبشر

سوالات تجاری – ramu@thinkthroo.com

GitHub من-https://github.com/ramu-narasinga

وب سایت من – https://ramunarasinga.com

کانال یوتیوب من-https://www.youtube.com/@ramu-narasinga

پلت فرم یادگیری – https://thinkthroo.com

معماری پایگاه کد – https://app.thinkthroo.com/architecture

بهترین روشها-https://app.thinkthroo.com/best-practices

پروژه های درجه تولید-https://app.thinkthroo.com/production-prade-projects

منابع:

1. https://platform.aci.dev/apps

2. https://github.com/aipotheosis-labs/aci/blob/main/frontend/src/app/apps/page.tsx

3. https://github.com/aipotheosis-labs/aci/blob/main/frontend/src/lib/api/util.ts#l3

4. https://github.com/aipotheosis-labs/aci/blob/main/frontend/src/lib/api/app.ts#l3