10 款提升開發技能的高質量工具，AI + 可視化齊上陣

作者：前端新世界 2024-07-03 11:02:41

開發開發工具

大家都知道 Taipy 優秀，但很多人不知道的是，Taipy 可用于為基于 Python 的應用程序創建 GUI 界面并改進數據流管理。其中的關鍵是性能，因此 Taipy 是完美選擇。

越來越多的 AI 工具猶如雨后春筍般層出不窮，它們正以迅雷不及掩耳之勢改變世界。

于是乎，開發人員的學習任務更加繁重了。在眼花繚亂的各種選擇中，高質量的工具能更加節省時間和精力。那么，怎么挑選呢？

今天我們要介紹 10 種開發工具，可以幫助我們大大提升開發技能，改善開發體驗。

相信我，這些工具絕對大有裨益！

一起來看看吧。

1. Taipy - 將數據和 AI 算法集成到生產就緒的 web 應用程序

圖片

Taipy 是開源的 Python 庫，用于端到端的應用開發，具有假設分析、智能管道執行、內置調度和部署工具。

大家都知道 Taipy 優秀，但很多人不知道的是，Taipy 可用于為基于 Python 的應用程序創建 GUI 界面并改進數據流管理。

其中的關鍵是性能，因此 Taipy 是完美選擇。

Streamlit 也是非常常用的工具，但在處理大型數據集時，性能或會顯著下降，所以在生產級使用不切實際。

與此相比，Taipy 在不犧牲性能的情況下提供簡單易用性。如果你用過 Taipy，一定會為它友好的界面和高效的數據處理而贊嘆不已。

圖片

Taipy 有很多集成選項，可以毫不費力地與主要的數據平臺連接。

圖片

使用以下命令啟動。

pip install taipy

下面我們來談談最新的 Taipy v3.1 版本。已經了解的可以跳過。

這個最新版本使得在part對象中可視化 HTML 和 Python 對象成為可能。也意味著 Folium、Bokeh、Vega-Altair 和 Matplotlib 等庫現在均可用于可視化。

同時帶來了對 Plotly python 的原生支持，使繪制圖表變得更加容易。

此外，Taipy 通過分布式計算提高性能，它的所有依賴項都與 Python 3.12 完全兼容，因此你可以放心地在使用 Taipy 完成項目時使用最新的工具和庫。

閱讀文檔也不失為一個了解 Taipy的好方法。

圖片

還有一件必須說明的事是，Taipy 團隊提供了一個名為 Taipy Studio 的 VSCode 擴展來加速 Taipy 應用程序的構建。

Taipy Studio

還可以使用 Taipy 云部署應用程序。

也不用擔心自己學不會， Taipy 提供了 10+ 個演示教程，提供代碼和文檔供大家逐步學習和理解。

圖片

例如，一些項目創意如下：

實時污染儀表板

使用工廠周圍的傳感器測量空氣質量，這個用例展示了 Taipy 儀表板流數據的能力。

欺詐檢測

用于分析信用卡交易以檢測欺詐行為。

新冠儀表板

使用了 2020 年的新冠數據。頁面顯示有關新冠的不同圖表和信息。還有一個預測頁面，預測患病人數。

創建 LLM 聊天機器人

這個實例展示了 Taipy 能夠使用 LLM 運行推理的能力。使用 GPT-3 創建聊天機器人，在交互式聊天界面中顯示對話。

實時人臉識別

將人臉識別無縫集成到平臺，使用網絡攝像頭提供用戶友好的實時人臉檢測體驗。

這些都是非常棒的用例。

Taipy 在 GitHub 上有 8.2k+ 顆星，目前是 v3.1 版本，且一直在改進中。

2. DevToys - 開發人員的瑞士軍刀

圖片

DevToys 幫助完成日常開發任務，例如格式化 JSON、比較文本和測試 RegExp。

有了 DevToys，就沒有必要使用不可信的網站來執行簡單的數據任務操作。DevToys 是檢測復制到 Windows 剪貼板數據的最佳工具。

因為可以做到窗口疊層，所以可以縮小應用程序，甚至放置于其他窗口上層。最妙的是可以同時使用多個實例。

我可以肯定地說，很多開發人員甚至不知道這個很棒的項目。

劃重點，這是一款專為 Windows 生態系統設計的軟件哦！

圖片

所提供的一些工具包括：

轉換器

