軟體開發領域的發展速度比以往任何時候都快。為了保持領先地位，您必須使用面向未來的工具和技術來武裝自己。

我整理了一份必須了解的開源工具列表，以幫助您建立經得起時間考驗的應用程式。

1. Composio 👑：AI 自動化的終極平台

我們正在見證人工智慧領域前所未有的發展。對我來說，這就像 20 世紀 90 年代的網路熱潮。 Google、OpenAI、微軟等大公司都在人工智慧的未來上投入了數十億美元。

Composio 是建構複雜人工智慧自動化軟體所需的唯一工具。它允許人工智慧模型存取第三方工具和應用程式，以自動化與它們的交互作用。

🎯 例如，您可以透過 Composio 將 GitHub 與 GPT 模型連接起來，並自動審查 PR、解決問題、編寫測試案例等。

它包含 90 多種工具和集成，例如 GitHub、Jira、Slack 和 Gmail，用於自動化複雜的現實工作流程。

此外，您甚至可以整合您的應用程式，只需將應用程式的 OpenAPI 規格新增至 Composio 即可讓 AI 執行發送電子郵件、模擬點擊、下訂單等操作。

它們原生支援 Python 和 Javascript。

您可以透過使用pip安裝 Composio 來快速開始使用它。

pip install composio-core

新增 GitHub 整合。

composio add github

Composio 代表您處理使用者身份驗證和授權。

以下是如何使用 GitHub 整合來為儲存庫加註星標。

from openai import OpenAI
from composio_openai import ComposioToolSet, App

openai_client = OpenAI(api_key="******OPENAIKEY******")

# Initialise the Composio Tool Set
composio_toolset = ComposioToolSet(api_key="**\\*\\***COMPOSIO_API_KEY**\\*\\***")

## Step 4
# Get GitHub tools that are pre-configured
actions = composio_toolset.get_actions(actions=[Action.GITHUB_ACTIVITY_STAR_REPO_FOR_AUTHENTICATED_USER])

## Step 5
my_task = "Star a repo ComposioHQ/composio on GitHub"

# Create a chat completion request to decide on the action
response = openai_client.chat.completions.create(
model="gpt-4-turbo",
tools=actions, # Passing actions we fetched earlier.
messages=[
    {"role": "system", "content": "You are a helpful assistant."},
    {"role": "user", "content": my_task}
  ]
)

執行此 Python 腳本以使用代理程式執行給定的指令。

執行程式碼並讓代理程式為您完成工作。

有關更多訊息，請存取官方文件，有關更複雜的示例，請參閱存儲庫的示例部分。

