🔍 搜尋結果:1

🔍 搜尋結果:1

🚀 科技影響者和內容作者賺錢的最簡單方法 💰

在過去兩年裡,我與 100 多名創辦人交談過。他們都面臨著同樣的問題──找不到好的內容作者和影響者。 另一方面,我遇到了許多內容作者和影響者遇到的困難: - 上班 - 管理他們的訂單 - 透過賺錢保證自己的安全 這就是[Gitroom 的](https://git.sn/gitroom-dev)閃光點 TL;DR:它是免費的。您可以註冊並賺錢。 --------------------- ![賺錢](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ag2oygkavq20a6kom4n0.gif) --- 為什麼不一樣呢? -------- 如今, [Gitroom](https://gitroom.com)是最著名的開源創辦人開源社群之一。他們中的許多人都有資金支持——他們的問題不是花錢,而是找到合適的人來花錢。 下週,我們將為社區的新作家和影響者舉辦一場盛大的發布會 - 所以你想參加。 Gitroom 與[Fiverr](https://www.fiverr.com/)非常相似。 1. 您在平台上列出自己。 創辦人聯絡您進行晉升。 2. 您向他們發送每個帖子的報價。 3. 他們支付費用,他們的錢將由 Gitroom 持有。 4. 您開始從系統內部建立貼文(是的,Gitroom 也是一個調度工具) 5. 他們批准你的帖子 6. 發布後,Gitroom 會自動向您發送資金。 Gitroom 的技巧在於,貼文是從 Gitroom 內部發出的,因此您受到 100% 的保護。 ![安全的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pzzxq8rv7s394o6bffg.png) --- 如何開始 ---- 前往[Gitroom 平台](https://git.sn/gitroom-dev)並註冊。 ![Gitroom 註冊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0i9cnqmw37000xmznv8.png) 然後,完成入職;非常重要的是: 1. 您新增您的姓名、個人簡介和個人資料圖片。 2. 連接您的社交媒體平台,以便您稍後可以提供它們。 ![入職](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v75zgd1nwcfoxr7tewwa.png) 以賣家身分進入市場,連接您的銀行帳戶,並加入您的專業知識。 ![市場](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/me9nk0qgwqtrk2yaur2m.png) --- 我做完。現在做什麼? ---------- 只需等待收件匣中發送有關新優惠的電子郵件即可。 此外, [Gitroom 是完全開源的](https://github.com/gitroomhq/gitroom/)。 因此,請隨意檢查程式碼並查看是否一切正常。 您也可以建議新功能/貢獻一些程式碼:) 目前,您不需要申請加入該平台,但如果我開始收到大量垃圾郵件,我會更改它。 讓我知道你對這個系統的看法❤️ --- 原文出處:https://dev.to/github20k/the-easiest-way-tech-influencers-and-content-writers-can-make-money-4n90

被開除的心路歷程

![射擊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aro2mn9dgxz28sc68di5.jpg) 不久前,我從高級開發人員的職位被解雇了,在此之前我從未被解僱過,無論我走到哪裡,我一直都是中等到頂級的表現,並且一直受到同事的喜愛,但這裡的情況卻大不相同。 我當時在哪裡 ------ 我離開了以前的工作,因為他們遇到了財務問題,而且我已經在那裡工作了一段時間,覺得自己的角色已經變得陳舊,我是高級開發人員和團隊負責人的混合體,我的團隊到最後只剩下我了。 我變得沒有動力,我的團隊不知疲倦地工作的公司主要專案之一被取消了。由於公司必須轉型,一年多來的工作實質上都被丟進了垃圾箱。 所以我開始尋找另一份工作,我不想要另一個發展職位,我想要更多的挑戰,我想要擴展自己。我看到一家顧問公司正在尋找一位開發人員,希望能夠從事一些很酷的專案。我申請了,通過了他們的測試,通過了面試,準備嘗試新的東西。 ![風暴](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ymelx2tsgdr6mlucvmur.jpg) 走進暴風雨 ----- 在我加入之前,我參加了這家公司的夏季聚會,沒有任何危險信號,人們看起來很高興,業主看起來也很好。 我拿到了筆記型電腦和一個漂亮的迎賓禮盒,我真的很興奮,準備重新振作起來,抓住這個機會。 我做了正常的人力資源工作,在第一天設定了我的環境,然後被告知我應該繼續的專案尚未獲得批准。被告知開始關注我的認證,並被告知專案何時準備就緒。 突然接到一位業主的電話,說有一個前端專案需要資源來加速進度。技術堆疊有點超出了我的舒適區,但想要給人留下深刻的印象並表明我相當多才多藝,就像確信我能做到一樣,我解釋說我需要加快使用所使用的技術堆疊的速度,並獲得了大約一半的時間閱讀我需要的內容的一天。 烏雲密佈 --- 我遇到了該專案的首席開發人員,雖然他有點友好,但他似乎對我沒有技術堆疊經驗感到相當不高興,但他給我分配了一些任務,然後讓我去做,直到…一個小時後,他打電話給我,問我過得怎麼樣。告訴他,努力讓專案在本地執行,他和我一起完成了編譯和執行,有一些環和資料庫條目讓我執行。 任務本身很簡單,但我無法弄清楚所使用的編碼風格和模式。事後看來,這個計畫的一些決定有點值得懷疑。 我每兩個小時就會接到電話詢問進度,並會收到評論,例如你們進展緩慢,我們落後了,然後很快就保證我們會到達目標。很快我就從「我可以征服任何事情」變成了「也許我作為開發人員很糟糕」。 看起來要開始下雨了 --------- 我確實沒有交到任何朋友,也沒有與這家公司的人建立任何密切的聯繫。我感到非常孤獨,從派對生活變成一個非常內向和保守的人,這真是令人震驚。我還沒有完全從這件事中恢復過來,我現在還是比較安靜,不會說太多話。 這種情況又持續了兩週,一直對我進行微觀管理的開發人員需要休假,並給了我一週的任務。 他完成了有問題的任務,我們給了他們估計,此時我開始變得有點矛盾,我是否能夠完成我的工作。 這些任務在紙上很簡單,但實際上我花了很多時間嘗試瀏覽程式碼庫。有時我會分心,看太多 YouTube 影片,很快就會失去注意力。我不再關心,此時,開始找工作,解釋我覺得我在這個角色上犯了錯。 ![噢,雷鳴般的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l661a91r5htrz4ntiqy6.jpg) 現在雷聲大作 ------ 另一位開發人員度假回來後,他似乎對我沒有完成所有任務感到憤怒,我確實為我設法完成的任務提出了 PR,但他的半令人放心的台詞回來了“我們會完成它”。 一天快結束時,我收到了人力資源部門發來的一封不祥的電子郵件,告訴我客戶不滿意,我已經完成了對該專案所做的所有工作的審核。 我完成了審計並回信說,我對客戶沒有向我提出這個問題感到失望,回想起來,這是一個非常糟糕的主意。下一分鐘我就收到了隔天早上召開人力資源會議的請求。 雷擊 -- 在人力資源電話中,很快就告訴我要被解僱,我知道為什麼,我沒有費心去抗爭或爭論,我接受了它,現在接受了我新發現的失業。 在那之後的幾天裡,我感到很生氣,這表明我對面試官失去了冷靜,對這個世界普遍感到不安。我給了自己幾天悶悶不樂的時間,然後重新上馬並找到了一家更好的諮詢公司,儘管我的角色不太注重開發人員。 反思 -- 我寫這篇文章的原因是,被解僱是可以的,是的,這很可怕,而且尋找新角色的不確定性,特別是在當今的市場上,是一種可怕的感覺,但正如偉大的首席開發人員會說「我們會到達那裡」。 反思這一點,我需要休息一下,我以前的角色到這個可怕的角色是如此充實,我經歷了一些重大的生活事件和一些普遍困難的時期,去年,我搬了家,我的兒子出生並換了工作。我注定會崩潰,我的通知期很長,我應該在角色之間休息一些時間。 我還認為我應該從開發中休息一下,我覺得我在這個階段確實失去了對開發的熱情,而進入我現在所擔任的角色幫助我通過遠離開發一步來重新激發了我對開發的熱情。 我不應該那麼急於接受任何專案,我應該直截了當地說我不認為我可以勝任這個角色,請為我找到另一個專案,也應該儘早標記我不認為我可以勝任這個角色工作。 我應該更以客戶為中心,如今,只需與客戶交談就可以幫助我克服一些障礙。 對於首席開發人員,我理解他們承受的壓力,我不會因為我的失敗而抨擊他們或責備他們。然而,作為現在的團隊領導,我確保自己保持專業,鼓勵我的團隊成員,並確保回饋是建設性的,而不是一系列帶有虛假保證的挖掘。 歸根結底,被解僱並不是你生命的終結,甚至不是你職業生涯的終結,你可以重新振作起來,並將其作為一種學習經驗。 ![反思](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6baqjwghqu6svzrmkn6.jpg) --- 原文出處:https://dev.to/darkliahos/so-i-got-fired-3ko5

掌握 React 中的 S.O.L.I.D 原則:簡單範例和最佳實踐

### 單一職責原則(SRP) **一個元件應該只有一個改變的理由,這意味著它應該只有一項工作。** #### 範例:使用者設定檔元件 **應該這樣:** - 將職責分解為更小的功能元件。 ``` // UserProfile.js const UserProfile = ({ user }) => { return ( <div> <UserAvatar user={user} /> <UserInfo user={user} /> </div> ); }; // UserAvatar.js const UserAvatar = ({ user }) => { return <img src={user.avatarUrl} alt={`${user.name}'s avatar`} />; }; // UserInfo.js const UserInfo = ({ user }) => { return ( <div> <h1>{user.name}</h1> <p>{user.bio}</p> </div> ); }; ``` **不要這樣:** - 將顯示、資料取得和業務邏輯組合在一個元件中。 ``` // IncorrectUserProfile.js const IncorrectUserProfile = ({ user }) => { // Fetching data, handling business logic and displaying all in one const handleEdit = () => { console.log("Edit user"); }; return ( <div> <img src={user.avatarUrl} alt={`${user.name}'s avatar`} /> <h1>{user.name}</h1> <p>{user.bio}</p> <button onClick={handleEdit}>Edit User</button> </div> ); }; ``` ### 開閉原理 (OCP) **軟體實體應該對擴充開放,但對修改關閉。** #### 範例:主題按鈕 **應該這樣:** - 使用 props 來擴充元件功能,而無需修改原始元件。 ``` // Button.js const Button = ({ onClick, children, style }) => { return ( <button onClick={onClick} style={style}> {children} </button> ); }; // Usage const PrimaryButton = (props) => { const primaryStyle = { backgroundColor: 'blue', color: 'white' }; return <Button {...props} style={primaryStyle} />; }; ``` **不要這樣:** - 修改原有元件程式碼,直接加入新的樣式或行為。 ``` // IncorrectButton.js // Modifying the original Button component directly for a specific style const Button = ({ onClick, children, primary }) => { const style = primary ? { backgroundColor: 'blue', color: 'white' } : null; return ( <button onClick={onClick} style={style}> {children} </button> ); }; ``` ### 里氏替換原理 (LSP) **超類別的物件可以用其子類別的物件替換,而不會破壞應用程式。** #### 範例:基本按鈕和圖示按鈕 **應該這樣:** - 確保子類元件可以無縫替換超類元件。 ``` // BasicButton.js const BasicButton = ({ onClick, children }) => { return <button onClick={onClick}>{children}</button>; }; // IconButton.js const IconButton = ({ onClick, icon, children }) => { return ( <button onClick={onClick}> <img src={icon} alt="icon" /> {children} </button> ); }; ``` **不要這樣:** - 引入特定於子類別的屬性,這些屬性在替換時會破壞功能。 ``` // IncorrectIconButton.js // This button expects an icon and does not handle the absence of one, breaking when used as a BasicButton const IncorrectIconButton = ({ onClick, icon }) => { if (!icon) { throw new Error("Icon is required"); } return ( <button onClick={onClick}> <img src={icon} alt="icon" /> </button> ); }; ``` ### 介面隔離原則(ISP) **任何客戶端都不應該被迫依賴它不使用的方法。** #### 範例:文字元件 **應該這樣:** - 針對不同的用途提供特定的介面。 ``` // Text.js const Text = ({ type, children }) => { switch (type) { case 'header': return <h1>{children}</h1>; case 'title': return <h2>{children}</h2>; default: return <p>{children}</p>; } }; ``` **不要這樣:** - 用不必要的屬性使元件變得混亂。 ``` // IncorrectText.js // This component expects multiple unrelated props, cluttering the interface const IncorrectText = ({ type, children, onClick, isLoggedIn }) => { if (isLoggedIn && onClick) { return <a href="#" onClick={onClick}>{children}</a>; } return type === 'header' ? <h1>{children}</h1> : <p>{children}</p>; }; ``` ### 依賴倒置原則(DIP) **高層模組不應該依賴低層模組。兩者都應該依賴抽象。** #### 範例:資料獲取 **應該這樣:** - 使用鉤子或類似的模式來抽象資料獲取 和狀態管理。 ``` // useUserData.js (Abstraction) const useUserData = (userId) => { const [user, setUser] = useState(null); useEffect(() => { fetchData(userId).then(setUser); }, [userId]); return user; }; // UserProfile.js const UserProfile = ({ userId }) => { const user = useUserData(userId); if (!user) return <p>Loading...</p>; return <div><h1>{user.name}</h1></div>; }; ``` **不要這樣:** - 在元件內部硬編碼資料取得。 ``` // IncorrectUserProfile.js const IncorrectUserProfile = ({ userId }) => { const [user, setUser] = useState(null); useEffect(() => { // Fetching data directly inside the component fetch(`https://api.example.com/users/${userId}`) .then(response => response.json()) .then(setUser); }, [userId]); if (!user) return <p>Loading...</p>; return <div><h1>{user.name}</h1></div>; }; ``` --- 原文出處:https://dev.to/drruvari/mastering-solid-principles-in-react-easy-examples-and-best-practices-142b

我從亞馬遜面試的 coding 測驗中學到了什麼

最近,我受邀參加亞馬遜的線上編碼評估。由於我與目前的工作簽訂了一段時間的合同,我認為嘗試一下可能會很有趣,沒有壓力。以下是我從徹底崩潰和燃燒的編碼評估中學到的東西: \#1.先解決問題 --------- 我花了很多時間來驗證論點,儘管這可能是您在現實生活中所做的事情,但這對於編碼評估來說並不是一個好主意。有時,公司會拋出邊緣情況 - 也許您的`List`為空,或者為`null` - 但通常是在他們驗證您的解決方案對有效輸入的行為之後。 \#2.了解基礎知識 ---------- 您不想在計時器倒數時浪費時間谷歌搜尋如何深度複製陣列。了解如何使用所有標準資料結構並練習、練習、再練習。 #3。仔細閱讀提示 --------- 有時您的提示會出現警告。也許提示希望您返回最佳解決方案(如果存在),但如果您的解決方案低於某個閾值,則根本不返回任何內容。確保您滿足提示的要求。 #4。使用您自己的編輯器 ------------ 線上編碼評估或多或少必須提供某種線上 IDE 來幫助您編譯、偵錯和執行程式。**不要使用它。**它將變得陌生、緩慢,並且可能具有您不想要的特定功能(程式碼完成),或缺少一些您需要的功能(自動庫導入)。 #5。限制時間練習 --------- 這些編碼評估旨在快速進行,但如果您知道自己在做什麼,又不會太快以致您耗盡時間。話雖這麼說,當您完成後,您可能會想返回並清理一些程式碼、優化並加入一些註釋。練習的時間比你應該分配的時間*少*。 有[第三方](https://coderbyte.com/)評估平台,亞馬遜有線上[編碼評估演示](https://www.myamcat.com/start-demo?data=VvSY8gb%2BBAAefK0phJWENBOPoTXDc8na4fhRROtwuZ9MIbQ7gXB2pLYyDf%2B4UUy3bjNJmcgRqJuzDgML1nQF%2Bg%3D%3D)。我確信其他公司也存在這些,如果有人可以在評論中提供它們。 --- 就是這樣!我想如果我遵循了上面我自己的建議,我可能至少能夠及時完成提示。如果你像我一樣是個完美主義者,你需要把它留在門口,以便能夠先制定一個有效的解決方案,然後回去清理它。祝你好運! 如果您喜歡這篇文章,請考慮[為我買杯咖啡](https://ko-fi.com/Z8Z811E9B)來支持我的工作! --- 原文出處:https://dev.to/awwsmm/what-i-learned-from-bombing-an-amazon-coding-assessment-4aom

JavaScript 中的三個點 (...)

> 嘿!我是薩加爾。我喜歡編寫教學和文章來幫助開發人員更好地理解 JavaScript 的魔力。如果您對本文有任何疑問,請發表評論,我會回覆您,或在 Twitter [@sagar\_codes](https://twitter.com/sagar_codes)上找到我。 在這篇文章中,我們將討論 ES6 中引入的一個特性,即展開運算子和剩餘運算子。 🔥 🔥 🔥 我已經成為這三個點的忠實粉絲,它們可能會改變您在 JavaScript 中解決問題的風格。我們可以以兩種不同的方式使用三個點作為擴充運算子和剩餘運算子。 休息參數😴 ----- 使用剩餘參數,我們可以將任意數量的參數收集到一個陣列中,並用它們執行我們想要的操作。引入剩餘參數是為了減少由參數引起的樣板程式碼。 🙌 ``` function myFunc(a, b, ...args) { console.log(a); // 22 console.log(b); // 98 console.log(args); // [43, 3, 26] }; myFunc(22, 98, 43, 3, 26); ``` 在 myFunc 的最後一個參數中,前綴為 …,這將導致所有剩餘參數都放置在 javascript 陣列中。 其餘參數收集所有剩餘參數,因此在最後一個參數之前加入其餘參數是沒有意義的。剩餘參數必須是最後一個形參。 ``` function myFunc(arg1, ...rest, arg2) { // arg2 ? } ``` 其餘參數可以解構(僅限陣列),這意味著它們的資料可以解壓縮為不同的變數。 ``` function myFunc(...[x, y, z]) { return x * y* z; } myFunc(1) // NaN myFunc(1, 2, 3) // 6 myFunc(1, 2, 3, 4) // 6 (fourth parameter is not destructured) ``` 傳播運算符✨ ------ 擴展運算子用於將可迭代物件(如陣列)的元素擴展到可以容納多個元素的位置。 ``` function myFunc(x, y, ...params) { // used rest operator here console.log(x); console.log(y); console.log(params); } var inputs = ["a", "b", "c", "d", "e", "f"]; myFunc(...inputs); // used spread operator here // "a" // "b" // ["c", "d", "e", "f"] ``` 組合陣列的方法一直有很多種,但展開運算子提供了一種組合陣列的新方法: ``` const featured = ['Deep Dish', 'Pepperoni', 'Hawaiian']; const specialty = ['Meatzza', 'Spicy Mama', 'Margherita']; const pizzas = [...featured, 'veg pizza', ...specialty]; console.log(pizzas); // 'Deep Dish', 'Pepperoni', 'Hawaiian', 'veg pizza', 'Meatzza', 'Spicy Mama', 'Margherita' ``` 透過擴充運算符,現在可以使用比 Object.assign() 更短的語法來淺複製(不包括原型)或合併物件。 ``` var obj1 = { foo: 'bar', x: 42 }; var obj2 = { foo: 'baz', y: 13 }; var clonedObj = { ...obj1 }; // Object { foo: "bar", x: 42 } var mergedObj = { ...obj1, ...obj2 }; // Object { foo: "baz", x: 42, y: 13 } ``` 👉 結論 ---- 當我們在程式碼中看到三個點(…)時,它要么是剩餘參數,要么是擴展運算子。 有一個簡單的方法可以區分它們: 1. 當三個點 (…) 位於函數參數末尾時,它是“剩餘參數”,並將參數列表的其餘部分收集到一個陣列中。 2. 當三個點 (…) 出現在函數呼叫或類似情況中時,它被稱為“擴展運算符”,並將陣列擴展為列表。 謝謝閱讀。希望您喜歡這篇文章,歡迎按讚、留言或與您的朋友分享這篇文章。 😄 快樂編碼… --- 原文出處:https://dev.to/sagar/three-dots---in-javascript-26ci

成為資深前端開發者需要的 37 個心態

我真的很喜歡 @abbeyperini 的[帖子](https://dev.to/abbeyperini/12-tips-from-a-mid-level-developer-29bk),並決定在擔任軟體開發人員**5 年多**後分享我的技巧。 準備好?讓我們深入探討。 1.掌握基礎知識 ======== 建在搖搖欲墜的土地上的房子🏠,稍有問題就會倒塌。 同樣,如果你沒有紮實的基礎: - 你會很難適應 JavaScript 框架 - 你會陷入第一個不熟悉的問題 - 您無法掌握某些問題之間的共同主題 因此,如果你想提升前端開發人員的水平,首先要掌握**HTML** 、 **CSS**和**JavaScript** 。 --- 2. 了解網路的工作原理 ============ 在過去的幾年裡,前端開發變得更加複雜。 使用了許多工具(*捆綁器*、*轉譯器*等) 如果您不了解網路的工作原理(即「唯一」支援的語言是**HTML** (用於結構)、 **CSS** (用於樣式)和**JavaScript** (用於互動)),您將很難理解為什麼需要有這麼多工具可以在線執行您的程式碼。 ![建築模組](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/miha7y379n9wnemtnhdi.gif) --- 3.熟悉資料結構與演算法 ============ 由於程式設計面試,資料結構和演算法經常受到不好的評價🤦‍♀️。 **然而**,了解關鍵因素及其複雜性至關重要。如果沒有這些知識,您將無法編寫複雜的程式或評估程式碼效率。 以下是需要了解的資料結構/演算法的非詳盡列表: **資料結構:***棧*、*佇列*、*雜湊圖*、*集合*、*圖*等。 **演算法:***動態規劃*、*貪心演算法*、*遞迴*等。 --- 4. 透過實踐而不是閱讀/觀看來學習 ================== 教學會欺騙您,讓您感覺自己正在取得進步。 它們讓你相信你正在學習和進步,但你並沒有前進。真正的學習是透過實踐或教學發生的。 所以,多多練習,避免陷入教學地獄🔥。 --- 5.遇到困難時尋求協助 =========== 你不是一個人。 您附近很可能有高級開發人員,您可以向他們尋求協助。 所以,不要浪費時間去兔子洞裡。您的目標是提供價值,如果您浪費時間解決其他人已經解決的問題,您就無法實現這一目標。 ![請求幫忙](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iksbkr0yvd3gqh4x22d5.png) --- 6.以正確的方式尋求協助 ============ 在尋求幫助之前,請確保您已經做了最低限度的事情。 你應該首先: - 在 Google/Stack Overflow/ChatGPT 上搜尋解決方案 - 了解你的目標以及什麼不起作用 - 記錄所有失敗的嘗試 另外,不要針對同一問題重複尋求協助。當您獲得幫助時,請在某處記下,以免忘記。 --- 7. 不要複製/貼上你不理解的程式碼 ================== 由於多種原因,這非常糟糕: - 您最終可能會得到不安全的程式碼,這些程式碼會暴露令牌等敏感資訊。 - 您將無法輕鬆除錯程式碼。 - 你將無法向你的同事解釋它。 這對 ChatGPT 尤其重要,因為它有時只能提供 80% 的準確答案。 ![困惑的表情符號](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sfansm0i6qss45kkcz8a.png) --- 8. 不要盲目採納網路上找到的每一個建議 ==================== 我剛開始的時候就犯了這個錯誤。 我發現有人建議說 React 中的記憶化是邪惡的,所以我停止使用它。 令我尷尬的是,我的程式碼在預生產中崩潰了。 所以,別讓我「老」了。 當您在網路上看到建議時,請先問自己以下問題: - 這個建議適用於我嗎? - 提供建議的人是否與我的情況類似? **TLDR** :運用常識🫠。 --- 9. 懷抱良好的意願:人們希望你成功❤️ ==================== 當你是新人時,人們通常會認為人們正在等待發現你的錯誤並解僱你。 至少,這是我的思想對我低聲說的。 但事實恰恰相反。 當一家公司僱用你時,它非常希望你成功。否則,這就是浪費他們在培訓和入職方面投入的時間和資源。 因此,相信你的公司希望你做得很好,並毫不猶豫地向你的同事尋求支持。 --- 10.完成勝於完美 ========= 追求完美往往會導致以下結果: - 拖延 - 浪費時間 - 過於複雜 - ETC。 因此,目標是在推動更多之前交付/驗證 V0。 ![做完比求完美強](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u146x2ia7stie8eyvwpa.png) --- 11. 始終將任務分解為可管理的任務 ================== 感到不知所措的最簡單方法是什麼? 👉 試圖咬得比你能咀嚼的更多。 始終將專案分解為更小的任務。 這會: - 讓你不會感到不知所措 - 讓您的 PR(拉取請求)更容易審核 - 提供進步感 --- 12. 值得信賴,當你需要幫助時會伸出援手 ===================== 剛開始時,您的首要任務是贏得經理的信任。 當他們想到你時,應該安心。 他們應該相信: - 你在簡單的任務上很可靠 - 必要時您會尋求協助 - 有任何問題你都會溝通 您不想因為成為經理必須持續監控的問題而增加他們的工作量🔎。 --- 13.表現出對工作的熱情 ============ 用熱情可以彌補很多不足🤪。 當你是新人時,要充滿渴望和興奮。 只有經驗豐富的開發人員才能承受缺乏熱情的後果。 沒有人願意不斷地督促某人工作。指導已經夠困難的了;必須激勵某人會使事情變得更具挑戰性。 ![熱情](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmc0s50vm86bam0069nw.png) --- 14. 對學習新事物/工具/方法保持開放態度 ====================== 前端開發不斷發展。 因此,您需要對新技術持開放態度。 不要太拘泥於現有的工具。相反,表現出學習的興趣😋。 --- 15. 掌握你的開發工具🛠️ ============== 想要加快您的開發時間嗎? 掌握你的開發工具: - 您的 IDE(例如 VSCode) - 您的原始碼控制系統(例如 Github) - 您的瀏覽器和檢查器(例如 Chrome 檢查器) - ETC。 ![工具包](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9h6zn8k68yghmb0ecffh.png) --- 16. 專注於創造價值 =========== 不要在真空中編寫程式碼。 您編寫的每段程式碼都應該為以下方面提供價值: - 您的客戶 - 你的公司 - 您的利害關係人 - ETC。 您的報酬與您提供的價值掛鉤,而不是與您編寫的程式碼掛鉤。 因此,優先考慮編寫有目的的有效程式碼🥅。 --- 17. 為你的工作辯護:它不會自己說話 =================== 可能是新開發人員最常見的錯誤之一(特別是如果您來自重視謙虛的文化)。 1. 你做了一些了不起的事。 2. 沒有人知道這件事。 👉 那工作並不重要。 因此,透過寫作、演示等方式分享您的作品。 ![為你的工作說話](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t55ep1c3phxgypwchbfh.png) --- 18. 喜歡寫愚蠢的程式碼而不是聰明的程式碼 ====================== 程式碼被閱讀的次數遠多於寫的次數📝。 因此,不要編寫只有您才能理解的聰明程式碼。 **可讀性>效能>聰明。** 您希望您的同事能夠有效率地處理您的程式碼,並在必要時為您提供協助等。 --- 19.你的經理是你最好的盟友 ============== 除非你特別不幸,否則你的經理會支持你的成長📈。 他們通常希望你能夠蓬勃發展,為團隊做出貢獻,並留在公司,而不是在其他地方尋找機會。 因此,請務必招募他們來實現您的目標。 分享你的勝利、挫折(以積極的方式)和挫折,而不是獨自奮鬥。 --- 20.讓你的經理的生活更輕鬆 ============== 這個很簡單,但常被忽略。 您的經理可能有您可以協助解決的問題: - 他們可能需要加入文件但缺乏時間 - 他們的工作量可能龐大,需要支持 - 和更多 這可能是贏得經理支持(升遷、加薪等)的最簡單方法。他們已經意識到這些任務並且可以直接看到它們的影響(至少對他們來說)。 ![最佳老闆杯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yz4tz3h7o12oh4x4f0lg.png) --- 21.了解任務背後的大局 ============ 不要成為程式碼猴子🐒。 剛開始時它可能會對您很有幫助。 但要達到下一個級別,您需要了解任務背後的背景: - 為什麼它們有價值 - 為什麼你被分配給他們 - 它們如何適應公司的整體策略 這種理解對於您的職業生涯更上一層樓至關重要。 --- 22. 為團隊做出貢獻(文件、技術講座、演示等) ======================== 這不僅對公司有利,對您也有利。 透過進行演示、共享文件等,您可以展示您的技能並提高團隊的生產力。 始終致力於盡可能提升團隊的表現:這是令人愉快且有益的😊。 ![貢獻](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbmz4r1ucrrqe84mpq6f.png) --- 23. 成為特定領域的“掌門人” ================ 如果我必須提供一個建議,那就是這個。 在職業生涯的初期,探索各個領域是可以的。 但是,要晉升到中/高級級別,請專注於培養某一領域的專業知識。這對於促銷來說比多個領域的平均水平更具吸引力。 因此,我們的目標是培養[T 型](https://www.forbes.com/sites/lisabodell/2020/08/28/futurethink-forecasts-t-shaped-teams-are-the-future-of-work/)技能:在某一領域擁有廣泛的知識和深厚的專業知識。 --- 24. 培養你的溝通技巧 ============ 不幸的是,這是必須的。 溝通對於開發人員來說至關重要。我們經常需要做以下事情: - RFC(徵求意見) - 示範 - 演講 - ETC。 因此,請確保您具有基本的溝通能力。 --- 25. 當你遇到問題時休息一下 =============== 當你深陷一個問題時,很難停下來。 即使已經過去了 5 年多,我仍然在掙扎🥹。 然而,休息後我總是會產生更新鮮的想法。 所以,如果你已經被困太久了,那就離開吧。 ![休息](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96yk7dr61s2sc7rflive.png) --- 26. 發揮你的優勢,而不是劣勢 ================ 不要再浪費時間試圖修復明顯的弱點。 如果您持續花費超過 1 小時才能完成同您級別的其他人在不到 5 分鐘內完成的任務,請避開該任務。 投入更多的精力很可能不會讓你在這方面表現出色。 相反,做必要的事情並專注於最大限度地發揮你的優勢。如果某件事對你來說很自然且有價值,那就多做一點吧🚀。 --- 27. 掌控自己的職涯道路 ============= 沒有人會為你規劃你的職涯。 如果沒有計劃,你就會為別人的計劃而努力。 因此,請確保您為自己想要在 1/2/5 年內實現的目標制定計劃 💪。 --- 28. 與其他開發人員一起交流 =============== 您目前是否患有冒名頂替症候群? 如果是這樣,請花時間與其他開發人員交流。 您很快就會意識到您並不孤單。 與其他開發人員聯繫還有其他好處: - 您可以學習新的技巧/技巧 - 你們可以討論共同的經歷 - 你們可以在工作上互相補充 - ETC。 ![朋友們](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9r46ijzzv99jfdjrssa.png) --- 29. 指導年輕開發人員 ============ 這是冒名頂替症候群的最佳治療方法之一。 一旦你開始指導年輕的開發人員: - 你會發現你知道一些事情 - 您將把自己定位為中/高級開發人員 - ETC。 --- 30.讓你解決的問題多樣化 ============= 如果你不斷地解決同樣的問題,你的進步就會趨於穩定。 確保您正在解決不同的問題,以便您可以: - 比較各種方法 - 開發解決問題的工具包 - ETC。 ![雞蛋放在多個籃子裡](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hllqddeurnt0bx03m2md.png) --- 31.尋找導師 ======= 擁有偉大的導師是我職業生涯的亮點。 - 導師了解您的旅程,讓您腳踏實地。 - 他們會指導你避免他們所犯的錯誤。 - ETC。 **如何尋找導師?** 與您互動的更有經驗的開發人員聯繫,提出問題,討論他們的經驗等。 如果您無法聯繫資深開發人員,請與 X 等平台上的個人互動,與他們建立關係,然後聯絡 😉。 --- 32. 致力於 JavaScript 框架並掌握它 ========================= 最好的框架是能夠幫助您最快實現目標的框架。 所以,忽略網路上毫無意義的爭論。 選擇您最熟悉或需要學習的框架。 並掌握它。這就足夠了。 有了紮實的 JavaScript 基礎知識,過渡到另一個框架將會很快。 ![合約](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s7p9c7u02uqv5b8fhxew.png) --- 33.不斷思考使用者體驗 ============ 身為前端開發人員,你應該考慮使用者。 即使您有 PM 或設計師,也要確保使用者體驗良好 😌。 - 需要時使用載入狀態 - 在 UI 中傳達進度 - 給用戶回饋 - ETC。 --- 34. 坦然地說“不” =========== 這對我來說是一件艱難的事。 我對每一個專案都感到興奮,並努力拒絕。 但身為開發人員,您經常會收到超出您處理能力的請求。 因此,請優先考慮與您的目標最相符的那些。 --- 35.不斷投資你的技能 =========== 選擇成為前端開發人員,您就致力於從事必須不斷學習的職業。 因此,透過學習新語言、掌握新技術等不斷投資你的技能。 ![技能](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2lptuajtkra0p080nnc.png) --- 36. 當面臨太多工作時,減少功能而不是提高程式碼品質。 ============================ 您的應用程式擁有的功能越多越好,對嗎?正確的? 最初,這似乎是正確的,但附加的功能會導致更多的程式碼。更多的程式碼意味著更多的問題(維護、錯誤等)。 因此,當時間緊迫時,應減少功能而不是犧牲程式碼品質。 --- 37. 努力了解你的合作者(設計師、後端開發人員等) ========================== 始終尊重您的合作者(後端開發人員、設計師、產品經理等)。 應用程式開發是團隊的努力。 團隊成員之間的協同越多,環境就會越快樂、越有效🥰。 ![交朋友](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vdbfdepvkkxdug91noo.gif) --- 感謝您閱讀這篇文章🙏。 發表評論 📩 分享小貼士。 並且不要忘記加上“💖🦄🔥”。 如果您喜歡這樣的文章,請加入我的**免費時事**通訊**[FrontendJoy](https://frontendjoy.substack.com/)** 。 如果您想要每日提示,請在[X/Twitter](https://twitter.com/_ndeyefatoudiop)上找到我。 --- 原文出處:https://dev.to/_ndeyefatoudiop/37-tips-from-a-senior-frontend-developer-251b

5 分鐘了解記憶化

記憶化是另一個令人生畏的術語,當你理解它時,它就會變得非常直觀。今天我們就來了解什麼是記憶吧! --- ### 一些筆記 - 我製作了本教學的影片版本![在這裡](https://www.youtube.com/watch?v=6tbUPqnu-Ws)查看一下。 - 如果您喜歡這篇文章,請考慮訂閱我的免費每週[網頁開發電子報](https://buttondown.email/devtuts)! --- 介紹 == 記憶化是許多程式語言中使用的最佳化技術,用於減少冗餘、昂貴的函數呼叫的數量。這是透過根據函數的輸入快取函數的返回值來完成的。在這篇文章中,我們將建立一個次優但希望具有教育意義的 JavaScript 函數記憶體! 首先,需要記憶的昂貴函數 ============ 這是一個供我們記憶的函數。它以非常低效的方式求出數字的平方。 ``` const inefficientSquare = num => { let total = 0; for (let i = 0; i < num; i++) { for (let j = 0; j < num; j++) { total++; } } return total; }; ``` 我們可以使用相同的值來執行這個函數,並且每次都需要一段時間來執行。 ``` const start = new Date(); inefficientSquare(40000); console.log(new Date() - start); // 1278 const start2 = new Date(); inefficientSquare(40000); console.log(new Date() - start2); // 1245 ``` 每次都超過一秒,哎呀! 為我們的 Memoizer 編寫偽程式碼 =================== 在編寫任何程式碼之前,讓我們先透過記憶體進行推理。 - 將對函數的引用作為輸入 - 傳回一個函數(因此可以像平常一樣使用) - 建立某種緩存來保存先前函數呼叫的結果 - 以後任何時候呼叫該函數,都會傳回快取結果(如果存在) - 如果快取的值不存在,則呼叫該函數並將結果儲存在快取中 真實程式碼時間 ====== 這是上述偽程式碼大綱的實作。正如簡介中提到的,這是次優的,您**不應該在生產中使用它**。後面我會解釋為什麼! ``` // Takes a reference to a function const memoize = func => { // Creates a cache of results const results = {}; // Returns a function return (...args) => { // Create a key for results cache const argsKey = JSON.stringify(args); // Only execute func if no cached value if (!results[argsKey]) { // Store function call result in cache results[argsKey] = func(...args); } // Return cached value return results[argsKey]; }; }; ``` 此實作中最次優的部分,以及為什麼我不建議在生產程式碼中使用它,是使用`JSON.stringify`在`results`快取中建立鍵。 `JSON.stringify`的最大問題是它不會序列化某些輸入,例如函數和符號(以及您在 JSON 中找不到的任何內容)。 在昂貴的功能上測試我們的記憶體 =============== 讓我們複製`inefficientSquare`範例,但這次我們將使用 memoizer 來快取結果。 ``` const memoize = func => { const results = {}; return (...args) => { const argsKey = JSON.stringify(args); if (!results[argsKey]) { results[argsKey] = func(...args); } return results[argsKey]; }; }; const inefficientSquare = memoize(num => { let total = 0; for (let i = 0; i < num; i++) { for (let j = 0; j < num; j++) { total++; } } return total; }); const start = new Date(); inefficientSquare(40000); console.log(new Date() - start); // 1251 const start2 = new Date(); inefficientSquare(40000); console.log(new Date() - start2); // 0 ``` 成功!第二次我們使用相同的輸入呼叫`inefficientSquare`時,不需要時間重新計算;我們只是從物件中提取快取的值。 只記住純函數! ======= 記憶化很棒,但只有當你的函數是純函數時才有效。換句話說,如果函數的回傳值不僅僅依賴其輸入,那麼這些輸入的快取值將不會總是正確的。此外,如果您的函數有副作用,記憶體不會複製這些副作用,它只會傳回最終返回的函數值。 結論 == 現在您應該很清楚我們如何以及為什麼使用記憶化!雖然我們的記憶功能不是最佳的,但您可以使用許多第三方函式庫,它們會做得更好。只要確保您記住的函數是純函數即可! --- 原文出處:https://dev.to/nas5w/an-introduction-to-memoization-59o

使用 Typescript 和 Jest 進行單元測試

--- 標題:使用 Typescript 和 Jest 進行單元測試 發表:真實 描述: 標籤: typescript、javascript、玩笑、單元測試 --- ![vscode-is](https://thepracticaldev.s3.amazonaws.com/i/gd97g4kdyk1bpdeyfqst.png) *原文發佈於<https://muhajirframe.com/writing/unit-test-typescript-jest/>* 在本文中,我們將嘗試介紹 Typescript + jest 中的簡單單元測試。 我們將建立一個簡單的實用程式來檢測 url 是內部連結還是外部連結。 例如`https://www.google.com`是外部連結,而`/page1`是內部連結。我們將專案命名為`is-internal-link` ,但您可以將其命名為任何名稱。 先決條件 ---- - NodeJS - VSCode + Jest 外掛程式(可選) 建立新目錄 ``` mkdir is-internal-link ``` 初始化 npm ``` npm init ``` 安裝依賴項 ``` npm install --save-dev @types/jest @types/node jest ts-jest typescript ``` 建立`jest.config.js` ``` module.exports = { roots: ['<rootDir>/src'], transform: { '^.+\\.tsx?$': 'ts-jest', }, testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], } ``` 建立`tsconfig.json` ``` { "compilerOptions": { "target": "es5", "module": "commonjs", "lib": ["es2015"], "strict": true, "declaration": true, "outDir": "dist", "sourceMap": true }, "include": ["src/**/*"], "exclude": ["node_modules", "**/*.spec.ts"] } ``` 好了,我們準備好要寫程式碼了。建立檔案`src/main.ts`和`src/main.spec.ts` 您的文件樹現在應該如下所示 ``` . ├── node_modules ├── package-lock.json ├── package.json ├── src │ ├── main.spec.ts │ └── main.ts └── tsconfig.json ``` 在您最喜歡的編輯器中打開它。 (VSCode / Atom / Sublime / 等)。 我個人使用VSCode ``` import { isInternalLink } from './main' test('should return false given external link', () => { expect(isInternalLink('https://google.com')).toBe(false) }) test('should return true given internal link', () => { expect(isInternalLink('/some-page')).toBe(true) }) ``` 現在有辦法測試這一點。 ### 方式一 打開你的`package.json` 。並將其替換為您的`scripts` ``` "scripts": { "test": "jest" }, ``` 執行`npm run test` 。 現在您應該看到錯誤,因為我們還沒有實作程式碼,對嗎? ### 方式2 使用您的編輯器外掛程式。我比較喜歡這種方式。我只會在 VSCode 上展示它。您最喜歡的編輯器可能也有它。 安裝[vscode - 是](https://github.com/jest-community/vscode-jest) ![vscode-is](https://github.com/jest-community/vscode-jest/raw/master/images/vscode-jest.gif) 這個 GIF 應該是一個很好的解釋 vscode-jest 是如何運作的 我們繼續吧。 ![vscode-is](https://thepracticaldev.s3.amazonaws.com/i/38h9s3601vnvzl75wouf.png) 您的 VSCode 現在可能如下所示。 ### 實施程式碼 讓我們實作我們的`main.ts` ``` export const isInternalLink = (link: string) => /^\/(?!\/)/.test(link) ``` 切換回`main.spec.ts` 。現在您應該看到錯誤消失了,並且它變成了綠色。 專業提示:使用[VSCode 分割編輯器](https://code.visualstudio.com/docs/getstarted/userinterface#_side-by-side-editing)同時檢視程式碼 ( `main.ts` ) 和規格 ( `main.spec.ts` )。 長話短說 在第一面開啟`main.ts` `cmd+1` `cmd+p` `main.ts` 打開第二面的`main.spec.ts` `cmd+2` `cmd+p1` `main.spec.ts` *附註:我是 VSCode 和 Vim 的忠實粉絲,我有很多關於如何使用 VSCode 提高工作效率的技巧。如果你們有興趣的話請在評論中告訴我,我可以在這裡寫下來* 恭喜! 您剛剛使用 Typescript 和 Jest 進行了單元測試 --- 原文出處:https://dev.to/muhajirdev/unit-testing-with-typescript-and-jest-2gln

48 小時內更改資料庫 5 次,使我們的發布瀏覽量達到 35,000 次

這個故事的開始方式和它的標題一樣古怪。我於 2021 年開始[整合推理](https://integrated-reasoning.com/),以找出在解決[背包問題](https://en.wikipedia.org/wiki/Knapsack_problem)(例如 9、33 和 65 位元暫存器)時使用[任意精度](https://docs.amd.com/r/en-US/ug1399-vitis-hls/Overview-of-Arbitrary-Precision-Integer-Data-Types)整數會發生什麼。我的想法是,靈活的字長將使解決背包問題的[偽多項式時間演算法](https://en.wikipedia.org/wiki/Pseudo-polynomial_time#Knapsack_problem)更有效。簡而言之,它確實有幫助,但最大的收益來自[管道化](https://www.xilinx.com/developer/articles/task-level-parallelism-and-pipelining-in-hls.html)。 快進到 2024 年 4 月[中旬](https://irx.app)。我們規劃了一個 MVP,從本質上將執行[HiGHS](https://github.com/ERGO-Code/HiGHS)等開源求解器的體驗從命令列轉移到瀏覽器中。賣點是這些過程可能需要數月或更長時間才能完成,並且不必爭論它們將幫助我們的用戶專注於優化而不是執行優化所需的基礎設施。 將日誌從 AWS 即時推送到瀏覽器是我以前從未做過的事情。我認為這與[從 LLM 串流文字](https://vercel.com/docs/recipes/streaming-from-llm)的問題大致相似,這是我以前從未做過的事情,最近已經有了大量的發展。一方面,即時日誌事件對 MVP 來說可能有些過大了。另一方面,即時渲染日誌看起來很漂亮,並且可以幫助我們提供像命令列一樣流暢的使用者體驗。我們就這麼做了。 ![irx.app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f5ncdab8cecwrfidgv5o.png) 我們最初的計劃是使用[Prisma Pulse](https://www.prisma.io/docs/pulse/what-is-pulse)在邊緣函數中訂閱 Postgres 寫入,該邊緣函數使用[Vercel 串流回應](https://vercel.com/docs/functions/streaming)將每一行標準輸出從[HiGHS](https://github.com/ERGO-Code/HiGHS) 、 [CBC](https://github.com/coin-or/Cbc)和[SCIP](https://github.com/scipopt/scip)傳送到瀏覽器。除了複雜性之外,該計劃還存在兩個主要問題。找到一個具有正確的[表複製功能](https://www.prisma.io/docs/pulse/database-setup/general-database-instructions)組合來滿足 Pulse 和我們後端的要求的託管 Postgres 實例並非易事,這導致了本文標題前半部分的荒謬之處。兩天內五次更換 Postgres 提供者所引發的一系列事件仍然令我震驚。 ![螞蟻威爾森推特](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42o4f7nsoane5mzl3bap.png) 當來自 Supabase 的 Long ( [@beertocode](https://x.com/beertocode) ) 提出挑戰時,骨牌效應開始了。他解釋說,他希望為使用 Supabase 進行建造的新人提供額外的推動力。如果我們在兩週內與 Supabase 一起建立並發布,他們將利用社交媒體上的超級粉絲來使此次發布成為一項重大活動。挑戰被接受了,挑戰確實如此。 在評估資料庫選項時,社群媒體機會通常不被考慮在內。然而,我們的發布目標是收集盡可能多的用戶回饋,因此這是我們不能忽視的因素。我對 Supabase 的產品幾乎一無所知,因此花了一個下午的時間閱讀了他們的所有文件。到那天晚上,我對於如何建立 IRX 有了一個完全不同、更簡單的思維模型。 Supabase 的[匿名登入](https://supabase.com/docs/guides/auth/auth-anonymous)功能與[行級安全性相](https://supabase.com/docs/guides/auth/row-level-security)結合,這意味著人們可以在發布當天使用 IRX,而無需執行註冊程序。我們談論的是零准入門檻,在 2024 年看似永無止境的「建立另一個帳戶並重置密碼」的循環中,我什至認為這是不可能的。 事實證明,匿名登入對我們來說非常有價值,因為它使近 300 人能夠在發布當天嘗試使用 IRX 解決混合整數程式 - 即使他們不知道 IRX 是什麼並且只是玩玩。我們從比我想像的更廣泛的背景中獲得了令人難以置信的反饋。 ![IRX 流量](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h0en2wbnzudxv7wfsbn9.png) 我們的即時日誌流方法的兩個問題中的第二個問題直到我們實現該功能之後才出現。 Prisma Pulse 每個表最多有 20 個同時訂閱。直到資源洩漏瞬間消耗了我們的整個連接配額之前,這個限制並不明顯。如果將並髮用戶數限制在 20 個,則不會帶來良好的啟動效果,而且時間真的很緊迫。 ![IRX 啟動定時器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7banl0soa2fm39kcwqdu.png) 當 Long 在三小時後向我們發推文時,我們仍在除錯串流媒體。幸運的是,到目前為止,我已經閱讀了有關 Supabase 的所有內容,包括他們的[即時事件](https://supabase.com/docs/guides/realtime)[配額表](https://supabase.com/docs/guides/realtime/quotas),該表支援開箱即用的 10,000 個並發用戶端。進行切換很容易,這很大程度上要歸功於 Supabase 的 TypeScript[類型產生](https://supabase.com/docs/reference/cli/supabase-gen-types-typescript)。 除了一些[背壓](https://sdk.vercel.ai/docs/advanced/backpressure)問題之外,我們還設法為在可能不同的現場實例上同時執行的三個求解器提供即時日誌流。 ![IRX基礎設施](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1lgl316idyd9vcprnz8.png) ![IRX 解算器基礎設施](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tv7730xmmhcmn1rqcfgh.png) (IRX 內部基礎架構圖,作者: [@baykovr](https://twitter.com/baykovr) ) 龍說得最好: ![長推特](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1s50siph4hz53iqtpn5r.png) 真正瘋狂的是,我因為 Supabase 整合而註冊了 Resend。他們的創辦人[@zenorocha](https://x.com/zenorocha)在發布前幾天炸毀了[我們的 Twitter](https://twitter.com/IntegrateReason/) ,僅用一條推文就為我們的發布周流量增加了 16,000 次瀏覽。 ![芝諾·羅查在推特上](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/juruto1h7g5m32eum8ho.png) 這是我在發布當天對 IRX 基礎設施的草圖: ![IRX 發布日基礎設施](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a263k49npgp2p22ane1i.png) 我們驚慌地發射了。感謝您對 Supabase 的挑戰! ![Supabase 在 Twitter 上](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5j5fqeqyfolulnf1ctrb.png) --- 原文出處:https://dev.to/supabase/changing-databases-5-times-in-48-hours-boosted-our-launch-to-35000-views-1oc2

Wasp x Supabase:煙霧繚繞的全端組合🌶️ 🔥

**TL;DR:**在這篇文章中,我將向您介紹使用 React 和 Node.js 輕鬆建立全端應用程式的超高效堆疊 - Supabase 和 Wasp!我們將這兩種技術結合起來,使身份驗證、非同步作業、全端類型安全性、託管資料庫和託管儲存開箱即用。 ### 嘿,我是美穗! 👋 我是一名高級全端開發人員,我從事夢想和建立專案的工作已經近 10 年了。幾乎每天我都會偶然發現一個問題,並想建立一個應用程式來解決它!這就是為什麼我必須盡快做好這件事,盡可能少麻煩。 在使用 Wasp 和 Supabase 一段時間後,將它們組合在一起對我來說似乎是理所當然的。事實證明我是對的! 沒有理論,我們將建立一個應用程式! ----------------- 我們製作了一些有趣的東西:賀卡產生器,它不僅可以工作,而且還具有無限的*創意!*利用開源人工智慧模式——是的,閃亮的全新 Llama 3 和超高速的 SDXL-Lighting——我們將這個想法變成了現實。 需要視覺效果嗎?這是我製作的一個快速草圖(幸好我有那台平板電腦!): ![不同應用程式元件的草圖,其中一些是 Wasp 全端應用程式以及 Supabase 資料庫和存儲](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88b9d1bdqr3ijfesn7j2.jpg) 這就是我們的應用程式在完善並準備就緒後的樣子: {% 嵌入 https://twitter.com/infomiho/status/1782416172111024600 %} 查看[我們應用程式的部署版本](https://lazy-greeting-cards-client.fly.dev/)- 使用 Google 登入並獲得一些甜蜜的卡片! ### 駱駝有最後發言權 在我們的應用程式中,多個模型協作產生漂亮的結果。 ![有趣的圖像是一隻美洲駝告訴畫家要畫什麼](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/calgh9rgnpegrc4e5yjm.jpg) 它的工作原理如下: 1. 用戶給我們一個主題 2. Llama 3 產生賀卡文字(「text」) 3. ……它還描述了一些適合文字的藝術作品(“圖像提示”) 4. 穩定擴散繪製藝術品 5. ??? 6. 利潤! 想像一下,為你三歲的、專橫的、喜歡穿紅衣服的美洲駝索要一張賀卡(因為誰不會呢?!)。 你會得到這樣可愛的東西! 🦙: ![提示:“為我的美洲駝三歲生日準備的賀卡,它很專橫,喜歡穿紅色衣服”](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tt9bouh1tb1t1gvt8izb.jpeg) > 提示:“為我的美洲駝三歲生日準備的賀卡,它很專橫,喜歡穿紅色衣服” 支持我們! 🙏⭐️ --------- ![GH星點擊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/id9s6t8rcvfxty40bv2m.gif) 如果您覺得這篇文章有幫助,[請考慮在 Github 上給我們一顆星](https://github.com/wasp-lang/wasp)!我們在 Wasp 所做的一切都是開源的,您的支援幫助我們使 Web 開發變得更容易,並激勵我們撰寫更多這樣的文章。 ![支持我們](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgbmn45pia04bxt6zf83.gif) {% cta [https://github.com/wasp-lang/wasp](https://www.github.com/wasp-lang/wasp) %} ⭐️ 感謝您的支持🙏 {% endcta %} 我們是如何成功的 -------- 恕我直言,這是一張非常酷的賀卡,但我們還需要更多的東西才能使其成為適合我們用戶的合適應用程式。 ### 我們想用Google登入 我們使用[Wasp](https://wasp-lang.dev/)的內建[身份驗證](https://wasp-lang.dev/docs/auth/overview),這使您的身份驗證完全屬於您自己,並且獨立於任何第三方服務。在底層,它使用[Lucia](https://lucia-auth.com/)和[Arctic](https://arctic.js.org/)為您提供開箱即用的電子郵件、使用者名稱和多個 OAuth 提供者。 除了這段程式碼之外,我們不需要做太多的工作來設定它: ![Wasp設定檔程式碼](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5y0hm80oipqcuozhdjc.png) > Wasp設定檔程式碼 ### 我們想把製卡過程分開 使用 Wasp 的非同步作業,我們將卡片建立過程分成可管理的步驟,因此使用者不會被蒙在鼓裡。他們獲得了有趣的更新,例如“預熱人工智慧”和“繪製圖像”——讓等待變得更容易忍受🐻 這些任務由[pg-boss](https://github.com/timgit/pg-boss/)在幕後管理(基於 PostgreSQL),哦,看,無縫連接到... ### 託管 PostgreSQL 在這個應用程式中使用[Supabase](https://supabase.com/)堅如磐石的 PostgreSQL 資料庫是一次很棒的體驗。該產品的 DX 是驚人的:當您不想從頭開始建立自己的管理面板時,查看和管理資料庫資料是一個救星。 ![Supabase 表編輯器的螢幕截圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lyk8ns3yii8ozs3u2kbv.png) > 表編輯器非常適合對資料庫進行快速管理工作 ### 現代應用程式需要現代存儲 對於存儲,我們選擇了 Supabase 的[S3 相容存儲](https://supabase.com/blog/s3-compatible-storage?utm_source=postmark&utm_medium=email&utm_campaign=launch-week-11)選項。這意味著我們的應用程式不依賴專用磁碟儲存 - 使其更便攜且更容易擴展。 ![賀卡圖像概述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swf5v97w3u3om8jhoqd8.png) > 賀卡圖像概述 ### [火焰3-70B](https://replicate.com/meta/meta-llama-3-70b-instruct)型號 Meta 最新的 Llama3 是 GPT-4(仍在訓練的 405B 模型)的開源競爭者。 {% 嵌入 https://twitter.com/lmsysorg/status/1782483699449332144 %} 它產生的文本在大多數情況下總是有用且有趣的。我覺得不需要那麼多的及時調整就能獲得好的結果。 **我們使用的提示** 寫賀卡: ``` Write a greeting card text for the following topic: "<topic>". Make it clever. Return it as plain text, no quotes, no extra syntax. Return only the greeting card text. Max chars: 80! ``` 例如,如果我們使用**“笑”**這個主題,我們會得到以下結果:“笑是最好的良藥,除非您有健康保險,否則可能會更好。” 取得可用影像提示: ``` Based on the text I'll provide, give me a nice artwork to go alongside it. Describe it in a way of a short list of features of the artwork. Use descriptive language so someone can paint it. Only respond with the description, no extra syntax. Max words: 30 Context: <original_topic> Text: <text> ``` 對於上面的範例,我們會得到以下圖像提示:「一個微笑的藥瓶的異想天開的插圖,周圍環繞著旋轉的笑聲氣泡,背景中有一個微妙的醫療十字架,襯託在溫暖、陽光明媚的黃色天空的映襯下。 現在,我們為什麼要做第二步?只需比較“文字”和“圖像提示”直接生成的圖像: ![使用文字作為提示來產生圖像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/562chgclebakt1vyiq6m.png) > 直接使用“文字” ![使用特殊圖像提示產生的圖像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/smb20h6us30g6siumohl.png) > 使用 Llama 3 產生的“影像提示” 正如您所看到的,基於圖像提示的版本在美學上與賀卡氛圍更加一致——色彩豐富且友好。 ### [SDXL-Lighting](https://replicate.com/bytedance/sdxl-lightning-4step) (4 步變體)模型 位元組跳動基於Stable Diffusion XL製作了這個模型,並使其*速度超快*。賀卡圖像在 1-2 秒內建立。這些圖像讓我想起了 Midjourney 的質量,這意味著模型做得很好。 ![SDXL-Lighting 範例圖片 1:抽象藝術](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9rla0gdcojylfzgtxt4.png) ![SDXL-Lighting 圖片範例 2:貓的影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24gutoemdtr4oso82myy.png) ![SDXL-Lighting 圖像範例 3:太空人的圖像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u51c3m48qrwsewk3usq9.png) ### 生成成本和時間 我們使用[Replicate](https://replicate.com/)來執行模型,到目前為止,90 張卡的成本為 26 美分,這意味著每張卡的成本不到三分之一美分! 開源模型、最少的代幣使用和快速圖像生成的結合使成本保持在令人印象深刻的低水平。 製作一張卡片只需不到 5 秒,如果您趕時間,這會有所幫助 🙂 試一試! ---- 在[我們應用程式的部署版本](https://lazy-greeting-cards-client.fly.dev/)中查看[ShadCN](https://ui.shadcn.com/)製作的漂亮 UI — 使用 Google 登入並獲得一些可愛的卡片!另外,整個專案是開源的。從[GitHub](https://github.com/wasp-lang/lazy-card-generator)取得程式碼。 --- 原文出處:https://dev.to/wasp/wasp-x-supabase-smokin-hot-full-stack-combo-ioe

AI 驅動的前端 UI 元件產生器(Next.js、GPT4、Langchain 和 CopilotKit)

**長話短說** -------- 在本文中,您將了解如何建立由 AI 驅動的前端 UI 元件產生器,該產生器使您能夠透過實作教學產生 Next.js Tailwind CSS UI 元件。 我們將介紹如何: - 使用 Next.js、TypeScript 和 Tailwind CSS 建立 UI 元件產生器 Web 應用程式。 - 使用 CopilotKit 將 AI 功能整合到 UI 元件產生器中。 - 整合嵌入式程式碼編輯器以變更產生的程式碼。 先決條件 ---- 要完全理解本教程,您需要對 React 或 Next.js 有基本的了解。 以下是建立 AI 支援的 UI 元件產生器所需的工具: - [Ace 程式碼編輯器](https://ace.c9.io/)- 用 JvaScript 編寫的嵌入式程式碼編輯器,與本機編輯器的功能和效能相符。 - [Langchain](https://www.langchain.com/) - 提供了一個框架,使人工智慧代理能夠搜尋網路並研究任何主題。 - [OpenAI API](https://platform.openai.com/api-keys) - 提供 API 金鑰,讓您能夠使用 ChatGPT 模型執行各種任務。 - [Tavily AI](https://tavily.com/) - 一個搜尋引擎,使人工智慧代理能夠在應用程式中進行研究並存取即時知識。 - [CopilotKit](https://github.com/CopilotKit) - 一個開源副駕駛框架,用於建立自訂 AI 聊天機器人、應用程式內 AI 代理程式和文字區域。 專案設定和套件安裝 --------- 首先,透過在終端機中執行以下程式碼片段來建立 Next.js 應用程式: ``` npx create-next-app@latest aiuigenerator ``` 選擇您首選的配置設定。在本教學中,我們將使用 TypeScript 和 Next.js App Router。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0c2uq47mrd3ppxqvr1v7.png) 接下來,安裝 Ace 程式碼編輯器和 Langchain 軟體套件及其相依性。 ``` npm install react-ace @langchain/langgraph ``` 最後,安裝 CopilotKit 軟體套件。這些套件使我們能夠從 React 狀態檢索資料並將 AI copilot 新增至應用程式。 ``` npm install @copilotkit/react-ui @copilotkit/react-textarea @copilotkit/react-core @copilotkit/backend ``` 恭喜!您現在已準備好建立由人工智慧驅動的部落格。 **建構 UI 元件產生器前端** ----------------- 在本節中,我將引導您完成使用靜態內容建立 UI 元件產生器前端的過程,以定義生成器的使用者介面。 首先,請在程式碼編輯器中前往`/[root]/src/app`並建立一個名為`components`的資料夾。在 Components 資料夾中,建立兩個名為`Header.tsx`和`CodeTutorial.tsx`的檔案。 在`Header.tsx`檔案中,新增以下程式碼,定義一個名為`Header`的功能元件,該元件將呈現生成器的導覽列。 ``` "use client"; import Link from "next/link"; export default function Header() { return ( <> <header className="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-gray-800 border-b border-gray-200 text-sm py-3 sm:py-0 "> <nav className="relative max-w-7xl w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8" aria-label="Global"> <div className="flex items-center justify-between"> <Link className="w-full flex-none text-xl text-white font-semibold p-6" href="/" aria-label="Brand"> AI-UI-Components-Generator </Link> </div> </nav> </header> </> ); } ``` 在`CodeTutorial.tsx`檔案中,加入以下程式碼,定義一個名為`CodeTutorial`的功能元件,該元件呈現 UI 元件產生器主頁,該首頁將顯示產生的 UI 元件、嵌入式程式碼編輯器和產生的實作教學。 ``` "use client"; import Markdown from "react-markdown"; import { useState } from "react"; import AceEditor from "react-ace"; import React from "react"; export default function CodeTutorial() { const [code, setCode] = useState<string[]>([ `<h1 class="text-red-500">Hello World</h1>`, ]); const [codeToDisplay, setCodeToDisplay] = useState<string>(code[0] || ""); const [codeTutorial, setCodeTutorial] = useState(``); function onChange(newCode: any) { setCodeToDisplay(newCode); } return ( <> <main className=" min-h-screen px-4"> <div className="w-full h-full min-h-[70vh] flex justify-between gap-x-1 "> <div className="w-2/3 min-h-[60vh] rounded-lg bg-white shadow-lg p-2 border mt-8 overflow-auto"> <div className="w-full min-h-[60vh] rounded-lg" dangerouslySetInnerHTML={{ __html: codeToDisplay }} /> </div> <AceEditor placeholder="Placeholder Text" mode="html" theme="monokai" name="blah2" className="w-[50%] min-h-[60vh] p-2 mt-8 rounded-lg" onChange={onChange} fontSize={14} lineHeight={19} showPrintMargin={true} showGutter={true} highlightActiveLine={true} value={codeToDisplay} setOptions={{ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: false, showLineNumbers: true, tabSize: 2, }} /> </div> <div className="w-10/12 mx-auto"> <div className="mt-8"> <h1 className="text-white text-center text-xl font-semibold p-6"> Code Tutorial </h1> {codeTutorial ? ( <Markdown className="text-white">{codeTutorial}</Markdown> ) : ( <div className="text-white"> The Code Tutorial Will Appear Here </div> )} </div> </div> </main> </> ); } ``` 接下來,前往`/[root]/src/page.tsx`文件,新增以下程式碼,導入`CodeTutorial`和`Header`元件,並定義名為`Home`的功能元件。 ``` import React from "react"; import Header from "./components/Header"; import CodeTutorial from "./components/CodeTutorial"; export default function Home() { return ( <> <Header /> <CodeTutorial /> </> ); } ``` 接下來,刪除 globals.css 檔案中的 CSS 程式碼並新增以下 CSS 程式碼。 ``` @tailwind base; @tailwind components; @tailwind utilities; @tailwind base; @tailwind components; @tailwind utilities; body { height: 100vh; background-color: rgb(16, 23, 42); } pre { margin: 1rem; padding: 1rem; border-radius: 10px; background-color: black; overflow: auto; } h2, p { padding-bottom: 1rem; padding-top: 1rem; } code { margin-bottom: 2rem; } ``` 最後,在命令列上執行命令`npm run dev` ,然後導航到 http://localhost:3000/。 現在您應該在瀏覽器上查看 UI 元件產生器前端,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/id9z3bizkb2bghbe4bxb.png) **使用 CopilotKit 將 AI 功能整合到元件產生器** --------------------------------- 在本節中,您將學習如何為 UI 元件產生器新增 AI 副駕駛以產生 UI 元件程式碼以及使用 CopilotKit 的實作教學。 CopilotKit 提供前端和[後端](https://docs.copilotkit.ai/getting-started/quickstart-backend)套件。它們使您能夠插入 React 狀態並使用 AI 代理在後端處理應用程式資料。 首先,讓我們將 CopilotKit React 元件加入到部落格前端。 ### **將 CopilotKit 新增至部落格前端** 在這裡,我將引導您完成將 UI 元件產生器與 CopilotKit 前端整合的過程,以方便產生 UI 元件程式碼和實作教學。 首先,使用下面的程式碼片段導入`/[root]/src/app/components/CodeTutorial.tsx`檔案頂部的自訂掛鉤`useMakeCopilotReadable`和`useCopilotAction` 。 ``` import { useCopilotAction, useMakeCopilotReadable, } from "@copilotkit/react-core"; ``` 在`CodeTutorial`函數內的狀態變數下方,加入以下程式碼,該程式碼使用`useMakeCopilotReadable`掛鉤來新增將作為應用程式內聊天機器人的上下文產生的程式碼。該鉤子使副駕駛可以讀取程式碼。 ``` useMakeCopilotReadable(codeToDisplay); ``` 在上面的程式碼下方,新增以下程式碼,該程式碼使用`useCopilotAction`掛鉤來設定名為`generateCodeAndImplementationTutorial`的操作,該操作將啟用 UI 元件程式碼和實作教學課程的產生。 這個操作接受兩個參數,稱為`code`和`tutorial` ,這兩個參數可以產生 UI 元件程式碼和實作教程。 該操作包含一個處理函數,該函數根據給定的提示產生 UI 元件程式碼和實作教程。 在處理函數內部, `codeToDisplay`狀態會使用新產生的程式碼進行更新,而`codeTutorial`狀態會使用新產生的教學課程進行更新,如下所示。 ``` useCopilotAction( { name: "generateCodeAndImplementationTutorial", description: "Create Code Snippet with React.js(Next.js), tailwindcss and an implementation tutorial of the code generated.", parameters: [ { name: "code", type: "string", description: "Code to be generated", required: true, }, { name: "tutorial", type: "string", description: "Markdown of step by step guide tutorial on how to use the generated code accompanied with the code. Include introduction, prerequisites and what happens at every step accompanied with code generated earlier. Don't forget to add how to render the code on browser.", required: true, }, ], handler: async ({ code, tutorial }) => { setCode((prev) => [...prev, code]); setCodeToDisplay(code); setCodeTutorial(tutorial); }, }, [codeToDisplay, codeTutorial] ); ``` 之後,請前往`/[root]/src/app/page.tsx`檔案並使用下面的程式碼匯入頂部的 CopilotKit 前端套件和樣式。 ``` import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; ``` 然後使用`CopilotKit`包裝`CopilotSidebar`和`CodeTutorial`元件,如下所示。 `CopilotKit`元件指定 CopilotKit 後端端點 ( `/api/copilotkit/` ) 的 URL,而`CopilotSidebar`呈現應用程式內聊天機器人,您可以提示產生 UI 元件程式碼和實作教學。 ``` export default function Home() { return ( <> <Header /> <CopilotKit url="/api/copilotkit"> <CopilotSidebar instructions="Help the user generate code. Ask the user if to generate its tutorial." defaultOpen={true} labels={{ title: "Code & Tutorial Generator", initial: "Hi! 👋 I can help you generate code and its tutorial.", }}> <CodeTutorial /> </CopilotSidebar> </CopilotKit> </> ); } ``` 之後,執行開發伺服器並導航到 http://localhost:3000。您應該會看到應用程式內聊天機器人已整合到 UI 元件產生器中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ty4g6tuluhfiqtnnyxvg.png) ### **將 CopilotKit 後端加入博客** 在這裡,我將引導您完成將 UI 元件產生器與 CopilotKit 後端整合的過程,該後端處理來自前端的請求,並提供函數呼叫和各種 LLM 後端(例如 GPT)。 此外,我們將整合一個名為 Tavily 的人工智慧代理,它可以研究網路上的任何主題。 首先,在根目錄中建立一個名為`.env.local`的檔案。然後在保存`ChatGPT`和`Tavily` Search API 金鑰的檔案中加入下面的環境變數。 ``` OPENAI_API_KEY="Your ChatGPT API key" TAVILY_API_KEY="Your Tavily Search API key" ``` 若要取得 ChatGPT API 金鑰,請導覽至 https://platform.openai.com/api-keys。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjl2g88iedd1n0qkd3ai.png) 若要取得 Tavilly Search API 金鑰,請導覽至 https://app.tavily.com/home ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m00kyux6biskw7xn2wec.png) 之後,轉到`/[root]/src/app`並建立一個名為`api`的資料夾。在`api`資料夾中,建立一個名為`copilotkit`的資料夾。 在`copilotkit`資料夾中,建立一個名為`research.ts`的檔案。然後導航到[該 Research.ts gist 文件](https://gist.github.com/TheGreatBonnie/58dc21ebbeeb8cbb08df665db762738c),複製程式碼,並將其新增至**`research.ts`**檔案中 接下來,在`/[root]/src/app/api/copilotkit`資料夾中建立一個名為`route.ts`的檔案。該文件將包含設定後端功能來處理 POST 請求的程式碼。它有條件地包括對給定主題進行研究的“研究”操作。 現在在文件頂部導入以下模組。 ``` import { CopilotBackend, OpenAIAdapter } from "@copilotkit/backend"; // For backend functionality with CopilotKit. import { researchWithLangGraph } from "./research"; // Import a custom function for conducting research. import { AnnotatedFunction } from "@copilotkit/shared"; // For annotating functions with metadata. ``` 在上面的程式碼下面,定義一個執行時間環境變數和一個名為`researchAction`的函數,該函數使用下面的程式碼研究某個主題。 ``` // Define a runtime environment variable, indicating the environment where the code is expected to run. export const runtime = "edge"; // Define an annotated function for research. This object includes metadata and an implementation for the function. const researchAction: AnnotatedFunction<any> = { name: "research", // Function name. description: "Call this function to conduct research on a certain topic. Respect other notes about when to call this function", // Function description. argumentAnnotations: [ // Annotations for arguments that the function accepts. { name: "topic", // Argument name. type: "string", // Argument type. description: "The topic to research. 5 characters or longer.", // Argument description. required: true, // Indicates that the argument is required. }, ], implementation: async (topic) => { // The actual function implementation. console.log("Researching topic: ", topic); // Log the research topic. return await researchWithLangGraph(topic); // Call the research function and return its result. }, }; ``` 然後在上面的程式碼下加入下面的程式碼來定義處理POST請求的非同步函數。 ``` // Define an asynchronous function that handles POST requests. export async function POST(req: Request): Promise<Response> { const actions: AnnotatedFunction<any>[] = []; // Initialize an array to hold actions. // Check if a specific environment variable is set, indicating access to certain functionality. if (process.env.TAVILY_API_KEY) { actions.push(researchAction); // Add the research action to the actions array if the condition is true. } // Instantiate CopilotBackend with the actions defined above. const copilotKit = new CopilotBackend({ actions: actions, }); // Use the CopilotBackend instance to generate a response for the incoming request using an OpenAIAdapter. return copilotKit.response(req, new OpenAIAdapter()); } ``` 如何產生 UI 元件 ---------- 現在轉到您之前整合的應用程式內聊天機器人,並給它一個提示,例如「產生聯絡表單」。 生成完成後,您應該會看到生成的聯絡表單元件及其實作教程,如下所示。您也可以使用嵌入式程式碼編輯器修改產生的程式碼。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43t9oauptomio4cy1gwr.png) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/297vxxiqti56ydevfmyl.png) 恭喜!您已完成本教學的專案。 結論 -- [CopilotKit](https://copilotkit.ai/)是一款令人難以置信的工具,可讓您在幾分鐘內將 AI Copilot 加入到您的產品中。無論您是對人工智慧聊天機器人和助理感興趣,還是對複雜任務的自動化感興趣,CopilotKit 都能讓您輕鬆實現。 如果您需要建立 AI 產品或將 AI 工具整合到您的軟體應用程式中,您應該考慮 CopilotKit。 您可以在 GitHub 上找到本教學的源程式碼: <https://github.com/TheGreatBonnie/AIPoweredUIComponentsGenerator> --- 原文出處:https://dev.to/tcms/ai-powered-frontend-ui-components-generator-nextjs-gpt4-langchain-copilotkit-1hac

AI 驅動的前端 UI 元件產生器(Next.js、GPT4、Langchain 和 CopilotKit)

**長話短說** -------- 在本文中,您將了解如何建立由 AI 驅動的前端 UI 元件產生器,該產生器使您能夠透過實作教學產生 Next.js Tailwind CSS UI 元件。 我們將介紹如何: - 使用 Next.js、TypeScript 和 Tailwind CSS 建立 UI 元件產生器 Web 應用程式。 - 使用 CopilotKit 將 AI 功能整合到 UI 元件產生器中。 - 整合嵌入式程式碼編輯器以變更產生的程式碼。 先決條件 ---- 要完全理解本教程,您需要對 React 或 Next.js 有基本的了解。 以下是建立 AI 支援的 UI 元件產生器所需的工具: - [Ace 程式碼編輯器](https://ace.c9.io/)- 用 JvaScript 編寫的嵌入式程式碼編輯器,與本機編輯器的功能和效能相符。 - [Langchain](https://www.langchain.com/) - 提供了一個框架,使人工智慧代理能夠搜尋網路並研究任何主題。 - [OpenAI API](https://platform.openai.com/api-keys) - 提供 API 金鑰,讓您能夠使用 ChatGPT 模型執行各種任務。 - [Tavily AI](https://tavily.com/) - 一個搜尋引擎,使人工智慧代理能夠在應用程式中進行研究並存取即時知識。 - [CopilotKit](https://github.com/CopilotKit) - 一個開源副駕駛框架,用於建立自訂 AI 聊天機器人、應用程式內 AI 代理程式和文字區域。 專案設定和套件安裝 --------- 首先,透過在終端機中執行以下程式碼片段來建立 Next.js 應用程式: ``` npx create-next-app@latest aiuigenerator ``` 選擇您首選的配置設定。在本教學中,我們將使用 TypeScript 和 Next.js App Router。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0c2uq47mrd3ppxqvr1v7.png) 接下來,安裝 Ace 程式碼編輯器和 Langchain 軟體套件及其相依性。 ``` npm install react-ace @langchain/langgraph ``` 最後,安裝 CopilotKit 軟體套件。這些套件使我們能夠從 React 狀態檢索資料並將 AI copilot 新增至應用程式。 ``` npm install @copilotkit/react-ui @copilotkit/react-textarea @copilotkit/react-core @copilotkit/backend ``` 恭喜!您現在已準備好建立由人工智慧驅動的部落格。 **建構 UI 元件產生器前端** ----------------- 在本節中,我將引導您完成使用靜態內容建立 UI 元件產生器前端的過程,以定義生成器的使用者介面。 首先,請在程式碼編輯器中前往`/[root]/src/app`並建立一個名為`components`的資料夾。在 Components 資料夾中,建立兩個名為`Header.tsx`和`CodeTutorial.tsx`的檔案。 在`Header.tsx`檔案中,新增以下程式碼,定義一個名為`Header`的功能元件,該元件將呈現生成器的導覽列。 ``` "use client"; import Link from "next/link"; export default function Header() { return ( <> <header className="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-gray-800 border-b border-gray-200 text-sm py-3 sm:py-0 "> <nav className="relative max-w-7xl w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8" aria-label="Global"> <div className="flex items-center justify-between"> <Link className="w-full flex-none text-xl text-white font-semibold p-6" href="/" aria-label="Brand"> AI-UI-Components-Generator </Link> </div> </nav> </header> </> ); } ``` 在`CodeTutorial.tsx`檔案中,加入以下程式碼,定義一個名為`CodeTutorial`的功能元件,該元件呈現 UI 元件產生器主頁,該首頁將顯示產生的 UI 元件、嵌入式程式碼編輯器和產生的實作教學。 ``` "use client"; import Markdown from "react-markdown"; import { useState } from "react"; import AceEditor from "react-ace"; import React from "react"; export default function CodeTutorial() { const [code, setCode] = useState<string[]>([ `<h1 class="text-red-500">Hello World</h1>`, ]); const [codeToDisplay, setCodeToDisplay] = useState<string>(code[0] || ""); const [codeTutorial, setCodeTutorial] = useState(``); function onChange(newCode: any) { setCodeToDisplay(newCode); } return ( <> <main className=" min-h-screen px-4"> <div className="w-full h-full min-h-[70vh] flex justify-between gap-x-1 "> <div className="w-2/3 min-h-[60vh] rounded-lg bg-white shadow-lg p-2 border mt-8 overflow-auto"> <div className="w-full min-h-[60vh] rounded-lg" dangerouslySetInnerHTML={{ __html: codeToDisplay }} /> </div> <AceEditor placeholder="Placeholder Text" mode="html" theme="monokai" name="blah2" className="w-[50%] min-h-[60vh] p-2 mt-8 rounded-lg" onChange={onChange} fontSize={14} lineHeight={19} showPrintMargin={true} showGutter={true} highlightActiveLine={true} value={codeToDisplay} setOptions={{ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: false, showLineNumbers: true, tabSize: 2, }} /> </div> <div className="w-10/12 mx-auto"> <div className="mt-8"> <h1 className="text-white text-center text-xl font-semibold p-6"> Code Tutorial </h1> {codeTutorial ? ( <Markdown className="text-white">{codeTutorial}</Markdown> ) : ( <div className="text-white"> The Code Tutorial Will Appear Here </div> )} </div> </div> </main> </> ); } ``` 接下來,前往`/[root]/src/page.tsx`文件,新增以下程式碼,導入`CodeTutorial`和`Header`元件,並定義名為`Home`的功能元件。 ``` import React from "react"; import Header from "./components/Header"; import CodeTutorial from "./components/CodeTutorial"; export default function Home() { return ( <> <Header /> <CodeTutorial /> </> ); } ``` 接下來,刪除 globals.css 檔案中的 CSS 程式碼並新增以下 CSS 程式碼。 ``` @tailwind base; @tailwind components; @tailwind utilities; @tailwind base; @tailwind components; @tailwind utilities; body { height: 100vh; background-color: rgb(16, 23, 42); } pre { margin: 1rem; padding: 1rem; border-radius: 10px; background-color: black; overflow: auto; } h2, p { padding-bottom: 1rem; padding-top: 1rem; } code { margin-bottom: 2rem; } ``` 最後,在命令列上執行命令`npm run dev` ,然後導航到 http://localhost:3000/。 現在您應該在瀏覽器上查看 UI 元件產生器前端,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/id9z3bizkb2bghbe4bxb.png) **使用 CopilotKit 將 AI 功能整合到元件產生器** --------------------------------- 在本節中,您將學習如何為 UI 元件產生器新增 AI 副駕駛以產生 UI 元件程式碼以及使用 CopilotKit 的實作教學。 CopilotKit 提供前端和[後端](https://docs.copilotkit.ai/getting-started/quickstart-backend)套件。它們使您能夠插入 React 狀態並使用 AI 代理在後端處理應用程式資料。 首先,我們將 CopilotKit React 元件加入到部落格前端。 ### **將 CopilotKit 新增至部落格前端** 在這裡,我將引導您完成將 UI 元件產生器與 CopilotKit 前端整合的過程,以方便產生 UI 元件程式碼和實作教學。 首先,使用下面的程式碼片段導入`/[root]/src/app/components/CodeTutorial.tsx`檔案頂部的自訂掛鉤`useMakeCopilotReadable`和`useCopilotAction` 。 ``` import { useCopilotAction, useMakeCopilotReadable, } from "@copilotkit/react-core"; ``` 在`CodeTutorial`函數內的狀態變數下方,加入以下程式碼,該程式碼使用`useMakeCopilotReadable`掛鉤來新增將作為應用程式內聊天機器人的上下文產生的程式碼。該鉤子使副駕駛可以讀取程式碼。 ``` useMakeCopilotReadable(codeToDisplay); ``` 在上面的程式碼下方,新增以下程式碼,該程式碼使用`useCopilotAction`掛鉤來設定名為`generateCodeAndImplementationTutorial`的操作,該操作將啟用 UI 元件程式碼和實作教學課程的產生。 這個操作接受兩個參數,稱為`code`和`tutorial` ,這兩個參數可以產生 UI 元件程式碼和實作教程。 該操作包含一個處理函數,該函數根據給定的提示產生 UI 元件程式碼和實作教程。 在處理函數內部, `codeToDisplay`狀態會使用新產生的程式碼進行更新,而`codeTutorial`狀態會使用新產生的教學課程進行更新,如下所示。 ``` useCopilotAction( { name: "generateCodeAndImplementationTutorial", description: "Create Code Snippet with React.js(Next.js), tailwindcss and an implementation tutorial of the code generated.", parameters: [ { name: "code", type: "string", description: "Code to be generated", required: true, }, { name: "tutorial", type: "string", description: "Markdown of step by step guide tutorial on how to use the generated code accompanied with the code. Include introduction, prerequisites and what happens at every step accompanied with code generated earlier. Don't forget to add how to render the code on browser.", required: true, }, ], handler: async ({ code, tutorial }) => { setCode((prev) => [...prev, code]); setCodeToDisplay(code); setCodeTutorial(tutorial); }, }, [codeToDisplay, codeTutorial] ); ``` 之後,請前往`/[root]/src/app/page.tsx`檔案並使用下面的程式碼匯入頂部的 CopilotKit 前端套件和樣式。 ``` import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; ``` 然後使用`CopilotKit`包裝`CopilotSidebar`和`CodeTutorial`元件,如下所示。 `CopilotKit`元件指定 CopilotKit 後端端點 ( `/api/copilotkit/` ) 的 URL,而`CopilotSidebar`呈現應用程式內聊天機器人,您可以提示產生 UI 元件程式碼和實作教學。 ``` export default function Home() { return ( <> <Header /> <CopilotKit url="/api/copilotkit"> <CopilotSidebar instructions="Help the user generate code. Ask the user if to generate its tutorial." defaultOpen={true} labels={{ title: "Code & Tutorial Generator", initial: "Hi! 👋 I can help you generate code and its tutorial.", }}> <CodeTutorial /> </CopilotSidebar> </CopilotKit> </> ); } ``` 之後,執行開發伺服器並導航到 http://localhost:3000。您應該會看到應用程式內聊天機器人已整合到 UI 元件產生器中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ty4g6tuluhfiqtnnyxvg.png) ### **將 CopilotKit 後端加入博客** 在這裡,我將引導您完成將 UI 元件產生器與 CopilotKit 後端整合的過程,該後端處理來自前端的請求,並提供函數呼叫和各種 LLM 後端(例如 GPT)。 此外,我們將整合一個名為 Tavily 的人工智慧代理,它可以研究網路上的任何主題。 首先,在根目錄中建立一個名為`.env.local`的檔案。然後在保存`ChatGPT`和`Tavily` Search API 金鑰的檔案中加入下面的環境變數。 ``` OPENAI_API_KEY="Your ChatGPT API key" TAVILY_API_KEY="Your Tavily Search API key" ``` 若要取得 ChatGPT API 金鑰,請導覽至 https://platform.openai.com/api-keys。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjl2g88iedd1n0qkd3ai.png) 若要取得 Tavilly Search API 金鑰,請導覽至 https://app.tavily.com/home ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m00kyux6biskw7xn2wec.png) 之後,轉到`/[root]/src/app`並建立一個名為`api`的資料夾。在`api`資料夾中,建立一個名為`copilotkit`的資料夾。 在`copilotkit`資料夾中,建立一個名為`research.ts`的檔案。然後導航到[該 Research.ts gist 文件](https://gist.github.com/TheGreatBonnie/58dc21ebbeeb8cbb08df665db762738c),複製程式碼,並將其新增至**`research.ts`**檔案中 接下來,在`/[root]/src/app/api/copilotkit`資料夾中建立一個名為`route.ts`的檔案。該文件將包含設定後端功能來處理 POST 請求的程式碼。它有條件地包括對給定主題進行研究的“研究”操作。 現在在文件頂部導入以下模組。 ``` import { CopilotBackend, OpenAIAdapter } from "@copilotkit/backend"; // For backend functionality with CopilotKit. import { researchWithLangGraph } from "./research"; // Import a custom function for conducting research. import { AnnotatedFunction } from "@copilotkit/shared"; // For annotating functions with metadata. ``` 在上面的程式碼下面,定義一個執行時間環境變數和一個名為`researchAction`的函數,該函數使用下面的程式碼研究某個主題。 ``` // Define a runtime environment variable, indicating the environment where the code is expected to run. export const runtime = "edge"; // Define an annotated function for research. This object includes metadata and an implementation for the function. const researchAction: AnnotatedFunction<any> = { name: "research", // Function name. description: "Call this function to conduct research on a certain topic. Respect other notes about when to call this function", // Function description. argumentAnnotations: [ // Annotations for arguments that the function accepts. { name: "topic", // Argument name. type: "string", // Argument type. description: "The topic to research. 5 characters or longer.", // Argument description. required: true, // Indicates that the argument is required. }, ], implementation: async (topic) => { // The actual function implementation. console.log("Researching topic: ", topic); // Log the research topic. return await researchWithLangGraph(topic); // Call the research function and return its result. }, }; ``` 然後在上面的程式碼下加入下面的程式碼來定義處理POST請求的非同步函數。 ``` // Define an asynchronous function that handles POST requests. export async function POST(req: Request): Promise<Response> { const actions: AnnotatedFunction<any>[] = []; // Initialize an array to hold actions. // Check if a specific environment variable is set, indicating access to certain functionality. if (process.env.TAVILY_API_KEY) { actions.push(researchAction); // Add the research action to the actions array if the condition is true. } // Instantiate CopilotBackend with the actions defined above. const copilotKit = new CopilotBackend({ actions: actions, }); // Use the CopilotBackend instance to generate a response for the incoming request using an OpenAIAdapter. return copilotKit.response(req, new OpenAIAdapter()); } ``` 如何產生 UI 元件 ---------- 現在轉到您之前整合的應用程式內聊天機器人,並給它一個提示,例如「產生聯絡表單」。 生成完成後,您應該會看到生成的聯絡表單元件及其實作教程,如下所示。您也可以使用嵌入式程式碼編輯器修改產生的程式碼。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43t9oauptomio4cy1gwr.png) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/297vxxiqti56ydevfmyl.png) 恭喜!您已完成本教學的專案。 結論 -- [CopilotKit](https://copilotkit.ai/)是一款令人難以置信的工具,可讓您在幾分鐘內將 AI Copilot 加入到您的產品中。無論您是對人工智慧聊天機器人和助理感興趣,還是對複雜任務的自動化感興趣,CopilotKit 都能讓您輕鬆實現。 如果您需要建立 AI 產品或將 AI 工具整合到您的軟體應用程式中,您應該考慮 CopilotKit。 您可以在 GitHub 上找到本教學的源程式碼: <https://github.com/TheGreatBonnie/AIPoweredUIComponentsGenerator> --- 原文出處:https://dev.to/the_greatbonnie/ai-powered-frontend-ui-components-generator-nextjs-gpt4-langchain-copilotkit-1hac

推出適用於 AWS 的新 Fullstack TypeScript DX

我們聽到開發人員一次又一次地表達同樣的痛點:很難將應用程式的前端與後端集成,您需要在日常工作負載中解決不斷擴大的技術範圍,並且很難駕馭廣泛的雲端產品。雖然後端即服務產品提供了一個簡單的入口,但它們通常要求開發人員隨著公司規模的擴大而遷移。這就是我們從頭開始重建[AWS Amplify 的](https://aws.amazon.com/amplify/?trk=60cc8d4a-110e-474c-ac1a-69b65329c4ff&sc_channel=el)原因,以直接解決前端開發人員每天在工作中面臨的這些挑戰。 我們非常高興地宣布推出全新的 Amplify 體驗,旨在讓前端開發人員僅使用 TypeScript 即可建立全端、雲端驅動的應用程式。讓我們更深入地了解第二代 Amplify 的樣子! https://www.youtube.com/watch?v=BCXdLx6xHmc 只需幾分鐘即可將您的前端運送到全球 ----------------- 您可以使用 Amplify Hosting 透過幾個快速簡單的步驟部署您的應用程式前端。首先前往 AWS 控制台,選擇您的 Git 供應商,選擇您的儲存庫和分支,更新您想要自訂的任何建置設置,然後「儲存並部署」。幾分鐘後,您的應用程式將在全球部署!您可以使用下列步驟託管使用 Next.js、Nuxt、Astro 和 Vite 等框架建立的靜態或伺服器端渲染應用程式。 ![Amplify 在新控制台 UI 中支援所有 Git 提供者](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tg7lv7dwbihn1rbwivv3.jpg) 快速從前端到全端 -------- 當您建立新的 Amplify 應用程式時,您將獲得一些為您建立的文件,您可以在其中保存後端程式碼。 ``` ├── amplify/ │ ├── auth/ │ │ └── resource.ts │ ├── data/ │ │ └── resource.ts ``` 在這些檔案中,您可以編寫 TypeScript 程式碼來建立應用程式後端。您可以使用以下程式碼建立資料模型,該程式碼還為您的資料設定授權規則。 ``` // amplify/data/resource.ts import { a, defineData, type ClientSchema } from '@aws-amplify/backend'; // Create a data model with two fields, `content` and `done`. The default authorization mode is apiKey -- meaning anyone authenticated using an API key can create, read, update, and delete todos. const schema = a.schema({ Todo: a.model({ content: a.string(), isDone: a.boolean() }) .authorization(allow => [allow.publicApiKey()]) }); // Used for code completion / highlighting when making requests from frontend export type Schema = ClientSchema<typeof schema>; // defines the data resource to be deployed export const data = defineData({ schema, authorizationModes: { defaultAuthorizationMode: 'apiKey', apiKeyAuthorizationMode: { expiresInDays: 30 } } }); ``` 然後,您可以使用 Amplify 用戶端庫與應用程式前端的資料模型進行交互,例如要列出所有待辦事項,您可以編寫如下程式碼: ``` import type { Schema } from "../amplify/data/resource"; import { generateClient } from "aws-amplify/data"; const client = generateClient<Schema>(); const fetchTodos = async () => { const { data: items, errors } = await client.models.Todo.list(); }; ``` Amplify 擁有為許多不同框架和語言編寫的程式庫 - 從適用於行動開發人員的 Swift、Android 和 Flutter 到適用於 Next.js 應用程式的 SSR 功能。 您可以執行類似的身份驗證操作!下面的程式碼定義並配置了一個身分驗證資源,向新使用者發送一封主題行為「Welcome to Amplify 🚀」的驗證電子郵件。 ``` import { defineAuth } from "@aws-amplify/backend" export const auth = defineAuth({ loginWith: { email: { verificationEmailSubject: "Welcome to Amplify 🚀" }, }, }) ``` 然後,您可以使用`withAuthenticator`高階 React 元件建立完整的使用者驗證流程,包括登入和註冊! ``` import { Authenticator } from '@aws-amplify/ui-react' function App() { return ( <Authenticator> <h1>You can't see this until you log in!</h1> </Authenticator> ) } export default App ``` 您可以執行類似的操作來在應用程式中建立無伺服器函數和檔案儲存資源。部署所需要做的就是`git push`您的程式碼! ### 與您的團隊合作,而不是對抗 在本機開發 Amplify 應用程式時,您可以執行沙箱,每次變更後端程式碼時,該沙箱都會自動快速重新部署雲端資源。您團隊中的每個開發人員都將擁有自己的沙箱,因此您在迭代時不會相互覆蓋。 ``` npx ampx sandbox ``` 您也可以為專案中的每個 Git 分支設定部署環境 - 例如`dev` 、 `prod`和`my-new-feature` 。您可以在交付生產之前在隔離環境中測試變更! Amplify 現在建立在 AWS 雲端開發套件 (AWS CDK) 之上,因此您可以連接到 Amplify 本身不支援的服務 - 例如用於 AI/ML 的 Amazon Bedrock! 試試看! ---- 要了解有關 Amplify 的更多訊息,請嘗試我們的[快速入門教程](https://docs.amplify.aws/react/start/quickstart/?trk=c33e0637-74b4-466d-8750-a7d201b6c7a5&sc_channel=el)之一,該教程將指導您完成建立全端 Amplify 應用程式的步驟。 --- 原文出處:https://dev.to/aws/introducing-a-new-fullstack-typescript-dx-for-aws-1ap9

讓我保持高效率的工具

此頁面詳細介紹了我作為開發人員使用的大部分內容。我使用 Mac,因此許多工具都是 macOS 特定的,但清單中也有一些與作業系統無關的工具。 在我們開始之前要提到的一件事是,這些工具可以提高我的工作效率。也許他們不會像他們為我所做的那樣讓你有生產力。我總是說,*使用能讓你最有效率的工具*。 其中一些工具是免費的,但有些是付費的。我個人認為付費的是值得的,但這取決於你和你的錢包。 *注意:我在這裡放置了一些推薦連結。只是想坦率地說明這一點而已。* 編輯 -- 這一切都從編輯器開始。 [Visual Studio Code](https://code.visualstudio.com/) (VS Code) 是我的首選編輯器。我使用[Insider 版本的](https://code.visualstudio.com/insiders/)時間最長,但有些擴充功能會嘗試登入並重定向到 VS Code 普通版,所以我決定回到它。也就是說,VS Code Insider 非常穩定。 我很長時間以來都是 Dank Mono 的忠實粉絲,但 GitHub 今年發布了一堆等寬字體,我一直很喜歡[Monaspace Krypton](https://monaspace.githubnext.com/) 。 對於主題,它有所不同。我最近一直在使用輕現代預設主題,因為我發現它更適合[我的直播](https://nickyt.live),但我也是[休士頓](https://marketplace.visualstudio.com/items?itemName=astro-build.houston)和[堡壘之夜](https://marketplace.visualstudio.com/items?itemName=sdras.fortnite-vscode-theme)主題的粉絲。 [![當我告訴他們我在編輯器中使用深色主題。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52lbfjxugvqsj017c5e5.png)](https://x.com/nickytonline/status/1787621116636221727) 雖然我安裝了[iTerm](https://iterm2.com/) ,這是一個很棒的 macOS 終端,但老實說,99.999% 的時間我都住在 VS Code 終端中。 ### 編輯器設定 如果您對我的編輯器設定感興趣,[這是我目前的設定](https://gist.github.com/nickytonline/e6ceb17a1fb7b6438c3f09ff800748da)。 更有趣的事情之一是您可以更改標題欄,因此我加入了一些表情符號。 ``` "window.title": "🦙⚡🫡 – ${activeEditorShort}${separator}${rootName} – 🫡⚡🦙", ``` ![一隻羊駝漂浮在彩虹中](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExbzQ1NzBodWZuam84b2FlYmV1a3o5cHRhYzZqcGp6bHVoYWNra2ZsZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/tZB5MG7OOPuZIAcPZZ/giphy.gif) 我發現超級方便的另一個設定是`terminal.integrated.autoReplies` 。我從來不想獲取我的 .env 文件,這可以完美地處理它。 ``` "terminal.integrated.autoReplies": { "dotenv: found '.env' file. Source it? ([Y]es/[n]o/[a]lways/n[e]ver)": "e\r" }, ``` ### 也許澤德很快? 我確實想向[Zed](https://zed.dev/)編輯大聲喊叫。我偶爾會使用它,而且速度超級快,但它還沒有成為我的主要編輯器。我認為一旦擴展生態系統進一步發展,我就會轉向這個。也許在明年。我們拭目以待。 😎 瀏覽器擴充 ----- 我並不是每天都使用所有這些,但這些是我首選的瀏覽器擴充功能。 - [精緻的 GitHub](https://chrome.google.com/webstore/detail/refined-github/hlepfoohegkhhmjieoechaddaejaokhf) - GitHub 上的類固醇 - [VisBug](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en) - 一個很棒的前端工具(這對我來說是新工具)(僅適用於基於 Chromium 的瀏覽器) - [React 開發者工具](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)- 因為 React - [Preact DevTools](https://preactjs.github.io/preact-devtools/) - 因為 Preact - [Axe](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd) - 用於網路可存取性測試 - [WAVE](https://wave.webaim.org/extension/) - 用於網路可存取性測試 - [HTTPS 無所不在](https://www.eff.org/https-everywhere) - [優布洛克](https://ublock.org/) - [LanguageTool](https://languagetool.org) - 文法和拼字檢查工具 - [Pocket](https://getpocket.com/) - 用於為要閱讀的內容加入書籤 - [JSONView](https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc) - JSON 有效負載的美化視圖 - [調整新 Twitter](https://github.com/insin/tweak-new-twitter/) - 消除 Twitter 使用者介面中的大量噪音 - [a11y Twitter](https://github.com/nickytonline/a11y-twitter) - 對如何使用 Twitter 進行小幅更改,以方便的方式推廣推文。 桌面應用程式 ------ 這些是我每天使用的大部分桌面應用程式。讓我們從一些通用的開始。 ### 我每天做的常見事情的通用工具 [Arc 瀏覽器](https://arc.net/gift/93e342bc)是一款基於 Chromium 的瀏覽器,在我看來,它解決了我在使用任何其他瀏覽器時遇到的大量使用者體驗 (UX) 問題。垂直選項卡、命令面板和自動畫中畫影片等等。 我在頂部選單列圖示上使用[Vanilla 的](https://matthewpalmer.net/vanilla/)時間最長,但當我拿到帶有瀏海的 MacBook Pro 後,它就不太好用了。從那以後,我開始使用[Bartender](https://www.macbartender.com)來管理我的選單列。 macOS 上的表情符號選擇器並不是那麼好,但[Rocket](https://matthewpalmer.net/rocket/)讓加入表情符號變得如此簡單。我無法告訴你我一天使用它多少次。 [Raycast](https://raycast.com)是我首選的 macOS 聚光燈替代品。這就像類固醇的聚光燈。我之前使用過[Alfred](https://www.alfredapp.com/) ,這是另一個出色的 Spotlight 替代品,但由於某種原因 Raycast 越來越吸引我了。我也用它來進行視窗管理。 對於那些坐在電腦前的夜晚, [f.lux](https://justgetflux.com/)是必須的。正如一些智者所說:「善待你的眼球」。 macOS 的[Nightshift](https://support.apple.com/en-ca/102191)還可以,但 f.lux 卻破壞了它。 對於管理會議, [Dato](https://sindresorhus.com/dato)是一款更好的 macOS 約會應用程式。在網址列中顯示多個時區非常有用。我有當地時間和 UTC。我還將它用於即將舉行的會議和活動。以前我使用的是[Meeter](https://trymeeter.com) ,它對此非常有用,但現在我需要的應用程式少了一個。 我幾乎每天都會截取螢幕截圖或錄製短影片, [Cleanshot X](https://cleanshot.com/)非常適合此操作。 ### Git 工具 我的大部分「git」工作都是在命令列上進行的,但有時我需要圖形使用者介面(GUI)來真正了解正在發生的事情。當我需要它時,我會伸手去拿[Fork](https://git-fork.com/) 。 ![Cassidy 示範擠壓、變基和合併](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExd3hscnE3bjlucm93aDJ2YjF1cjNkemQzNWcwc28yY2g4eG8yZjA1eCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/zQOmyYc8TXzSBfrTFb/giphy.gif) 向 Cassidy (@cassidoo) 的精彩 GIF 致敬! 如果你使用 Git(我想你們大多數人都使用 Git), [那麼簽署你的提交](https://docs.github.com/en/authentication/managing-commit-signature-verification/signing-commits)就非常重要。 [GPG Suite](https://gpgtools.org/)讓設定變得簡單。 ### 前端工具 我做了很多建立使用者介面 (UI) 的工作,這些都是這類工作不可或缺的工具。 [xScope](https://xscope.app)是一個非常棒的前端開發工具組。標尺、指南等 當我需要與設計師協調、查看設計或提取一些資源時, [Figma](https://www.figma.com/)就是我居住的地方。 我以前聽說過[Polypane](https://polypane.app/) ,我想幾年前我可能已經嘗試過它,但現在,它是前端的必備品。它可以幫助您建立具有各種優點的響應靈敏、易於存取的應用程式。對此感到好奇嗎?今年早些時候,我在一次直播中與 Polypane 的創作者 Kilian Valkhof (@kilianvalkhof) 進行了交流。 https://www.youtube.com/watch?v=fsIhghVlHJE 對於顏色對比問題,TPGi 的[顏色對比分析儀](https://www.tpgi.com/color-contrast-checker/)是頂級的。我強烈推薦它。感謝 Todd Libby (@colabottles) 去年向我推薦了這個。 ### 我使用的其他桌面應用程式 - [Cloudflare Warp](https://blog.cloudflare.com/1111-warp-better-vpn/) - 更快的網路和一些 VPN 優點 - [Plash](https://apps.apple.com/us/app/plash/id1494023538) - 適用於 Mac 的互動式桌面背景(一個或多個網頁) - [CleanMyMac X](https://macpaw.com/cleanmymac) - 一套實用程序,可讓您的 Mac 保持最佳狀態。 - [Starship](https://starship.rs/) - 跨 shell 提示符 直播軟體 ---- 我確信有些擁有更多觀眾的主播擁有更好的設置,但這就是我的工作方式。 我使用[Restream.io](https://restream.io/join/zZ8Wr)串流傳輸到多個平台,目前包括 Twitch、YouTube、X/Twitter 和 LinkedIn。 [OBS](https://obsproject.com/download)被很多人使用,包括我自己。這是一個很棒的開源軟體。我使用它來進行串流傳輸,而不是 Restream Studio 或 Streamyard 等類似工具,因為我有自訂疊加層和其他一些自訂功能。 https://github.com/obsproject/obs-studio [Krisp](https://krisp.ai/)在過濾通話和串流中不需要的噪音方面表現出色。在直播時告別背景的消防車。 🤣 我將[Loopback](https://rogueamoeba.com/loopback/)用於虛擬音訊來源。這非常有用,因為我建立了一個音頻源,即我的麥克風和客人的音頻,並將其視為一個輸入源。我使用這個音訊來源作為即時字幕的音訊來源。 我沒有用於串流媒體的精美相機。我曾經使用我的羅技網路攝像頭,這很好,但當我終於得到一部像樣的 iPhone 時,我覺得它的相機太棒了!所以我決定用它來進行直播。 [Camo](https://reincubate.com/camo/)使這成為可能,並且它有很多細節,如縮放、水印、濾鏡等。 ### 直播嘉賓工具 在很長一段時間裡,我都不明白人們是如何把嘉賓帶上直播的。在我從事串流媒體的早期,我曾經引入完整的 Discord 螢幕並在我的直播中分享。雖然這有效,但並不理想。我也嘗試了類似的 Zoom,然後我也開始在螢幕上裁剪 Zoom 的部分內容,但同樣不理想。 最終,我發現了[vdo.ninja](https://vdo.ninja/) 。 TLDR 是,它使用點對點技術將遠端攝影機引入 OBS 或其他工作室軟體。 https://github.com/steveseguin/vdo.ninja 這是一個很棒的專案,我強烈推薦它。如果您的客人有 Twitch 帳戶,另一個類似的軟體是 Twitch 的[Stream Together](https://help.twitch.tv/s/article/stream-together-host-guide?language=en_US) 。我也用這個,取決於客人。 命令列介面 (CLI) 工具 -------------- 我沒有很多 CLI 工具,但以下是一些我常用的工具: - [Homebrew](https://brew.sh) - macOS(或 Linux)缺少的套件管理器 - [GitHub CLI](https://github.com/cli/cli) - 命令列上的 GitHub。非常適合建立 PR 等。 https://dev.to/opensauced/boost-productivity-with-the-github-cli-2mne - [nvm](https://github.com/nvm-sh/nvm) - 節點版本管理器 - [cloudflared](https://github.com/cloudflare/cloudflared) - 透過安全隧道將本地伺服器公開到公共網路 如果您對我的設定(例如硬體和辦公室設定)的重置或我在旅途中攜帶的物品感到好奇,請隨時查看[我的使用頁面](https://nickyt.co/uses)。 直到下一篇! --- 原文出處:https://dev.to/nickytonline/tools-that-keep-me-productive-1no5

掌握關聯式資料庫設計:綜合指南

介紹 -- 在當今資料驅動的世界中,有效儲存和管理資訊對於各種規模的企業和組織都至關重要。關聯式資料庫已成為以結構化和可擴展的方式組織和操作資料的強大解決方案。在這篇文章中,我們將探討關聯式資料庫的基礎知識、它們的管理系統以及支援有效資料庫設計的原則。 --- 什麼是資料庫? ------- 資料庫是資料的結構化集合,其組織和儲存方式有利於高效檢索、操作和管理。將其視為數位文件櫃,其中不是實體資料夾和文件,而是整齊排列的表格和記錄,以便於存取。 什麼是關係資料庫? --------- 關聯式資料庫是一種將資料組織成具有行(記錄)和列(欄位)的表(關係)的資料庫。這些表透過關係互連,允許以各種方式存取和組合資料。想像一下電子表格的集合,每個電子表格代表資料的不同方面,但能夠無縫連結和組合它們之間的資訊。 關係型資料庫管理系統 ---------- 關聯式資料庫管理系統 (RDBMS) 是一種軟體應用程式,旨在建立、管理關聯式資料庫並與之互動。它提供了一個用於在資料庫中儲存、檢索和操作資料的結構化框架。 RDBMS 的一些熱門範例包括 MySQL、PostgreSQL、Oracle 和 Microsoft SQL Server。 --- SQL簡介 ----- SQL(結構化查詢語言)是用於與關聯式資料庫互動的標準程式語言。它允許您建立、讀取、更新和刪除資料庫中的資料,以及定義和修改資料庫結構本身。 SQL 就像一種通用語言,可讓您與不同的 RDBMS 平台進行通訊。 命名約定 ---- 在 SQL 中,遵循一致的命名約定對於清晰度和可維護性至關重要。這是一個例子: ``` -- Good naming conventions CREATE TABLE customers ( customer_id INT PRIMARY KEY, first_name VARCHAR(100), last_name VARCHAR(100), email VARCHAR(100) ); ``` 什麼是資料庫設計? --------- 資料庫設計是建立用於儲存和管理資料庫中的資料的高效且有組織的結構的過程。它涉及定義表、列、關係和約束,以確保資料完整性、最小化冗餘並優化效能。正確的資料庫設計是建立健全且可擴展的應用程式的基礎。 ![資料庫設計形象](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/de0l7km0yufdp2ssak3s.png) 資料的完整性 ------ 資料完整性是指資料庫中儲存的資料的準確性、一致性和可靠性。它確保資料遵循特定的規則和約束,防止錯誤和不一致。資料完整性分為三種: 1. **實體完整性**:確保表中的每一行都可以透過主鍵唯一標識,且主鍵不能有空值。 2. **參照完整性**:透過確保一個表中的外鍵值與另一表中的主鍵值相符來維護表之間的關係。 3. **域完整性**:透過限制可儲存的資料類型、格式和值範圍,強制給定列輸入有效的條目。 ``` -- Example: Enforcing data integrity CREATE TABLE orders ( order_id INT PRIMARY KEY, -- Entity integrity customer_id INT FOREIGN KEY REFERENCES customers(customer_id), -- Referential integrity order_date DATE NOT NULL, -- Domain integrity total_amount DECIMAL(10, 2) CHECK (total_amount >= 0) -- Domain integrity ); ``` 資料庫術語 ----- - **表**:按行和列組織的相關資料的集合。 - **行**:表中的單一實例或條目(也稱為記錄或元組)。 - **列**:表中資料的特定特徵或屬性(也稱為欄位或屬性)。 - **主鍵**:唯一標識表中每一行的列或列組合。 - **外鍵**:引用另一個表的主鍵的列或列的組合,在兩個表之間建立關係。 - **連接**:根據相關列組合兩個或多個表中的行的操作。 - **索引**:一種資料結構,透過建立表格中資料的排序表示來提高資料檢索操作的效能。 - **視圖**:從一個或多個基礎表動態產生的虛擬表。 - **預存程序**:預先編譯的 SQL 語句集合,可以作為單一單元執行。 - **觸發器**:特殊類型的預存程序,當表中發生特定事件(例如 INSERT、UPDATE 或 DELETE 語句)時會自動執行。 原子值 --- 在資料庫設計中,儲存原子值非常重要,這意味著儲存無法進一步劃分的最小資訊片段。這項原則有助於保持資料完整性並避免冗餘。 例如,與其將客戶的全名儲存在單一欄位中,不如將其分成名字和姓氏欄位。這樣,您可以輕鬆地獨立搜尋、排序或操作名稱的每個部分。 ``` -- Example: Storing atomic values CREATE TABLE customers ( customer_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50), email VARCHAR(100) ); ``` --- 按鍵簡介 ---- 鍵是資料庫設計中的重要組成部分,有助於確保資料完整性並建立表之間的關係。它們充當記錄的唯一標識符,並實現高效的資料檢索和操作。 主鍵索引 ---- 主鍵是唯一標識表中每筆記錄的列或列的組合。它確保每個記錄都是唯一的並且可以輕鬆找到。通常會對主鍵建立索引以提高查詢效能。 ``` CREATE TABLE customers ( customer_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50), email VARCHAR(100) ); ``` 查找表 --- 查找表也稱為參考表或程式碼表,是包含預定義值集的表,這些值可用於填入其他表中的列。查找表透過確保一致性和減少冗餘來幫助維護資料完整性。 ``` -- Lookup table for product categories CREATE TABLE product_categories ( category_id INT PRIMARY KEY, category_name VARCHAR(100) ); -- Products table referencing the lookup table CREATE TABLE products ( product_id INT PRIMARY KEY, product_name VARCHAR(100), category_id INT, FOREIGN KEY (category_id) REFERENCES product_categories(category_id) ); ``` 超級密鑰和候選密鑰 --------- 超級鍵是表中唯一標識每筆記錄的一組或多列。候選鍵是最小超鍵,這意味著它不包含不必要的列。換句話說,候選鍵是一個超級鍵,具有唯一標識每個記錄所需的最少列數。 主鍵和備用鍵 ------ 主鍵是選擇作為表的主要唯一辨識符的候選鍵。備用鍵也稱為唯一鍵,是任何其他本來可以被選為主鍵但沒有被選為主鍵的候選鍵。 ``` CREATE TABLE employees ( employee_id INT PRIMARY KEY, email VARCHAR(100) UNIQUE, -- Alternate key first_name VARCHAR(50), last_name VARCHAR(50) ); ``` 代理鍵和自然鍵 ------- 代理鍵是用作表中主鍵的人工鍵(通常是序號或 GUID)。它與資料本身沒有固有的意義或關係。另一方面,自然金鑰是從資料本身衍生的金鑰,例如員工 ID 或產品程式碼。 ``` -- Surrogate key CREATE TABLE orders ( order_id INT PRIMARY KEY IDENTITY(1,1), -- Surrogate key customer_name VARCHAR(100), order_date DATE ); -- Natural key CREATE TABLE products ( product_code VARCHAR(10) PRIMARY KEY, -- Natural key product_name VARCHAR(100), price DECIMAL(10,2) ); ``` 我應該使用代理鍵還是自然鍵? -------------- 代理鍵和自然鍵之間的選擇取決於多個因素,包括資料的性質、資料變更的可能性以及重複或衝突的可能性。 代理鍵通常是首選,因為它們是: - 不可變:即使資料發生變化,它們也不會隨著時間而改變。 - 保證唯一性:由資料庫系統生成,保證唯一性。 - 不透明:它們不會洩露有關資料本身的任何訊息,這對於安全和隱私來說是有益的。 另一方面,自然鍵在以下情況下可能會很有優勢: - 資料具有固有的唯一性,例如產品程式碼或員工 ID。 - 資料不太可能隨著時間的推移而改變,從而降低了衝突或重複的風險。 - 需要人類可讀且有意義的辨識符。 外鍵 -- 外鍵是一個表中引用另一個表的主鍵的列或列的組合。它在兩個表之間建立連結並強制引用完整性,確保子表中的資料有效且與父表中的資料一致。 ``` CREATE TABLE orders ( order_id INT PRIMARY KEY, customer_id INT, order_date DATE, FOREIGN KEY (customer_id) REFERENCES customers(customer_id) ); ``` NOT NULL 外鍵 ----------- 在某些情況下,可能需要對外鍵列設定 NOT NULL 約束,這表示該列不能有空值。此約束可確保子表中的每筆記錄都與父表中的有效記錄相關聯。 ``` CREATE TABLE orders ( order_id INT PRIMARY KEY, customer_id INT NOT NULL, order_date DATE, FOREIGN KEY (customer_id) REFERENCES customers(customer_id) ); ``` 外鍵約束 ---- 外鍵約束定義表之間引用完整性的規則。這些約束可以包括更新或刪除父表中引用的記錄時要採取的操作,例如: - `CASCADE` :當父表中的記錄被更新或刪除時,子表中對應的記錄也會被更新或刪除。 - `SET NULL` :當父表中的記錄被更新或刪除時,子表中對應的外鍵值被設定為NULL。 - `NO ACTION` :當父表中的記錄被更新或刪除時,子表中對應的外鍵值保持不變,如果違反引用完整性則回滾操作。 ``` CREATE TABLE orders ( order_id INT PRIMARY KEY, customer_id INT, order_date DATE, FOREIGN KEY (customer_id) REFERENCES customers(customer_id) ON UPDATE CASCADE ON DELETE SET NULL ); ``` 簡單鍵、複合鍵、複合鍵 ----------- - 簡單鍵是用作主鍵或外鍵的單一欄位。 - 複合鍵是用作主鍵或外鍵的兩個或多個列的組合。 - 複合鍵是用作外鍵的兩個或多個簡單鍵的組合。 ``` -- Simple key CREATE TABLE orders ( order_id INT PRIMARY KEY, ... ); -- Composite key CREATE TABLE order_items ( order_id INT, product_id INT, quantity INT, PRIMARY KEY (order_id, product_id) ); -- Compound key CREATE TABLE shipments ( shipment_id INT PRIMARY KEY, order_id INT, product_id INT, FOREIGN KEY (order_id, product_id) REFERENCES order_items(order_id, product_id) ); ``` --- 關係 ---- 關係是關聯式資料庫的基石,可讓您連接和組合來自不同表的資料。關係主要分為三種: ![關係形象](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qadj6qd495g7yovdcx2d.jpg) 一對一的關係 ------ 在一對一關係中,一個表中的每筆記錄都與另一個表中的一筆記錄相關聯,反之亦然。例如,考慮一個資料庫,其中每位員工都有一名且僅有一名經理,且每位經理管理一名且僅有一名員工。這種關係在實務上比較少見。 ![一對一影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qm0xf8h40rktgqzbp4o4.png) 一對多關係 ----- 在一對多關係中,一個表格(「一」側)中的每筆記錄都可以與另一個表(「多」側)中的多個記錄關聯。例如,在學校的資料庫中,一位老師可以教授多個班級,但每個班級只有一位老師授課。 ![一對多影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qe9iuj8n0n3b1cj24pdf.png) 多對多關係 ----- 在多對多關係中,一個表中的每筆記錄可以與另一表中的多筆記錄關聯,反之亦然。例如,在大學的資料庫中,一個學生可以註冊多個課程,每個課程可以有多個學生註冊。 ![多對多關係影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2prop1r97o0cj7cr6qw.jpg) ### 關係摘要 - 一對一:表A中的一筆記錄與表B中的一筆且只有一筆記錄相關,反之亦然。 - 一對多:A表中的一筆記錄可以與B表中的多筆記錄相關,但B表中的一筆記錄只能與A表中的一筆記錄相關。 - 多對多:表A中的多筆記錄可以與表B中的多筆記錄相關,反之亦然。 設計關係(SQL 實作) ------------ **1 - 設計一對一關係** 要設計一對一關係,您可以將兩個表中的所有列包含在一個表中,也可以建立兩個單獨的表並使用外鍵約束來連結它們。 ``` -- Option 1: Single table CREATE TABLE employees ( employee_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50), manager_first_name VARCHAR(50), manager_last_name VARCHAR(50) ); -- Option 2: Two tables with foreign key CREATE TABLE employees ( employee_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50), manager_id INT UNIQUE, FOREIGN KEY (manager_id) REFERENCES employees(employee_id) ); ``` 2 -**設計一對多關係** 要設計一對多關係,通常會建立兩個表:父表(“一”側)和子表(“多”側)。子表包含引用父表主鍵的外鍵列。 ``` -- Parent table CREATE TABLE teachers ( teacher_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50) ); -- Child table CREATE TABLE classes ( class_id INT PRIMARY KEY, class_name VARCHAR(100), teacher_id INT, FOREIGN KEY (teacher_id) REFERENCES teachers(teacher_id) ); ``` **3 - 設計多對多關係** 要設計多對多關係,通常會建立第三個表(稱為聯結表或關聯表),將兩個主表連結在一起。此聯結表包括引用主表的外鍵列 ``` -- Table 1 CREATE TABLE students ( student_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50) ); -- Table 2 CREATE TABLE courses ( course_id INT PRIMARY KEY, course_name VARCHAR(100), description TEXT ); -- Junction or Intemediary table CREATE TABLE enrollments ( enrollment_id INT PRIMARY KEY, student_id INT, course_id INT, FOREIGN KEY (student_id) REFERENCES students(student_id), FOREIGN KEY (course_id) REFERENCES courses(course_id) ); ``` 父表和子表 ----- 在一對多或多對多關係中, **“一”**側的表通常稱為父表,而**“多”**側的表稱為子表。子表包含引用父表主鍵的外鍵。 例如,在教師-班級關係中, `teachers`表是父表, `classes`表是子表。同樣,在學生-課程關係中, `students`和`courses`表是父表,而`enrollm`是父表。 實體關係建模簡介 -------- 實體關係建模(ER Modeling)是資料庫設計中使用的一種技術,用於直觀地表示資料庫的邏輯結構。它有助於辨識實體(表)、屬性(列)以及它們之間的關係,從而更容易理解和傳達資料庫設計。 ER 圖由以下部分組成: - **實體**:以矩形表示,實體是資料庫中的表或物件。 - **屬性**:在實體矩形內列出,屬性是描述實體的列或欄位。 - **關係**:以連接實體的線表示,關係描述了實體之間的關聯。 基數 -- 基數定義了兩個實體之間的數值關係。它指定一個實體可以與另一個實體的單一實例關聯的最大實例數。最常見的基數是: - 一對一(1:1):實體 A 的一個實例最多可以與實體 B 的一個實例關聯,反之亦然。 - 一對多(1:N):實體 A 的一個實例可以與實體 B 的多個實例關聯,但實體 B 的一個實例只能與實體 A 的一個實例關聯。 - 多對多 (M:N):實體 A 的多個實例可以與實體 B 的多個實例關聯,反之亦然。 在 ER 圖中,基數以特定的符號表示,例如單線表示一對一,帶箭頭的線表示一對多,兩端帶箭頭的線表示多對多關係。 ![基數影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmife5ost450cgntriyi.png) 模態 -- 模態是指一個實體實例的存在是否依賴它與另一個實體的關係。有兩種類型的模態: - 部分模態:實例的存在不依賴它與另一個實體的關係。例如,客戶可以在沒有任何訂單的情況下存在。 - 總模態:實例的存在取決於它與另一個實體的關係。例如,沒有訂單,訂單項就不可能存在。 在 ER 圖中,模態使用特定的符號表示,例如單一條表示部分模態,雙條表示總模態。 --- 資料庫規範化簡介 -------- 資料庫規範化是組織資料庫中的資料以減少冗餘、最大限度地減少資料異常(插入、更新和刪除異常)並提高資料完整性的過程。它涉及將資料庫分解為較小的表,並根據特定規則或範式定義它們之間的關係。 資料庫規範化的主要目標是: - 消除冗餘資料 - 確保資料完整性 - 促進資料操作和維護 資料庫規範化有多種範式,每種都建立在前一種範式的基礎上。最常用的範式是: 1. 第一範式 (1NF) 2. 第二範式 (2NF) 3. 第三範式 (3NF) 1NF(資料庫規範化第一範式) --------------- 第一範式(1NF)是最基本的規範化形式。它規定表中的屬性(列)必須具有原子值,這意味著表中的每個單元格應包含單一值,而不是一組值。 例如,假設一個表格具有名為「PhoneNumbers」的資料列,該資料列儲存客戶的多個電話號碼。這違反了 1NF,因為該列包含一組值而不是單一值。為了符合 1NF,您需要將電話號碼分成單獨的列或為電話號碼建立單獨的表。 ``` -- Violates 1NF CREATE TABLE customers ( customer_id INT PRIMARY KEY, name VARCHAR(100), phone_numbers VARCHAR(200) -- Stores multiple phone numbers, violating 1NF ); -- Conforms to 1NF CREATE TABLE customers ( customer_id INT PRIMARY KEY, name VARCHAR(100), phone1 VARCHAR(20), phone2 VARCHAR(20), phone3 VARCHAR(20) ); ``` 2NF(資料庫規範化的第二範式) ---------------- 第二範式 (2NF) 建立在 1NF 的基礎上,解決了部分依賴問題。如果表屬於 1NF,且每個非主屬性(列)完全依賴整個主鍵,則該表屬於 2NF。 換句話說,如果一個表有一個複合主鍵(由多個列組成),那麼所有非鍵列必須依賴整個主鍵,而不僅僅是它的一部分。 例如,考慮一個具有複合主鍵`(student_id, course_id)`和列`grade`的表。如果`grade`欄位僅取決於`course_id` ,而不取決於`student_id`和`course_id`的組合,則該表違反了 2NF。 ``` -- Violates 2NF CREATE TABLE student_courses ( student_id INT, course_id INT, course_name VARCHAR(100), grade CHAR(2), -- Depends only on course_id, not the entire primary key PRIMARY KEY (student_id, course_id) ); -- Conforms to 2NF CREATE TABLE student_courses ( student_id INT, course_id INT, grade CHAR(2), PRIMARY KEY (student_id, course_id) ); CREATE TABLE courses ( course_id INT PRIMARY KEY, course_name VARCHAR(100) ); ``` 3NF(資料庫規範化的第三範式) ---------------- 第三範式 (3NF) 建立在 2NF 的基礎上,解決了傳遞依賴問題。如果表屬於 2NF,且每個非主屬性都非傳遞依賴於主鍵,則該表屬於 3NF。 換句話說,如果一個非鍵列依賴另一個非鍵列,那麼該表就違反了 3NF,並且非鍵列應該分離到它們自己的表中。 例如,考慮一個包含`student_id` 、 `student_name` 、 `class_id`和`class_name`欄位的表。 `student_name`欄位取決於`student_id` ,而`class_name`欄位取決於`class_id` 。但是, `class_name`欄位也透過`class_id`欄位傳遞依賴`student_id` 。這違反了 3NF。 ``` -- Violates 3NF CREATE TABLE student_classes ( student_id INT, student_name VARCHAR(100), class_id INT, class_name VARCHAR(100), PRIMARY KEY (student_id, class_id) ); -- Conforms to 3NF CREATE TABLE students ( student_id INT PRIMARY KEY, student_name VARCHAR(100) ); CREATE TABLE classes ( class_id INT PRIMARY KEY, class_name VARCHAR(100) ); CREATE TABLE student_classes ( student_id INT, class_id INT, PRIMARY KEY (student_id, class_id), FOREIGN KEY (student_id) REFERENCES students(student_id), FOREIGN KEY (class_id) REFERENCES classes(class_id) ); ``` 透過遵循資料庫規範化的原則,您可以建立結構良好且高效的資料庫,從而最大限度地減少冗餘、保持資料完整性並促進資料操作和維護。 --- 索引(聚集索引、非聚集索引、複合索引) ------------------- 索引是提高資料庫中資料檢索操作效能的資料結構。它們在表中建立資料的排序表示,從而允許更快的搜尋和查詢。索引有幾種類型: - **聚集索引**:聚集索引根據索引鍵值對表中的行進行實體重新排序。每個表只能有一個聚集索引。 - **非聚集索引**:非聚集索引是一個單獨的物件,其中包含索引鍵值和指向表中相應行的指標。一個表可以有多個非聚集索引。 - **複合索引**:複合索引是索引鍵中包含多個欄位的索引。它可以是集群的,也可以是非集群的。 ``` -- Clustered index CREATE CLUSTERED INDEX idx_customers_name ON customers (last_name, first_name); -- Nonclustered index CREATE NONCLUSTERED INDEX idx_orders_date ON orders (order_date); -- Composite index CREATE INDEX idx_products_category_price ON products (category_id, price); ``` 資料類型 ---- 在資料庫領域,資料類型就像是保存特定類型資訊的不同形狀的容器。就像您不會將液體儲存在籃子中或將固體物體儲存在罐子中一樣,資料庫需要強制執行特定的資料類型以確保資料的完整性和一致性。 SQL 中的一些常見資料類型包括: - `INT`或`INTEGER` :儲存整數,例如`42`或`17` 。 - `FLOAT`或`DOUBLE` :儲存十進制數,例如`3.14159`或`0.00005` 。 - `VARCHAR`或`TEXT` :儲存文字資料,例如名稱或描述。 - `DATE`或`DATETIME` :儲存日期和時間值,例如`'2023-05-06'`或`'2024-01-01 12:34:56'` 。 - `BOOLEAN` :儲存真/假值,例如`1` (真)或`0` (假)。 選擇正確的資料類型至關重要,因為它會影響資料的儲存、查詢和操作方式。例如,嘗試在`INT`列中儲存大字串會導致錯誤或資料截斷。 ``` CREATE TABLE users ( id INT PRIMARY KEY, name VARCHAR(50) NOT NULL, age INT, is_active BOOLEAN DEFAULT 1 ); ``` 在此範例中,我們建立一個`users`表,其中包含`id` (整數)、 `name` (最多 50 個字元的字串)、 `age` (整數)和`is_active` (布林值,預設值為`1`或 true)欄位。 --- 連接簡介 ---- 連接就像連接資料庫中不同表的橋樑,允許您組合和檢索來自多個來源的相關資料。它們是關係資料庫中的基本概念,對於有效查詢和操作資料至關重要。 ![加盟圖片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iks7pvzjikxzgqicjh2x.png) 內部聯接 ---- 內部聯結就像兩個表之間的友好握手,其中只有在兩個表中具有匹配值的行才會包含在結果集中。這是一種基於公共列或列集組合多個表中的資料的方法。 ``` SELECT users.name, orders.order_date FROM users INNER JOIN orders ON users.id = orders.user_id; ``` 在這個範例中,我們從`users`表中檢索`name`列,從`orders`表中檢索`order_date`列,但僅限於`users`表中的`id`與`orders`表中的`user_id`相符的行。 3 個表上的內連接(範例) ------------- 假設我們有三個表: `users` 、 `orders`和`products` 。我們想要檢索每個訂單的使用者名稱、訂單日期和產品名稱。我們可以透過在所有三個表之間執行內部聯結來實現這一點: ``` SELECT users.name, orders.order_date, products.product_name FROM users INNER JOIN orders ON users.id = orders.user_id INNER JOIN products ON orders.product_id = products.id; ``` 在這裡,我們首先在`id`和`user_id`列上連接`users`和`orders`表。然後,我們將該連接的結果與`products`表的`product_id`和`id`列連接起來。這樣,我們可以在單一查詢中從所有三個表中檢索資料,但僅限於滿足連接條件的行。 外連接簡介 ----- 內部連接就像友好的握手,而外部連接更像是歡迎的擁抱。它們不僅包括兩個表中的匹配行,還包括一個或兩個表中的不匹配行,具體取決於外連接的類型。 右外連接 ---- 右外連接就像從右表到左表的溫暖擁抱。它包括右表中的所有行以及左表中的匹配行。如果左表中沒有符合的行,則結果將包含左表列的`NULL`值。 ``` SELECT users.name, orders.order_date FROM users RIGHT OUTER JOIN orders ON users.id = orders.user_id; ``` 在此範例中,我們從`orders`表(右表)中檢索所有行,以及`users`表(左表)中的符合`name`值。如果訂單沒有符合的用戶,則`name`列將包含`NULL` 。 JOIN 與 NOT NULL 列 ----------------- 有時,您可能只想對不為空的列執行聯接。當您想要從結果集中排除缺少資料的行時,這會很有用。 ``` SELECT users.name, orders.order_date FROM users INNER JOIN orders ON users.id = orders.user_id AND users.name IS NOT NULL; ``` 在此範例中,我們在`users`和`orders`表之間執行內部聯接,但我們新增了一個附加條件`users.name IS NOT NULL`以確保結果集中僅包含具有非空`name`值的行。 跨 3 個表的外連接 ---------- 與內連接範例類似,我們可以跨多個表執行外連接。假設我們想要檢索所有訂單以及使用者名稱和產品名稱,即使`users`或`products`表中缺少值。 ``` SELECT users.name, orders.order_date, products.product_name FROM orders LEFT OUTER JOIN users ON orders.user_id = users.id LEFT OUTER JOIN products ON orders.product_id = products.id; ``` 在這裡,我們從`orders`表開始,並對`users`和`products`表執行左外連接。這可確保所有訂單以及符合的使用者名稱和產品名稱(如果可用)都包含在結果集中。如果`users`或`products`表中沒有符合的行,則對應的列將包含`NULL`值。 別名 -- 別名就像 SQL 查詢中表格或欄位的暱稱。它們可以使查詢更具可讀性和更容易理解,特別是在處理長表或列名時,或在查詢中多次引用同一個表時。 ``` SELECT u.name, o.order_date, p.product_name FROM users u INNER JOIN orders o ON u.id = o.user_id INNER JOIN products p ON o.product_id = p.id; ``` 在此範例中,我們對`users`表使用別名`u` ,對`orders`表使用別名`o` ,對`products`表使用`p` 。這使得查詢更加簡潔且更易於閱讀,而不必多次重複完整的表名稱。 自加入 --- 自連結就像一張表在與自己對話。這是一種根據同一個表中的特定條件或關係將表與其自身連接的方法。這在處理分層或遞歸資料結構(例如員工-經理關係或巢狀類別)時非常有用。 ``` SELECT e.name AS employee, m.name AS manager FROM employees e LEFT OUTER JOIN employees m ON e.manager_id = m.id; ``` 在此範例中,我們對`employees`表執行自聯接以檢索每位員工的姓名及其對應經理的姓名。我們使用左外連接來確保所有員工都包含在結果集中,即使他們沒有指派經理。 --- 資料庫標記語言 (DBML) -------------- 資料庫建模語言(DBML)是一種簡單直觀的標記語言,用於描述關係型資料庫的結構。它提供了一種人類可讀的方式來定義表、列、關係和約束,從而使資料庫設計方面的溝通和協作變得輕鬆。 **DBML 入門** 要開始使用 DBML,您需要一個文字編輯器並對資料庫概念有基本的了解。讓我們建立第一個 DBML 檔案: ``` // my_database.dbml Table users { id int [pk, increment] username varchar email varchar [unique] created_at datetime [default: `now()`] } ``` 在這個範例中,我們定義了一個`users`表,其中包含`id` 、 `username` 、 `email`和`created_at`列。 `[pk]`標記指定`id`為主鍵, `[increment]`表示自動遞增, `[unique]`確保`email`的唯一性, `[default:` now() `]`將`created_at`的預設值設為目前時間戳記。 **建立表** DBML 可讓您在單一檔案中定義多個表格及其列。讓我們為資料庫新增更多表: ``` // my_database.dbml Table users { id int [pk, increment] username varchar email varchar [unique] created_at datetime [default: `now()`] } Table posts { id int [pk, increment] title varchar content text user_id int [ref: > users.id] created_at datetime [default: `now()`] } ``` 在這個範例中,我們新增了一個`posts`表,其中包含`id` 、 `title` 、 `content` 、 `user_id`和`created_at`欄位。 `[ref: > users.id]`標籤在`posts`表中的`user_id`欄位和`users`表中的`id`列之間建立外鍵關係。 **定義關係** DBML 支援表之間各種類型的關係,包括一對一、一對多和多對多。讓我們在資料庫中定義一些關係: ``` // my_database.dbml Table users { id int [pk, increment] username varchar email varchar [unique] created_at datetime [default: `now()`] } Table posts { id int [pk, increment] title varchar content text user_id int [ref: > users.id] created_at datetime [default: `now()`] } Ref: users.id < posts.user_id ``` 在此範例中,我們定義了`users`和`posts`表之間的一對多關係。 `Ref: users.id < posts.user_id`行指定`users`表中的`user_id`欄位引用`posts`表中的`id`列。 **新增約束** 約束確保資料完整性並在資料庫上強制執行規則。 DBML 支援各種約束,例如主鍵、外鍵、唯一約束和預設值。讓我們在表格中加入一些約束: ``` // my_database.dbml Table users { id int [pk, increment] username varchar [unique] email varchar [unique] created_at datetime [default: `now()`] } Table posts { id int [pk, increment] title varchar content text user_id int [ref: > users.id] created_at datetime [default: `now()`] } Ref: users.id < posts.user_id ``` 在此更新的範例中,我們為`users`表中的`username`名列新增了`[unique]`約束,以確保每個使用者名稱都是唯一的。 **記錄您的資料庫** DBML 可讓您為資料庫模式新增註解和註釋,使其更易於理解和維護。讓我們用註釋來記錄我們的表格: ``` // my_database.dbml Table users { id int [pk, increment] // Unique identifier for users username varchar [unique] // User's username email varchar [unique] // User's email address created_at datetime [default: `now()`] // Date and time when the user was created } Table posts { id int [pk, increment] // Unique identifier for posts title varchar // Title of the post content text // Content of the post user_id int [ref: > users.id] // ID of the user who created the post created_at datetime [default: `now()`] // Date and time when the post was created } Ref: users.id < posts.user_id // Relationship between users and posts ``` **DBML 的好處** - 簡單且人類可讀的語法 - 與資料庫無關的方法 - [dbdiagram.io](dbdiagram.io)上的免費視覺化工具 - 一致的可讀性和可維護性約定 - 豐富的文件和範例 --- 結論 -- 總而言之,關聯式資料庫設計構成了現代應用程式中高效能資料組織的支柱。了解其原理使您能夠建立強大且可擴展的資料庫。接下來,我們將深入研究 SQL 語法,釋放與資料庫有效互動的能力。請繼續關注我們對 SQL 世界的探索! --- 原文出處:https://dev.to/louaiboumediene/mastering-relational-database-design-a-comprehensive-guide-3jh8

可用於下一個專案的 30 多個強大 AI 庫

今天,我們將介紹 30 個或更多可以使用 AI 建置的專案。 所有專案都是開源的,因此您可以做出貢獻以使其變得更好。 有些專案可能擁有龐大的程式碼庫,但您可以從中獲得靈感並建立一個很酷的副專案。 相信我,如果這個清單沒有讓你感到驚訝,那麼沒有什麼會讓你感到驚訝:) 讓我們開始吧! ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4ssxdcxcxmac945sj8x.gif) --- 1. [CopilotKit](https://go.copilotkit.ai/Anmol) - 在數小時內為您的產品提供 AI Copilot。 -------------------------------------------------------------------------- [![副駕駛套件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzuxjfog2ldam3csrl62.png)](https://github.com/CopilotKit/CopilotKit) 將 AI 功能整合到 React 中是很困難的,這就是 Copilot 的用武之地。一個簡單快速的解決方案,可將可投入生產的 Copilot 整合到任何產品中! 您可以使用兩個 React 元件將關鍵 AI 功能整合到 React 應用程式中。它們還提供內建(完全可自訂)Copilot 原生 UX 元件,例如`<CopilotKit />` 、 `<CopilotPopup />` 、 `<CopilotSidebar />` 、 `<CopilotTextarea />` 。 開始使用以下 npm 指令。 ``` npm i @copilotkit/react-core @copilotkit/react-ui ``` Copilot Portal 是 CopilotKit 提供的元件之一,CopilotKit 是一個應用程式內人工智慧聊天機器人,可查看目前應用狀態並在應用程式內採取操作。它透過插件與應用程式前端和後端以及第三方服務進行通訊。 這就是整合聊天機器人的方法。 `CopilotKit`必須包裝與 CopilotKit 互動的所有元件。建議您也開始使用`CopilotSidebar` (您可以稍後切換到不同的 UI 提供者)。 ``` "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 url="/path_to_copilotkit_endpoint/see_below"> <CopilotSidebar> {children} </CopilotSidebar> </CopilotKit> ); } ``` 您可以使用此[快速入門指南](https://docs.copilotkit.ai/getting-started/quickstart-backend)設定 Copilot 後端端點。 之後,您可以讓 Copilot 採取行動。您可以閱讀如何提供[外部上下文](https://docs.copilotkit.ai/getting-started/quickstart-chatbot#provide-context)。您可以使用`useMakeCopilotReadable`和`useMakeCopilotDocumentReadable`反應掛鉤來執行此操作。 ``` "use client"; import { useMakeCopilotActionable } from '@copilotkit/react-core'; // Let the copilot take action on behalf of the user. useMakeCopilotActionable( { name: "setEmployeesAsSelected", // no spaces allowed in the function name description: "Set the given employees as 'selected'", argumentAnnotations: [ { name: "employeeIds", type: "array", items: { type: "string" } description: "The IDs of employees to set as selected", required: true } ], implementation: async (employeeIds) => setEmployeesAsSelected(employeeIds), }, [] ); ``` 您可以閱讀[文件](https://docs.copilotkit.ai/getting-started/quickstart-textarea)並查看[演示影片](https://github.com/CopilotKit/CopilotKit?tab=readme-ov-file#demo)。 您可以輕鬆整合 Vercel AI SDK、OpenAI API、Langchain 和其他 LLM 供應商。您可以按照本[指南](https://docs.copilotkit.ai/getting-started/quickstart-chatbot)將聊天機器人整合到您的應用程式中。 基本概念是在幾分鐘內建立可用於基於 LLM 的應用程式的 AI 聊天機器人。 用例是巨大的,作為開發人員,我們絕對應該在下一個專案中嘗試使用 CopilotKit。 CopilotKit 在 GitHub 上擁有超過 5700 顆星,發布了 200 多個版本,這意味著它們不斷改進。 https://go.copilotkit.ai/Anmol Star CopilotKit ⭐️ --- 2. [AgentGPT](https://github.com/reworkd/AgentGPT) - 組裝、配置和部署自主 AI 代理程式。 ------------------------------------------------------------------------ ![代理GPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gnc918anlnbbymwep8xv.png) AgentGPT 可讓您設定和部署自主 AI 代理程式。 它將嘗試透過思考要完成的任務、執行任務並從結果中學習來實現目標:) 它是使用以下方式建構的: - 引導:create-t3-app + FastAPI-模板。 - 框架:Nextjs 13 + Typescript + FastAPI - 驗證:Next-Auth.js - ORM:Prisma 和 SQLModel。 - 資料庫:Planetscale。 - 樣式:TailwindCSS + HeadlessUI。 - 架構驗證:Zod + Pydantic。 - 法學碩士工具:Langchain。 開始使用本[指南](https://github.com/reworkd/AgentGPT?tab=readme-ov-file#getting-started-rocket)在本地安裝它。 您可以查看該應用程式的[演示](https://github.com/reworkd/AgentGPT?tab=readme-ov-file#-demo)並查看[即時網站](https://agentgpt.reworkd.ai/)。 ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v17lz12cn58ousqbiiyg.gif) 他們在 GitHub 上擁有 29k+ 顆星,並且正在發布`v1`版本。 https://github.com/reworkd/AgentGPT 明星 AgentGPT ⭐️ --- 3.[私人 GPT](https://github.com/zylon-ai/private-gpt) - 無需網路即可詢問有關您文件的問題。 ------------------------------------------------------------------------ ![私有GPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nshjqmm5xq6kgqkgfdc.png) PrivateGPT 是一個可立即投入生產的 AI 專案,即使在沒有網路連線的情況下,您也可以使用大型語言模型 (LLM) 的功能來詢問有關文件的問題。 100% 私有意味著任何時候都沒有資料離開您的執行環境。 API 分為兩個邏輯區塊: A。高級 API,抽象化了 RAG(檢索增強生成)管道實現的所有複雜性: - 文件攝取:內部管理文件解析、分割、元資料擷取、嵌入產生和儲存。 - 使用所攝取文件中的上下文進行聊天和完成:抽像上下文檢索、提示工程和回應產生。 b.低階 API,允許高階用戶實現複雜的管道: - 嵌入生成:基於一段文字。 - 上下文區塊檢索:給定查詢,從攝取的文件中傳回最相關的文字區塊。 您可以閱讀[安裝指南](https://docs.privategpt.dev/installation/getting-started/installation)來開始。 您可以閱讀[文件](https://docs.privategpt.dev/overview/welcome/introduction)以及所涉及的[詳細架構](https://github.com/zylon-ai/private-gpt?tab=readme-ov-file#-architecture)。 PrivateGPT 現在正在發展成為產生 AI 模型和原語的網關,包括補全、文件攝取、RAG 管道和其他低階建置塊。 他們在 GitHub 上擁有超過 51,000 顆星,並且發展迅速。 https://github.com/zylon-ai/private-gpt 明星私人 GPT ⭐️ --- 4. [Instrukt](https://github.com/blob42/Instrukt) - 終端機中整合人工智慧。 --------------------------------------------------------------- ![指示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wsk64pf5yuosui91tmz9.png) Instrukt是一個基於終端的AI整合環境。它提供了一個平台,用戶可以: - 建立並指導模組化人工智慧代理。 - 產生問答的文件索引。 - 建立工具並將其附加到任何代理程式。 用自然語言指導它們,並且為了安全起見,在安全容器(目前使用 Docker 實作)中執行它們,以在其專用的沙盒空間中執行任務。 使用`Langchain` 、 `Textual`和`Chroma`建構。 開始使用以下命令。 ``` pip install instrukt[all] ``` ![指示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3aza7hnlji7hbi2o0js.gif) 有許多令人興奮的功能,例如: - 基於終端的介面,讓強力鍵盤使用者無需離開鍵盤即可指示 AI 代理。 - 對您的資料建立索引並讓代理程式檢索它以進行問答。您可以使用簡單的 UI 建立和組織索引。 - 索引建立將自動偵測程式語言並相應地優化拆分/分塊策略。 - 在安全的 Docker 容器內執行代理程式以確保安全和隱私。 - 整合的 REPL-Prompt 可實現與代理程式的快速交互,以及用於開發和測試的快速回饋循環。 - 您可以使用自訂命令自動執行重複任務。它還具有內建的提示/聊天歷史記錄。 您可以閱讀有關所有[功能的](https://github.com/blob42/Instrukt?tab=readme-ov-file#features)資訊。 您可以閱讀[安裝指南](https://blob42.github.io/Instrukt/install.html)。 您還可以使用內建的 IPython 控制台來除錯和內省代理,這是一個簡潔的小功能。 ![控制台除錯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qaan8np68e3fk1yueexm.png) Instrukt 已獲得 AGPL 許可證,這意味著任何人都可以將其用於任何目的。 可以肯定地說,Instrukt 是您觸手可及的終端人工智慧指揮官。 這是一個新專案,因此他們在 GitHub 上有大約 200 多顆星,但用例非常好。 https://github.com/blob42/Instrukt 舊指令 ⭐️ --- 5. [Mac 上的語音助理](https://github.com/chidiwilliams/GPT-Automator)- 您的語音控制 Mac 助理。 ------------------------------------------------------------------------------- ![GPT自動機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdzv06jnr3z33s7qll5k.png) 您的語音控制 Mac 助理。 GPT Automator 可讓您使用語音在 Mac 上執行任務。例如,打開應用程式、尋找餐廳、綜合資訊。太棒了:D 它是在倫敦黑客馬拉松期間建構的。 它有兩個主要部分: A。語音命令:它使用本地執行的 Whisper(Buzz 的一個分支)來產生命令。 b.命令到行動:您向配備了我們編寫的自訂工具的 LangChain 代理程式發出命令。這些工具包括使用 AppleScript 控制電腦的作業系統以及使用 JavaScript 控制活動瀏覽器。最後,就像任何優秀的人工智慧一樣,我們讓代理商使用 AppleScript 說出最終結果「{Result}」(如果您以前沒有使用過,請嘗試在 Mac 終端機中輸入「Hello World!」)。 我們製作了一個自訂工具,讓法學碩士使用 AppleScript 控制電腦。提示符是文件字串: ``` @tool def computer_applescript_action(apple_script): """ Use this when you want to execute a command on the computer. The command should be in AppleScript. Here are some examples of good AppleScript commands: Command: Create a new page in Notion AppleScript: tell application "Notion" activate delay 0.5 tell application "System Events" to keystroke "n" using {{command down}} end tell ... Write the AppleScript for the Command: Command: """ p = subprocess.Popen(['osascript', '-'], stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.PIPE) stdout, stderr = p.communicate(applescript.encode('utf-8')) if p.returncode != 0: raise Exception(stderr) decoded_text = stdout.decode("utf-8") return decoded_text ``` 如果您想知道它是如何運作的,GPT Automator 使用 OpenAI 的 Whisper 將您的音訊輸入轉換為文字。然後,它使用LangChain Agent 選擇一組操作,包括使用OpenAI 的GPT-3(“text-davinci-003”)從提示符號產生AppleScript(用於桌面自動化)和JavaScript(用於瀏覽器自動化)命令,然後執行產生的腳本。 請記住,這不適用於生產用途。該專案執行從自然語言產生的程式碼,可能容易受到提示注入和類似的攻擊。這項工作是作為概念驗證而進行的。 您可以閱讀[安裝指南](https://github.com/chidiwilliams/GPT-Automator?tab=readme-ov-file#instructions)。 讓我們看看一些提示及其作用: ✅ 求計算結果。 > 提示:“2 + 2 是什麼?” 它將編寫 AppleScript 開啟計算器並輸入 5 \* 5。 ✅ 尋找附近的餐廳。 > 提示:“查找我附近的餐廳” 它將打開 Chrome,谷歌搜尋附近的餐廳,解析頁面,然後返回最上面的結果。有時它很厚顏無恥,反而會打開谷歌地圖結果並說「最好的餐廳是谷歌地圖頁面頂部的餐廳」。其他時候,它會打開 Google 上的頂部連結 - 並卡在 Google 可存取性頁面上... 以下是執行時列印到終端的內容: ``` Command: Find a great restaurant near Manchester. > Entering new AgentExecutor chain... I need to search for a restaurant near Manchester. Action: chrome_open_url Action Input: https://www.google.com/search?q=restaurant+near+Manchester Observation: Thought: I need to read the page Action: chrome_read_the_page Action Input: Observation: Accessibility links Skip to main content ... # Shortned for brevity Dishoom Manchester 4.7 (3.3K) · £££ · Indian 32 Bridge St · Near John Rylands Library Closes soon ⋅ 11 pm Stylish eatery for modern Indian fare San Carlo 4.2 (2.8K) · £££ · Italian 42 King St W · Near John Rylands Library Closes soon ⋅ 11 pm Posh, sceney Italian restaurant Turtle Bay Manchester Northern Quarter 4.7 Thought: I now know the final answer Final Answer: The 15 best restaurants in Manchester include El Gato Negro, Albert's Schloss, The Refuge, Hawksmoor, On The Hush, Dishoom, Banyan, Zouk Tea Room & Grill, Edison Bar, MyLahore Manchester, Turtle Bay Manchester Northern Quarter, San Carlo, The Black Friar, Mana, and Tast Cuina Catalana. ``` 我不能保證這些餐廳值得,請自行承擔風險。哈哈! ✅ 如果您要求 GPT Automator 擦除您的計算機,它會的。 是的,如果您要求的話,它會擦除您的電腦! 我內心的自我尖叫著要這麼做:) 您可以在這裡查看完整的演示! https://www.loom.com/share/7bfa82c604f3412fbbb04191ce2ae12f 您可以在[Chidi 的部落格](https://chidiwilliams.com/posts/gpt-automator)上閱讀更多內容。 它更像是一個業餘專案,因此他們在 GitHub 上有大約 200 個 star,但它非常酷。 https://github.com/chidiwilliams/GPT-Automator 明星 GPT Automator ⭐️ --- 6. [Flowise](https://github.com/FlowiseAI/Flowise) - 拖放 UI 來建立您的客製化 LLM 流程。 --------------------------------------------------------------------------- ![流塞伊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5bp43nil764fhe4a05z.png) 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!" )} ``` ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ahk2ovjrpq1qk3r5pfot.png) 您可以閱讀[文件](https://docs.flowiseai.com/)。 ![流程化人工智慧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trkltpn5lk1y1pte0smd.png) 雲端主機不可用,因此您必須使用這些[說明](https://github.com/FlowiseAI/Flowise?tab=readme-ov-file#-self-host)自行託管。 讓我們探討一些用例: - 假設您有一個網站(可以是商店、電子商務網站或部落格),並且您希望廢棄該網站的所有相關連結,並讓法學碩士回答您網站上的任何問題。您可以按照此[逐步教學](https://docs.flowiseai.com/use-cases/web-scrape-qna)來了解如何實現相同的目標。 ![刮刀](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e91sz2mga5wvc0x2hp2g.png) - 您還可以建立一個自訂工具,該工具將能夠呼叫 Webhook 端點並將必要的參數傳遞到 Webhook 主體中。請依照本[指南](https://docs.flowiseai.com/use-cases/webhook-tool)使用 Make.com 建立 Webhook 工作流程。 ![網路鉤子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ckyivo9dvue461jc9pv4.png) 還有許多其他用例,例如建立 SQL QnA 或與 API 互動。 FlowiseAI 在 GitHub 上擁有超過 27,500 個 Star,並擁有超過 10,000 個分叉,因此具有良好的整體比率。 https://github.com/FlowiseAI/Flowise 明星 Flowise ⭐️ --- 7. [Twitter Agent](https://github.com/ahmedbesbes/media-agent) - 從社群媒體抓取資料並使用 Langchain 與其聊天。 --------------------------------------------------------------------------------------------- ![推特代理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8umoek3meg2tjxw9jna.png) Media Agent 抓取 Twitter 和 Reddit 提交的內容,對其進行總結,並在互動式終端中與它們聊天。這麼酷的概念! 您可以閱讀[說明](https://github.com/ahmedbesbes/media-agent?tab=readme-ov-file#run-the-app-locally)以在本地安裝它。 它是使用以下方式建構的: - Langchain 🦜 用於建構和撰寫法學碩士。 - ChromaDB 用於儲存向量(也稱為嵌入)並查詢它們以建立對話機器人。 - Tweepy 連接到您的 Twitter API 並提取推文和元資料。 - Praw 連接到 Reddit API。 - Rich 建造了一個很酷的終端 UX/UI。 - 管理依賴關係的詩。 一些很棒的功能: - 代表您從使用者帳戶清單或關鍵字清單中抓取推文/提交內容。 - 使用 OpenAI 嵌入推文/提交內容。 - 建立推文/提交內容的摘要並提供需要回答的潛在問題。 - 在推文之上打開聊天會話。 - 儲存對話及其元資料。 - 豐富的終端使用者介面和日誌記錄功能。 您可以觀看演示! https://www.loom.com/share/f4954e7d34ef4b7b8491e2bf910e8521 它在 GitHub 上有近 100 顆星,並且不再維護。您可以用它來建造更好的東西。 https://github.com/ahmedbesbes/media-agent 明星 Twitter 代理商 ⭐️ --- 8. [GPT 遷移](https://github.com/joshpxyne/gpt-migrate)- 輕鬆將程式碼庫從一種框架或語言遷移到另一種框架或語言。 ---------------------------------------------------------------------------------- ![GPT 遷移](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ullej3qz57t3l4qneyru.png) 如果您曾經面臨將程式碼庫遷移到新框架或語言的痛苦,那麼這個專案適合您。 我想我們都同意我們在某個時候需要這個。您也可以使用工作流程來完成此操作,據我所知,Stripe 曾經將其整個 JS 程式碼庫轉換為 TS。 遷移是一個成本高、乏味且重要的問題。 不要盲目相信當前版本,請負責任地使用它。另請注意,成本可能會迅速增加,因為 GPT-Migrate 旨在編寫(並可能重寫)整個程式碼庫。 您可以使用 Poetry[安裝](https://github.com/joshpxyne/gpt-migrate?tab=readme-ov-file#-installation-using-poetry)它並了解[它的工作原理](https://github.com/joshpxyne/gpt-migrate?tab=readme-ov-file#-how-it-works)。 > 請注意。 GPT-Migrate 目前處於開發 alpha 階段,尚未準備好投入生產使用。例如,在相對簡單的基準測試中,它在約 50% 的時間內順利通過 Python 或 JavaScript 等「簡單」語言,並且在沒有人工幫助的情況下無法通過 C++ 或 Rust 等更複雜的語言。 您可以在這裡觀看演示! ![GPT 遷移](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/megapc2dsnb6qlcl0dy4.gif) 他們在 GitHub 上有 6500+ 顆星,最後一次提交是 6 個月前,所以我認為它不再被維護了! https://github.com/joshpxyne/gpt-migrate 明星 GPT 遷移 ⭐️ --- 9. [Plandex](https://github.com/plandex-ai/plandex) - 用於使用法學碩士建置複雜的真實世界軟體的人工智慧編碼引擎。 ----------------------------------------------------------------------------------- ![普蘭迪克斯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9c98v9qntshph3wue4fr.png) Plandex 使用長時間執行的代理程式來完成跨多個檔案且需要多個步驟的任務。它將大任務分解為更小的子任務,然後實現每個子任務,一直持續到完成工作為止。 它可以幫助您處理積壓的工作,使用不熟悉的技術,擺脫困境,並花更少的時間在無聊的事情上。 您可以在這裡查看演示! https://vimeo.com/926634577 變更會累積在受保護的沙箱中,以便您可以在自動將它們套用到專案文件之前查看它們。內建版本控制可讓您輕鬆返回並嘗試不同的方法。分支允許您嘗試多種方法並比較結果。 您可以在終端機中有效地管理上下文。輕鬆將檔案或整個目錄新增至上下文中,並在工作時自動更新它們,以便模型始終具有專案的最新狀態。 Plandex 依賴 OpenAI API,並且需要`OPENAI_API_KEY`環境變數。 Plandex 支援 Mac、Linux、FreeBSD 和 Windows。它從沒有依賴關係的單一二進位檔案執行。 您甚至可以嘗試不同的模型和模型設置,然後比較結果。 您可以閱讀[安裝說明](https://github.com/plandex-ai/plandex?tab=readme-ov-file#install)。 Plandex Cloud 是使用 Plandex 最簡單、最可靠的方式。當您使用 plandex new 建立第一個計劃時,系統會提示您開始匿名試用(無需電子郵件)。試用帳戶僅限 10 個計劃,每個計劃有 10 個 AI 模型回复。 Plandex Cloud 帳戶目前是免費的,這是一件好事。 Plandex 在 GitHub 上擁有 8k+ 顆星,並使用 Go 建造。 https://github.com/plandex-ai/plandex 明星PLandex ⭐️ --- 10. [SQL Translator](https://github.com/whoiskatrin/sql-translator) - 使用人工智慧將自然語言查詢轉換為 SQL 程式碼的工具。 -------------------------------------------------------------------------------------------------- ![SQL翻譯器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ghpgh4gvpdfiuj2qbat.png) 我試圖建立一個類似的專案,發現它已經存在。 該工具旨在讓任何人都可以輕鬆地將 SQL(結構化查詢語言)命令轉換為自然語言,反之亦然。 SQL 是一種用於管理和操作關聯式資料庫中的資料的程式語言,雖然它是一個強大的工具,但它也可能非常複雜且難以理解。 另一方面,自然語言是我們在日常生活中說和寫的語言,對於不熟悉技術術語的人來說,它通常是首選的溝通方式。 透過 SQL 和自然語言翻譯器,您無需成為 SQL 專家即可了解資料庫中發生的情況或編寫 SQL 查詢。您只需用自然語言輸入查詢即可取得對應的 SQL 程式碼,反之亦然。 其中一些功能是: - 深色模式。 - 小寫/大寫切換。 - 複製到剪貼簿。 - SQL 語法高亮。 - 模式意識(測試版)。 - 查詢歷史記錄。 你可以閱讀 [安裝說明](https://github.com/whoiskatrin/sql-translator?tab=readme-ov-file#%EF%B8%8F-installation),它非常簡單,因為它使用 Nextjs。 此查詢適合您。哈哈! ![酷查詢](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eef11xrahbmv945xvpm7.png) SQL Translator 在 GitHub 上有 4k star,是使用 TypeScript 建構的。 https://github.com/whoiskatrin/sql-translator 明星 SQL 翻譯機 ⭐️ --- 11. [WingmanAI](https://github.com/e-johnstonn/wingmanAI) - 音訊即時轉錄,與 ChatGPT 整合。 -------------------------------------------------------------------------------- ![僚機人工智慧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/slrhmt949vr7gqdmgi3h.png) WingmanAI 是一款功能強大的工具,可與系統和麥克風音訊的即時轉錄進行互動。該工具由 ChatGPT 提供支援,可讓您與腳本即時交互,作為機器人的廣泛記憶體基礎,提供獨特的通訊平台。 當您載入指定人員的記錄時,機器人可以回答有關過去對話的問題。 您可以閱讀[安裝說明](https://github.com/e-johnstonn/wingmanAI?tab=readme-ov-file#installation)。 您可以在這裡觀看演示! ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w325vc51fys8gebrcb02.gif) 一些簡潔的功能是: - WingmanAI 可以轉錄系統輸出和麥克風輸入音頻,讓您以易於閱讀的格式查看即時轉錄。 - 您可以與 ChatGPT 支援的機器人聊天,該機器人會即時讀取您的文字記錄。 - 機器人以令牌有效的方式維護對話記錄,因為只有當前的文字區塊會傳遞給機器人。 - WingmanAI 讓您可以保存成績單以供將來使用。您可以稍後隨時加載它們,並且對機器人進行的任何查詢都將與保存的轉錄本的向量資料庫交叉引用,從而為機器人提供更豐富的上下文。 - 您可以繼續附加到已儲存的記錄中,隨著時間的推移建立一個龐大的資料庫供機器人從中提取。 它在 GitHub 上有 420 個星,並且不再維護。 https://github.com/e-johnstonn/wingmanAI 明星 WingmanAI ⭐️ --- 12. [Lively](https://github.com/rocksdanister/lively) - 允許使用者設定動畫桌面桌布和螢幕保護程式。 ----------------------------------------------------------------------------- ![活潑](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60tld1a857herh12r5ci.png) 這只是為了好玩,我們可以使用程式碼學到很多關於它是如何完成的。 你可以看看這個[影片](https://www.pexels.com/video/blue-texture-abstract-leaves-7710243/),看看它看起來有多瘋狂。 ![風俗](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kb2ll571uc2jd2xrpmph.png) 他們提供[三種類型的壁紙,](https://github.com/rocksdanister/lively?tab=readme-ov-file#types-of-wallpapers)包括影片/GIF、網頁和應用程式/遊戲。 它基於 C# 和 live 支援的一些很酷的功能建置: 1. Lively 可以透過終端機的[命令列參數](https://github.com/rocksdanister/lively/wiki/Command-Line-Controls)進行控制。您可以將其與其他語言(例如 Python 或腳本軟體 AutoHotKey)整合。 2. 一組強大的[API](https://github.com/rocksdanister/lively/wiki/API) ,供開發人員建立互動式壁紙。取得硬體讀數、音訊圖表、音樂資訊等。 3. 當電腦上執行全螢幕應用程式/遊戲時(~0% CPU、GPU 使用率),桌布播放會暫停。 4. 您還可以利用[機器學習推理](https://github.com/rocksdanister/lively/wiki/Machine-Learning)來建立動態壁紙。您可以預測任何 2D 影像與相機的距離並產生類似 3D 的視差效果。酷:D 我見過很多人使用它,其中許多人甚至不知道它是開源的。 您可以使用[安裝程式](https://github.com/rocksdanister/lively/releases/download/v2.0.7.4/lively_setup_x86_full_v2074.exe)或透過[Microsoft Store](https://www.microsoft.com/store/productId/9NTM2QC6QWS7?ocid=pdpshare)下載它。 它是 2023 年 Microsoft Store 的獲勝者。 它在 GitHub 上擁有 13k+ Stars,有 60 個版本。 https://github.com/rocksdanister/lively 明星活潑 ⭐️ --- 13. [RestGPT](https://github.com/Yifan-Song793/RestGPT) - 基於 LM 的自主代理透過 RESTful API 控制應用程式。 ------------------------------------------------------------------------------------------- ![休息GPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lyp7goco6awn2l4uttww.png) 這項工作旨在建立一個基於大型語言模型的自主代理 RestGPT,以控制現實世界的應用程式,例如電影資料庫和音樂播放器。為了實現這一目標,我們將法學碩士與 RESTful API 連接起來,並解決規劃、API 呼叫和回應解析的實際挑戰。為了全面評估 RestGPT 的效能,我們提出了 RestBench,這是一個高品質的基準測試,由兩個真實場景和具有黃金解決方案路徑的人工註釋指示組成。 RestGPT採用迭代式從粗到精的線上規劃框架,並使用執行器呼叫RESTful API。以下是 RestGPT 的概述。 ![在職的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17p05syighh3llbmr1fk.png) 您可以閱讀[文件](https://github.com/Yifan-Song793/RestGPT?tab=readme-ov-file#data)以使用 RestBench 評估 RestGPT 的效能。 使用 TMDB 電影資料庫搜尋 Sofia Coppola 執導的電影數量的範例。 ![例子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/toh8k55yhb7c6t4oq0j7.gif) 您可以閱讀康乃爾大學發表的程式碼研究論文: [RestGPT - Connecting Large Language Models with Real-World RESTful APIs](https://arxiv.org/abs/2306.06624) 。 他們在 GitHub 上有 1.2k Stars,雖然不是很大,但涵蓋了一個很好的用例。 https://github.com/Yifan-Song793/RestGPT 明星 RestGPT ⭐️ --- 14. [ChatFiles](https://github.com/guangzhengli/ChatFiles) - 上傳您的檔案並與其對話。 ------------------------------------------------------------------------- ![聊天文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhimajsma8ijyzeknmlg.png) 文件聊天機器人 — 多個文件,由 GPT / Embedding 提供支援。你可以上傳任何文件並與之對話,考慮到他們使用了另一個著名的開源專案,UI 非常好。 它在底層使用 Langchain 和[Chatbot-ui](https://github.com/mckaywrigley/chatbot-ui) 。使用 Nextjs、TypeScript、Tailwind 和 Supabase(向量 DB)建構。 如果您想了解該方法和技術架構,那麼就在這裡! ![建築學](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zbn7h50k6gwxgz6rkaf.png) 此環境僅用於試用,支援最大檔案大小為 10 MB,這是一個缺點,如果您想要更大的大小,則可以[在本機安裝](https://github.com/guangzhengli/ChatFiles?tab=readme-ov-file#how-to-run-locally)。 他們提供了您可以使用的[入門問題](https://github.com/guangzhengli/ChatFiles/blob/main/doc/Example.md)。您可以查看[現場演示](https://chatfile.vectorhub.org/)。 他們在 GitHub 上有 3k star,並且發布了`v0.3`版本。 https://github.com/guangzhengli/ChatFiles 明星 ChatFiles ⭐️ --- 15. [MindsDB](https://github.com/mindsdb/mindsdb) - 從企業資料客製化人工智慧的平台。 -------------------------------------------------------------------- ![思維資料庫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9q3jdswxdx6wqfk0vqw.png) MindsDB 是一個利用企業資料客製化人工智慧的平台。 透過 MindsDB,您可以利用資料庫、向量儲存或應用程式中的資料即時部署、服務和微調模型,以建立人工智慧驅動的應用程式 - 使用開發人員已知的通用工具。 借助 MindsDB 及其與資料來源和 AI/ML 框架的近[200 個集成](https://docs.mindsdb.com/integrations/data-overview),任何開發人員都可以使用其企業資料更快、更安全地自訂符合其目的的 AI。 ![MindsDB 的工作原理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4q1gfmhq43gopdix03gr.png) 您可以閱讀[文件](https://docs.mindsdb.com/)和[快速入門指南](https://docs.mindsdb.com/quickstart-tutorial)來開始使用。 目前,他們總共支援[3 個使用 Mongo-QL、Python 和 JavaScript 的 SDK](https://docs.mindsdb.com/sdks/overview) 。 MindsDB 有多種應用程式,例如與眾多資料來源和 AI 框架集成,因此您可以輕鬆地將資料和 AI 結合在一起以建立和自動化自訂工作流程。 其他常見用例包括微調模型、聊天機器人、警報系統、內容生成、自然語言處理、分類、回歸和預測。閱讀有關[用例的](https://docs.mindsdb.com/use-cases/)更多訊息,每個用例都有一個包含一些資訊的架構圖。 ![用例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wuhxzbioqh9a5s9f0w7s.png) 例如,MindsDB 的聊天機器人架構圖。您可以閱讀提供的所有[解決方案](https://github.com/mindsdb/mindsdb?tab=readme-ov-file#-get-started)及其 SQL 查詢範例。 ``` // SQL Query Example for Chatbot CREATE CHATBOT slack_bot USING database='slack',agent='customer_support'; ``` ![聊天機器人](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otoqsro02ghqb709yglk.png) 只是為了告訴您總體的可能性,您可以查看[如何使用 AI + IoT 感測器資料預測氣溫](https://mindsdb.com/blog/how-to-forecast-air-temperatures-with-ai-iot-sensor-data)。令人興奮的權利:) ![心靈資料庫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82wrjyrkch44taeurv1r.png) 他們在 GitHub 上擁有超過 21k 個 star,並且在`v24.4.3.0`上有超過 200 個版本。順便說一句,這是我第一次在任何版本中看到 4 個部分,因為我一直遵循語義版本。 https://github.com/mindsdb/mindsdb 明星 MindsDB ⭐️ --- 16. [Quivr](https://github.com/QuivrHQ/quivr) - 你的 GenAI 第二腦。 ------------------------------------------------------------- ![奎弗爾](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hl12fl88mdjmfkfath1t.png) Quivr,您的第二個大腦,利用 GenerativeAI 的力量成為您的私人助理!可以將其視為黑曜石,但增強了人工智慧功能。 ![統計資料](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5a27c2ubbmri0b2xlh1l.png) 您可以閱讀[安裝指南](https://github.com/QuivrHQ/quivr?tab=readme-ov-file#getting-started-)。 您可以閱讀[文件](https://docs.quivr.app/home/intro)並觀看[示範影片](https://github.com/QuivrHQ/quivr?tab=readme-ov-file#demo-highlights-)。 他們可以提供更好的免費套餐,但這足以在您端進行測試。 它在 GitHub 上擁有超過 30k 顆星,發布了 220 多個版本,這意味著它們正在不斷改進。 https://github.com/QuivrHQ/quivr 明星 Quivr ⭐️ --- 17.[動畫繪畫](https://github.com/facebookresearch/AnimatedDrawings)- 一種將兒童人物繪畫動畫化的方法。 --------------------------------------------------------------------------------- ![動畫圖畫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pvpj68sum9xrqfz0s6n.gif) 我的意思是哇!這麼酷的概念。我不知道你怎麼想,但我真的很興奮。 這是 Facebook 的一個開源專案,主要用於研究目的,包含論文《 [A Method for Animating Children's Drawings of the Human Figure》](https://dl.acm.org/doi/10.1145/3592788)中描述的演算法的實作。 該專案已在 macOS Ventura 13.2.1 和 Ubuntu 18.04 上進行了測試。如果您在其他作業系統上安裝,則可能會遇到問題。 他們強烈建議在安裝 Animated Drawings 之前啟動 Python 虛擬環境。 閱讀有關[安裝說明](https://github.com/facebookresearch/AnimatedDrawings?tab=readme-ov-file#installation)以及如何快速入門的更多資訊。 您可以按照這個完整的指南來為[您的繪圖製作動畫](https://github.com/facebookresearch/AnimatedDrawings?tab=readme-ov-file#animating-your-own-drawing),包括如何在場景中加入多個角色、加入背景圖像以及更多令人興奮的事情。 他們在 GitHub 上擁有超過 10k 顆星,並且僅用於具有 MIT 許可的研究目的。 https://github.com/facebookresearch/AnimatedDrawings 明星動畫繪圖 ⭐️ --- 18.[背景移除器](https://github.com/nadermx/backgroundremover)- 讓您可以透過簡單的 CLI 使用 AI 從影像和影片中移除背景。 ------------------------------------------------------------------------------------------ ![背景去除劑](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v8bppslk45ci383wpman.png) 這是一個使用 AI 從圖像和影片中刪除背景的命令列工具。 首先從 pypi 安裝 backgroundremover。 ``` pip install --upgrade pip pip install backgroundremover ``` 也可以在不透過 pip 安裝的情況下執行它,只需克隆 git 以在本地啟動虛擬環境安裝要求並執行。 您可以使用的一些命令: - 從本機檔案圖像中刪除背景 ``` backgroundremover -i "/path/to/image.jpeg" -o "output.png" ``` - 從本地影片中刪除背景並將其覆蓋在圖像上 ``` backgroundremover -i "/path/to/video.mp4" -toi "/path/to/videtobeoverlayed.mp4" -o "output.mov" ``` 您可以檢查可透過 CLI 使用的所有[命令](https://github.com/nadermx/backgroundremover?tab=readme-ov-file#usage-as-a-cli)。 您甚至可以將它用作圖書館。 ``` from backgroundremover.bg import remove def remove_bg(src_img_path, out_img_path): model_choices = ["u2net", "u2net_human_seg", "u2netp"] f = open(src_img_path, "rb") data = f.read() img = remove(data, model_name=model_choices[0], alpha_matting=True, alpha_matting_foreground_threshold=240, alpha_matting_background_threshold=10, alpha_matting_erode_structure_size=10, alpha_matting_base_size=1000) f.close() f = open(out_img_path, "wb") f.write(img) f.close() ``` 您可以閱讀[安裝說明](https://github.com/nadermx/backgroundremover?tab=readme-ov-file#installation)並觀看[現場演示](https://www.backgroundremoverai.com/)。 > 輸入與輸出。 ![輸入影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0rwjaxxw460lugle5z2.png) 他們在 GitHub 上有 6k star,我們絕對可以用它來學習一些重要的概念。 https://github.com/nadermx/backgroundremover 明星背景去除器 ⭐️ --- 19. [Lobe Chat](https://github.com/lobehub/lobe-chat) - 現代設計的法學碩士/人工智慧聊天框架。 --------------------------------------------------------------------------- ![波瓣聊天](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddxibf7xxx931tdoj1mn.png) 一個開源、現代設計的 ChatGPT/LLM UI/框架。 支援語音合成、多模式和可擴展(函數呼叫)插件系統。您可以一鍵部署您的私有 OpenAI。 ![旅行](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39se198xal53r854sdps.png) 讓我們來看看 LobeChat 的一些令人興奮的功能: ✅ 多模式服務提供者支援。 ![多服務](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nodazgxel962wrp2hnvo.png) 他們將我們的支援擴展到多個模型服務提供者,而不是局限於單一服務提供者,為用戶提供更多樣化和豐富的對話選擇。 尋找他們支援的[10 多個模型服務提供者](https://lobehub.com/docs/usage/features/multi-ai-providers)的完整清單。 ✅ 市場助理。 ![助理市場](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35z3kz2jr4mnxid9dwsg.png) 在LobeChat的[助手市場](https://lobehub.com/assistants)中,創作者可以發現一個充滿活力和創新的社區,匯集了許多精心設計的助手。這些助手不僅在工作場景中發揮著至關重要的作用,而且在學習過程中也提供了極大的便利。在這裡,每個人都可以貢獻自己的智慧,分享自己開發的助手。 ![市場](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ex23f2epblfp2cxtxbnl.png) 那裡有很多很棒的應用程式。哇! ✅ 模型視覺辨識。 ![模型視覺辨識](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuxz350091223cj36dq7.png) LobeChat現在支援OpenAI的gpt-4-vision、Google Gemini Pro Vision、Zhipu GLM-4 Vision等具有視覺辨識能力的大型語言模型,使LobeChat具備多模態互動能力。用戶可以輕鬆地將圖片上傳或拖放到聊天框中,助理將能夠辨識圖片內容並據此進行智慧對話,打造更聰明、更多樣化的聊天場景。 ✅ 文字到圖像生成。 ![文字到圖像生成](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2q6qzcy8anjgsg2381o.png) LobeChat 支援最新的文字到圖像生成技術,現在允許使用者在與助手對話時直接使用文字到圖像工具。透過利用 DALL-E 3、MidJourney 和 Pollinations 等 AI 工具的功能,助手現在可以將您的想法轉化為圖像。 ✅ 本地大語言模型 (LLM) 支援。 ![本地大語言模型 (LLM) 支援。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucn4rpa4p2vb11hhvkn1.png) 借助 Ollama AI 強大的基礎設施和社區的協作努力,現在您可以在 LobeChat 中與本地 LLM(大型語言模型)進行對話! 透過執行以下 Docker 指令,您可以在 LobeChat 中體驗與本機 LLM 的對話。 ``` docker run -d -p 3210:3210 -e OLLAMA_PROXY_URL=http://host.docker.internal:11434/v1 lobehub/lobe-chat ``` ✅ 漸進式網頁應用程式 (PWA)。 ![漸進式網頁應用程式 (PWA)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sccmha74iz01rr12gphr.png) 他們採用了漸進式 Web 應用程式 PWA 技術,這是一種現代 Web 技術,可將 Web 應用程式提升到接近本機應用程式的體驗。透過 PWA,LobeChat 可以在桌面和行動裝置上提供高度優化的使用者體驗,同時保持輕量級和高效能的功能。 ✅ 自訂主題。 ![自訂主題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7cl73pplbor4z1381kdm.png) LobeChat在介面設計上非常注重個人化的使用者體驗,因此引入了靈活多樣的主題模式,包括白天的淺色模式和夜間的深色模式。 除了主題模式切換之外,我們還提供了一系列顏色自訂選項,讓使用者可以根據自己的喜好調整應用程式的主題顏色。 了解所有[功能和用例](https://lobehub.com/docs/usage/start)。 您可以自行託管或使用 docker 部署它。 lobe chat 的[生態系統](https://github.com/lobehub/lobe-chat/tree/main?tab=readme-ov-file#-ecosystem)提供了 4 個軟體包: `lobehub/ui` 、 `lobehub/icons` 、 `lobehub/tts`和`lobehub/lint` 。 他們還提供[插件市場](https://lobehub.com/plugins),您可以在其中找到許多有用的插件,這些插件可用於引入新的函數呼叫,甚至是呈現訊息結果的新方法。如果你想開發自己的插件,請參考 wiki 中的[📘插件開髮指南](https://lobehub.com/docs/usage/plugins/development)。 ![插件市場](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uqtxt31vc42uwnw2ukgr.png) 您可以閱讀[文件](https://lobehub.com/docs/usage/start)。 您可以查看[現場演示](https://chat-preview.lobehub.com/chat)。它太酷了! ![演示快照](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xe3ngshtwpps2kmpu98f.png) 他們在 GitHub 上擁有超過 28k 顆星,發布了 500 多個版本。 https://github.com/lobehub/lobe-chat 星瓣聊天 ⭐️ --- 20.[微代理](https://github.com/aymenfurter/microagents)- 能夠自我編輯提示的代理。 ------------------------------------------------------------------ ![微代理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuxv03dgb03s04dkmkm9.png) 它是一個實驗框架,用於動態建立自我改進的代理來回應任務。 微代理代表了一種建立自我改進代理的新方法。小型的微服務大小(因此稱為微代理)代理是根據用戶分配給助手的任務動態生成的,評估其功能,並在成功驗證後存儲以供將來重用。 這使得跨聊天會話的學習成為可能,使系統能夠獨立推斷任務執行的方法。 這是使用`Python` 、 `OpenAI's GPT-4 Turbo`和`Text-Embedding-Ada-002`建構的。 您可以閱讀[安裝說明](https://github.com/aymenfurter/microagents?tab=readme-ov-file#installation)。他們提到您應該擁有一個可以存取 gpt-4-turbo 和 text-embedding-ada-002 的 OpenAI 帳戶。 讓我們看一個獲取天氣預報代理的範例。 ``` You are an adept weather informant. Fetch the weather forecast by accessing public API data using this Python code snippet: ``python import requests import json def fetch_weather_forecast(location, date): response = requests.get(f"https://api.met.no/weatherapi/locationforecast/2.0/compact?lat={location[0]}&lon={location[1]}") weather_data = response.json() for day_data in weather_data['properties']['timeseries']: if date in day_data['time']: print(day_data['data']['instant']['details']) break `` # Example usage: fetch_weather_forecast((47.3769, 8.5417), '2024-01-22T12:00:00Z') Note: Replace the (47.3769, 8.5417) with the actual latitude and longitude of the location and the date string accordingly. ``` 如果您想知道如何建立代理,那麼此架構圖將對此進行解釋。 ![圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7oi4fbt6e5qauqo293qt.png) 您可以看到[工作演示](https://github.com/aymenfurter/microagents?tab=readme-ov-file#demo)。 他們在 GitHub 上有大約 700 顆星,值得一看。 https://github.com/aymenfurter/microagents 明星微代理 ⭐️ --- 21. [GPT-4 & LangChain](https://github.com/mayooear/gpt4-pdf-chatbot-langchain) - 用於大型 PDF 文件的 GPT4 和 LangChain 聊天機器人。 -------------------------------------------------------------------------------------------------------------------------- ![聊天架構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pe0xehimhyw2mfubzu9.png) 這可用於新的 GPT-4 API 來為多個大型 PDF 檔案建立 chatGPT 聊天機器人。 該系統是使用 LangChain、Pinecone、Typescript、OpenAI 和 Next.js 建構的。 LangChain 是一個簡化可擴展 AI/LLM 應用程式和聊天機器人開發的框架。 Pinecone 用作向量存儲,用於以文字格式儲存嵌入和 PDF,以便以後檢索類似文件。 您可以閱讀涉及複製、安裝依賴項和設定環境 API 金鑰的[開發指南](https://github.com/mayooear/gpt4-pdf-chatbot-langchain?tab=readme-ov-file#development)。 您可以觀看[YouTube 影片](https://www.youtube.com/watch?v=ih9PBGVVOO4),了解如何遵循和使用它。 他們在 GitHub 上擁有 14k+ Stars,僅提交了 34 次。在您的下一個人工智慧應用程式中嘗試! https://github.com/mayooear/gpt4-pdf-chatbot-langchain 明星 GPT-4 和 Langchain ⭐️ --- 22. [Buzz](https://github.com/chidiwilliams/buzz) - 在您的個人電腦上離線轉錄和翻譯音訊。 ---------------------------------------------------------------------- ![嗡嗡聲](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdi1olu9ogarzxdc3ct9.png) 使用 OpenAI 的 Whisper 的強大功能在您的個人電腦上離線轉錄和翻譯音訊。 Buzz 甚至出現在[App Store](https://apps.apple.com/us/app/buzz-captions/id6446018936?mt=12&itsct=apps_box_badge&itscg=30200) 。取得 Buzz 的 Mac 原生版本,具有更簡潔的外觀、音訊播放、拖放匯入、文字記錄編輯、搜尋等功能。 您可以閱讀[安裝說明](https://chidiwilliams.github.io/buzz/docs/installation)。 令人興奮的功能: - 匯入音訊和視訊檔案並將文字記錄匯出為 TXT、SRT 和 VTT(演示)。 - 從電腦麥克風轉錄和翻譯為文字(資源密集且可能不是即時的。 - 它可在 Mac、Windows 和 Linux 上使用。 - 還有一個[CLI](https://chidiwilliams.github.io/buzz/docs/cli)選項。 在這裡查看演示! https://www.loom.com/share/564b753eb4d44b55b985b8abd26b55f7 您可以閱讀[文件](https://chidiwilliams.github.io/buzz/docs)。 它們在 GitHub 上擁有近 10k star,並且自兩週前上次提交以來仍在維護中。 https://github.com/chidiwilliams/buzz 明星嗡嗡聲 ⭐️ --- 23. [Deepgram](https://github.com/deepgram) - 將語音 AI 建置到您的應用程式中。 ---------------------------------------------------------------- ![深度圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32enxrtcwqk6g81eazay.png) 從新創公司到 NASA,Deepgram API 每天都用於轉錄和理解數百萬分鐘的音訊。快速、準確、可擴展且經濟高效。 它為開發人員提供語音到文字和音訊智慧模型。 ![深度圖選項](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdc3tqg7fvt3sw6ktle7.png) 儘管他們有免費增值模式,但免費套餐的限制足以讓您入門。 可視化效果更上一層樓。您可以檢查即時串流媒體回應或音訊檔案並比較音訊的智慧程度。 ![串流媒體](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wcvzzrqzn94gxe594hf.png) ![情緒分析](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uw6wkhzg7g6vgq7lphri.png) 您可以閱讀[文件](https://developers.deepgram.com/docs/introduction)。 您也可以閱讀 Deepgram 撰寫的關於[如何將語音辨識新增至您的 React 和 Node.js 專案的範例部落格](https://deepgram.com/learn/how-to-add-speech-recognition-to-your-react-project)。 如果您想嘗試 API 來親自了解模型的靈活性,請查看他們的[API Playground](https://playground.deepgram.com/?smart_format=true&language=en&model=nova-2) 。 https://github.com/deepgram 明星 Deepgram ⭐️ --- 24. [OpenDevin](https://github.com/OpenDevin/OpenDevin) - 更少的程式碼,更多的內容。 ----------------------------------------------------------------------- ![奧彭文](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4on63bb02g4x4ny8gtcn.png) ![奧彭文](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0yepod2rye2jk5r12dt.png) 這是一個開源專案,旨在複製 Devin,一名自主人工智慧軟體工程師,能夠執行複雜的工程任務並在軟體開發專案上與用戶積極協作。該計畫致力於透過開源社群的力量複製、增強和創新 Devin。 只是想讓你知道,這是在德文被介紹之前。 您可以閱讀帶有要求的[安裝說明](https://github.com/OpenDevin/OpenDevin?tab=readme-ov-file#installation)。 他們使用 LiteLLM,因此您可以使用任何基礎模型來執行 OpenDevin,包括 OpenAI、Claude 和 Gemini。 如果您想為 OpenDevin 做出貢獻,您可以查看 [演示](https://github.com/OpenDevin/OpenDevin/blob/main/README.md#opendevin-code-less-make-more)和[貢獻指南](https://github.com/OpenDevin/OpenDevin/blob/main/CONTRIBUTING.md)。 它在 GitHub 上擁有超過 10,700 個 Star,並且正在快速成長。 https://github.com/OpenDevin/OpenDevin 明星 OpenDevin ⭐️ --- 25. [NPM Copilot](https://github.com/whoiskatrin/npm-copilot) - Next.js 的 CLI 工具,可以即時分析日誌。 ------------------------------------------------------------------------------------------ ![npm 副駕駛](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7omx4d2yzub3gx1xmkvh.png) npm/yarn/pnpm copilot 是一個命令列工具,它使用 OpenAI 的 GPT-3 語言模型來提供修復程式碼中錯誤的建議。 CLI 工具可偵測目前目錄中正在使用的專案類型和套件管理器。 然後,它執行適當的開發伺服器命令(例如,npm run dev、yarn run dev、pnpm run dev)並偵聽正在執行的應用程式產生的日誌。 當遇到錯誤時,CLI 工具會即時提供錯誤修復建議。 首先使用以下 npm 指令安裝 npm-copilot 套件。 ``` npm install -g npm-copilot ``` CLI 工具將開始監視 Next.js 應用程式產生的日誌,並即時提供錯誤修復建議。 您可以透過該命令在專案中使用它。 ``` npm-copilot ``` 他們在 GitHub 上有 338 顆星,支援`Next,js` 、 `React` 、 `Angular`和`Vue.js` https://github.com/whoiskatrin/npm-copilot 明星 NPM Copilot ⭐️ --- 26. [Mentat](https://github.com/AbanteAI/mentat) - 人工智慧編碼助理。 ------------------------------------------------------------ ![撒謊了](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yeba0cbns0fve53k5xk5.png) Mentat 是一款人工智慧工具,可直接從命令列幫助您完成任何編碼任務。 與 Copilot 不同,Mentat 協調多個位置和文件的編輯。與 ChatGPT 不同的是,Mentat 已經擁有您專案的上下文 - 無需複製和貼上! 您可以觀看此演示以了解基本概述。 https://www.youtube.com/watch?v=lODjaWclwpY 如果需要協助,您可以閱讀[安裝說明](https://github.com/AbanteAI/mentat?tab=readme-ov-file#install)或觀看安裝[教學](https://www.youtube.com/watch?v=bVJP8hY8uRM)。 您可以閱讀[文件](https://github.com/AbanteAI/mentat?tab=readme-ov-file#-usage)。 他們在 GitHub 上有 2.3k 顆星,並且正在發布`v1`版本。 https://github.com/AbanteAI/mentat Star Mentat ⭐️ --- 27. [FlowGPT](https://github.com/nilooy/flowgpt) - 使用 AI 產生流程圖。 --------------------------------------------------------------- ![流量GPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzzpnc7doy4o6qizosjl.png) FlowGPT是一個用ai(gpt-3.5)產生流程圖的工具。 它是使用 Next.js、Langchain、Mermaid 和 DaisyUI 建構的。 您可以閱讀[安裝說明](https://github.com/nilooy/flowgpt?tab=readme-ov-file#installation)。 你可以查看[gif 示範](https://github.com/nilooy/flowgpt?tab=readme-ov-file#flowgpt-is-a-tool-to-generate-flowchart-with-ai-gpt-35)。 它只有 11 次提交,但在 GitHub 上有 238 顆星,並且是使用 TypeScript 建置的。作為一個小專案值得一試。 https://github.com/nilooy/flowgpt Star FlowGPT ⭐️ --- 28. [reor](https://github.com/reorproject/reor) - 自組織人工智慧筆記應用程式。 ---------------------------------------------------------------- ![我認為](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0x2q2a67bg7gzdekizw.png) 迄今為止我見過的最令人興奮的專案之一,特別是因為它在本地執行模型。 Reor 是一款基於人工智慧的桌面筆記應用程式:它會自動連結相關筆記、回答筆記上的問題並提供語義搜尋。 所有內容都儲存在本地,您可以使用類似黑曜石的 Markdown 編輯器來編輯筆記。該專案假設人工智慧思維工具預設應該在本地執行模型。 Reor 站在 Ollama、Transformers.js 和 LanceDB 等巨頭的肩膀上,使 LLM 和嵌入模型都可以在本地執行。也支援連接到 OpenAI 或 OpenAI 相容 API(例如 Oobabooga)。 > 我知道你想知道它怎麼可能是`self-organizing` ? A。您寫的每個筆記都會被分塊並嵌入到內部向量資料庫中。 b.相關筆記透過向量相似度自動連接。 C。 LLM 支援的問答對筆記語料庫進行 RAG。 d.一切都可以進行語義搜尋。 您可以在這裡觀看演示! ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1whpg9m7ubt5xluyf7f.gif) 將 Reor 視為一個帶有兩個生成器的 RAG 應用程式:LLM 和人類。在問答模式下,法學碩士會從語料庫中取得檢索到的上下文來幫助回答查詢。 類似地,在編輯器模式下,人們可以切換側邊欄以顯示從語料庫「檢索」的相關註釋。這是透過將當前筆記中的想法與語料庫中的相關想法交叉引用來「增強」您的想法的一種非常有效的方法。 您可以閱讀[文件](https://www.reorproject.org/docs)並從網站[下載](https://www.reorproject.org/)。 Mac、Linux 和 Windows 皆支援。 他們還提供了入門指南,以便幫助您入門。 ![入門指南](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bx3w7nalcwc9egumu0hm.png) 它們在 GitHub 上有 4.2k 顆星,並使用 TypeScript 建置。 https://github.com/reorproject/reor 星標 reor ⭐️ --- 29. [Amica](https://github.com/semperai/amica) - 讓您在瀏覽器中輕鬆地與 3D 角色聊天。 --------------------------------------------------------------------- ![朋友](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nvizcn717h3cteocft5.png) Amica 是一個開源接口,用於透過語音合成和語音辨識與 3D 角色進行互動式通訊。 您可以匯入 VRM 文件,調整聲音以適合角色,並產生包含情緒表達的回應文字。 他們使用 Three.js、OpenAI、Whisper、Bakllava 等進行視覺處理。您可以閱讀[Amica 的工作原理](https://docs.heyamica.com/overview/how-amica-works)及其所涉及的[核心概念](https://docs.heyamica.com/overview/core-concepts)。 您可以克隆該存儲庫並使用它來[開始](https://docs.heyamica.com/getting-started/installation)。 ``` npm i npm run dev ``` 您可以閱讀[文件](https://docs.heyamica.com/)並查看[演示](https://amica.arbius.ai/),這真是太棒了:D ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92iv9y2auly6tvenee82.png) 您可以觀看這段簡短的影片,了解它的功能。 https://www.youtube.com/watch?v=hUxAEnFiXH8 Amica 使用 Tauri 建立桌面應用程式。 他們在 GitHub 上有 400+ Stars,而且看起來非常容易使用。 https://github.com/semperai/amica Star Amica ⭐️ --- 30.[繼續](https://github.com/continuedev/continue)- 使您能夠建立人工智慧軟體開發系統。 ------------------------------------------------------------------- ![繼續](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ro5ctus5tdfvqdnysby.png) 繼續讓開發人員保持流動。我們的開源 VS Code 和 JetBrains 擴充功能可讓您輕鬆建立自己的模組化 AI 軟體開發系統並進行改進。 它們有很多很棒的功能,讓我們看看其中的一些: > 輕鬆理解程式碼部分。 ![程式碼部分](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lh8k3s0uv5y1assa50dl.gif) > 選項卡可自動完成程式碼建議。 ![自動完成](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09xt6urla4jic5x3m5rr.gif) > 詢問有關您的程式碼庫的問題。 ![問題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qd95frn0j9cd417yighz.gif) > 快速使用文件作為上下文。 ![文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2moxr84w6fwuwqvsccn.gif) > 立即了解終端錯誤。 ![錯誤](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kaaq6x5978tm1u61moxb.gif) > 使用斜槓指令開始操作。 ![命令](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4vlzc2vuiuoivgqy5e7.png) > 重構您正在編碼的函數。 ![重構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wz1tzon8afivi79ulvn.png) 了解所有[功能](https://docs.continue.dev/how-to-use-continue)。 您必須從市場安裝[VSCode 擴展](https://marketplace.visualstudio.com/items?itemName=Continue.continue),然後閱讀[快速入門指南](https://docs.continue.dev/quickstart)。 您可以閱讀[文件](https://docs.continue.dev/intro)。 它們在 GitHub 上擁有超過 10k 顆星,並使用 TypeScript 建置。 https://github.com/continuedev/continue 星繼續 ⭐️ --- 我從來沒有如此詳細地介紹過這麼多專案! 我希望這能幫助您創造一些鼓舞人心的東西。 請分享更多專案或任何您想要其他人可以學習的內容! 請關注 Copilotkit 以獲取更多此類內容。 https://dev.to/copilotkit --- 原文出處:https://dev.to/copilotkit/30-ai-libraries-you-can-use-for-your-next-project-ideas-5ded

Linode 各區域主機速度測試

最近要做一個小網站,主要目標市場為北美的用戶 網站同時會有繁體中文版,所以台灣的用戶也要可以使用、速度不能太慢 為了挑選適合的主機區域,使用 Linode Speed Test https://www.linode.com/speed-test/ 來記錄一下測試結果,測試時間 2024-05-07 18:40 左右 --- ## 首先是亞洲區域的機房 |Region|Ping(ms)|Download(Mbps)|Upload(Mbps)| |---|---|---|---| |Tokyo| 48.13 | 29.70 | 2.18 | | Osaka | 91.52 | 28.47 | 2.20 | | Singapore | 90.16 | 24.92 | 2.07 | | Jakarta | 82.05 | 34.39 | 1.86 | | Mumbai | 155.80 | 33.22 | 1.83 | ## 再來是北美區域的機房 |Region|Ping(ms)|Download(Mbps)|Upload(Mbps)| |---|---|---|---| | Newark | 204.78 | 12.66 | 1.78 | | Atlanta | 181.10 | 26.39 | 3.64 | | Chicago | 197.66 | 30.17 | 4.26 | | Los Angeles | 141.80 | 31.83 | 4.27 | | Seattle | 152.78 | 35.98 | 3.47 | | Washington DC | 208.06 | 22.27 | 3.13 | | Dallas | 174.10 | 14.26 | 4.04 | | Miami | 200.47 | 14.35 | 3.41 | | Fremont | 140.28 | 14.34 | 3.64 | ## 結論 速度的差異,主要取決於國家海底電纜的連通國家 https://medium.com/vincent-chen/%E5%8F%B0%E7%81%A3%E6%B5%B7%E7%BA%9C-submarine-cable-%E6%A6%82%E6%B3%81%E5%8F%8A%E5%82%99%E6%8F%B4%E6%A9%9F%E5%88%B6-3e47ea550fd6 由於我人在台北,我猜測台日的電纜起點&終點,分別離台北、東京很接近 所以東京機房的表現非常好! 但因為我要做的網站,首要目標市場為北美的用戶,看起來 Los Angeles 或 Seattle 或 Fremont 會是優先選項! 這三個區域,都位在美西,這點倒是滿直觀的,就是北美離台灣最近的一側! 我會在深入評估之後,決定要挑哪一個機房! 這篇文章,特別記錄,給未來有同樣需求的人參考。

🌝 適合您下一個專案的 15 個 JavaScript 框架 ⚔

開發者生態系統已經發展了很多,並且有許多開發者不知道的框架。 我們「作為開發人員」有很多關於如何建立我們的應用程式的框架選項。這些選擇非常重要。 讓我們介紹 15 個框架,供您製作下一個專案。我將提供詳細的資源,以便您可以學習其中的每一個。 相信我!這份清單就是您所需要的。 讓我們開始吧。 ![下一級](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ychbi440selxu1ftf5n8.gif) --- ### 庫與框架 在開始之前,讓我們先來了解一下框架與函式庫有何不同。開發人員可以互換使用它! 函式庫和框架都是由其他人編寫的可重複使用程式碼。 > 簡單來說: 將圖書館想像成IKEA之旅。您家裡有自己的空間,但您需要一些家具幫助。您不想從頭開始,所以您可以前往宜家,在那裡您可以挑選您需要的東西。你是做出決定的人。 現在,框架更像是建造一個樣品房。您已經有了一套計劃以及一些佈局和設計的選擇。但最終,藍圖和建造者處於控制之中。他們會讓你知道在哪裡可以加入你的意見,但他們正在掌控一切。 > 從技術角度來說。 透過庫,您可以指導應用程式的流程。您決定何時何地使用庫的功能。但有了框架,框架就控制了流程。它為您提供了一些插入程式碼的位置,但它是程式碼執行時發號施令的地方。 我使用了 Freecodecamp 的這篇文章“ [框架和庫之間的區別](https://www.freecodecamp.org/news/the-difference-between-a-framework-and-a-library-bd133054023f/)”,特別是因為它的解釋很簡單。完整閱讀一下! --- 1. [Wing](https://git.new/winlang-repo) - 一種雲端程式語言。 --------------------------------------------------- ![翅膀](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n97bowkrexjk46n94bcc.png) Wing是一個旨在開發雲端應用程式的框架。 它允許您在雲端中建立應用程式,並且具有相當簡單的語法。 核心概念是您可以直接在應用程式中指定資源。 您可以執行本機模擬並使用 Winglang 控制台視覺化每個步驟中發生的情況。 ![機翼基礎設施](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eun3zd1gkp870rj57eeu.png) 你**程式碼**。**本地測試**。**編譯**。**部署到雲端提供者**。 Wing 需要 Node `v20 or higher` 。 建立一個父目錄(我們使用的是`shared-counter` )並使用 Vite 使用新的 React 應用程式設定前端。您可以使用這個 npm 指令。 ``` npm create -y vite frontend --template react-ts // once installed, you can check if it's running properly. cd frontend npm install npm run dev ``` 您可以使用此 npm 命令安裝 Wing。 ``` npm install -g winglang ``` 您可以使用`wing -V`驗證安裝。 Wing 還提供官方[VSCode 擴充功能](https://marketplace.visualstudio.com/items?itemName=Monada.vscode-wing)和[IntelliJ](https://plugins.jetbrains.com/plugin/22353-wing) ,後者提供語法突出顯示、補全、轉到定義和嵌入式 Wing 控制台支援。您可以在建立應用程式之前安裝它! 您可以使用 Wing 作為雲端後端來建立任何全端應用程式。 建立後端目錄。 ``` mkdir ~/shared-counter/backend cd ~/shared-counter/backend ``` 建立一個新的空 Wing 專案。 ``` wing new empty // This will generate three files: package.json, package-lock.json and main.w file with a simple "hello world" program wing it // to run it in the Wing simulator // The Wing Simulator will be opened in your browser and will show a map of your app with a single function. //You can invoke the function from the interaction panel and check out the result. ``` 使用指令`wing new empty`後的結構如下。 ``` bring cloud; // define a queue, a bucket, and a counter let bucket = new cloud.Bucket(); let counter = new cloud.Counter(initial: 1); let queue = new cloud.Queue(); // When a message is received in the queue -> it should be consumed // by the following closure queue.setConsumer(inflight (message: str) => { // Increment the distributed counter, the index variable will // store the value before the increment let index = counter.inc(); // Once two messages are pushed to the queue, e.g. "Wing" and "Queue". // Two files will be created: // - wing-1.txt with "Hello Wing" // - wing-2.txt with "Hello Queue" bucket.put("wing-{index}.txt", "Hello, {message}"); log("file wing-{index}.txt created"); }); ``` 您可以安裝`@winglibs/vite`來啟動開發伺服器,而不是使用`npm run dev`來啟動本機 Web 伺服器。 ``` // in the backend directory npm i @winglibs/vite ``` 您可以使用`backend/main.w`中提供的 publicEnv 將資料傳送到前端。 讓我們來看一個小例子。 ``` // backend/main.w bring vite; new vite.Vite( root: "../frontend", publicEnv: { TITLE: "Wing + Vite + React" } ); // import it in frontend // frontend/src/App.tsx import "../.winglibs/wing-env.d.ts" //You can access that value like this. <h1>{window.wing.env.TITLE}</h1> ``` 你還可以做更多: - 讀取/更新 API 路線並使用 Wing Simulator 檢查它。 - 使用後端獲取值。 - 使用`@winglibs/websockets`來同步瀏覽器,在後端部署一個 WebSocket 伺服器,你可以連接這個 WebSocket 來接收即時通知。 可以節省大量時間的一些功能包括熱重載,以獲得即時回饋並順利產生必要的安全策略。 無需學習每個雲端提供者的語法。 您的程式碼可以編譯到 AWS、GCP、Azure 或任何自訂平台。太棒了:D 您可以閱讀完整的逐步指南,以了解[如何使用 React 作為前端和 Wing 作為後端建立簡單的 Web 應用程式](https://www.winglang.io/docs/guides/react-vite-websockets)。測試是使用 Wing Simulator 完成的,並使用 Terraform 部署到 AWS。 部署後的AWS架構是這樣的。 ![建築學](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27awil840ktgh3jvklij.png) 為了提供開發者選擇和更好的體驗,Wing 推出了對[TypeScript (Wing)](https://www.winglang.io/docs/typescript/)等其他語言的全面支援。唯一強制的事情是您必須安裝 Wing SDK。 這也將使控制台完全可用於本地偵錯和測試,而無需學習 Wing 語言。 該翼目前支援以下輸出: - AWS CDK 平台 - Terraform/AWS 平台 - Terraform/GCP 平台 - Terraform/Azure 平台 - 模擬器平台 - 客製化平台 Wing 甚至還有其他[指南](https://www.winglang.io/docs/category/guides),因此更容易遵循。 ![指南](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31czxehkg10ezmlpf7ac.png) 您可以閱讀[文件](https://www.winglang.io/docs)並查看[範例](https://www.winglang.io/docs/category/examples)。 您也可以在[Playground](https://www.winglang.io/play/)中使用 Wing 查看結構和範例。 如果你比較像輔導員。看這個! {% 嵌入 https://www.youtube.com/watch?v=wzqCXrsKWbo %} ![機翼工作流程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8zqja0w9kyoibrskjmp.gif) Wing 在 GitHub 上有 4500+ 顆星,1600+ 個版本,但仍未進入 v1 版本,這意味著意義重大。 {% cta https://git.new/winlang-repo %} 星翼 ⭐️ {% endcta %} --- 2. [Nest](https://github.com/nestjs/nest) - 高效且可擴展的伺服器端應用程式。 ------------------------------------------------------------ ![巢](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inlcpt901r5kiwm4eeor.png) 一個先進的 Node.js 框架,用於使用 TypeScript/JavaScript 建立高效且可擴展的伺服器端應用程式。 它使用現代 JavaScript,使用 TypeScript 建構(保留與純 JavaScript 的兼容性),並結合了 OOP(物件導向程式設計)、FP(函數式程式設計)和 FRP(函數式反應式程式設計)的元素。 在底層,Nest 使用 Express,但也提供與 Fastify 等各種其他庫的兼容性,從而可以輕鬆使用無數可用的第三方外掛程式。 Nest 提供了高於這些常見 Node.js 框架(Express/Fastify)的抽象級別,但也直接向開發人員公開其 API。這為開發人員提供了一定程度的自由。 在我們了解更多之前,請觀看 100 秒內的 Nestjs! {% 嵌入 https://www.youtube.com/watch?v=0M8AYU\_hPas&amp;pp=ygUXZW1iZXIganMgaW4gMTAwIHNlY29uZHM%3D %} 考慮到它們提供的靈活性,您當然不必重新發明輪子。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6h6yjfmq1h5qn5765by0.png) 這是使用 Nest CLI 設定新專案的方法。 ``` npm i -g @nestjs/cli nest new project-name ``` 這將引導該應用程式。 ``` import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; async function bootstrap() { const app = await NestFactory.create(AppModule); await app.listen(3000); } bootstrap(); ``` 您可以閱讀[文件](docs.nestjs.com)。 他們還提供一套付費課程(我想知道為什麼)。如果您需要完整的路線圖並想成為 Nest 的使用專家,請隨時查看它們。 但我建議使用 Freecodecamp 提供的這些免費教學來學習。 - [NestJs 初學者課程 - 建立 REST API](https://www.youtube.com/watch?v=GHTA143_b-s) - 大約 3.42 小時,涵蓋許多[主題](https://www.freecodecamp.org/news/learn-nestjs-by-building-a-crud-api/)。 - [綜合 NestJS 課程](https://www.youtube.com/watch?v=sFnAHC9lLaw&t=1s)- 涵蓋 20 個模組,時長 14 小時。 {% 嵌入 https://www.youtube.com/watch?v=sFnAHC9lLaw&amp;t=1s %} 如果您正在尋找入門專案,請學習[如何在 NestJS 中使用 Nodemailer 發送電子郵件](https://www.freecodecamp.org/news/how-to-use-nodemailer-in-nestjs/)。您可以使用它來獲得紮實的基礎知識。 Nest.js 擁有龐大的開發人員社區,並被許多公司使用。尋找已使用 Nest[的專案和公司的完整清單](https://docs.nestjs.com/discover/companies)。 ![公司](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ic0z3dts7bmw5s3e5gmf.png) 順便說一句,作為初學者,我最常擔心的是相似的名稱:Nextjs、Nuxtjs 和 Nestjs。我涵蓋了所有內容,這樣您就不必感到困惑。哈哈! Nest 在 GitHub 上擁有超過 64k 個 star,提交次數超過 15k,並且已發布`v10`版本。 {% cta https://github.com/nestjs/nest %} 星巢 ⭐️ {% endcta %} --- 3. [Gatsby](https://github.com/gatsbyjs/gatsby) - 最好的基於 React 的框架,具有內建的效能、可擴展性和安全性。 ----------------------------------------------------------------------------------- ![蓋茲比](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0drinpwldeyfxd82lgf.png) Gatsby 是一個基於 React 的免費開源框架,可協助開發人員建立速度極快的網站和應用程式。 它將動態呈現網站的控制和可擴展性與靜態網站生成的速度結合起來,創造了一個全新的可能性網絡。 Gatsby 從任何資料來源提取資料,無論是 Markdown 檔案、Contentful 或 WordPress 等無頭 CMS,還是 REST 或 GraphQL API。使用來源插件載入資料,然後使用 Gatsby 的統一 GraphQL 介面進行開發。 與 Next.js 不同,Gatsby 不執行伺服器端渲染。相反,它會在建置期間在客戶端產生 HTML 內容。 我見過一些使用 Gatsby 建立的優秀作品集。 開始使用以下 npm 指令。 ``` npm init gatsby ``` 它會要求提供網站標題和專案目錄的名稱。繼續按照提示選擇您的首選語言(JavaScript 或 TypeScript)、CMS、樣式工具和其他功能。 您可以這樣使用它。 ``` cd my-gatsby-site // to start the local dev server npm run develop ``` 您可以閱讀[文件](https://www.gatsbyjs.com/docs)。我個人很喜歡文件的流程。 您也可以按照[教學](https://www.gatsbyjs.com/docs/tutorial/getting-started/)開始,[操作指南](https://www.gatsbyjs.com/docs/how-to/)和[概念指南](https://www.gatsbyjs.com/docs/conceptual/)深入了解 Gatsby 概念以及網站架構。 Gatsby 提供了開箱即用的 PWA 和大量主題。使用 Gatsby 主題,您的所有預設配置(共享功能、資料來源、設計)都會從您的網站中抽象化出來,並放入可安裝的套件中。您可以閱讀有關[主題的](https://www.gatsbyjs.com/docs/themes/)更多資訊。 例如, `gatsby-theme-blog`是用於建立部落格的官方 Gatsby 主題。可能有可以透過`gatsby-config.js`配置的主題選項。 ``` npm install gatsby-theme-blog ``` 對於電子商務商店或廣泛的媒體網站等內容密集的企業級網站來說,Gatsby 並不是理想的解決方案。隨著內容大小的增加,建置時間將急劇增加。 尋找使用 Gatsby 建立的[606 個網站](https://www.gatsbyjs.com/showcase/)的清單。其中,53 個網站是開源的,因此這可以提供靈感,也是一個起點。 ![展示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/439taxdhursvmjwhcxgc.png) 他們還提供了[大量按類別劃分的插件](https://www.gatsbyjs.com/plugins)以及每個插件中清晰的文件。其中一個範例是將 Google Analytics 新增至您的應用程式的插件。 ``` npm install gatsby-plugin-google-analytics ``` ![外掛](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rwq1dsyfdqdkmfetebj9.png) 您也可以使用 Gatsby 的[Starter 庫](https://www.gatsbyjs.com/starters/)。使用 Gatsby 建立下一個應用程式還需要什麼? ![入門庫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u831zo26ttg6tvzu6shq.png) 使用這些[參考指南](https://www.gatsbyjs.com/docs/reference/)來獲取有關 Gatsby API 的詳細資訊。 如果您喜歡完整的課程,我建議您觀看[Gatsby 靜態網站產生器教學](https://www.youtube.com/watch?v=RaTpreA0v7Q)- Freecodecamp 提供的 9 小時教學。 Gatsby 在 GitHub 上有 55,000 顆星,目前處於 v5 版本,並有超過 245,000 名開發人員使用。 {% cta https://github.com/gatsbyjs/gatsby %} 明星蓋茲比 ⭐️ {% endcta %} --- 4. [Nextjs](https://github.com/vercel/next.js) - Web 的 React 框架。 ---------------------------------------------------------------- ![下一個js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/da26rscfzozpe307xz2g.png) 由於它提供的優化級別,它是我最喜歡的框架之一。 Next.js 使您能夠透過擴展最新的 React 功能並整合強大的基於 Rust 的 JavaScript 工具來建立全端 Web 應用程式,以實現最快的建置。 Next.js 由荷蘭公司 Vercel(以前稱為 ZEIT)於 2017 年建立。 Next.js 也像 Gatsby 一樣提供靜態產生器。 Next.js 的建置遵循`Build once, runs everywhere`的原則,因此您可以使用 Next.js 製作 Web 應用程式、行動應用程式、桌面應用程式和漸進式 Web 應用程式。 ![下一個js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4j16td403jbbyyk7xz2v.png) Nextjs 提供了許多功能,例如檔案路由、渲染技術(例如 ISR)以及深層的圖像和字體最佳化。你可以檢查任何 nextjs 網站的 SEO 統計資料,在大多數情況下它都是一流的。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zr9yx5n6gy2q764gak8x.png) ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mf9r3zohetcsyatp90z.png) 開始使用以下 npm 指令。 ``` npx create-next-app@latest ``` 您可以閱讀[文件](https://nextjs.org/docs)並按照[本指南](https://nextjs.org/docs/getting-started/installation)開始使用。 其中涉及很多概念,閱讀完整的文件需要幾個月的時間。我前段時間寫過一篇文章,你可以看看。它並沒有出名,但它是我憑藉多年的 Nextjs 經驗編寫的最好的文章之一。我還提到了 Nextjs 團隊提供的[官方課程](https://nextjs.org/learn/dashboard-app/getting-started)。 {% 嵌入 https://dev.to/anmolbaranwal/12-things-you-didnt-know-you-could-do-with-nextjs-386b %} 如果您想透過 YouTube 教學進行學習,我建議您觀看這些最近的教程,因為文件更新得非常頻繁,因此最好觀看最近的內容,而不是幾年前的內容。 - \[帶有 TypeScript 的 Nextjs 13(應用程式路由器)\](https://www.youtube.com/watch?v=ZVnjOPwW4ZA&amp;pp=ygUTbmV4dGpzIGNyYXNoIGNvdXJzZQ%3D%3D ) - 1 小時教程。 - [Next.js 14 完整課程 2024](https://www.youtube.com/watch?v=wm5gMKuwSYk) - 3 小時教學。 您也可以觀看 Nextjs 100 秒。他們加入了一個基本教程,使其長達 11 分鐘。 {% 嵌入 https://www.youtube.com/watch?v=Sklc\_fQBmcs&amp;t=4s&amp;pp=ygUObmV4dGpzIGluIDEwMHM%3D %} 我自己使用文件學習了它,並使用它建置了超過 6 個專案,甚至是一個超過 20k 程式碼庫的 SAAS 應用程式。這就是為什麼我說,它是您可以選擇的最佳框架之一。 使用 Next.js 建立的一些熱門網站包括 Auth0、Coinbase、Docker、GitHub、Hulu、Netflix、Sesame、Starbucks、Trulia、Twitch 和 Uber。你可以看到所有使用Nextjs的[網站](https://nextjs.org/showcase)。 ![下一個js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iafbez4aptnb7f0iqtgz.png) 他們還提供了各種可以直接使用的[入門模板](https://vercel.com/templates/next.js)。 ![入門模板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1egye2mtz7f3ehzsm9ja.png) ![電子商務](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4ge39gpt0xo3rtvn1i5.png) Next 在 GitHub 上有 12 萬顆星,發布`v14.2`版本,在 NPM 上每週下載量超過 600 萬次。如其儲存庫所示,有 260 萬開發人員使用。 {% cta https://github.com/vercel/next.js %} 明星 Nextjs ⭐️ {% endcta %} --- 5. [Preact](https://github.com/preactjs/preact) - 具有相同現代 API 的快速 3kB React 替代品。 ------------------------------------------------------------------------------- ![預反應](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npzj10prb5i8noahsops.png) Preact 是一個輕量級、快速、高效能的函式庫,是 React 的替代品。 Preact 的大小僅為 3kb(經過壓縮和壓縮),但卻為您提供了 React 所需的所有功能,使其成為最好的 JavaScript 框架之一。 Preact 的建立者 Jason Miller 是 Google 的高級開發者計畫工程師。 Preact 基本上具有 Virtual DOM 元件的所有功能,而沒有諸如以下的開銷: - 熟悉 React API 和 ES6 類別、鉤子和功能元件模式。 - 透過簡單的 preact/compat 別名實現廣泛的 React 相容性。 - 您需要的一切,例如 JSX、VDOM、DevTools、HMR、SSR。 在生產過程中,您可以輕鬆地從現有專案中的 React 切換到 Preact,因為它們支援相同的 API。 程式碼範例結構如下所示。您也可以查看此範例[程式碼筆](https://codepen.io/developit/pen/LpNOdm),您可以查看它以了解 Preact 中程式碼庫的結構。 ![程式碼結構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3mwphw4vjfm1a3cquyv.png) 開始使用以下 npm 指令。 ``` npm init preact ``` 這是執行開發伺服器的方式。 ``` # Go into the generated project folder cd my-preact-app # Start a development server npm run dev ``` 您將必須配置一些東西,尤其是別名。請遵循[本指南](https://preactjs.com/guide/v10/getting-started)。 您可以閱讀[文件](https://preactjs.com/guide/v10/getting-started/)並查看詳細的[演示和範例](https://preactjs.com/about/demos-examples)清單。 他們還提供了基於 Web 的[教程](https://preactjs.com/tutorial/),您可以按照該教程來學習 Preact。 如果您需要範例應用程式、樣板檔案、元件、工具包等,請使用[Awesome Preact](https://github.com/preactjs/awesome-preact) 。 Preact 在 GitHub 上有 36,000 顆星,目前已發布`v10`版本。 {% cta https://github.com/preactjs/preact %} Star Preact ⭐️ {% endcta %} --- 6. [tRPC](https://github.com/trpc/trpc) - 端到端類型安全性 API 變得簡單。 ------------------------------------------------------------ ![特爾普克](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ck7ve1epya6ofshzmc2c.png) tRPC 可讓您輕鬆建立和使用完全類型安全的 API,而無需模式或程式碼產生。 ![gif 動態圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bssocrvw9pt0y1lnunk.gif) 上面的客戶端沒有從伺服器導入任何程式碼,僅導入其類型聲明 如果我們要深入了解,那麼您絕對應該閱讀一些歷史。 {% 嵌入 https://dev.to/zenstack/a-brief-history-of-api-rpc-rest-graphql-trpc-fme %} 目前,GraphQL 是在 TypeScript 中實作型別安全 API 的主要方式(這太棒了!)。由於 GraphQL 被設計為用於實現 API 的與語言無關的規範,因此它沒有充分利用 TypeScript 這樣的語言的強大功能。 如果您的專案是使用全端 TypeScript 建置的,您可以直接在客戶端和伺服器之間共用類型,而無需依賴程式碼生成。 tRPC 適用於全端 TypeScript 開發人員。它使您可以輕鬆編寫可以在應用程式的前端和後端安全使用的端點。 API 合約的類型錯誤將在建置時被捕獲,從而減少應用程式在執行時出現錯誤的可能性。 這是為 Mono 儲存庫設計的,因為您需要從伺服器匯出/匯入類型定義。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6v56rl2jkgfat6xsf909.png) 開始使用以下 npm 指令。 ``` npm install @trpc/server@next @trpc/client@next ``` 您必須使用實例定義後端路由器。閱讀[快速入門指南](https://trpc.io/docs/quickstart)以了解更多詳細資訊。 了解[trpc 中涉及的概念](https://trpc.io/docs/concepts)(例如 rpc 和使用的術語)非常重要。 您可以閱讀[文件](https://trpc.io/docs)。 如果您已經在一個混合語言的團隊中工作,或者擁有您無法控制的第三方消費者,那麼您應該建立一個與語言無關的 GraphQL-API。 如果您想測試一下,我建議使用此[模板](https://github.com/new?template_name=examples-minimal&template_owner=trpc),其中包含一個最小的範例。 您還可以觀看這個[45 分鐘的 YouTube 教學](https://www.youtube.com/watch?v=UfUbBWIFdJs&pp=ygUMd2hhdCBpcyB0cnBj)來了解有關 trpc 的更多資訊。 {% 嵌入 https://www.youtube.com/watch?v=UfUbBWIFdJs&amp;pp=ygUMd2hhdCBpcyB0cnBj %} 它們在 GitHub 上擁有超過 32,000 顆星,目前處於`v11` beta 版本,並被 51,000 名開發人員使用。 {% cta https://github.com/trpc/trpc %} 啟動 tRPC ⭐️ {% endcta %} --- [7.Nuxtjs](https://github.com/nuxt/nuxt) - 直覺的 Vue 框架。 ------------------------------------------------------ ![努克斯特](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ct9usemwuhvtrjcx0na8.png) Nuxt 是一個基於 Vue.js 生態系統的漸進式開源框架,用於建立高效能 Web 應用程式,尤其是伺服器端渲染應用程式。 但請記住,Nuxt 並不是 Vue.js 的替代品,因為它無法單獨運作。而且它也不能被視為像 Express 這樣成熟的後端框架。 100 秒觀看 Nuxtjs,掌握整體概念。 {% 嵌入 https://www.youtube.com/watch?v=dCxSsr5xuL8 %} Nuxt 是建立這三種 Web 應用程式的最佳 JavaScript 框架之一 - 預先渲染靜態頁面、單頁 Web 應用程式 (SPA)、伺服器端渲染 Web 應用程式 (SSR) 甚至通用應用程式。 開發人員特別喜歡 Nuxt,因為它有豐富的函式庫和模組。 ![組合特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kknguo9v9dnqu2npfp68.png) 開始使用以下 npm 指令。 ``` npx nuxi@latest init <my-project> ``` 您可以閱讀[文件](https://nuxt.com/docs/getting-started/introduction)並檢查[codesandbox範例](https://codesandbox.io/s/github/nuxt/starter/tree/v3/)。 您可以按照本[指南](https://nuxt.com/docs/guide/concepts/auto-imports)了解更多關鍵概念。 有許多整合選項,因此您可以更輕鬆地繼續使用您喜歡的工具和服務。 ![整合選項](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irikkgro0cp4l8svioi9.png) 您可以查看[免費課程清單](https://nuxt.com/video-courses)來了解 Nuxt 生態系統。 如果您想要推薦的課程,請學習[Nuxt 3 — 初學者課程](https://www.youtube.com/watch?v=fTPCKnZZ2dk)— Freecodecamp 提供的 3 小時教學。 使用 Nuxt 建立的一些流行網站包括 Aircall、Amplitude、Backmarket、Bitpay、Bootstrap Vue、Fox News、Gitlab、Icons8、Instrument、MyScript、Nespresso、Note.com、Ozon.ru、Roland Garros、System76、Todoist、加油,Wappalyzer 。尋找不同類別下[展示網站的完整清單](https://nuxt.com/showcase)。 如果您想快速測試和建置,那麼我建議您查看[入門模板](https://nuxt.com/templates)。 ![範本](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bn61xrcx9ym3a40kewwf.png) Nuxt 在 GitHub 上擁有超過 51,000 顆星,並被超過 318,000 名開發者使用。 {% cta https://github.com/nuxt/nuxt %} Star Nuxt ⭐️ {% endcta %} --- 8. [Ember.js](https://github.com/emberjs/ember.js) - 用於建立雄心勃勃的 Web 應用程式的 JavaScript 框架。 --------------------------------------------------------------------------------------- ![man.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z8ygtjex9ve6e2gbsfh0.png) Ember.js 是一個 JavaScript 框架,用於為企業建立可擴展的單頁 Web 應用程式。與其他框架不同,模型-視圖-視圖模型 (MVVW) 架構是 Ember 的基礎。 Ember.js 最初是一個 SproutCore 2.0 框架,由其建立者 Yehuda Katz 更名為 Ember.js,Yehuda Katz 是一位出色的開發人員,被譽為 jQuery 的主要建立者之一。 他們還提供命令列介面工具。 Ember CLI 是建立、建置、測試和提供構成 Ember 應用程式或外掛程式的檔案的官方方式。 ``` npm install -g ember-cli ``` 儘管與 React、Vue 和 Svelte 相比,Ember.js 是一個較舊的前端 JavaScript 框架,但它仍然具有強大的功能,並且在 Microsoft、LinkedIn、Netflix 和 Twitch 等大公司中擁有龐大的用戶群。查看[完整清單](https://emberjs.com/ember-users/)。 ![使用 ember.js 的公司](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0w87sxixh8js9luyv7jc.png) 借助強大的預設設置,您可能永遠不需要在應用程式中配置任何內容,但如果您需要的話,選項就在那裡! 這意味著 Ember.js 遵循「CoC – 約定優於配置」方法,這可確保在大多數情況下不需要任何配置,以便您可以直接跳到編碼和建立 Web 應用程式。 它們還支援類似於 AngularJS 的 2 路資料綁定。 當我們深入研究時,了解 ember.js 是如何誕生的、其建立背後的先驅者以及製作開源軟體時做出的改變生活的決定非常重要。看這個! {% 嵌入 https://www.youtube.com/watch?v=Cvz-9ccflKQ %} 安裝 Ember CLI 後。 ``` npm install -g ember-cli ``` 您可以建立一個新應用程式,如圖所示。 ``` ember new ember-quickstart --lang en cd ember-quickstart npm start ``` 您可以閱讀[詳細的快速入門文件](https://guides.emberjs.com/release/getting-started/quick-start/)和[官方指南](https://guides.emberjs.com/release/)。 要學習 ember.js,您可以按照他們的官方團隊建立的[逐步教程](https://guides.emberjs.com/release/tutorial/part-1/)進行操作。您可以在[Ember API 文件](https://api.emberjs.com/ember/release)上閱讀有關 API 的更多資訊。 有數以千計的 JavaScript 庫可以在 Ember 中很好地工作。當 npm 套件提供一些 Ember 特定的功能時,他們稱之為`addon` 。外掛程式提供了一種編寫可重複使用程式碼、共用元件和樣式、擴充建置工具等的方法,所有這些都只需最少的配置。尋找[插件的完整清單](https://emberobserver.com/)。 ![外掛](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wlrw4m6u46fijp7kt7ky.png) 如果您正在尋找更多文章來學習 Ember.js,我推薦這些: - [Ember JS Essentials:Startech 提供的安裝及其功能的初學者指南](https://www.startechup.com/blog/ember-js/)。 - Toptal [建立您的第一個 Ember.js 應用程式的指南](https://www.toptal.com/javascript/a-step-by-step-guide-to-building-your-first-ember-js-app)。 這足以理解結構並決定 Ember 何時適合您的專案。 他們在 GitHub 上有 22k+ 顆星,而`v5.8`版本有 500 多個版本。 {% cta https://github.com/emberjs/ember.js %} 明星 Ember.js ⭐️ {% endcta %} --- 9. [Backbone.js](https://github.com/jashkenas/backbone) - 為您的 JS 應用程式提供一些帶有模型、視圖、集合和事件的 Backbone。 ------------------------------------------------------------------------------------------------- ![骨幹](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qysm5n76o7wdf1u48bii.png) Backbone.js 是一個基於 JavaScript 的框架,透過 RESTful JSON 介面連接到 API。 Jeremy Ashkenas 因建立一些最好的 JavaScript 框架(例如 CoffeeScript 和 Underscore.js)而聞名,他於 2010 年 10 月推出了 Backbone.js。 它旨在建立單頁 Web 應用程式並維護不同 Web 應用程式元件(例如眾多客戶端和伺服器)之間的同步。 Backbone.js 以小而輕而聞名,因為它只需要 jQuery 和一個 JavaScript 函式庫 Underscore.js 即可使用整個函式庫。 Backbone.js 透過提供具有鍵值綁定和自訂事件的模型、具有豐富的可枚舉函數API 的集合、具有聲明性事件處理的視圖,為JavaScript 密集型應用程式提供結構,並透過RESTful JSON 接口將其全部連接到您現有的應用程式。 這是一個簡單的主幹視圖。 ``` var AppView = Backbone.View.extend({ // el - stands for element. Every view has an element associated with HTML // content will be rendered. el: '#container', // It's the first function called when this view is instantiated. initialize: function(){ this.render(); }, // $el - it's a cached jQuery object (el), in which you can use jQuery functions // to push content. Like the Hello World in this case. render: function(){ this.$el.html("Hello World"); } }); ``` 您可以閱讀[文件](https://backbonejs.org/)。 Backbone.js 被許多值得信賴的公司使用,例如 Walmart、Pinterest、SoundCloud 等。 您可以參考他們的[wiki](https://github.com/jashkenas/backbone/wiki/Tutorials%2C-blog-posts-and-example-sites) ,其中記錄了教程、部落格文章和範例網站。 您可以參考幾篇很棒的文章來了解更多: - [BackboneJS:入門](https://auth0.com/blog/backbonejs-getting-started/)- 推薦。 - [適合絕對初學者的 Backbone.js](https://adrianmejia.com/backbone-dot-js-for-absolute-beginners-getting-started/) - [BackboneJS 教學](https://www.tutorialspoint.com/backbonejs/index.htm)- 教學點。 根據儲存庫統計,它們在 GitHub 上擁有超過 28,000 顆星,並被超過 66,000 名開發人員使用。 {% cta https://github.com/jashkenas/backbone %} 明星 Backbone.js ⭐️ {% endcta %} --- 10. [Svelte](https://github.com/sveltejs/svelte) - 控制論增強的網路應用程式。 ---------------------------------------------------------------- ![苗條的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8xe2ni4di3g5qr03woh.png) Svelte 是一種建立 Web 應用程式的新方法。 它是由 Rich Harris(著名前端開發人員)建立的。 Svelte 於 2016 年首次推出,人氣暴漲。 許多開發人員認為 Svelte 是一個真正改變遊戲規則的革命性想法,它從根本上改變了我們編碼 Web 應用程式的方式。 與 React 或 Vue.js 等其他 JavaScript 框架不同,Svelte 沒有虛擬 DOM。相反,您可以使用簡單的 HTML、CSS 和 JavaScript 程式碼來建立無樣板的元件。 然後,Svelte Compiler 在建置期間將此程式碼編譯成小型的無框架的普通 JavaScript 模組,並在狀態變更時精確地更新 DOM。 因此,與 React 或 Vue.js 等其他傳統框架不同,Svelte 不需要很高的瀏覽器處理能力。 Svelte 依靠反應式程式來徹底更新 DOM。因此,與幾乎任何其他框架相比,它可以實現最快的渲染,並且在大多數效能基準測試中名列前茅。 開始使用以下 npm 指令。 ``` npm create svelte@latest my-app ``` 您可以這樣使用它。 ``` cd my-app npm install npm run dev -- --open ``` 您可以閱讀[文件](https://svelte.dev/docs/introduction)。該團隊還提供了[官方的 VSCode 擴展](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode),它也可以與各種其他編輯器和工具整合。 ![苗條的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/322jqc224gf3efcifmjs.png) 他們還提供了[詳細的基於網路的教程](https://svelte.dev/tutorial/basics)來學習 Svelte。 您可以查看所有[範例](https://svelte.dev/examples/nested-components)來了解關鍵概念和結構,包括 DOM 事件、生命週期、運動、過渡和處理 SVG。 ![例子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vfwmw0q3p68byme0b4c.png) 您可以觀看這些教學來了解有關 Svelte 的所有知識。 - [Learn Svelte – 初學者完整課程](https://www.youtube.com/watch?v=UGBJHYpHPvA)– Freecodecamp 的 23 小時教學。 - [Sveltekit &amp; Tailwind](https://www.youtube.com/watch?v=vb7CgDcA_6U&t=2s) - Freecodecamp 的 2 小時教學。 非常感謝老師們免費提供如此詳細的教學! Svelte 在 GitHub 上擁有超過 76k 顆星,目前處於`v4.2`版本,有 282k 開發人員使用。 {% cta https://github.com/sveltejs/svelte %} Star Svelte ⭐️ {% endcta %} --- 11. [Remix](https://github.com/remix-run/remix) - 建立更好的網站。 ---------------------------------------------------------- ![混音](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/en7mvytauu0b7pkm04df.png) Remix 是一個全端Web 框架,可讓您專注於使用者介面並透過Web 基礎知識進行工作,以提供快速、流暢且有彈性的使用者體驗,可部署到任何Node.js 伺服器,甚至非Node. js 環境像 Cloudflare Workers 這樣的邊緣。 Remix 建構在 React Router 之上,有四個特點: - 一個編譯器 - 伺服器端 HTTP 處理程序 - 一個伺服器框架 - 一個瀏覽器框架 您可以觀看此內容以了解有關 Remix by Fireship 的更多資訊。 {% 嵌入 https://www.youtube.com/watch?v=r4B69HAOXnA&amp;pp=ygUUcmVtaXggaW4gMTAwIHNlY29uZHM%3D %} 透過嵌套路由,Remix 可以消除幾乎所有載入狀態,如圖所示。 ![混音](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyr8c9opmrn4chvr88jz.png) 開始使用以下 npm 指令。 ``` npx create-remix@latest ``` 您可以這樣使用它。 ``` mkdir my-remix-app cd my-remix-app npm init -y # install runtime dependencies npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom # install dev dependencies npm i -D @remix-run/dev vite ``` 如果您想包含您的伺服器,請閱讀此[快速入門指南](https://remix.run/docs/en/main/start/quickstart),並了解更多有關如何透過 Remix Vite 插件提供 Vite 配置的訊息,因為 Remix 使用 Vite。 您可以閱讀[文件](https://remix.run/docs/en/main)。他們根據你想做的事情來分發它,順便說一句,我很喜歡。 ![文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ljjae4pcyukr1j4nnweo.png) 尋找使用 Remix 建立的[網站的完整清單](https://remix.run/showcase)。 ![混音](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qjzhuy4njph0gckemdq5.png) 您還應該查看社區製作的[Remix 資源](https://remix.run/resources?category=all)。其中一些是有幫助的,可以改善整個生態系統。 ![生態系統](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9q5hdc59czs31nkbyhqq.png) 如果您是第一次接觸 Remix,我建議您閱讀官方團隊建立的[Remix 教學 -30min](https://remix.run/docs/en/main/start/tutorial) 。 他們在 GitHub 上擁有超過 27k 個 star,並且發布了`v2.8`版本。 {% cta https://github.com/remix-run/remix %} 明星混音 ⭐️ {% endcta %} --- 12. [AdonisJS](https://github.com/adonisjs/core) - TypeScript 優先的 Web 框架,用於建立 Web 應用程式和 API 伺服器。 ------------------------------------------------------------------------------------------------ ![阿多尼斯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8ishs5q78nu1yc3qrl4.png) AdonisJS 是一個功能齊全的 Node.js 後端框架。該框架是從頭開始建立的,非常重視開發人員的人體工學和易用性。 AdonisJS 專注於後端,讓您選擇您選擇的前端堆疊,這意味著前端不可知。 它是 Node.js 社群中最稀有的框架之一,附帶一套第一方包,可幫助您建立和發布產品,而無需浪費數百小時組裝不同的 npm 包。 在基礎層面上,AdonisJS 為您的應用程式提供架構,配置無縫的 TypeScript 開發環境,為您的後端程式碼配置 HMR,並提供大量維護良好且記錄廣泛的軟體包。 他們強調了一點測試,這是非常好的。 ![測試](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g623aysi86rucg45yvru.png) 開始使用以下 npm 指令。 ``` npm init adonisjs@latest hello-world ``` AdonisJS 採用經典的 MVC 設計模式。首先,使用函數式 JavaScript API 定義路由,將控制器綁定到它們,並編寫邏輯來處理控制器內的 HTTP 請求。 ``` import router from '@adonisjs/core/services/router' import PostsController from '#controllers/posts_controller' router.get('posts', [PostsController, 'index']) ``` 控制器可以使用模型從資料庫中獲取資料並呈現視圖(也稱為模板)作為回應。 ``` import { HttpContext } from '@adonisjs/core/http' import Post from '#models/post' export default class PostsController { async index({ view }: HttpContext) { const posts = await Post.all() return view.render('pages/posts/list', { posts }) } } ``` 如果您正在建立 API 伺服器,則可以用 JSON 回應取代視圖層。但是,處理和回應 HTTP 請求的流程保持不變。 您可以閱讀[文件](https://docs.adonisjs.com/guides/introduction)。 您也可以參考[入門套件](https://docs.adonisjs.com/guides/installation#starter-kits)。 他們還提供了[VSCode 擴展,](https://marketplace.visualstudio.com/items?itemName=jripouteau.adonis-vscode-extension)如果您開始使用 Adonisjs,則應該使用該擴展。 您必須查看[Awesome Adonisjs](https://github.com/adonisjs-community/awesome-adonisjs) ,它提供了一系列很棒的書籤、軟體包、教程、影片、課程、擁有使用此內容的網站的公司以及來自 AdonisJS 生態系統的其他很酷的資源。 大多數時候,開始接觸一些非常新的東西是很困難的,因此團隊提供了[10 多個課程](https://adonismastery.com/)來了解 Adonisjs 生態系統。 ![培訓班](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkhw95z0kxkg4wcopzxb.png) ![培訓班](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqisrlqefivdt8ozfwzv.png) 他們在 GitHub 上擁有超過 15k 個 star,並且發布了`v6.8`版本。 {% cta https://github.com/adonisjs/core %} 明星 AdonisJS ⭐️ {% endcta %} --- 13. [Astro](https://github.com/withastro/astro) - 內容驅動網站的網頁框架。 -------------------------------------------------------------- ![阿斯特羅](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7o0f21nevycm4kaqgytq.png) Astro 是一個開源、伺服器優先的 Web 框架,它結合了靜態網站產生 (SSG) 和伺服器端渲染 (SSR) 的優點,可建立快速、SEO 友善的網站。 Astro 專門為部落格和電子商務等內容豐富的網站提供支持,並擁有良好的開發生態系統。 開始使用以下 npm 指令。 ``` npm create astro@latest ``` 您可以閱讀使用 Astro 建立的[文件](https://docs.astro.build/en/getting-started/)和[展示的網站](https://astro.build/showcase/)。其中一些真的很棒並且視覺上令人驚嘆! Astro 支援 React、Preact、Svelte、Vue、Solid、Lit、HTMX、Web 元件等。閱讀所有[記錄的功能](https://docs.astro.build/en/concepts/why-astro/#features)。 您可以按照本教學[使用 Astro 建立您的第一個部落格](https://docs.astro.build/en/tutorial/0-introduction/)。或使用主題來快速啟動您的下一個專案。其中一些是免費的,而另一些則是付費的! ![主題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06r4rgm0e87djv8otb3o.png) 您可以看到如圖所示的加載性能,甚至我對此感到驚訝。 ![天文表演](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nctfb8xzgz6dbg1wwg99.png) 性能至關重要,尤其是在您從事商業活動時,因為高效的演算法將節省更多資金並減少麻煩。 ![表現](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7db56tvaxi40youys75.png) 無論是在可存取性、圖標還是使用不同的庫方面,[整合選項](https://astro.build/integrations/)都是巨大的。 ![整合選項](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qezjrdyaq1pvwvq4kanm.png) 您可以觀看 Freecodecamp 提供的一小時[Astro Web 框架速成課程](https://www.youtube.com/watch?v=e-hTm5VmofI)。 {% 嵌入 https://www.youtube.com/watch?v=e-hTm5VmofI %} Astro 在 GitHub 上擁有超過 42k 顆星,處於`v4.6` (1800 多個版本),並由超過 112k 開發人員使用。 {% cta https://github.com/withastro/astro %} Star Astro ⭐️ {% endcta %} --- 14. [Fresh](https://github.com/denoland/fresh) - 下一代網路框架。 --------------------------------------------------------- ![新鮮的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3978f35p4m3xg9vf9rsg.png) Fresh 是下一代 Web 框架,專為速度、可靠性和簡單性而建置。 一些突出的特點: - 島上的客戶水合作用可達到最大程度的互動。 - 零執行時開銷意味著預設不會將 JS 傳送到客戶端。 - 無需配置。 - 開箱即用的 TypeScript 支援。 該框架使用 Preact 和 JSX 進行渲染和模板化,處理伺服器和客戶端上的任務。 此外,Fresh 消除了建造步驟的需要。您編寫的程式碼直接在伺服器端和客戶端執行。 TypeScript 或 JSX 到純 JavaScript 的轉換是在需要時動態發生的。這有助於實現極其快速的迭代周期和快速部署。 從這個開始吧。 ``` deno run -A -r https://fresh.deno.dev ``` Fresh 採用的最重要的架構決策是其對[島嶼架構模式](https://www.patterns.dev/vanilla/islands-architecture)的使用。 這意味著 Fresh 應用程式預設將純 HTML 發送到客戶端。然後,伺服器渲染頁面的某些部分可以透過互動式小工具(島嶼)獨立重新水化。 客戶端只負責渲染頁面中互動性足以保證額外工作的部分。任何純靜態內容都沒有相關的客戶端 JavaScript,因此非常輕量級。 您可以閱讀[文件](https://fresh.deno.dev/docs/introduction)。 您可以找到所有使用此建立的[網站](https://fresh.deno.dev/showcase),例如[Max Schmidt](https://mooxl.dev/)的投資組合網站。 ![使用新鮮製作的投資組合網站](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5j9xwjw86by873vjkvk0.png) 他們在 GitHub 上擁有超過 11k 個 star,並且發布了`v1.6`版本。 {% cta https://github.com/denoland/fresh %} 明星新鮮 ⭐️ {% endcta %} --- 15. [Vue.js](https://github.com/vuejs/core) - 用於在網路上建立 UI 的漸進式 JavaScript 框架。 ----------------------------------------------------------------------------- ![看法](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2a8rdd0xohokbf0mx35q.png) Vue.js 是一個漸進式框架,因為它能夠透過雙整合模式促進高階單頁 Web 應用程式的設計。閱讀[使用 Vue 的所有方法](https://vuejs.org/guide/extras/ways-of-using-vue.html),包括從嵌入 Web 元件到獨立腳本,甚至使用伺服器端渲染或靜態網站生成來建立複雜的應用程式。 ![vue 用例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxetclturvms3ve712u9.png) 使用 MVVM(模型-視圖-視圖模型)架構,Vue.js 讓事情變得簡單、靈活且適合初學者。 Vue.js 於 2014 年由 Google 的開發人員 Evan You 首次推出,他從 AngularJS 中汲取靈感,提供了一種簡單、輕量級且高效的替代方案。 Vue.js 借用了 ReactJS 和 AngularJS 的一些功能,並對其進行了增強,以提供更流暢、更用戶友好的體驗。例如,Vue.js 將 AngularJS 的 2 路資料綁定與 React 的高效虛擬 DOM 結合。 與 React 不同,Vue 有一個內建的 MVC,可以快速輕鬆地進行設定。此外,Vue.js 的壓縮版本只有 18-20 kb,比其臃腫笨重的競爭對手(如 React 或 AngularJS)輕得多。 Vue.js 還包含一個方便的內建 CSS 過渡和動畫元件。 100 秒觀看 Vue.js 了解更多! {% 嵌入 https://www.youtube.com/watch?v=nhBVL41-\_Cw&amp;pp=ygUXZW1iZXIganMgaW4gMTAwIHNlY29uZHM%3D %} 開始使用以下 npm 指令。 ``` npm create vue@latest ``` 該命令將安裝並執行 create-vue,官方的 Vue 專案腳手架工具。您將收到有關多個可選功能的提示,例如 TypeScript 和測試支援。 這是啟動開發伺服器的方法。 ``` cd <your-project-name> npm install npm run dev ``` 一個簡單的應用程式。 ``` import { createApp } from 'vue' createApp({ data() { return { count: 0 } } }).mount('#app') <div id="app"> <button @click="count++"> Count is: {{ count }} </button> </div> ``` 上面的例子展示了Vue的兩個核心特性: 1. **聲明式渲染**:Vue 使用模板語法擴充了標準 HTML,該模板語法基於 JavaScript 狀態以聲明方式描述 HTML 輸出。 2. **反應性**:Vue 會自動追蹤 JavaScript 狀態變化,並在變化發生時有效地更新 DOM。 您也可以使用 CDN 來使用它,CDN 將使用全域建置。閱讀[快速入門指南](https://vuejs.org/guide/quick-start)以了解更多資訊。 您可以閱讀[文件](https://vuejs.org/guide/introduction)並查看不同主題的[程式碼編輯器範例](https://vuejs.org/examples/#hello-world),甚至可以了解如何建立 Markdown 編輯器。 要體驗 Vue.js,您也可以直接在他們的[現場 Playground](https://play.vuejs.org/#eNp9kVFLwzAQx7/KeS9TmBuiT6MOVAbqg4oKvuSltLeuM01CcpmF0u/utaXVhzEISe7/vyS/yzV459ziEAlXmITMl47XylDtrGfIaZtGzdAoA5CnnJ5fDHsATxy9GSOAKhQrmD2S1ha+rNf52Wyw2m6RSUaynB6QgKlyOmWSCCDZXa2bprsF2jZZStSrpXGR4XBZ2Zz0rULxFYqVLKfTOEcOmTXbsljsgzVSRw+lMLOVKzX5V8elNUHhasRVmArnz3OvsY80H/VsR9n3EX0f6k5T+OYpkD+Qwsnj1BfEg735eKFa9pMp5FFL9gnznYLVsWMc0u6jyQX7X15P+1R1PSlN8Rk2NZMJY1EdaP/Jfb5CaebDidL/cK8XN2NzsP0F+HSp8w==)中嘗試。 我非常喜歡的一篇關於 Vue 的文章是 Michael 在 DEV 上發表的。必讀! {% 嵌入 https://dev.to/michaelthiessen/25-vue-tips-you-need-to-know-2h70 %} 如果您剛開始,您可以按照他們的團隊建立的[官方教程](https://vuejs.org/tutorial/#step-1)進行操作。 ![教學](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sf7dhgd0843jkpru9y27.png) 與 Astro 類似,他們也有[課程部分](https://www.vuemastery.com/courses/)和[Vue School](https://vueschool.io/) ,您可以在其中找到各種主題。 ![賽車視圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4gixw8cd2ltkippi68h.png) Vue.js 為許多知名網站提供支持,包括 Font Awesome、Upwork 和 Namecheap 等。 Freecodecamp 有一個[針對初學者的 3 小時 Vue](https://www.youtube.com/watch?v=4deVCNJq3qc)教程,但我不推薦它,因為它是 2019 年的,而且我們知道這些框架中的概念變化有多快。 他們在 GitHub 上擁有超過 44k 個 star,並且發布了`v3.4`版本。它是有史以來最受開發人員喜愛的框架之一。 {% cta https://github.com/vuejs/core %} Star Vuejs ⭐️ {% endcta %} --- 還有很多其他框架,您可以查看其中一些: [Aurelia.js](https://github.com/aurelia/framework) 、 [Mithril.js](https://github.com/MithrilJS/mithril.js) 、 [Stimulus.js](https://github.com/hotwired/stimulus) 、 [Meteor.js](https://github.com/meteor/meteor) 、 [Angular.js](https://github.com/angular/angular) 、 [React.js](https://github.com/facebook/react) 、 [Knockout.js](https://github.com/knockout/knockout)和[Alpine.js](https://github.com/alpinejs/alpine) 。 是的,我知道,我同時感到 😵 和興奮。哈哈! 我有一些影片推薦,可以讓本文更加深入。 {% 嵌入 https://www.youtube.com/watch?v=cuHDQhDhvPE&amp;pp=ygUXZW1iZXIganMgaW4gMTAwIHNlY29uZHM%3D %} {% 嵌入 https://www.youtube.com/watch?v=WJRf7dh5Zws&amp;pp=ygURZW1iZXIganMgdHV0b3JpYWw%3D %} --- 我特意製作了這一系列教程,以幫助您在一個地方找到所有內容。我希望你喜歡這個! 雖然我是 Next.js 的忠實粉絲,但探索 Wing 等其他出色的框架可能非常適合您的下一個專案。 讓我們知道您計劃使用哪些框架,或者您認為其他人是否應該了解其他內容。 祝你有美好的一天!直到下一次。 我建立技術內容是為了幫助其他人每天成長 1%,這樣您就可以在 Twitter 和 LinkedIn 上關注我以獲得每日見解。 |如果你喜歡這類東西, 請關注我以了解更多:) | [![用戶名 Anmol_Codes 的 Twitter 個人資料](https://img.shields.io/badge/Twitter-d5d5d5?style=for-the-badge&logo=x&logoColor=0A0209)](https://twitter.com/Anmol_Codes) [![用戶名 Anmol-Baranwal 的 GitHub 個人資料](https://img.shields.io/badge/github-181717?style=for-the-badge&logo=github&logoColor=white)](https://github.com/Anmol-Baranwal) [![用戶名 Anmol-Baranwal 的 LinkedIn 個人資料](https://img.shields.io/badge/LinkedIn-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/Anmol-Baranwal/) | |------------|----------| 關注Winglang以獲取更多此類內容。 {% 嵌入 https://dev.to/winglang %} --- 原文出處:https://dev.to/winglang/15-javascript-frameworks-for-your-next-project-1o7n

  近期留言