JSON <> YAML
時間戳
Number Base
Cron 解析器

圖片

編碼器/解碼器

HTML
URL
Base64 文本和圖像
GZip
JWT解碼器

圖片

格式化程序

JSON
SQL
XML
XML

圖片

生成器

哈希（MD5、SHA1、SHA256、SHA512）
UUID 1 和 4
Lorem lpsum
檢查和

圖片

文本

Escape/ Unescape
檢查器和案例轉換器
正則表達式測試器
文本比較器
XML 驗證器
Markdown 預覽

圖片

圖形

色盲模擬器
拾色器和對比度
PNG / JPEG 編譯器
圖片轉換器

圖片

了解得越多，是不是越為DevToys所傾倒？錯過這么好用的一個工具就像是錯過了一個億！

DevToys在 GitHub 上有 23k 顆星，使用的是 C#。

3. Pieces – 工作流程副駕駛

圖片

Pieces 是支持 AI 的生產力工具，旨在通過智能代碼片段管理、情境化的副駕駛交互和主動顯示有用材料來幫助開發人員管理工作流程。

它最大限度地減少了上下文切換，簡化了工作流程，提升了整體開發體驗，同時通過完全離線的 AI 方法維護了工作的隱私和安全性。贊:D

圖片

Pieces可與我們喜歡的工具無縫集成，簡化和提升編碼流程。

它所能提供的功能遠不止這些：

通過閃電般的搜索體驗，可以根據自己的喜好按自然語言、代碼、標簽以及其他語義進行查詢。可以說這是“您的個人離線 Google”。
Pieces 使用 OCR 和 edge-ML 升級屏幕截圖，以便提取代碼、修復無效字符。因此可以獲得極其準確的代碼提取和深度元數據富集。

Pieces為 TypeScript、Kotlin、Python 和 Dart 的 Pieces OS 客戶端提供了一堆的 SDK 選項。

如果你讀到這兒還是覺得意猶未盡，那么還可以閱讀文檔訪問網站。

Pieces目前依然算是初出茅廬的新事物，但Pieces社區是我迄今為止見過的最好的社區之一。

加入Pieces，加入Pieces 社區！

4. Infisical – 機密管理平臺

圖片

作為一個開源的機密管理平臺，團隊使用Infisical來集中機密，如 API 密鑰、數據庫憑據和配置。

就個人而言，我并不介意使用.env文件，因為我這個人比較粗心，做不到時刻謹慎小心。

Infisical 提供了四個 SDK，分別用于 Node.js、Python、Java 和 .Net。你可以自行托管或使用他們的云。

使用以下npm命令啟動。

npm install @infisical/sdk

以下為入門方法（Node.js SDK）。

import { InfisicalClient, LogLevel } from "@infisical/sdk";

const client = new InfisicalClient({
    clientId: "YOUR_CLIENT_ID",
    clientSecret: "YOUR_CLIENT_SECRET",
    logLevel: LogLevel.Error
});

const secrets = await client.listSecrets({
    environment: "dev",
    projectId: "PROJECT_ID",
    path: "/foo/bar/",
    includeImports: false
});

圖片

Infisical 還提供了一組工具來自動防止秘密泄露到 git 歷史記錄。可以使用pre-commit鉤子在 Infisical CLI 級別設置此功能，也可以直接集成 GitHub 等平臺來設置此功能。

同樣的，如果想要詳細了解如何安裝 CLI，可以閱讀文檔。

Infisical 還可用于將機密注入 Kubernetes 集群以及自動部署，以便應用程序使用最新的機密。可用的集成選項也是相當豐富。

圖片

在使用完整的源代碼之前，請務必先檢查一下許可證，因為有一些受 MIT Expat 保護的企業級代碼。但不要擔心，大部分代碼都可以免費使用。

Infisical 在 GitHub 上有 11k+ 顆星，有 125+ 個版本，正在不斷改進中。此外，Infiscial CLI 的安裝次數超過 5.4M，非常值得信賴。

5. Mintlify - 在構建時顯示的文檔

圖片

Mintlify 是一個人工智能驅動的文檔編寫器。1 秒文檔化代碼，你值得擁有:D

自從幾個月前我發現了 Mintlify，我就成了它的忠實粉絲。我在很多公司見到過 Mintlify 的身影，Mintlify 甚至還幫助我通過商業電子郵件生成了完整的文檔，簡單又體面。