{% cta https://dub.composio.dev/qlfiAZQ %}為 Composio 儲存庫加註星標 ⭐{% endcta %}

2. Postiz - 使用 AI 擴大您的網路影響力

建立產品是一回事，但獲得用戶和客戶則是另一回事。開發人員常常忘記他們仍然必須行銷他們的產品並建立社群來維持業務。

Postiz 使用人工智慧幫助您加強社群媒體遊戲。

它提供了管理社交媒體貼文、建立受眾群體、捕獲潛在客戶和發展業務所需的一切。

查看儲存庫以了解更多資訊。

{% cta https://github.com/gitroomhq/postiz-app %}為 Encore 儲存庫加註星標 ⭐{% endcta %}

3. Encore - 用於健全且類型安全的應用程式的後端框架

雲端服務非常適合建立可擴展的應用程式。然而，複雜的基礎架構管理、不一致的 API 和分散的 DevOps 流程很快就會變得混亂。

Encore 透過提供整合類型安全後端框架、自動基礎架構配置和 DevOps 自動化的統一開發平台來簡化這種混亂情況。

t 在 Golang 和 Typescript 都可使用。

透過安裝 CLI 開始使用 Encore。

curl -L https://encore.dev/install.sh | bash

建立一個應用程式。

encore app create

這將配置您的免費帳戶，允許您選擇應用程式的名稱，並選擇Hello World範本。

這將使用您選擇的應用程式名稱在新資料夾中建立具有簡單 REST API 的範例應用程式。

在編輯器中開啟該檔案。

// Service hello implements a simple hello world REST API.
package hello

import (
    "context"
)

// This simple REST API responds with a personalized greeting.
//
//encore:api public path=/hello/:name
func World(ctx context.Context, name string) (*Response, error) {
    msg := "Hello, " + name + "!"
    return &Response{Message: msg}, nil
}

type Response struct {
    Message string
}

有關更多訊息，請參閱他們的文件。

{% cta https://github.com/encoredev/encore %}為 Encore 儲存庫加註星標 ⭐{% endcta %}

4. Tolgee - 在地化和翻譯平台

要發展您的應用程式，您必須覆蓋來自不同國家/地區的用戶。然而，管理翻譯和在地化內容可能具有挑戰性。這就是您需要像 Tolgee 這樣的平台的地方。

他們提供了專用的 JS-SDK，您可以將其整合到您的 Web 應用程式中以本地化內容。它們還提供了一些有用的功能，例如上下文翻譯、自動螢幕截圖生成、審查翻譯等，以加快您的開發過程。

查看文件以了解更多資訊。

{% cta https://github.com/tolgee/tolgee-platform %}為 Tolgee 儲存庫加註星標 ⭐{% endcta %}

5. CopilotKit -將 AI 整合到您的 Web 應用程式中

如果您正在尋找將 AI 工作流程整合到您的 Web 應用程式中的便捷方法，那麼您的搜尋到此結束。 CopilotKit 是一款一體化應用程式，可將聊天機器人、文字自動完成等 AI 功能直接整合到您的應用程式中。

它提供文字區域、彈出視窗、側邊欄和聊天機器人等 React 元件，以透過 AI 功能增強任何應用程式。

讓我們看看如何使用 CopilotKit 建立人工智慧聊天機器人。

npm i @copilotkit/react-core @copilotkit/react-ui

配置應用程式提供者

首先，您必須使用<CopilotKit />提供者包裝與副駕駛互動的所有元件。

使用<CopilotSidebar /> UI 元件顯示 Copilot 聊天側邊欄。您可以選擇的其他一些選項是<CopilotPopup />和<CopilotChat /> 。

"use client";

import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";

export default function RootLayout({children}) {
  return (
    <CopilotKit publicApiKey="<your-public-api-key>">
      <CopilotSidebar>
        {children}
      </CopilotSidebar>
    </CopilotKit>
  );
}

副駕駛可讀狀態

為副駕駛提供狀態知識。

import { useCopilotReadable } from "@copilotkit/react-core";

export function YourComponent() {
  const { employees } = useEmployees();

  // Define Copilot readable state
  useCopilotReadable({
    description: "List of available users",
    value: users,
  });

  return (
    <>...</>
  );
}

副駕駛動作

讓 Copilot 使用useCopilotAction掛鉤執行操作。

import { useCopilotReadable, useCopilotAction } from "@copilotkit/react-core";

export function YourComponent() {
  const { employees, selectEmployee } = useEmployees();

  // Define Copilot readable state
  useCopilotReadable({
    description: "List of available users",
    value: users,
  });

  // Define Copilot action
  useCopilotAction({
    name: "Select an employee",
    description: "Select an employee from the list",
    parameters: [
      {
        name: "employeeId",
        type: "string",
        description: "The ID of the employee to select",
        required: true,
      }
    ],
    handler: async ({ employeeId }) => selectEmployee(employeeId),
  });

  return (
    <>...</>
  );
}

您可以查看他們的文件以獲取更多資訊。

{% cta https://github.com/CopilotKit/CopilotKit %}為 Copilotkit 儲存庫加註星標 ⭐{% endcta %}

6. D3 - 使用 SVG、Canvas 和 HTML 讓資料栩栩如生

在 JavaScript 中建立視覺化效果時，沒有比 D3 更好的替代方案了。 D3是一個免費的開源 JavaScript 函式庫，用於視覺化資料。其基於 Web 標準建置的低階方法在建立動態、資料驅動的圖形方面提供了無與倫比的靈活性。

Plotly 等流行的視覺化框架使用 D3 來繪製互動式圖表。

D3 可在任何 JavaScript 環境中運作。

透過安裝 D3 快速開始。

npm install d3

這是 React 中的折線圖範例。

import * as d3 from "d3";

export default function LinePlot({
  data,
  width = 640,
  height = 400,
  marginTop = 20,
  marginRight = 20,
  marginBottom = 20,
  marginLeft = 20
}) {
  const x = d3.scaleLinear([0, data.length - 1], [marginLeft, width - marginRight]);
  const y = d3.scaleLinear(d3.extent(data), [height - marginBottom, marginTop]);
  const line = d3.line((d, i) => x(i), y);
  return (
    <svg width={width} height={height}>
      <path fill="none" stroke="currentColor" strokeWidth="1.5" d={line(data)} />
      <g fill="white" stroke="currentColor" strokeWidth="1.5">
        {data.map((d, i) => (<circle key={i} cx={x(i)} cy={y(d)} r="2.5" />))}
      </g>
    </svg>
  );
}

查看使用 D3 建立的所有繪圖和圖表範例。

{% cta https://github.com/d3/d3 %}探索 D3 儲存庫 ⭐{% endcta %}

7. Biome - 網路工具鏈

Biome是一款快速且有效率的 Web 開發工具，專注於程式碼品質。它在一個工具中提供了 linting、格式化和編譯功能。

與 ESLlint 和 Prettier 相比，它旨在提供更好的效能、更低的資源使用率以及改進的開發人員體驗。

使用任何套件管理器安裝 Biome 即可開始使用它。

npm install --save-dev --save-exact @biomejs/biome

配置生物群落，

npx @biomejs/biome init

執行init指令後，您的目錄中將有一個新的biome.json檔案：

生物群系.json

{
  "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
  "vcs": {
    "enabled": false,
    "clientKind": "git",
    "useIgnoreFile": false
  },
  "files": { "ignoreUnknown": false, "ignore": [] },
  "formatter": { "enabled": true, "indentStyle": "tab" },
  "organizeImports": { "enabled": true },
  "linter": {
    "enabled": true,
    "rules": { "recommended": true }
  },
  "javascript": { "formatter": { "quoteStyle": "double" } }
}

linter.enabled: true啟用 linter， rules.recommended: true啟用推薦規則。這些對應於預設值。

查看文件以了解更多資訊。

{% cta https://github.com/biomejs/biome %}探索 Biome 儲存庫 ⭐{% endcta %}

8.繼續- 領先的人工智慧程式碼助手

您一定聽過 Cursor IDE，這是一款受歡迎的人工智慧 IDE； Continue 與它類似，但在 Apache 許可下開源。

它是高度可自訂的，允許您加入任何語言模型以進行自動完成或聊天。這可以極大地提高您的生產力。您可以將“Continue”新增至 VScode 和 JetBrains。

主要特點

• 聊天以理解和迭代側邊欄中的程式碼

• 自動完成以在您鍵入時接收內聯程式碼建議

• 編輯以修改程式碼而不離開當前文件

• 為日常用例建立快捷方式的操作

有關更多訊息，請查看文件。

{% cta https://github.com/continuedev/continue %}為Continue儲存庫加註星標 ⭐{% endcta %}

9. Godot Engine - 多平台2D和3D遊戲引擎

遊戲是一個很大的市場，根據多項調查，過去十年平均遊戲時間增加了數倍。如果您正在考慮遊戲開發，Godot 可能是一個很好的開始。

它是一個功能豐富的多平台遊戲引擎，用於透過統一的介面建立 2D 和 3D 遊戲。

使用 Godot 建立的遊戲可以輕鬆匯出到 Web、MacOS、Linux、Windows、Android、IOS 和控制台。借助遊戲引擎，您還可以建立計算密集型應用程式，例如照片編輯器、動畫等。

![戈多引擎

圖片](https://raw.githubusercontent.com/godotengine/godot-design/master/screenshots/editor\_tps\_demo\_1920x1080.jpg)

主要特點

• 它包括用於開發虛擬和擴增實境應用程式的工具。

• 它高效且輕量，適合獨立和小型專案。

• 存取不斷增長的免費社區資產庫。

• 跨平台。

有關更多訊息，請參閱他們的官方文件。

{% cta https://github.com/godotengine/godot %}探索 Godot 儲存庫 ⭐{% endcta %}

感謝您的閱讀。

原文出處：https://dev.to/nevodavid/9-must-know-open-source-tools-that-will-make-you-better-than-99-of-developers-g5b