如果你需要制作詳細文檔，那么一定不要錯過 Mintlify 這個解決方案。

主要用例是基于代碼生成文檔。在你寫代碼的同時，它會自動文檔化代碼。

既可以安裝 VSCode 擴展，也可以將其安裝在 IntelliJ 上。

只需突出顯示代碼或將光標放在要文檔化的代碼行上，然后單擊Write Docs按鈕（或點擊? +）即可。太方便了。

大家可以閱讀文檔和安全指南了解更多內容。

Mintlify 支持 10 多種編程語言，支持許多文檔字符串格式，如 JSDoc、reST、NumPy 等。

Mintlify 基于 TypeScript 而構建，是一個非常方便的工具，用于文檔化代碼，可以說是每個開發人員的好幫手。

它在 GitHub 上有 2.5k 顆星，深受許多開發人員的喜愛。

6. Replexica – 面向 React 的 AI 驅動的 i18n 工具包

圖片

Replexica 是 React 的 i18n 工具包，可幫助快速發布多語言app。

特點一，不需要提取文本到 JSON 文件；特點二，使用 AI 驅動的 API 進行內容處理。

Replexica 包含以下兩部分：

Replexica Compiler – 用于React 的開源編譯器插件。
Replexica API - 云里面的 i18n API，使用 LLM 執行翻譯。

一些支持的 i18n 格式包括：

JSON-free 的 Replexica 編譯器格式。
Markdown 內容的 .md 文件。
基于 JSON 和基于 YAML 的舊格式。

好神奇，要使基本 Next.js app變為多語言，只需要Replexica就夠了。

使用以下npm命令啟動。

// install
pnpm add replexica @replexica/react @replexica/compiler

// login to Replexica API.
pnpm replexica auth --login

使用方式如下。

// next.config.mjs

// Import Replexica Compiler
import replexica from '@replexica/compiler';

/** @type {import('next').NextConfig} */
const nextConfig = {};

// Define Replexica configuration
/** @type {import('@replexica/compiler').ReplexicaConfig} */
const replexicaConfig = {
  locale: {
    source: 'en',
    targets: ['es'],
  },
};

// Wrap Next.js config with Replexica Compiler
export default replexica.next(
  replexicaConfig,
  nextConfig,
);

Replexica Compiler 支持 Next.js App Router，Replexica API 支持英語 ???? 和西班牙語 ????。項目開發人員計劃接下來發布 Next.js Pages Router + 法語 ???? 支持！

Replexica基于 TypeScript 而構建，在 GitHub 上有 740+ 顆星。一個你應該關注的項目，助力你更進一步！

7. Flowise - 拖放 UI 來構建自定義的 LLM 流程

圖片

Flowise 是一個開源的 UI 可視化工具，用于構建自定義的 LLM 編排流以及 AI 代理。

使用以下npm命令啟動。

npm install -g flowise
npx flowise start
OR
npx flowise start --FLOWISE_USERNAME=user --FLOWISE_PASSWORD=1234

下面是集成 API 的方式。

import requests

url = "/api/v1/prediction/:id"

def query(payload):
  response = requests.post(
    url,
    json = payload
  )
  return response.json()

output = query({
  question: "hello!"
)}

圖片

可以閱讀文檔。

圖片

因為云主機不可用，因此必須自托管。

讓我們來探討一些用例：

假設你有一個網站（可以是網店或博客），你可以刪除這個網站的所有相關鏈接，并讓 LLM 回答網站上的所有問題。

圖片

你還可以創建自定義工具，用于調用 Webhook 端點并將必要的參數傳遞到 Webhook 正文中。

圖片

還有許多其他用例，例如生成 SQL QnA 以及與 API 交互。

FlowiseAI 在 GitHub 上擁有 27.5k+ 顆星，擁有超過 10k forks。

8. Hexo - 一個快速、簡單又強大的博客框架

圖片

Hexo 支持許多功能，例如超快的生成速度，支持 GitHub Flavored Markdown 和大多數 Octopress 插件，提供對 GitHub Pages、Heroku 等的一鍵部署，提供用于無限擴展性的強大 API 和數百個主題和插件。

這意味著你可以用 Markdown（或其他標記語言）寫帖子，只要幾秒鐘，Hexo 就會生成漂亮的靜態文件。

使用以下npm命令啟動。

npm install hexo-cli -g

使用方式如下。

// Setup your blog
hexo init blog

// Start the server
hexo server

// Create a new post
hexo new "Hello Hexo"

Hexo 的文檔介紹了所有的 400+ 套插件和主題。這些插件用例甚廣，例如 Ansible 部署器插件。

Hexo 在 GitHub 上有 38k+ 顆星，有 125k+ 開發者在 GitHub 上使用。現處于 v7 版本，解壓縮大小為 629 kB。

9. Screenshot to Code – 將屏幕截圖轉換為干凈的代碼

圖片

這個開源項目雖然廣受歡迎，但仍然有許多開發人員竟然未曾耳聞。要知道，這可是能幫助提升10倍用戶界面構建速度的工具哦！

Screenshot to Code 能夠簡單迅速地使用 AI 將屏幕截圖、模型和 Figma 設計轉換為干凈、實用的代碼。糟糕，這是心動的感覺！

這個 app 有一個 React/Vite 前端和一個 FastAPI 后端。

如果你想使用 Claude Sonnet，那么需要一個可以訪問 GPT-4 Vision API 的 OpenAI API 密鑰，或者一個 Anthropic 密鑰。

Screenshot to Code 在 GitHub 上擁有 47k+ 顆星，支持許多技術堆棧，例如 Reac和 Vue。

順便說一句，Vue具有相當不錯的 AI 模型，如 GPT-4 Vision、Claude 3 Sonnet 和 DALL-E 3。

10. Appsmith - 構建管理面板、內部工具和儀表板的平臺

圖片

管理面板和儀表板是軟件常見的組成部分。年少無知的時候，我也曾試圖從頭開始構建，各種不必要的攔路虎打擊得我只想繳械投降。

Appsmith 可以幫助組織構建內部應用程序，例如儀表板、數據庫 GUI、管理面板、審批應用程序、客戶支持儀表板等等，以協助團隊執行日常運營。Appsmith 也是開源工具，可以快速開發這些內部app。

Appsmith 提供 45+ 可自定義的小部件。無需編寫 HTML/CSS，只要輕輕松松地拖放小部件，就可以在幾分鐘內創建漂亮的響應式 UI。大贊。

選擇小部件

驗證

Appsmith 支持在 GUI 上的小部件屬性、事件偵聽器、查詢和其他設置中幾乎任何地方編寫 JavaScript 代碼。

Appsmith 支持在{{ }}中編寫單行代碼，并將括號內編寫的內容解釋為 JavaScript 表達式。

/*Filter the data array received from a query*/
{{ QueryName.data.filter((row) => row.id > 5 ) }}

or 

{{
  storeValue("userID", 42);  
  console.log(appsmith.store.userID); 
  showAlert("userID saved");
}}

需要使用 IIFE 來編寫多行代碼。

例如，無效和有效的代碼如下。

// invalid code
/*Call a query to fetch the results and filter the data*/
{{ 
   const array = QueryName.data;
   const filterArray = array.filter((row) => row.id > 5);
   return filterArray;
}}

/* Check the selected option and return the value*/
{{ 
  if (Dropdown.selectedOptionValue === "1") {
      return "Option 1";
  } else {
      return "Option 2";
  }
}}

// valid code
/* Call a query and then manipulate its result */
{{ 
  (function() {
      const array = QueryName.data;
      const filterArray = array.filter((row) => row.id > 5);
      return filterArray;
   })()
}}

/* Verify the selected option and return the value*/

{{ 
  (function() {
      if (Dropdown.selectedOptionValue === "1") {
        return "Option 1";
      } else {
        return "Option 2";
      }
   })()
}}

通過下面幾個簡單的步驟，從簡單的 CRUD app 到復雜的多步驟工作流，任何內容你就可以創建：

與數據庫或 API 集成。Appsmith支持最流行的數據庫和REST API。
使用內置小部件構建app布局。
在編輯器中的任意位置使用查詢和 JavaScript 來表達業務邏輯。
Appsmith 支持使用 Git 來構建app、支持使用分支來跟蹤和回滾更改。

圖片

閱讀文檔和操作指南可以了解更多。

可以自行托管或使用云。此外還提供 20+ 個模板，供快速入門。

一些有用的模板如：

維護訂單管理
加密實時追蹤器
內容管理系統
WhatsApp信使

Appsmith 在 GitHub 上有 31k+ 顆星，有 200+ 個版本。

責任編輯：武曉燕來源：前端新世界

開發技能工具