CodeLove 論壇 - 免費自學作業包＆新手友善討論區，幫你轉職工程師！

👉 讀技術文章  👉 上自學課程  👉 討論區交流
最新出爐作業包
⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理
⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面
⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念
⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格
⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式

🔍 搜尋結果：開源

🔍 搜尋結果：開源

6 個月內成為後端開發人員的技能（路線圖）

讓我給你一個簡單的🚦路線圖，讓你知道你現在在哪裡以及下一步應該去哪裡。 ![Shahan 在 6 個月內成為後端開發人員的技能](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3uek3ahjesssiakqs0xe.jpeg) 🔑關鍵概念 ----- 每個網站都有兩個部分。一個**前端**，一個**後端**。 前端是您在瀏覽器中看到它並與之互動的部分。**所有視覺方面**。 後端是為前端提供動力的部分。它*在幕後*，**主要是儲存資料和資料庫**並提供給前端。 🌐工作 --- 因此，網路開發工作分為`three categories` 。 - 👨‍💻前端開發 - 🛟後端開發 - 🚢以及全端開發（涉及前端和後端開發） 👷‍♂️後端開發人員到底是做什麼的？ ------------------ 後端開發人員負責建立驅動用戶所使用的應用程式*功能*的**基礎系統**。 這包括設計架構、實施和維護這些關鍵系統等各種任務。 他們的職責通常涉及與： - 💾 資料庫，例如MySQL， - ✂️ 框架，例如 Laravel 或 Ruby on Rails，以及 - 🧨 API（應用程式介面）。 他們的專業知識確保後端基礎設施無縫執行，從而實現使用者介面與底層資料和流程之間的順暢互動。 如果您不知道的話，這是後端開發人員的`core`職責： |任務|描述| |---|---| |了解績效需求與目標 |了解網站的效能要求和目標 | | API的開發與管理|為網站建立和管理 API | |開發資料儲存與處理系統|建置系統以安全地儲存和處理支付處理等流程所需的資料| |編寫、測試和維護程式碼 |編寫程式碼、測試和開發編碼問題的解決方案，包括維護任務 | |設計網站架構|使用敏捷 Scrum 和框架等既定方法設計網站架構 | |組織系統邏輯|有效建構系統邏輯| |提供系統問題的解決方案|提供解決方案來解決與系統相關的問題和挑戰 | --- 🥷 六個月內成為後端開發人員的技能 ----------------- 成為熟練的後端開發人員需要在相對較短的時間內掌握各種技能和技術。 下面，我概述了一個**全面的路線圖**，以幫助您在六個月內實現這一目標： **第 1 個月：🦴後端開發基礎** - **第一週：**了解後端開發人員的角色和職責。熟悉資料庫、框架和 API。 - **第 2-3 週：**參加資料庫綜合課程。了解 SQL 和 MySQL 等關聯式資料庫。練習建立和管理資料庫。 - **第 4 週：**了解伺服器端程式語言。從 PHP 或 Python 開始。學習基本語法、控制結構和資料類型。 **第 2 個月：🍖高階後端概念** - **第 1-2 週：**加深對資料庫的理解。探索 MongoDB 等 NoSQL 資料庫。了解*資料建模和優化*。 - **第 3-4 週：**掌握伺服器端程式語言。深入研究 PHP 或 Python。了解函數、類別和物件導向程式設計。 - **最後 2 天：**使用框架進行實踐專案。選擇流行的框架，例如*適用於 PHP 的 Laravel 或適用於 Python 的 Django* 。建立簡單的應用程式以理解模型-視圖-控制器 (MVC) 架構。 **第 3 個月：🌦️API 開發和集成** - **第 1-2 週：**了解 API 及其在後端開發中的重要性。探索 RESTful API 設計原則。 - **第 3 週：**開始建立您自己的 API。使用`Postman`等工具來測試和偵錯 API 端點。了解身份驗證和安全性。 - **第 4 週：**關注*API 整合*。了解如何在 Web 和行動應用程式中使用 API。練習將第三方 API 整合到您的專案中。 **第 4 個月：🛸故障排除與最佳化** - **第 1-2 週：**掌握故障排除技術。了解如何有效診斷和除錯後端應用程式。 - **第 3 週：**進入效能優化階段。了解快取、負載平衡和資料庫索引。 - **第 4 週：**學習監控和分析工具。使用 New *Relic 或 Datadog*等工具來監控應用程式效能。了解如何產生和**分析**績效指標。 **第 5 個月：🌥️雲端基礎設施和部署** - **第 1 週：**了解雲端運算概念。了解 AWS 或 Azure 等流行的雲端供應商。 - **第 2-4 週：**學習後端開發雲端服務課程。了解無伺服器運算、容器化和微服務。 - **休息日：**練習將應用程式部署到雲端。了解 CI/CD 管道和自動化部署策略。 **第 6 個月：🏗️高級主題和專案** - **第 1-2 週：**在上個月，學習更多高階後端主題。選擇訊息佇列、事件驅動架構和即時通訊等主題。 - **第 3 週：**開展*頂點計畫*。選擇一個具有挑戰性的專案，整合各種後端技術和概念。 - **第 4 週：**最後，反思您的學習歷程。審查您的專案並確定需要改進的領域。透過練習**程式設計挑戰**來準備工作面試。 ⛏️後端開發：工具與軟體 ------------ 以下是後端開發中常用的工具和軟體的細分： **1. 📇資料庫框架：** - **MySQL：**用於儲存和檢索資料的關聯式資料庫管理系統。它廣泛用於 Web 應用程式，並提供可擴展性和可靠性。 - **MongoDB：**一種 NoSQL 資料庫程序，使用具有模式彈性的類似 JSON 的文件。它適用於資料模型快速變化或非結構化資料的應用程式。 **2. 🛝網路伺服器：** - **Apache HTTP Server 2：**一種開源 Web 伺服器軟體，可透過網際網路提供 Web 內容。它以其穩定性、安全性和靈活性而聞名，使其成為託管網站和 Web 應用程式的熱門選擇。 **3. 🔐安全協定：** - **SSL/TLS 憑證：**這些是透過電腦網路提供安全通訊的加密協定。 SSL（安全通訊端層）及其後繼者 TLS（傳輸層安全性）對伺服器和用戶端之間的資料進行加密，確保線上連線的機密性和完整性。 **4. 💫版本控制系統：** - 接下來，請熟悉版本控制系統。這些系統有助於追蹤專案歷史並實現與其他人的協作工作。 - 🔌 吉特： - Git 是使用最廣泛的版本控制系統，超過 70% 的軟體開發團隊都在使用。這是一個必須知道的工具，建議分配大約兩週的時間來學習 Git。 後端開發人員通常利用這些工具和軟體來建立強大、可擴展且安全的 Web 應用程式，用於處理資料儲存、伺服器託管和線上通訊加密。 如果您尋求有關後端開發的更多知識，請考慮查看此[深入的後端開發路線圖](https://roadmap.sh/backend)。 --- 👏結論 --- 透過遵循此時間表並持續努力學習，您可以在 6 個月內獲得寶貴的後端開發技能，並為找到後端開發工作做好充分準備。 如果您想在六個月內成為前端開發人員，您也可以閱讀這篇文章。 👇 [6 個月內成為前端開發人員的路線圖](https://dev.to/codewithshahan/must-have-frontend-development-skills-roadmap-2024-28jc) 最後，如果你想知道[前端開發的未來](https://dev.to/codewithshahan/the-future-of-frontend-development-1amd)，你也可以看看這篇文章。 請關注更多有價值的內容，如果您覺得有幫助，您可能也會喜歡我的[YouTube 頻道](https://www.youtube.com/programmingwithshahan)。 感謝您花時間閱讀這篇文章。 🤳我的社交： [X](https://twitter.com/shahancd) --- 原文出處：https://dev.to/codewithshahan/skills-to-become-a-backend-developer-in-6-months-roadmap-4li3

0個讚   0留言 526瀏覽

為 Lambda 函數設定外觀的 5 種方法：DevTools 比較指南

長話短說 ---- 俗話說，給貓剝皮有多種方法…在科技界，給 Lambda 函數剝皮有 5 種方法 🤩 我們將比較 5 個開發工具 - ✅[翼](#1-wing) - ✅[刷子](#2-pulumi) - ✅ [AWS-CDK](#3-awscdk) - ✅ [Terraform 的 CDK](#4-cdk-for-terraform) - ✅[地形](#5-terraform) 介紹 -- 當開發人員試圖彌合開發和 DevOps 之間的差距時，我認為比較程式語言和 DevTools 會很有幫助。 讓我們從一個簡單函數的想法開始，該函數將文字檔案上傳到我們的雲端應用程式中的儲存桶。 下一步是展示實現這一目標的幾種方法。 **注意：**在雲端開發中，管理權限和儲存桶身分、打包執行時程式碼以及處理基礎架構和執行時的多個檔案會增加開發過程的複雜性。 ![讓我們開始吧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kd69m1hntlzy1icrlba.gif) 讓我們深入研究一些程式碼！ --- 1.[翼](https://github.com/winglang/wing) --------------------------------------- > [安裝 Wing](https://www.winglang.io/docs)後，讓我們建立一個檔案： `main.w` > 如果您不熟悉 Wing 程式語言，請查看[此處的](https://github.com/winglang/wing)**開源儲存庫** ``` bring cloud; let bucket = new cloud.Bucket(); new cloud.Function(inflight () => { bucket.put("hello.txt", "world!"); }); ``` **讓我們詳細分析一下上面程式碼中發生的情況。** > `bring cloud`是 Wing 的導入語法 > **建立一個雲端儲存桶：** `let bucket = new cloud.Bucket();`初始化一個新的雲端儲存桶實例。 > 在後端，Wing 平台在您的雲端供應商環境中配置一個新儲存桶。此桶用於儲存和檢索資料。 > **建立雲端函數：** `new cloud.Function(inflight () => { ... });`語句定義了一個新的雲函數。 > 該函數被觸發後，將執行其主體內定義的操作。 > `bucket.put("hello.txt", "world!");`上傳一個名為 hello.txt 的文件，其中包含內容世界！到之前建立的雲端儲存桶。 編譯並部署到 AWS ---------- - `wing compile --platform tf-aws main.w` - `terraform apply` 就是這樣，Wing 負責處理複雜性（權限、在執行時程式碼中獲取存儲桶身份、將執行時程式碼打包到存儲桶中、必須編寫多個文件 - 用於基礎設施和執行時）等。 更不用說它會產生 IAC（TF 或 CF），以及可以使用現有工具部署的 Javascript。 但在開發時，您可以使用本機模擬器獲得即時回饋並縮短迭代周期 ![翼控制台](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yea3ozudbqxbxr0hh1t5.gif) Wing 甚至還有一個[遊樂場](https://www.winglang.io/play/?code=YgByAGkAbgBnACAAYwBsAG8AdQBkADsACgAKAGwAZQB0ACAAYgB1AGMAawBlAHQAIAA9ACAAbgBlAHcAIABjAGwAbwB1AGQALgBCAHUAYwBrAGUAdAAoACkAOwAKAAoAbgBlAHcAIABjAGwAbwB1AGQALgBGAHUAbgBjAHQAaQBvAG4AKABpAG4AZgBsAGkAZwBoAHQAIAAoACkAIAA9AD4AIAB7AAoAIAAgAGIAdQBjAGsAZQB0AC4AcAB1AHQAKAAiAGgAZQBsAGwAbwAuAHQAeAB0ACIALAAgACIAdwBvAHIAbABkACEAIgApADsACgB9ACkAOwA%3D)，您可以在瀏覽器中試用！ 2.[刷子](https://www.pulumi.com) ------------------------------ > 步驟1：初始化一個新的Pulumi專案 ``` mkdir pulumi-s3-lambda-ts cd pulumi-s3-lambda-ts pulumi new aws-typescript ``` > 步驟 2. 編寫程式碼以將文字檔案上傳到 S3。 這將是您的專案結構。 ``` pulumi-s3-lambda-ts/ ├─ src/ │ ├─ index.ts # Pulumi infrastructure code │ └─ lambda/ │ └─ index.ts # Lambda function code to upload a file to S3 ├─ tsconfig.json # TypeScript configuration └─ package.json # Node.js project file with dependencies ``` 讓我們將此程式碼加入**index.ts** ``` import * as pulumi from "@pulumi/pulumi"; import * as aws from "@pulumi/aws"; // Create an AWS S3 bucket const bucket = new aws.s3.Bucket("myBucket", { acl: "private", }); // IAM role for the Lambda function const lambdaRole = new aws.iam.Role("lambdaRole", { assumeRolePolicy: JSON.stringify({ Version: "2023-10-17", Statement: [{ Action: "sts:AssumeRole", Principal: { Service: "lambda.amazonaws.com", }, Effect: "Allow", Sid: "", }], }), }); // Attach the AWSLambdaBasicExecutionRole policy new aws.iam.RolePolicyAttachment("lambdaExecutionRole", { role: lambdaRole, policyArn: aws.iam.ManagedPolicy.AWSLambdaBasicExecutionRole, }); // Policy to allow Lambda function to access the S3 bucket const lambdaS3Policy = new aws.iam.Policy("lambdaS3Policy", { policy: bucket.arn.apply(arn => JSON.stringify({ Version: "2023-10-17", Statement: [{ Action: ["s3:PutObject", "s3:GetObject"], Resource: `${arn}/*`, Effect: "Allow", }], })), }); // Attach policy to Lambda role new aws.iam.RolePolicyAttachment("lambdaS3PolicyAttachment", { role: lambdaRole, policyArn: lambdaS3Policy.arn, }); // Lambda function const lambda = new aws.lambda.Function("myLambda", { code: new pulumi.asset.AssetArchive({ ".": new pulumi.asset.FileArchive("./src/lambda"), }), runtime: aws.lambda.Runtime.NodeJS12dX, role: lambdaRole.arn, handler: "index.handler", environment: { variables: { BUCKET_NAME: bucket.bucket, }, }, }); export const bucketName = bucket.id; export const lambdaArn = lambda.arn; ``` 接下來，為 Lambda 函數程式碼建立**lambda/index.ts**目錄： ``` import { S3 } from "aws-sdk"; const s3 = new S3(); export const handler = async (): Promise<void> => { const bucketName = process.env.BUCKET_NAME || ""; const fileName = "example.txt"; const content = "Hello, Pulumi!"; const params = { Bucket: bucketName, Key: fileName, Body: content, }; try { await s3.putObject(params).promise(); console.log(`File uploaded successfully at https://${bucketName}.s3.amazonaws.com/${fileName}`); } catch (err) { console.log(err); } }; ``` > 步驟 3：TypeScript 設定 (tsconfig.json) ``` { "compilerOptions": { "target": "ES2018", "module": "CommonJS", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true }, "include": ["src/**/*.ts"], "exclude": ["node_modules", "**/*.spec.ts"] } ``` **建立Pulumi專案後，會自動產生yaml檔案。** **pulumi.yaml** ``` name: s3-lambda-pulumi runtime: nodejs description: A simple example that uploads a file to an S3 bucket using a Lambda function template: config: aws:region: description: The AWS region to deploy into default: us-west-2 ``` 與 Pulumi 一起部署 ------------- 確保正確設定包含`index.js`檔案的`lambda`目錄。然後，執行以下命令來部署您的基礎架構： `pulumi up` --- 3. [AWS-CDK](https://aws.amazon.com/cdk) ---------------------------------------- > 步驟1：初始化一個新的CDK專案 ``` mkdir cdk-s3-lambda cd cdk-s3-lambda cdk init app --language=typescript ``` > 第 2 步：新增依賴項 ``` npm install @aws-cdk/aws-lambda @aws-cdk/aws-s3 ``` > 步驟 3：在 CDK 中定義 AWS 資源 文件： **index.js** ``` import * as cdk from '@aws-cdk/core'; import * as lambda from '@aws-cdk/aws-lambda'; import * as s3 from '@aws-cdk/aws-s3'; export class CdkS3LambdaStack extends cdk.Stack { constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) { super(scope, id, props); // Create the S3 bucket const bucket = new s3.Bucket(this, 'MyBucket', { removalPolicy: cdk.RemovalPolicy.DESTROY, // NOT recommended for production code }); // Define the Lambda function const lambdaFunction = new lambda.Function(this, 'MyLambda', { runtime: lambda.Runtime.NODEJS_14_X, // Define the runtime handler: 'index.handler', // Specifies the entry point code: lambda.Code.fromAsset('lambda'), // Directory containing your Lambda code environment: { BUCKET_NAME: bucket.bucketName, }, }); // Grant the Lambda function permissions to write to the S3 bucket bucket.grantWrite(lambdaFunction); } } ``` > 步驟 4：Lambda 函數程式碼 在 pulumi 目錄中建立與上面相同的檔案結構： **index.ts** ``` import { S3 } from 'aws-sdk'; const s3 = new S3(); exports.handler = async (event: any) => { const bucketName = process.env.BUCKET_NAME; const fileName = 'uploaded_file.txt'; const content = 'Hello, CDK! This file was uploaded by a Lambda function!'; try { const result = await s3.putObject({ Bucket: bucketName!, Key: fileName, Body: content, }).promise(); console.log(`File uploaded successfully: ${result}`); return { statusCode: 200, body: `File uploaded successfully: ${fileName}`, }; } catch (error) { console.log(error); return { statusCode: 500, body: `Failed to upload file: ${error}`, }; } }; ``` 部署 CDK 堆疊 --------- 首先，編譯 TypeScript 程式碼： `npm run build` ，然後 將您的 CDK 部署到 AWS： `cdk deploy` --- [4.Terraform 的 CDK](https://developer.hashicorp.com/terraform/cdktf) -------------------------------------------------------------------- > 步驟1：初始化一個新的CDKTF專案 ``` mkdir cdktf-s3-lambda-ts cd cdktf-s3-lambda-ts ``` 然後，使用 TypeScript 初始化一個新的 CDKTF 專案： ``` cdktf init --template="typescript" --local ``` > 步驟 2：安裝 AWS Provider 並新增相依性 ``` npm install @cdktf/provider-aws ``` > 第 3 步：定義基礎設施 編輯 main.ts 以定義 S3 儲存桶和 Lambda 函數： ``` import { Construct } from 'constructs'; import { App, TerraformStack } from 'cdktf'; import { AwsProvider, s3, lambdafunction, iam } from '@cdktf/provider-aws'; class MyStack extends TerraformStack { constructor(scope: Construct, id: string) { super(scope, id); new AwsProvider(this, 'aws', { region: 'us-west-2' }); // S3 bucket const bucket = new s3.S3Bucket(this, 'lambdaBucket', { bucketPrefix: 'cdktf-lambda-' }); // IAM role for Lambda const role = new iam.IamRole(this, 'lambdaRole', { name: 'lambda_execution_role', assumeRolePolicy: JSON.stringify({ Version: '2023-10-17', Statement: [{ Action: 'sts:AssumeRole', Principal: { Service: 'lambda.amazonaws.com' }, Effect: 'Allow', }], }), }); new iam.IamRolePolicyAttachment(this, 'lambdaPolicy', { role: role.name, policyArn: 'arn:aws:iam::aws:policy/service-role/AWSLambdaBasicExecutionRole', }); const lambdaFunction = new lambdafunction.LambdaFunction(this, 'MyLambda', { functionName: 'myLambdaFunction', handler: 'index.handler', role: role.arn, runtime: 'nodejs14.x', s3Bucket: bucket.bucket, // Assuming the Lambda code is uploaded to this bucket s3Key: 'lambda.zip', // Assuming the Lambda code zip file is named lambda.zip environment: { variables: { BUCKET_NAME: bucket.bucket, }, }, }); // Grant the Lambda function permissions to write to the S3 bucket new s3.S3BucketPolicy(this, 'BucketPolicy', { bucket: bucket.bucket, policy: bucket.bucket.apply(name => JSON.stringify({ Version: '2023-10-17', Statement: [{ Action: 's3:*', Resource: `arn:aws:s3:::${name}/*`, Effect: 'Allow', Principal: { AWS: role.arn, }, }], })), }); } } const app = new App(); new MyStack(app, 'cdktf-s3-lambda-ts'); app.synth(); ``` > 步驟 4：Lambda 函數程式碼 Lambda 函數程式碼應使用 TypeScript 編寫並編譯為 JavaScript，因為 AWS Lambda 本機執行 JavaScript。以下是您需要編譯和壓縮的 Lambda 函數的範例**index.ts** ： ``` import { S3 } from 'aws-sdk'; const s3 = new S3(); exports.handler = async () => { const bucketName = process.env.BUCKET_NAME || ''; const content = 'Hello, CDKTF!'; const params = { Bucket: bucketName, Key: `upload-${Date.now()}.txt`, Body: content, }; try { await s3.putObject(params).promise(); return { statusCode: 200, body: 'File uploaded successfully' }; } catch (err) { console.error(err); return { statusCode: 500, body: 'Failed to upload file' }; } }; ``` 您需要將此 TypeScript 程式碼編譯為 JavaScript，對其進行壓縮，然後手動或使用腳本將其上傳到 S3 儲存桶。 確保 LambdaFunction 資源中的 s3Key 指向儲存桶中正確的 zip 檔案。 編譯和部署您的 CDKTF 專案 ---------------- 使用`npm run build`編譯專案 **生成 Terraform 配置文件** 執行`cdktf synth`指令。此命令執行您的 CDKTF 應用程式，該應用程式在`cdktf.out`目錄中產生 Terraform 設定檔（ `*.tf.json`檔案）： **部署您的基礎設施** `cdktf deploy` 5.[地形](https://developer.hashicorp.com/terraform) ------------------------------------------------- > 第 1 步：Terraform 設定 定義您的 AWS 供應商和 S3 儲存桶 使用以下內容建立名為**main.tf**的檔案： ``` provider "aws" { region = "us-west-2" # Choose your AWS region } resource "aws_s3_bucket" "lambda_bucket" { bucket_prefix = "lambda-upload-bucket-" acl = "private" } resource "aws_iam_role" "lambda_execution_role" { name = "lambda_execution_role" assume_role_policy = jsonencode({ Version = "2023-10-17" Statement = [ { Action = "sts:AssumeRole" Effect = "Allow" Principal = { Service = "lambda.amazonaws.com" } }, ] }) } resource "aws_iam_policy" "lambda_s3_policy" { name = "lambda_s3_policy" description = "IAM policy for Lambda to access S3" policy = jsonencode({ Version = "2023-10-17" Statement = [ { Action = ["s3:PutObject", "s3:GetObject"], Effect = "Allow", Resource = "${aws_s3_bucket.lambda_bucket.arn}/*" }, ] }) } resource "aws_iam_role_policy_attachment" "lambda_s3_access" { role = aws_iam_role.lambda_execution_role.name policy_arn = aws_iam_policy.lambda_s3_policy.arn } resource "aws_lambda_function" "uploader_lambda" { function_name = "S3Uploader" s3_bucket = "YOUR_DEPLOYMENT_BUCKET_NAME" # Set your deployment bucket name here s3_key = "lambda.zip" # Upload your ZIP file to S3 and set its key here handler = "index.handler" role = aws_iam_role.lambda_execution_role.arn runtime = "nodejs14.x" environment { variables = { BUCKET_NAME = aws_s3_bucket.lambda_bucket.bucket } } } ``` > 步驟 2：Lambda 函數程式碼 (TypeScript) 為 Lambda 函數建立 TypeScript 檔案**index.ts** ： ``` import { S3 } from 'aws-sdk'; const s3 = new S3(); exports.handler = async (event: any) => { const bucketName = process.env.BUCKET_NAME; const fileName = `uploaded-${Date.now()}.txt`; const content = 'Hello, Terraform and AWS Lambda!'; try { await s3.putObject({ Bucket: bucketName!, Key: fileName, Body: content, }).promise(); console.log('Upload successful'); return { statusCode: 200, body: JSON.stringify({ message: 'Upload successful' }), }; } catch (error) { console.error('Upload failed:', error); return { statusCode: 500, body: JSON.stringify({ message: 'Upload failed' }), }; } }; ``` 最後，將 Lambda 函數程式碼上傳到指定的 S3 儲存桶後，執行`terraform apply` 。 --- 我希望您喜歡在我們的雲端應用程式中編寫將文字檔案上傳到儲存桶的函數的五種簡單方法的比較。 正如您所看到的，除了一段程式碼之外，大多數程式碼都變得非常複雜。 結論！ --- [![泰勒絲](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eawrorng82lqrl8lt54w.gif)](https://github.com/winglang/wing) 點擊圖片⬆️ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/urh67eorvbn49cgbaae6.gif) > 如果您對 Wing 感興趣並且喜歡我們如何簡化雲端開發流程，請給我們一顆 ⭐ 顆星。 {% cta https://github.com/winglang/wing %} 請star ⭐ Wing {% endcta %} --- 原文出處：https://dev.to/winglang/5-ways-to-write-a-simple-function-in-your-cloud-app-1jgl

0個讚   0留言 138瀏覽

開發人員工具包：您必備的開源開發工具

每個開發人員都需要一個工具包來簡化他們的工作流程、提高生產力並有效地處理一些最複雜的任務。 這可能是開發、測試或專案管理，擁有合適的工具可以決定您的開發過程的成敗。 讓我們來看看我最喜歡的一些，我希望它們也成為您的最愛！ ![在此基礎上展開](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fvk3fph68m1z2tq48s0.gif) --- **讓我們開始吧！** 👇 1.[翼](https://github.com/winglang/wing) --------------------------------------- ![翅膀](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1msmm5l13nbs7axvdyu.gif) > - 🔥 雲端程式語言 > - 🔥 將基礎架構和執行時間程式碼合併為一種語言的統一程式設計模型 {% cta https://github.com/winglang/wing %} 請star ⭐ Wing {% endcta %} --- 2.[收件匣清零](https://github.com/elie222/inbox-zero) ------------------------------------------------ ![收件匣清零](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xb7cd1kg70cq5khv88m.gif) > - 👉 幾分鐘內清理你的收件匣 > - 👉 時事通訊清理、人工智慧自動化、冷電子郵件攔截器和分析 {% cta https://github.com/elie222/inbox-zero %} 請加註星標 ⭐ 收件匣零 {% endcta %} --- 3.[紙標](https://github.com/mfts/papermark) ----------------------------------------- ![紙標](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/710dp08orz9sspoewl3a.gif) > - 🚨 開源 DocSend 替代方案 > - 🚨 透過即時分析和白標選項安全地共享推廣資料、銷售提案和其他文件 {% cta https://github.com/mfts/papermarkr %} 請加註星標 ⭐ Papermark {% endcta %} --- 4.[適體資料庫](https://github.com/aptabase/aptabase) ----------------------------------------------- ![適體資料庫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zd8q170vhr87pg3uw7hz.gif) > - 📣 應用程式分析 > - 📣 適用於您選擇的框架！ （JS | NextJS 等） {% cta https://github.com/aptabase/aptabase %} 請加註星標 ⭐ SoapUI {% endcta %} --- 5.[文件](https://github.com/documenso/documenso) ---------------------------------------------- ![文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/judhelmv2k9eaiqbj7cf.gif) > - 🚀 開源文件簽名 > - 🚀 與所有您喜愛的工具整合 - 發送、連接、接收和嵌入到任何地方 {% cta https://github.com/documenso/documenso %} 請加註星標 ⭐ Documenso {% endcta %} --- 6.[翻轉](https://github.com/flipt-io/flipt) ----------------------------------------- ![翻動](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qhgyuk513flhzxakqzq.gif) > - ⚡ 現代工程團隊的支援 GitOps 的功能管理平台。 > - ⚡ 遵循現代 DevOps 最佳實踐，例如基於主幹的開發、持續交付和軟體終止開關，而無需重新啟動應用程式。 {% cta https://github.com/flipt-io/flipt %} 請加註星標 ⭐ Flipt {% endcta %} --- 7.[開啟狀態](https://github.com/openstatusHQ/openstatus) ---------------------------------------------------- ![開放狀態](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1teukczxnb1b1mmnwvp1.gif) > **建立信任：** > - ✨ 向使用者展示您的可靠性，並減少客戶服務單的數量。 > **自訂域** > - ✨ 帶上您自己的域名，並為狀態頁面賦予個性化風格。 {% cta https://github.com/openstatusHQ/openstatus %} 請加註星標 ⭐ OpenStatus {% endcta %} --- --- 原文出處：https://dev.to/winglang/developers-toolkit-your-essential-open-source-devtools-hgc

0個讚   0留言 95瀏覽

關於 GIT 你需要了解的一切

我相信您可以想像版本控製程式碼的重要性，以便我們可以**恢復變更**並**恢復遺失的資料以及其他可能性**。 我打賭你知道有人*（不是我呵呵）*通過使用越來越有創意的名稱建立文件副本來對其文件進行版本控制... ![GIF 模擬具有不同名稱的檔案的複製。範例：文章、文章最終版本等。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sffhjyl41pfnjklivnsv.gif) 在 1972 年之前，隨著**SCCS *（原始碼控制系統）***的發布，這是有史以來第一個**集中式**版本控制軟體之一，這可能是任何人對其程式碼進行版本控制的方式。 但我們在這裡不是在談論 SCCS，我們現在真正感興趣的是**GIT** ，這是一款**分散式**開源版本控制軟體，明年*(07/04/2005)*將慶祝其誕生 20 週年。 目錄 -- - [1.GIT是什麼？](#chapter-1) - [2.GIT如何運作？](#chapter-2) - [3.安裝GIT](#chapter-3) - [4.配置GIT](#chapter-4) - [5. 啟動本機儲存庫](#chapter-5) - [6. 使用 GIT](#chapter-6) - [7. 認識分支](#chapter-7) - [8. 與遠端倉庫同步](#chapter-8) - [9. 結論](#chapter-9) - [10. 參考文獻](#chapter-10) 1.GIT是什麼？<a name="chapter-1"></a> --------------------------------- GIT 是一個開源**分散式**版本控制系統，於 2005 年推出，由 Linus Torvald *（Linux 核心建立者）*開發。 使用GIT，我們可以在本地**控制專案的版本***（在工作資料夾中）*並將所有變更同步到遠端儲存庫*（例如在GitHub上）* 。 2.GIT如何運作？<a name="chapter-2"></a> ---------------------------------- 想像一個**實體**文件櫃，其中有一個包含所有專案文件的資料夾。每當有人需要操作文件時，他們都必須將其拾取，**將其從資料夾中刪除，並在完成後將其返回到資料夾中**。因此，兩個人**不可能**處理同一個文件，完全避免了任何可能的衝突。 **但這不是 Git 的工作原理！** *（感謝上帝）* 這就是**集中式**版本控制系統的工作方式，其中使用者需要**「簽出」**和**「簽入」**文件，即每當有人需要處理特定文件時，他們需要簽出該文件，**刪除從儲存庫中獲取**文件，然後在工作完成後簽入該文件，**並將其返回儲存庫**。 ![GIF 模擬集中式版本控制系統的操作。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26a9j0m4pcu5prb0kauo.gif) 在像**GIT**這樣的**分散式**系統中，多個人可以存取同一個遠端儲存庫中的檔案。每當有人需要操作文件時，他們只需將其**克隆***（或克隆整個存儲庫）*到本地計算機，然後將修改發送回遠端存儲庫。這使得**多人可以處理同一個專案**，甚至操作**相同的文件**。 ![GIF 模擬分散式版本控制系統的操作。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nb0x0u9kc6m7z2hz7zfj.gif) 這就是允許大型**開源**專案的分佈，來自世界不同地區的人們在同一個專案上工作，管理修改和可能的衝突*（是的，這裡可能會發生合併衝突）* 。 3.安裝GIT<a name="chapter-3"></a> ------------------------------- **GIT**適用於主要作業系統*（Windows、Linux、MacOs...），*安裝過程非常簡單，可以透過**命令列**或透過[git-scm.com](https://git-scm.com/)的**官方安裝程式**完成。 ### 3.1 在 Windows 上 要在 Windows 上安裝 GIT，只需存取官方網站並[下載安裝程式即可](https://git-scm.com/download/win)。然後只需**按照說明進行操作**，一切都會好起來，然後我們就可以在終端機中使用 GIT 命令了。 ### 3.2 在Linux上 對於Linux，我們可以使用以下**命令**安裝**GIT** ： ``` sudo apt install git-all ``` 透過這樣做， **GIT**必須準備好在我們的終端中運作。 ### 3.3 在 MacOS 上 對於 Mac，安裝**GIT**最簡單的方法是安裝[Homebrew](https://brew.sh/) ，然後在終端機中執行以下**命令**： ``` brew install git ``` 然後**GIT**必須準備好在我們的終端中運作。 4.配置GIT<a name="chapter-4"></a> ------------------------------- 安裝後，使用以下**命令設定 GIT**很重要： ``` git config --global user.name "[username]" # e.g. John Doe ``` ``` git config --global user. email "[[email protected]]" # e.g. [email protected] ``` > 此外，也可以透過刪除`--global`標籤來為某些本機儲存庫配置特定使用者。 5. 啟動本機儲存庫<a name="chapter-5"></a> ---------------------------------- 配置**GIT**後，我們就可以**啟動本地儲存庫了**。為此，我們可以**從頭開始一個新的儲存庫**或**複製現有的遠端儲存庫**。 ### 5.1 從頭開始（git init） 要啟動新儲存庫，只需導航到所需的儲存庫**根資料夾**並執行以下命令： ``` git init ``` ![Linux 終端機執行「git init」命令並顯示結果的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iw35xe9jwrwzo937to5b.png) 透過這樣做，將在專案資料夾內建立一個`.git`目錄，該目錄將**負責此本機儲存庫的工作資料夾中的版本控制**。 ### 5.2 克隆現有儲存庫（git clone） 克隆現有遠端儲存庫就像從頭開始建立新儲存庫一樣簡單。為此，只需使用`git clone`命令，將要複製**的儲存庫的 URL**作為參數傳遞到要複製儲存庫的資料夾中： 複製現有的遠端儲存庫就像從頭開始建立新的儲存庫一樣簡單。為此，只需使用`git clone`命令，將**遠端儲存庫 URL**克隆到我們要下載儲存庫的資料夾中： ``` git clone [repository-url] ``` ![Linux 終端機執行「git clone」命令並顯示結果的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nlt8rtua4ri7kpnna5el.png) 然後整個存儲庫必須**克隆**到我們的本地機器並**自動連結到相關的遠端存儲庫**。 > 有了複製的儲存庫，我們以後就不再需要使用`git remote`指令了。 6. 使用 GIT<a name="chapter-6"></a> --------------------------------- 在我們的**本機儲存庫**中，我們可以建立專案所需的文件，但它們**不會由 GIT 自動同步**，當有任何變更需要版本控制時，我們需要報告它。 因此，我們可以根據需要**操作**文件，並**在完成所需的變更後**，**將更新的文件傳送到 GIT** 。 為此，重要的是要了解版本控制中有**3 個階段的無限流***（是的，無限）* ： ``` MODIFY -> STAGE -> COMMIT ``` - **修改：**版本控制的第一階段，我們在這裡找到與上一個可用版本相比**已更改的檔案**。 - **STAGE：**版本控制的第二階段，這是我們放置**要新增到下次提交的修改檔案**的地方。 - **COMMIT：**版本控制的最後階段，當我們**確認變更**時，將階段中修改的檔案傳送到本機儲存庫。 提交修改後的文件後，我們在本地存儲庫中有一個可用的**新版本**，它可以再次接收更新，再次*“修改”* ，然後放入*“階段”* ，並再次*“提交”* ，確認較新的版本版本等等*（因此，「無限」哈哈）* 。 > 值得注意的是，提交不會覆蓋已修改文件的舊版本，而是包含新版本以及指向最後版本的指針，從而追蹤 GIT 追蹤的每個文件的版本。 ### 6.1 新增和提交（git add 和 git commit） 儘管聽起來很複雜，但執行版本控制流程**非常簡單**。由於所需的修改已完成，我們使用以下命令**新增要在舞台上提交的修改後的檔案**： ``` git add [filename] ``` > `git add -A` -> 將所有修改的檔案立即加入階段。 > > `git add *.[extensão-do-arquivo]` -> 將所有具有指定檔案副檔名的已修改檔案一次新增至暫存區（例如`git add *.html` ） 我們可以隨時使用`git status`指令檢查目前本機儲存庫**狀態**： ![Linux 終端機執行「git status」命令並顯示結果的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e28lg7wym8s0woytgzqz.png) 請注意，當我們**在建立新檔案後**在儲存庫中執行`git status`時，新檔案將顯示為*「Untracked」* 。這意味著該文件是**全新的**，仍然需要加入到任何提交中才能被**GIT追蹤**。 > 可以讓 GIT 忽略儲存庫中的特定檔案或資料夾。為此，我們只需將一個名為`.gitignore`的檔案新增到根資料夾中，並在其中寫入應忽略的檔案或資料夾的名稱。 > > 注意：被忽略的檔案和資料夾將不再出現在 GIT 軌道上，甚至不會顯示為「未追蹤」。要重置跟踪，只需從`.gitignore`文件中刪除所需的名稱即可。 要包含文件，我們可以使用要新增的文件的名稱來執行`git add`命令*（在本例中為「index.html」）* ： ![Linux 終端機的螢幕截圖，執行命令“git add”，然後執行“git status”，顯示結果。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pz1hnk9gpnxtv2s8xort.png) 這樣，透過重新執行`git status`我們可以看到新檔案已新增至*「stage」* ，並**最終準備好在下一次提交中發送**，這可以使用以下命令完成： ``` git commit -m "[descriptive-message]" ``` > 提交具有唯一的 ID（雜湊碼）並且是**IMMUTABLE 的**，即一旦確認就無法修改。 > > `git commit -a` -> 執行直接提交，將所有修改的檔案新增至暫存區並提交它們。 **成功提交檔案後**，執行`git status`時，我們注意到**沒有更多修改的檔案需要上傳**，因為所有修改都已在上次**提交**時有效保存在我們的本機儲存庫中。 ![Linux 終端機的螢幕截圖，執行指令“git commit”，然後執行“git status”，顯示結果。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ryqqs4mi46hxtuex199i.png) 此外，還可以使用`git log`指令查看儲存庫的提交日誌來**驗證所做的更改**，該指令顯示所有提交的一些元資料，例如雜湊碼、分支、作者、日期等。 ![Linux 終端機執行命令「git log」並顯示結果的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ljvj9se6srxslsu8vsj7.png) 可以重複整個過程來加入我們專案所需的新文件，修改它們並透過進行新的提交將它們發送到本地儲存庫。 ![GIF 模擬 GIT 分支中的多次提交。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2uez3henix8kchperuw8.gif) > `git log -N` -> 顯示最近 N 次提交的日誌。 > > `git log [branch-A] [branch-B]` -> 顯示「branch-B」中但不在「branch-A」中的提交日誌。 > > `git log --follow [filename]` -> 顯示更改指定檔案的提交日誌，即使它已更改名稱。 > > `git diff` -> 列出與儲存庫中最新可用版本相比所做的變更。 > > `git diff [nome-do-arquivo]` -> 列出對指定檔案相對於儲存庫中最後一個可用版本所做的變更。 ### 6.2 撤銷提交前後的更改 **在提交之前**，對本地存儲庫所做的任何更改都可以撤消或更改，但**一旦提交，就無法更改**。這是因為提交是**不可變的物件**，這意味著不可能編輯或更改提交中的資料。 但是，**可以進行新的提交**來撤銷更改，或更正先前提交中的不正確資訊。無論哪種方式，我們都可以使用以下命令之一： ``` git checkout -- [filename] # Discards changes made to the local file before the commit (irreversible action) ``` ``` git reset --hard HEAD # Discards changes made to a file that is in stage (before the commit) ``` ``` git reset --hard HEAD~1 # Discards the last commit made in the local repository (only the last commit) ``` ``` git commit --amend # Creates a new commit, replacing the last commit made in the local repository ``` ``` git revert [commit-hash] # Creates a new commit, reverting the changes of the specified commit ``` 7. 認識分支<a name="chapter-7"></a> ------------------------------- **分支**只不過是儲存庫的一個**分支**，到目前為止，所有操作都已在分支`master/main'`上執行。 > 預設情況下，儲存庫中建立的第一個分支是`master/main` ，它是儲存庫的主分支。 ### 7.1 為什麼要使用分支？ 乍看之下似乎沒什麼，但**分店卻為專案的發展賦予了巨大的力量**。 想像一下，我們正在開發一個 Web 平台，並且想要**測試一項新功能**，但我們的儲存庫已經**託管或與其他人共享**，任何有問題的更改都可能會給他們帶來糟糕的體驗。我們可以做什麼？ 如果您一直在考慮**複製並貼上**專案資料夾，建立一個新的**「測試版本」** ，那麼您是對的！嗯，差不多… 透過 GIT，我們可以對分支做類似的事情。由於它們是**分支**，我們可以簡單地**建立一個名為「test」的新分支**，從而在完全**隔離的分支**中擁有我們專案的一個版本，準備好進行翻轉，**而不會危及主分支**。 ![GIF 模擬使用新提交建立新分支。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szc081nndoi18vklty5r.gif) ### 7.2 建立分支（git分支） 建立**分支**意味著建立可以獨立工作的儲存庫的並行副本，而不會影響`master/main`分支。為此，我們只需執行以下命令： ``` git branch [branch-name] ``` > 在沒有特定分支名稱的情況下執行`git branch`指令必須顯示儲存庫中可用分支的列表，並用「\*」標記目前正在使用的分支。 在執行`git branch test`指令之前， `git branch`指令只會傳回`master`分支。 ![Linux 終端機執行「gitbranch」命令、建立新分支並顯示結果的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vqpdrtvhze9qhr31ewbh.png) 建立新分支後，我們可以執行以下命令在可用分支之間切換： ``` git checkout [branch-name] ``` 執行`git checkout test`指令後，我們可以看到**活動分支已切換**。從那一刻起，**所有提交的資訊都會傳送到儲存庫的`test`分支**，而不會影響分支`master/main` 。 ![Linux 終端機執行「git checkout」命令、切換活動分支並顯示結果的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/egau7y81leig8za36myi.png) > 可以根據需要建立任意數量的分支，並且我們可以使用以下命令與現有分支進行互動： > > `git checkout -b [branch-name]` -> 使用給定名稱建立一個新分支並直接切換到它。 > > `git branch -d [branch-name]` -> 刪除指定分支。 > > `git branch -m [new-name]` -> 將目前分支的名稱變更為給定名稱。 ### 7.3 合併分支（git merge） **當完成不同分支**上的工作，並且我們確定所做的更改不會在專案中引起任何問題時，我們可以將當前分支**合併**到`master/main`分支中，**應用當前分支中的所有更改分支到儲存庫的主分支**。 要**合併**分支，我們需要**切換到將接收更改的分支**並執行以下命令： ``` git merge [branch-name] # Merge the given branch into the active branch ``` 在這裡，由於我們位於分支`test`上，因此我們應該使用`git checkout`命令**切換到分支`master`** ，然後使用我們要合併的分支的名稱*（在本例中為“test”）*執行`git merge`命令。 ![Linux 終端機的螢幕截圖，執行命令“git checkout”，切換到 master 分支，然後“git merge”，顯示結果。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6tqap1uu5gjipkety6w.png) 透過這樣做，在分支`test`上完成的所有工作*（在本例中為`style.css`檔案的建立）*將合併到分支`master`中。 ![模擬兩個分支之間的合併過程的 GIF。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hs17m005ogm0qlbedjy.gif) ### 7.4 合併衝突 如果**在同一行上更改了一個或多個檔案**並且合併無法**自動**完成，則使用`git merge`合併不同分支可能會導致一些**衝突**。 ![執行「git merge」命令的 Linux 終端機的螢幕截圖，該命令傳回衝突警告。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mwedudsff1yf8kpzguc.png) 出現這種情況時，我們可以執行`git status`指令來檢查**哪些檔案**有衝突。 ![出現合併衝突警報後執行「git status」指令的 Linux 終端機的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcfpmta2yiy1xpyc729u.png) 在繼續合併之前，我們需要**解決衝突**，方法是定義應該進行哪些更改，或檢查更改以使它們相互相容。為此， **GIT 將在衝突文件中插入標記**以協助解決問題。 ![在文字編輯器中開啟的衝突檔案的螢幕截圖，顯示了 GIT 建立的用於幫助解決衝突的標記。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0e727le3ogmhtuq0g7w.png) 解決衝突後，我們只需要將修改過的檔案放回舞台，提交新的無衝突版本，然後再次執行`git merge`指令，這一定會成功合併，沒有任何問題。 8. 與遠端倉庫同步<a name="chapter-8"></a> ---------------------------------- 我們已經知道可以**將本地存儲庫連接到遠端存儲庫**並遠端同步我們的所有工作，使其**保持最新**。 為此，我們需要執行`git push`命令，該**命令將所有提交從本地存儲庫發送到遠端存儲庫**，但首先我們需要\*\*配置遠端存儲庫。 ### 8.1 配置遠端倉庫 啟動*遠端儲存庫*非常簡單。這裡我們將使用**GitHub**來完成它。 首先，我們需要在 GitHub 帳戶中**啟動一個新的空白儲存庫***（只需選擇一個名稱並點擊「建立儲存庫」）* ： ![GitHub 上儲存庫建立頁面的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ug1aw5eq15du36vd1hri.png) 接下來，我們需要透過在本機儲存庫中執行以下命令**來配置遠端儲存庫和本機儲存庫之間的關係**： ``` git remote add origin [remote-repository-url] ``` ![Linux 終端機執行「git Remote」命令並顯示結果的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhrlfg0f0pgljl5b18vl.png) > `git remote -v` -> 顯示實際連接到本機儲存庫的遠端儲存庫的 URL。 正確**連接**遠端儲存庫後，我們需要使用指令`git branch -m main`**將本機分支`master/main`的名稱變更**為「main」 *（如果您的本機分支已稱為`main` ，請忽略此步驟）* ： ![Linux 終端機執行「gitbranch」指令、將「master」分支重新命名為「main」並顯示結果的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f0al7joro01pch0ac124.png) > 保持本機儲存庫的主分支與我們要推送到的遠端儲存庫的主分支同名非常重要。 最後，完成上述步驟後，我們可以使用以下命令首次將本機儲存庫與遠端儲存庫**同步**： ``` git push -u origin main ``` ![執行「git push」命令的 Linux 終端機的螢幕截圖，該命令需要 GitHub 身份驗證。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvkdyis8y989xron52nc.png) 當我們執行`git push -u origin main`指令時，我們可能需要輸入**GitHub 憑證***（使用者和存取權杖）* 。 > 如果您不知道**GitHub 存取令牌**是什麼，或者您沒有設定存取令牌， [請按一下此處](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token-classic)。 > > 我們也可以透過**使用 GitHub CLI 設定身份驗證**來解決此問題。 [按此處](https://docs.github.com/en/get-started/getting-started-with-git/caching-your-github-credentials-in-git)了解具體方法。 經過**身份驗證**後， `git push`應該會成功執行，將本地儲存庫中的所有提交與遠端儲存庫同步。 ![Linux 終端機的螢幕截圖，顯示 GitHub 驗證後繼續執行「git Push」命令。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vp7q4htszkzrfc6vepcl.png) ![收到帶有新檔案的「git Push」後 GitHub 上的遠端儲存庫的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rqfhi6s6jh369tseh5y.png) ### 8.2 第一次後的Git推送（git推送） 完成上述所有步驟後，可以單獨使用`git push`指令完成**新同步**，無需任何其他參數，如下所示。 ![Linux 終端機執行「git status」、「git commit」和「git Push」命令、執行新提交並將更新推送到遠端儲存庫的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aoatcspiwosywih07nsm.png) ![收到新更新後 GitHub 上的遠端儲存庫的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jskxpghboi62mqw2qcb2.png) > 在這種情況下，使用**GitHub CLI**繞過了執行命令`git push`所需的身份驗證。您可以[點擊此處](https://docs.github.com/en/get-started/getting-started-with-git/caching-your-github-credentials-in-git)了解具體方法。 ### 8.3 更新本地倉庫（git pull） 使用**分散式**遠端儲存庫，可以**遠端**進行更改*（直接在遠端儲存庫中）* ，從而導致我們的本機儲存庫**變得過時**。 考慮到這一點，**更新本機儲存庫**並同步我們在遠端儲存庫中獲得的任何變更非常重要，**以確保本機專案始終具有遠端儲存庫中可用的最新版本**。為此，我們可以執行以下命令： ``` git pull ``` 想像一下，一個**新檔案**`README.md`已**直接在我們的遠端儲存庫中**建立，因此我們的本機儲存庫現已過時。 ![遠端儲存庫的螢幕截圖，其中遠端新增了新的 README.md 檔案。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hccw00vyr7j6lcfm02d2.png) 在本機儲存庫中，我們可以使用上面提到的`git pull`**同步**遠端儲存庫中的變更。 ![Linux 終端機執行「git pull」命令的螢幕截圖，使用遠端儲存庫中的新變更更新本機儲存庫。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/it9ylx1imd94yey5d0wd.png) > 當我們執行`git pull`指令時回傳的前 7 行是`git fetch`指令的回傳。換句話說，如果我們執行`git pull`命令而不先執行`git fetch`命令，GIT 將同時執行這兩個命令以從遠端存儲庫檢索更新並將其同步到本地存儲庫。 > > `git fetch` -> 從遠端儲存庫取得更新，但不同步本機儲存庫（需要`git pull` ）。 9. 結論<a name="chapter-9"></a> ----------------------------- 這一切讓我們確信GIT是程式設計師日常生活中必備的版本控制系統，了解它的主要指令和用途可以成為我們技術資歷的轉捩點。最後，隨著本地和遠端儲存庫的同步和更新，以及我們迄今為止所學到的一切，我們已經準備好繼續推進這個令人敬畏的版本控制系統的實用性。 10. 參考文獻<a name="chapter-10"></a> --------------------------------- - [GIT 的官方文件。](https://git-scm.com/docs/git#_git_commands) - [\[PT-BR\] GIT：入門迷你課程（45 分鐘內學會） - Codigo Fonte TV](https://youtu.be/ts-H3W1uLMM?si=-hKGkUmwgT2lZJwy) --- 原文出處：https://dev.to/reenatoteixeira/everything-that-you-need-to-know-about-git-2440

0個讚   0留言 207瀏覽

🐱Product Hunt 已成為付費獲勝💰，但您仍然應該使用它來發布您的產品🚀

我們中的許多人已經在 Product Hunt 上推出了一段時間，**越來越多的人開始質疑那裡的受眾是否真誠，以及是否仍然值得在他們自己的平台上推出**。 一周前剛剛推出了我們的最新產品，我想在這裡分享我們的第一手經驗並涵蓋三個主要內容： - 今天就推出 Product Hunt 的外觀和感覺如何 - 我們從發布中得到了什麼 - 如何（最好）利用 Product Hunt 來開發您的產品 關於我們 - 推出 6 次，超過 2,000 票贊成 -------------------------- 在過去 3 年裡，我們在 Product Hunt 上推出了 6 次，贏得了「最佳產品」獎（當天排名第 1 和第 5 名），並總共收集了超過 2,000 個讚。一週前，我們剛完成了[Open SaaS 的第六次發布，這是 300 美元以上 SaaS 入門產品的開源替代品](https://github.com/wasp-lang/open-saas/)。 ![最近推出](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spu3cpuo64ao50r3227u.png) 您會發現許多文章為在 PH 上推出提供建議，並從那些獲得推薦的人那裡贏得故事，但幾乎沒有人分享幕後知識以及實現這一目標的真正需求。這就是這篇文章的目的。 我將引導您完成啟動步驟並發表評論並分享我們在每個步驟中的經驗。讓我們開始吧： 安排您的發布並建立“即將推出”預告片 - “讓我們交換贊成票” ------------------------------- ![即將推出](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qoogy6m4da5ajswtrplg.png) 一旦您安排了Product Hunt 的發布，您就可以建立一個橫幅，顯示在他們的「即將推出」頁面(https://www.producthunt.com/coming-soon) 上，這就是您的旅程開始的地方。這使 PH 訪客有機會了解接下來會發生什麼，並訂閱以在發布後收到通知，這也是您可以用來行銷您的發布的第一個東西。 **這也是 PH 經濟開始的時候 - 一旦您發布發布預告片，您將開始收到與其他即將推出其產品的人交換贊成票的報價**： ![預告片幫助我們](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aznuya45vj10t8mzysxf.png) 這實際上是一種合法的策略（從共享激勵而不是購買選票的意義上來說），可以透過自動化非常有效地利用。它不會帶來任何合格的潛在客戶（也就是真正對您的產品感興趣的人），但它可能有助於獲得投票，從而提高您的產品發布的知名度和影響力。 我們根本沒有使用過這個策略（所以我無法證明它的效率），因為我們很晚才發布“即將推出”頁面，就在發布前一兩天，而且我們也沒有工作流程沒有地方也沒有人力來完成它。 Linkedin、WhatsApp 和其他平台上也有專門的小組，讓 PH 參與者可以互相支持。如果您加入這些活動，您將會收到更多此類訊息和請求。 發布日 - 主動發送的電子郵件和「購買投票」優惠 ------------------------ 發布當天，類似上述的要求愈加強烈。我甚至收到了其他人在同一天推出產品的幾封電子郵件，要求我投票，因為他們刪除了我的電子郵件並將我加入到他們的時事通訊中。 ### 當天的前 4 小時 - 隱藏點讚 Product Hunt 最近推出了在一天的前 4 小時內以隨機順序顯示產品的功能，並隱藏點讚數。背後的想法是保證所有產品一開始就有平等的知名度，並有公平的機會吸引觀眾的注意。 隨著我們最新推出的 Open SaaS，我們取得了有史以來最好的開局 - 4 小時內獲得 100 票贊成！ ![開幕](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2b7i5ddfk8k37m0g089.png) 當然，我們參與了我們的網絡，但也注意到來自我們不認識的人的大量投票和評論。有瞭如此強勁的開局，我非常有信心我們能躋身排行榜前 5 名產品之列。 > 進入前 5 名產品是 Product Hunt 主頁上的「首屏」位置，因此儘早到達那裡是最終進入該位置的最佳方式。 > 但當排行榜最終揭曉時，Open SaaS 勉強躋身當天發布的前 10 名！ ![排行榜揭曉](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ck8hbz4oiamhkj99z5gu.png) 前五名與其他產品之間存在著相當明顯的差距，第一名的產品的支持率幾乎是第二名的兩倍。**這對我們來說相當沮喪，因為感覺我們追趕的機會幾乎是零。** ### “嘿，想買點讚嗎？” 排行榜揭曉後，我們開始收到另一種類型的訊息——直接購買點讚的報價。仍然相對接近前 5 名的產品可能使我們成為一個非常合格的領導者： ![購買贊成票](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n20qhgmvpk72zu5t8ojk.png) 與此略有不同的是，讓不同的社群媒體影響者和社群所有者伸出援手，向他們的追隨者推銷您的產品，並承諾獲得 X 票： ![購買優惠2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qo7qlwcgpafek2g4bd36.png) ![進入前 3 名優惠](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1ndsehw06oax11uh2gu.png) 甚至我們的一些直接聯絡人也知道“一個人”可以讓你到達 Product Hunt 的頂端，並主動提出介紹我們，所以這有點像一個“公共秘密”，而我們是少數不知道的人關於它。 我們從發布中得到了什麼 - #7、HN 頭版、GitHub 上的趨勢… ----------------------------------- ![推文發布統計](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cc8wa4vzl6htfrjanxkk.png) **我們 PH 發布的主要好處不是發布本身，而是我們可以將其與其他東西結合起來，例如**[在 HackerNews 上發布 Open SaaS](https://news.ycombinator.com/item?id=39192304) **，**它最終在其中展示了大約半天（在 Show 上展示的時間更長） HN 選項卡）。 ![恩頭版](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ve2jf1qjy649sxe6gofu.png) 最後，所有這些參與度加起來讓我們能夠在 GitHub 上獲得全球趨勢，這反過來又為 Open SaaS 帶來了更多流量（今天，在發布一周後，它已經擁有[超過 2500 顆星](https://github.com/wasp-lang/open-saas/)）。 ![gh 推文趨勢](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfvramertsi8cyim0uyk.png) ### 由此產生的流量 看看過去兩週 Open SaaS 儲存庫帶來的流量，我們可以觀察到以下內容： ![回購訪客](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3tw0kbqfkd520egehfaq.png) ![回購參考網站](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qxz1awc2fm4bwaufj8s.png) HackerNews 的推出吸引的人數是 Product Hunt 的三倍多。 GitHub 吸引了更少的人存取實際的儲存庫，但我的直覺是，更多的人在沒有離開「趨勢」頁面的情況下加註了星標。 在 PH 的每日時事通訊中獲得專題報告 - 有幫助嗎？ --------------------------- ![被刊登在 ph 通訊中](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bxgy7jtmpljx9egwpn4.png) Open SaaS 在發布結束時成為當天排名第七的產品，獲得約 400 票贊成。根據 Product Hunt 的資料，當日排名前 10 名的產品最終會出現在擁有超過 50 萬訂閱者的每日新聞通訊中。 該時事通訊以 3 個大型促銷區塊開始，因此您必須滾動相當長的時間才能到達前一天的熱門產品。 ![時事通訊滾動](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uumomkgthubjwwphce5f.gif) 對我們來說，它並沒有產生太大的影響，我認為它為我們贏得了大約 20 票。也許是因為我們不是第一，或者只是因為它是一個相當深的漏斗（打開電子郵件 → 一直向下滾動 → 檢查所有產品 → 喜歡 Open SaaS → 決定投票）。 ![ph 讚圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p92a0r19refow1wkxh19.png) 在沒有任何提升策略的情況下是否有可能贏得當天的第一名？ --------------------------- **是的，這絕對是可能的。我已經得到了幾個我信任的聯絡人的證實，他們用他們的產品贏得了第一名，沒有任何機器人或支付贊成票。**但它也肯定變得不那麼常見和難以預測。 大多數時候，我們推出的產品首先會表現出一些不尋常的行為。有一次，是該公司在前一周推出，但他們只是稍微重新命名了產品和網站，然後重新推出。還有一次，一款產品在發布結束前幾個小時突然獲得了很高的支援率。 那麼，這意味著什麼？它還值得在 Product Hunt 上推出嗎？ ---------------------------------- 顯然，今天雙方都有不同的力量和動機驅動 Product Hunt 用戶的行為。最初，有一個社區想要了解最新產品並表達他們的興趣，並且有一些創始人想要連接到該社區。 **現在，也有一些創作者最希望自己的產品獲勝，無論實際的受眾參與度如何，因為他們相信這將有助於他們實現最終目標，例如影響範圍、籌款或對其他用戶的社會認可。顯然，有一方願意滿足這項需求，但對產品並沒有任何真正的興趣。** 為什麼這可能？ Product Hunt 正在採取許多措施來偵測和防止此類行為，但如果不嚴格限制 Product Hunt 所追求的網路效應（即能夠分享您的啟動連結），就很難做到這一點。 **除此之外，對我們來說，定期在 Product Hunt 上發布仍然是值得的。原因如下。** 產品搜尋是一個很棒的藉口 ------------ Product Hunt 為您提供了一個獨特的機會來宣布您的產品「正式」發布。您可以決定在哪一天執行此操作並安排時間，並且 100% 所有人都能看到它，您也可以分享並邀請人們查看。**你有 24 小時的時間，在此期間，你完全有理由聯繫你認識的每個人（以及其他人）並繼續按喇叭。** ![打開 saas ph 推文](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vazu6ezrf5goukk6mk3.png) **Reddit 和 HackerNews 等其他高影響力平台無法做到這一點。**當然，您可以隨時分享有關您產品的新聞，但不能保證任何人都會看到它（實際上恰恰相反），除非社區的集體思想決定如此，這幾乎是確定性的。您可以輕鬆地花費一周的時間來準備您的發布帖子，但它會在幾分鐘內被演算法淹沒。 **這就是為什麼我們不將 Product Hunt 視為最終目標（贏得第一名），而只是將其視為我們整個發布過程的一部分。這是一個很棒的講台，也是一個談論你的產品的好藉口，而上面的任何其他東西都只是一個額外的好處。** 我們保持簡單 ------ 您會發現很多來自「PH 專家」的文章（和付費課程），解釋您應該如何提前幾個月準備發布、預熱您的受眾、準備他們將分享的評論等。**我們不做任何這些事情。我們只需準備內容（影片+一些螢幕截圖和介紹性評論），然後在發布當天邀請我們認識的所有人支持我們。然後，白天我們也會在 Reddit、Hackernews 和 dev.to 上發文。** ![法師成長圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cy7kdtpyyok5hgkm00js.png) 有時我們最終會進入前 5 名，有時則不然，**但每次，我們的用戶參與度都會穩步提升，並且通常會在接下來的幾天/幾週內出現更好的結果**。例如， [MAGE，我們基於 GPT 的全端應用程式啟動器](https://usemage.ai/)，在 PH 發布後就出現了爆炸性增長，並[在幾個月內被用來建立了 30,000 多個專案](https://dev.to/wasp/how-we-built-a-gpt-web-app-generator-for-react-nodejs-from-idea-to-25000-apps-in-4-months-1aol)。 我們經常這樣做 ------- 我們的目標是每 3 個月發布一次 Product Hunt，作為發布週的一部分，這就是我們迄今為止所做的。除非 6 個月過去了或有重大更新，否則您無法真正推出完全相同的產品，但您可以自由地推出與主產品相關的其他（子）產品和功能。 > **💡 提示**：當您提交發佈時，您可以要求 PH 團隊將其「連接」到您的產品，以便它將出現在該產品的發布清單中。通常，他們自己做。它看起來像這樣： ![黃蜂全部發射](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xebrqdzvk5kcs7tpr1bk.png) 雖然我們的主要產品是[Wasp，一個基於 React 和 Node.js 的全端框架](https://github.com/wasp-lang/wasp)，但到目前為止我們推出的產品如下： - **Wasp Alpha** - 純產品，v0 差不多 - **Wasp Beta** - 差不多兩年過去了，我們還沒有採用「經常發布」的方法 - **免費 SaaS 模板**- [Open SaaS](https://github.com/wasp-lang/open-saas)的前身，4 個月後 - [\*\*MAGE，GPT Web 應用程式產生器](https://usemage.ai/)\*\* - 由 Wasp 提供支援的全端 Web 應用程式產生器 - [**React/Node 的全端身份驗證，無第三方服務**](https://wasp-lang.dev/docs/auth/overview)- Wasp 的身份驗證功能 - 最後， **[Open SaaS - 300 美元以上 React 和 Node.js SaaS 初學者的免費開源替代品](https://github.com/wasp-lang/open-saas/)** 它已成為我們發布工作流程的常規部分，對於我們在該季度推出的任何新功能，我們都會尋找一個好的候選人在即將推出的發布中展示。這使我們能夠繼續談論我們所做的事情，並且我們還獲得了很多可以嵌入到我們的文件、部落格文章等中的好內容（例如影片、橫幅）。 例如，這個影片展示了 Wasp 中的身份驗證如何運作 - 首先我們將它用於我們的[Product Hunt 發布](https://www.producthunt.com/products/wasp-lang-alpha#full-stack-auth-for-react-node-by-wasp)，現在它[位於我們的身份驗證文件的頂部](https://wasp-lang.dev/docs/auth/overview)。 {% 嵌入 https://www.youtube.com/watch?v=Qiro77q-ulI&amp;ab\_channel=Wasp %} 謝謝閱讀！ ----- 感謝您閱讀本文！這篇文章比我最初預期的要長得多，但我不斷獲得更多關於要寫什麼的想法。我希望您會發現它對計劃下一次發布有所幫助，並且您也會更好地了解在此過程中會發生什麼。 我也很想得到您的回饋，並了解您在 Product Hunt 上推出的經驗和策略。 快樂發射！ --- 原文出處：https://dev.to/wasp/product-hunt-has-become-pay-to-win-but-you-should-still-use-it-to-launch-your-product-508d

0個讚   0留言 144瀏覽

我正在建立一個人工智慧專案：這是我將要使用的程式庫......

有了正確的函式庫，任何開發人員都可以在他們的應用程式中建立強大的人工智慧功能（如 Ninja 🥷）。 在此列表中，我編譯了 7 個很棒的 AI 庫，您現在可以使用它們（相對）輕鬆地發布功能。 不要忘記為這些圖書館加註星標以表達您的支持。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqoipyuoxgb83swyoo4a.gif) https://github.com/CopilotKit/CopilotKit --- 1. [CopilotPortal](https://github.com/CopilotKit/CopilotKit) ：建構應用程式原生人工智慧聊天機器人 ------------------------------------------------------------------------------- ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0x1bwwzvc2mnrfrvsqn7.png) 應用程式內人工智慧聊天機器人助理可以「查看」您目前的應用程式狀態並在前端和後端採取操作。 一組完全可自訂的反應元件和掛鉤以及用於建立 LLM 和您的應用程式之間互動的架構。 定義*useMakeCopilotReadable* 、 *useMakeCopilotActionable*和*CopilotSidebarUIProvider*使其運作。 ``` import "@copilotkit/react-ui/styles.css"; import { CopilotProvider } from "@copilotkit/react-core"; import { CopilotSidebarUIProvider } from "@copilotkit/react-ui"; export default function App(): JSX.Element { return ( <CopilotProvider chatApiEndpoint="/api/copilotkit/chat"> <CopilotSidebarUIProvider> <YourContent /> </CopilotSidebarUIProvider> </CopilotProvider> ); } ``` https://github.com/CopilotKit/CopilotKit --- 2. [RAGxplorer](https://github.com/gabrielchua/RAGxplorer) - 視覺化並探索您的 RAG 文件 ---------------------------------------------------------------------------- ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z365bk6wa7i4md3w4b5z.png) RAGxplorer 是一個 Python 工具，用於視覺化機器學習和自然語言處理中的 RAG（檢索增強生成）文件。 以互動方式探索 RAG 流程中使用的文件中的聯繫和內容。 若要設定 RAGxplorer，請在程式碼中定義 RAG 檢查點路徑並安裝指定的依賴項。 ``` import streamlit as st from utils.rag import build_vector_database st.set_page_config(page_title="RAGxplorer", page_icon="🔍") uploaded_file = st.file_uploader("Upload your PDF", type='pdf') query = st.text_input("Enter your query") search = st.button("Search") top_k = st.number_input("Number of Chunks", value=5, min_value=1) st.session_state["chroma"] = build_vector_database(uploaded_file, ...) st.session_state['retrieved_id'] = query_chroma(...) plot_embeddings(...) ``` https://github.com/gabrielchua/RAGxplorer --- 3. [Tavily GPT 研究員](https://github.com/assafelovic/gpt-researcher)- 獲得法學碩士以搜尋網路和資料庫 ----------------------------------------------------------------------------------- ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4accv5t5ep1l1tkj4ze2.png) Tavilly 可讓您將 GPT 支援的研究和內容產生工具新增至您的 React 應用程式中，從而增強其資料處理和內容建立功能。 ``` # Create an assistant assistant = client.beta.assistants.create( instructions=assistant_prompt_instruction, model="gpt-4-1106-preview", tools=[{ "type": "function", "function": { "name": "tavily_search", "description": "Get information on recent events from the web.", "parameters": { "type": "object", "properties": { "query": {"type": "string", "description": "The search query to use. For example: 'Latest news on Nvidia stock performance'"}, }, "required": ["query"] } } }] ) ``` https://github.com/assafelovic/gpt-researcher --- 4. [Pezzo.ai](https://github.com/pezzolabs/pezzo) - 開發者優先的 LLMOps 平台 -------------------------------------------------------------------- ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxvbgi5zkghkb0t64npw.jpeg) 用於管理 OpenAI 通話的集中平台。 優化您的提示和令牌使用。追蹤您的人工智慧使用情況。 免費且易於整合。 ``` const prompt = await pezzo.getPrompt("AnalyzeSentiment"); const response = await openai.chat.completions.create(prompt); ``` https://github.com/pezzolabs/pezzo --- 5. [DeepEval](https://github.com/confident-ai/deepeval) - 評估 LLM、RAG 和微調性能 -------------------------------------------------------------------------- ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dowjupr91bepvopxsudd.jpeg) DeepEval 是一個開源框架，透過將評估視為單元測試來簡化法學碩士的評估。 它提供了評估 LLM 輸出的各種指標，其模組化設計允許開發人員定制他們的評估流程 要使用它，您需要安裝該程式庫、編寫測試案例並執行這些用例來評估您的 LLM 的效能。 ``` Pytest Integration: from deepeval import assert_test from deepeval.metrics import HallucinationMetric from deepeval.test_case import LLMTestCase test_case = LLMTestCase( input="How many evaluation metrics does DeepEval offers?", actual_output="14+ evaluation metrics", context=["DeepEval offers 14+ evaluation metrics"] ) metric = HallucinationMetric(minimum_score=0.7) def test_hallucination(): assert_test(test_case, [metric]) ``` https://github.com/confident-ai/deepeval --- 6. [CopilotTextarea](https://github.com/RecursivelyAI/CopilotKit) - React 應用程式中的 AI 驅動寫作 ---------------------------------------------------------------------------------------- ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2ctyhzd1hytek22s500.gif) 具有 Github CopilotX 功能的任何 React `<textarea>`的直接替代品。 自動完成、插入、編輯。 可以即時或由開發人員提前提供任何上下文。 ``` import { CopilotTextarea } from "@copilotkit/react-textarea"; import { CopilotProvider } from "@copilotkit/react-core"; // Provide context... useMakeCopilotReadable(...) // in your component... <CopilotProvider> <CopilotTextarea/> </CopilotProvider>` ``` https://github.com/RecursivelyAI/CopilotKit --- 7. [SwirlSearch](https://github.com/swirlai/swirl-search) - 人工智慧驅動的搜尋。 ---------------------------------------------------------------------- ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8f4hycstwmx2gev8di7.gif) Swirl Search 是一個開源平台，它使用人工智慧同時搜尋多個資料來源並提供有關這些資料的起草報告。 它可以跨各種來源進行搜尋，包括搜尋引擎、資料庫和雲端服務，並且可以按照儲存庫中提供的安裝說明輕鬆設定。 Swirl Search 建置在 Python/Django 堆疊上，在 Apache 2.0 授權下發布，並作為 Docker 映像提供，使其可供使用者存取和自訂。 https://github.com/swirlai/swirl-search --- 謝謝閱讀！不要忘記為文章加入書籤，給出您的反應，並支持和查看提到的很棒的庫。 乾杯! --- 原文出處：https://dev.to/copilotkit/im-building-an-ai-project-here-are-the-libraries-im-going-to-use-pd0

1個讚   0留言 251瀏覽

專屬雲端的程式語言

> 面向雲程式設計的宣言。 別誤會我的意思，我喜歡雲！它使我能夠建立令人驚嘆的東西，並徹底改變了我使用軟體創新和解決問題的方式。 它是「*新電腦*」、終極電腦、「*無電腦電腦*」。它可以彈性擴展，永遠在線，無處不在，可以做任何事情。這是無邊無際的。它肯定會留在這裡。 但天哪，這絕對不是我們在未來十年內建立雲端應用程式的方式。隨著雲端從“我不想讓伺服器放在我的辦公桌下”發展到“我的應用程式需要30 個不同的託管服務來執行其任務”，我們有點忘記了優秀的開發人員體驗是什麼樣子的。 為雲端建立應用程式有時感覺就像把我孩子的袋子裡未使用的樂高積木灑滿了客廳地板並試圖建造一座城堡。在經歷了撕碎的撲克牌、可怕的芭比娃娃頭和漏電的電池之後，你讀了第一百萬次說明書，卻發現你最終建造的東西與上次建造的東西基本上相同。 分類樂高積木很有趣！和孩子們一起打發時間。它甚至滿足了我的強迫症……但見鬼，這不是我想要建立專業軟體的方式！ *讓我試著描述一下我和我的開發人員朋友正在努力解決的問題。* ### 我想專注於為我的用戶創造價值 當我建立專業軟體時，我希望將大部分時間花在應用程式的*功能*領域，而不是我使用的平台的*非功能*機制。 每次我想要在 AWS Lambda 函數內執行程式碼時，我都必須了解它需要與 tree-shaken 依賴項捆綁在一起，作為 zip 檔案上傳到 S3 並透過 Terraform 部署，這是沒有意義的。或者，為了能夠向 SNS 發布訊息，我的 IAM 策略必須有一個允許對主題的 ARN 執行`sns:Publish`操作的語句。*每個開發人員都需要了解 ARN 是什麼嗎？* 所有這些東西與我試圖為用戶創造的價值沒有任何關係。這是純粹的力學。**我們能擺脫它嗎？** ### 我想獨立 作為一名開發人員，最令人沮喪和最扼殺流程的情況之一是我必須停下來等待某人或某事才能繼續前進。 就像快樂地在空中滑翔，欣賞風景，欣賞優美的背景音樂，突然，*砰！*混凝土牆。 當您為雲端建立應用程式時，這堵混凝土牆有多種形狀和尺寸。是 DevOps 人員排隊；需要更新的是 IAM 策略；是只有外部兼職顧問才知道如何除錯的部署失敗；我們希望內部平台中不斷積壓的缺失旋鈕和 API 能夠改變一切。 這些障礙令人沮喪，因為它們迫使我切換環境，應用「臨時」安全策略，並發明我不想談論的醜陋駭客。這是一個破碎的世界。 我想獨立。我希望能夠把事情做好，保持順其自然。我想一次一點地改善世界，並在完成*後*繼續下一件事。我想要完成任務時的多巴胺激增，而不是另一個未完成的線程的羞恥感。 ### 我想要即時回饋 我說過我想要獨立，但不要誤以為我會寫完美的程式碼。這就是為什麼我想用鉛筆而不是鋼筆寫程式碼。 有些開發人員可以花一整天的時間進行編碼，甚至無需呼叫編譯器，最終，他們進行編譯和部署，然後就可以正常工作了。 我很欽佩他們，但我不是那種類型的開發人員。不，先生。對我來說，這就是迭代、迭代、迭代。我從小處開始，用輕鉛筆畫草圖，看一看，擦掉一堆東西，畫一條更粗的線，後退一步，瞇著眼睛，畫更多，擦掉更多，再看一眼，*沖洗並重複*。 這就是為什麼對我來說，最重要的是迭代速度。我越早執行並測試我的應用程式，我就能越快地返回並迭代。這就是我的流量所在。 當我開始程式設計時，我使用 Borland C++。過去，在 IBM PC AT 機器（TURBO ON）上編譯和執行一個程式大約需要 100ms。**雲端中的平均迭代周期需要幾分鐘。分鐘！有時要幾十分鐘！** 這是當今雲端中迭代的樣子：我對程式碼進行了更改；然後我需要編譯它；將其部署到我的測試帳戶；找到管理控制台的方式來實際觸發它；等待它執行並去搜尋 登入另一個服務。然後我意識到有一個錯誤回應告訴我我很愚蠢，因為我怎麼不知道我必須傳入 Accept-Content: application/json，否則我會得到一些名為「XML」的奇怪結果我不知道該怎麼辦（開個玩笑，XML 很棒，不是真的）。現在一切又重新來過… 因此，您說“編寫單元測試”，以居高臨下的方式試圖證明當前的現實是合理的。 「偉大的開發人員編寫單元測試」。好的！因此，現在我需要獲取我的程式碼，該程式碼進行了大約20 個外部API 呼叫，並透過從過時的文件中複製並貼上它們來以某種方式模擬API 回應，結果卻發現我的請求被拒絕了，因為我缺少了一些隱式操作我的 IAM 安全聲明。我們都去過那裡。 **說實話，給我90年代的開發者經驗**。我想要進行更改，並且希望能夠以互動方式或透過在幾毫秒內的單元測試來測試此更改，並且我想坐在沒有 WiFi 的飛機上執行此操作，好嗎？ （我們在 90 年代沒有 WiFi）。 ### 所以這只是一句吐槽？ 一定不行！我是電腦程式編制員。有時我覺得我從出生起就一直在寫軟體。我一直在社會危險的時期這樣做，當時成為電腦極客並不酷。 我一直喜歡成為開發人員，因為如果我對自己的工具不滿意，我可以製作自己的工具。畢竟，製造工具已經融入了我們的 DNA——人類製造工具的歷史已經超過一百萬年。 我對我的工具不滿意。 2022 年 4 月，我與好朋友、前微軟同事 \[Shai Ber\] 聯手，創立了 \[Wing\]，其使命是***為開發者解鎖雲端***。我們聚集了一群令人難以置信的美麗極客，他們與我們一樣對開發人員體驗和開源充滿熱情，並開始了我們的旅程，使開發人員（即我們自己）能夠解決這些基本問題。 ### 編譯器來救援 那麼我們該如何一次解決所有這些問題呢？ **我們正在為雲端建立一種程式語言。** 「*一種程式語言！？* 」你問。 “*世界上沒有足夠的程式語言嗎？* ”，“*編寫一個編譯器真的很難嗎？* ”， *“開發人員想要學習一門全新語言的機會有多大？* ”，“*為什麼不能你侵入了現有的語言工具鏈，瞇起眼睛，然後就到此為止了嗎？* ” 我不是一個心血來潮就建立程式語言的人。事實上，我花了過去五年的時間建立 \[AWS CDK\]，這是一個*多語言庫*，它允許開發人員使用他們最喜歡的程式語言定義雲端基礎設施，從而解決了我正在談論的一些挑戰。 「滿足開發人員所在的位置」是 AWS 和 CDK 的美好宗旨，它激勵我們建立 \[JSII\] 和 \[constructs\] 等出色的技術。 ***但有時，「他們在哪裡」並不是一個足夠好的模型來創造所需的體驗。*** 用程式碼定義基礎設施確實使我們能夠建立更高層級的抽象，但只要我的應用程式程式碼需要與此基礎設施交互，抽象就變得太\[洩漏\]。我被迫要了解比我需要的更多的知識，而且我必須成為 IAM、VPC、ALB、EBS 等領域的專家，基本上還有比我想記住的更多的 TLA。 我們今天使用的語言都是圍繞著*電腦是一台機器*的想法而設計的。他們已經達到了能夠為我們提供對這些機器的可靠抽象的程度。它們抽象化了 CPU、記憶體、檔案系統、行程管理和網路。作為開發人員，我不必關心文件在磁碟上的佈局方式，甚至不必關心哈希映射需要多少記憶體。我只需寫`readFile()`或`new Dictionary()`即可開始我的一天。是的，對我來說，了解幕後發生的事情並不是一個壞主意，但我並不是被迫這樣做。 大多數這些語言還為我提供類型安全。當我使用錯誤數量的參數呼叫函數時，我的編譯器會對我大喊大叫。我不必等到我的應用程式執行時才意識到我忘記了參數，或者傳遞了錯誤的類型。 **在雲端，我獨自一人**。每當我的程式碼需要與雲端資源或服務互動時（隨著產業的發展，這種情況越來越多）我必須放棄程式語言的舒適性和安全性。我必須跳出機器的邊界，進入網路的狂野西部，而我的編譯器卻一無所知。 突然之間，所有痛苦的來源幾乎變得非常明顯。如今的雲端應用程式只是由互不相連的部分拼湊而成。我有一個用於我的基礎設施的編譯器，另一個用於我的函數，另一個用於我的容器，另一個用於我的 \[CI/CD 管道\]。每個機器都非常認真地對待自己的工作，並讓我在每台機器中保持安全和快樂，但我的應用程式不再在單台機器上執行，我的應用程式在雲端上執行。 ***雲就是計算機。*** ### Wing，一種面向雲端的程式語言 當新的程式設計範式出現時，語言需要時間來迎頭趕上。我曾經喜歡用 C 語言建立物件導向的程式碼，但它是一個有漏洞的抽象。我必須了解物件在記憶體中的佈局方式、\[V 表\] 的工作原理，並記住將物件作為每個函數的第一個參數傳遞。當程式語言開始像一等公民一樣支援物件導向的概念時，這種範式就民主化了，今天大多數開發人員甚至不知道 V 表是什麼，世界一直在旋轉。 **Wing** ，或者***winglang，***如果你想可愛一點的話，它擁有你所期望的現代、面向物件、強類型和通用語言的所有好東西，但它還包括一些額外的原語，旨在支持分佈式雲作為一等公民的基於服務的性質。 ### 一探究竟 我們在 Wing 上的工作已經快一年了，我很高興邀請您查看並告訴我您的想法。雖然仍處於 Alpha 階段，尚未準備好投入生產使用，但已經可以用它來建立一些[實際的應用程式](https://github.com/winglang/research/tree/main/dogfooding)。 https://github.com/winglang/wing --- 原文出處：https://dev.to/winglang/cloud-why-so-difficult-3j33

0個讚   0留言 172瀏覽

開源 SaaS：您無需為 SaaS 模板付費

展示開放 SaaS 🎉 ----------- 我們非常高興推出[Open SaaS](https://opensaas.sh) ，這是適用於 React、NodeJS 和 Prisma 的完全免費、開源、生產級 SaaS 樣板。 在這裡查看它的實際效果： https://www.youtube.com/watch?v=rfO5SbLfyFE Open SaaS 擁有您最近看到的那些付費 SaaS 入門者的所有功能，除了它完全**免費**且**開源**。 **我們覺得為一些需要自己管理的樣板程式碼支付 300-2,000 美元是瘋狂的**。最重要的是，許多樣板文件嚴重依賴第三方服務。再加上託管和其他費用，您需要花費大量資金才能將您的想法推向世界。 **這就是為什麼透過開放 SaaS，我們有意識地決定盡可能嘗試使用開源和免費服務。**例如，我們在[OpenSaaS.sh](http://OpenSaaS.sh)上託管的演示應用程式及其管理儀表板由 Plausible 分析的自架版本提供支援。希望您的 SaaS 具有相同的功能嗎？那麼，Open SaaS 已為您預先配置好！ 此外，Open SaaS 使用的[Wasp 框架](https://wasp.sh)可以為您建立許多功能，例如 Auth 和 Cron 作業，這樣您就不必支付第三方服務費用或完全自己編寫程式碼（我們稍後會更詳細地解釋這一點）。 在我們開始之前... ---------- 悠悠悠悠👋 [![開放 SaaS - 開源且 100% 免費的 React 和 Node.js SaaS 初學者！ |產品搜尋](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=436467&theme=light)](https://www.producthunt.com/posts/open-saas?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-open-saas) Open SaaS[現已在 Product Hunt](https://www.producthunt.com/posts/open-saas)上線！快來支持我們的免費開源倡議🙏 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wppn8mlby0p7h1f8xl6w.png)](https://www.producthunt.com/posts/open-saas) 為什麼我們要建造它......然後免費贈送它 ---------------------- [我們預發布版本](https://devhunt.org/tool/open-saas)中的初步回饋基本上是正面的，但我們也收到了一些問題，例如： - “它會保持免費嗎？” - “您開源這個的動機是什麼？” 所以我們認為我們應該先回答這些問題。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5rac9o1rxgrwfx51mc50.png) 首先，是的，它是 100% 免費和開源的，並將保持這種狀態。 其次，我們相信，開發者、獨立駭客和個人企業家社群的集體知識將比個人或小團體產生更好的樣板。當您從某些開發人員那裡購買SaaS 入門版時，您已經獲得了一個固執己見的堆棧，然後除此之外，您還獲得了按照他們認為最好的方式建置的應用程式- 這可能並不總是最適合*您。* 第三， [Open SaaS](https://opensaas.sh)是[Wasp](https://wasp.sh)的一個專案，一個超強的開源React + NodeJS + Prisma全端框架。我們 Wasp 團隊相信 Wasp 非常適合快速且有效率地建立 SaaS 應用程式，我們希望這個模板能夠證明這一點。另外，身為開發人員，我們從其他開源專案中學到了很多東西，而 Wasp 本身就是一個開源專案。 基本上，我們熱愛開源理念，並且希望將其發揚光大。 🙏 因此，我們希望能夠為開發者社群提供非常有價值的資產，同時宣傳我們的開源全端框架。我們很高興看到社區為其做出貢獻，以便它不斷發展並成為最好的 SaaS 樣板。 開放 SaaS 是由什麼組成的 --------------- 我們在 Open SaaS 上投入了大量的精力，包括[文件](https://docs.opensaas.sh)，以便開發人員可以自信、輕鬆地啟動 SaaS 應用程式。 我們還花了一些時間檢查其他免費的開源 SaaS 啟動器，並希望確保 Open SaaS 具有可立即投入生產的啟動器的所有正確功能，而不顯得臃腫。我們認為我們已經在很大程度上實現了這一點，儘管我們將繼續加入功能並隨著時間的推移進行改進。 目前的主要特點如下： - 🔐 身份驗證（電子郵件驗證、Google、github） - 📩 電子郵件（sendgrid、emailgun、SMTP） - 📈 管理儀表板（合理或谷歌分析） - 🤑 Stripe 付款（只需加入您的訂閱產品 ID） - ⌨️ 端對端類型安全性（無需配置） - 🤖 OpenAI 整合（AI 驅動的範例應用程式） - 📖 Astro 博客 - 🚀 部署在任何地方 - 📄 完整的文件和社群支持 值得深入了解其中每個功能的細節，所以讓我們開始吧。 ### 授權 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbistoghxrxft9zxxra1.png)](https://www.producthunt.com/posts/open-saas) 感謝 Wasp，Open SaaS 附帶了許多可能的身份驗證方法： - 使用者名稱和密碼（最簡單/最容易進行開發測試） - 已驗證電子郵件並重設密碼 - Google 和/或 Github 社群登入 這就是 Wasp 真正發揮作用的地方，因為設定全端 Auth 並取得預先配置的 UI 元件所需要做的就是： ``` //main.wasp app SaaSTemplate { auth: { userEntity: User, methods: { usernameAndPassword: {}, google: {}, gitHub: {}, } } } ``` 嚴重地。就是這樣！ 只需確保您已設定社交身份驗證並擁有 API 金鑰以及定義的`User`和`ExternalAuth`實體，就可以開始了。不用擔心，這部分內容已在[Open SaaS Docs](https://docs.opensaas.sh)中詳細記錄和解釋。 最重要的是，Open SaaS 預先配置了一些範例，說明如何自訂和建立一些真正強大的身份驗證流程。 ### 管理儀表板和分析 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mm6s1c3txxgm49e2k7w.png)](https://www.producthunt.com/posts/open-saas) 透過利用[Wasp 的工作功能](https://wasp-lang.dev/docs/advanced/jobs)，Open SaaS 每小時從 Plausible 或 Google 的網站分析（您的選擇！）和 Stripe 的資料 API 中提取資料，並將其保存到我們的資料庫中。然後，該資料將顯示在我們的管理儀表板上（前往[OpenSaaS.sh](https://OpenSaaS.sh)查看其實際情況）。好的部分是，要為您自己的應用程式存取這些資料，您所要做的就是按照我們的指南獲取分析 API 金鑰，插入提供的腳本，然後就可以開始了！ 再次強調，Wasp 讓整個過程變得非常簡單。透過已經為您定義的查詢 API 和取得我們需要的資料的功能，Open SaaS 然後在`main.wasp`設定檔中使用 Wasp 作業： ``` job dailyStatsJob { executor: PgBoss, perform: { fn: import { calculateDailyStats } from "@server/workers/calculateDailyStats.js" }, schedule: { cron: "0 * * * *" }, entities: [User, DailyStats, Logs, PageViewSource] } ``` 就是這樣！ Wasp 負責為您設定和執行 cron 作業。 ### 條紋支付 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugy3mx9xo1d9i9vfysr7.png)](https://www.producthunt.com/posts/open-saas) 如果您是以前從未建立過自己的 SaaS 的開發人員，那麼與 Stripe 這樣的支付處理器整合可能是您將面臨的少數挑戰之一。 當我建立第一個 SaaS [CoverLetterGPT.xyz](https://coverlettergpt.xyz)時，我的情況就是如此。這實際上是我建造它的主要動機之一；了解如何將 Stripe 支付整合到應用程式以及 OpenAI API 中。 儘管 Stripe 因擁有豐富的文件而聞名，但這個過程仍然令人畏懼。你必須： - 建立正確的產品類型 - 設定 webhook 端點 - 告訴 Stripe 將正確的 Webhook 事件傳送給您 - 正確使用事件 - 處理重複付款和失敗付款 - 在上線之前透過 CLI 進行正確測試 這就是為什麼為您設定 Stripe 訂閱付款是一個巨大的勝利。 但比這更重要的是，為您方便地記錄整個過程！這就是為什麼 Open SaaS[在我們的文件中為您提供方便的 Stripe 指南](https://docs.opensaas.sh)🙂 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uehwot350u3dl02s4w7r.png)](https://www.producthunt.com/posts/open-saas) ### 端對端類型安全 Open SaaS 是使用 Typescript 建置的，因為它是一個全棧應用程式，所以從後端到前端的類型安全可以成為真正的救星。我的意思是，一些[固執己見的堆疊](https://create.t3.gg/)在此基礎上變得非常流行。 幸運的是，Wasp 為您提供開箱即用的端到端類型安全性（無需配置！），因此 Open SaaS 可以輕鬆利用它。 這是一個例子： 1. 讓 Wasp 了解您的伺服器操作： ``` // main.wasp action getResponse { fn: import { getResponse } from "@server/actions.js", entities: [Response] } ``` 2. 輸入並實施您的伺服器操作。 ``` // src/srever/actions.ts type RespArgs = { hours: string; }; const getResponse: GetResponse<RespArgs, string> = async ({ hours }) => { } ``` 3. 導入並在客戶端呼叫。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fah81r1g4bg3vdqapju.png) 客戶端類型將被正確推斷！ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7n04yh6de9slhhnjrgf3.png) ### AI 驅動的範例應用程式（附有 OpenAI API） [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbbc2gkxbxjl3q2y01a3.png)](https://www.producthunt.com/posts/open-saas) 人工智慧正在使新的應用程式創意成為可能，這也是我們看到開發人員對建立 SaaS 應用程式的興趣重新抬頭的部分原因。正如我上面提到的，我建造的第一個 SaaS 應用程式[CoverLetterGPT](https://coverlettergpt.xyz)是「GPT 包裝器」之一，我很自豪地說它帶來了約350 美元MRR（每月經常性收入）的可觀被動收入。 我個人認為，我們在軟體開發方面處於最佳狀態，開發新的、有利可圖的人工智慧應用程式有很大的潛力，尤其是「獨立駭客」和「個人企業家」。 這就是 Open SaaS 推出 AI 調度助手演示應用程式的原因。您輸入任務及其分配的時間，AI Scheduler 會為您的一天建立詳細的計劃。 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4suf7g9jm5w93ri3bqx.png)](https://www.producthunt.com/posts/open-saas) 在幕後，這是使用 OpenAI 的 API 為每個任務分配優先級，並將它們分解為詳細的子任務，包括喝咖啡休息時間！它還利用 OpenAI 的函數呼叫功能以使用者定義的 JSON 物件形式回傳回應，以便客戶端每次都能正確使用它。此外，我們計劃在未來加入開源法學碩士，敬請期待！ 示範版 AI Scheduler 可協助開發人員學習如何有效使用 OpenAI API，並激發一些 SaaS 應用程式創意！ ### 隨處部署。容易地。 許多流行的 SaaS 新創公司都使用依賴託管的框架，這意味著您只能依賴一個提供者進行部署。雖然這些都是簡單的選擇，但它可能並不總是最適合您的應用程式。 Wasp 為您提供了部署全端應用程式的無限可能性： - 使用`wasp deploy`一鍵部署到[Fly.io](http://Fly.io) - 使用`wasp build`並部署 Dockerfiles 和客戶端，無論您喜歡什麼！ `wasp deploy`的優點在於它會自動產生和部署您的資料庫、伺服器和用戶端，並為您設定環境變數。 Open SaaS 還內建了環境變數和常數驗證器，以確保您已正確設定部署所需的所有內容，以及文件中的部署指南 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fihbij250xtbdtjbjoks.png)](https://www.producthunt.com/posts/open-saas) 最後，您擁有自己的程式碼，並且可以自由地將其部署到任何地方，而無需受供應商鎖定。 幫助我們，幫助你 -------- [![開放 SaaS - 開源且 100% 免費的 React 和 Node.js SaaS 初學者！ |產品搜尋](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=436467&theme=light)](https://www.producthunt.com/posts/open-saas?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-open-saas) 想支持我們的免費開源計畫嗎？那麼現在就去[Product Hunt 上](https://www.producthunt.com/posts/open-saas)向我們提供一些支援吧！ 🙏 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wppn8mlby0p7h1f8xl6w.png)](https://www.producthunt.com/posts/open-saas) 現在就開始建立您的 SaaS！ --------------- 我們希望 Open SaaS 能夠讓更多的開發人員能夠發布他們的想法和副專案。我們也希望從開發人員那裡獲得一些回饋和意見，以便我們能夠使其成為最好的 SaaS 樣板啟動器。 因此，如果您有任何意見或發現任何錯誤，請[在此處提交問題](https://github.com/wasp-lang/open-saas/issues)。 如果您發現 Open SaaS 和/或 Wasp 很有用，最簡單的支援方法就是給我們一顆星： - 為[Open SaaS 儲存庫](https://github.com/wasp-lang/open-saas)加註星標 - 給[黃蜂倉庫](https://github.com/wasp-lang/wasp)加註星標 --- 原文出處：https://dev.to/wasp/you-dont-need-to-pay-for-saas-boilerplates-open-saas-56lj

0個讚   0留言 243瀏覽

資料庫 101：如何為 100 萬玩家的遊戲建立排行榜模型。

有沒有想過像**《英雄聯盟》** 、 **《要塞英雄**》甚至**《Rockband》**這樣的遊戲是如何建立排行榜模型的？在本文中，我們將了解如何正確建模模式以以極其高效的方式處理它們！ 如果您剛開始使用一般資料庫或資料庫，您可能需要閱讀我的第一篇文章[《資料庫 101：初學者的資料一致性](https://dev.to/danielhe4rt/database-101-why-so-interesting-1344)》。那篇文章記錄了我自己對有多少資料庫範例的探索，因為我的眼光遠遠超出了我以前僅使用 SQL 和 MySQL 的經驗。我正在**資料庫 101**系列中追蹤我的研究。 > 距離我發表本系列的第一篇文章已經快一年了！感謝您在我學習主題時與我在一起。您的評論和想法總是非常有幫助！ 1. 序言 ----- ![YARG 遊戲玩法截圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvensca2v67ma66vssnh.png) 從我還是個孩子的時候起，就像大多數普通開發者一樣，我就對遊戲及其製作方式著迷。說到這裡，我要跟大家介紹一下我兒時最喜歡的遊戲：《吉他英雄3：搖滾傳奇》。 十多年後，我決定嘗試在開源環境中為一些遊戲做出貢獻，例如[rust-ro（Rust Ragnarok Emulator）](https://github.com/nmeylan/rust-ro)以及本文的主角： [YARG（Yet Another Rhythm Game）](https://github.com/YARC-Official/YARG) 。 YARG 實際上是另一個節奏遊戲，但這個專案的不同之處在於它是完全**開源的**，他們聯合了遊戲開發和設計方面的傳奇貢獻者來讓這個專案能夠運作。 突然之間，這款遊戲被 Twitch 上的 Guitar Hero/Rockband 主播們所採用並玩，我想：好吧，這是一個開源專案，所以也許我可以利用我的資料庫技能來建立一個**速度極快的排行榜**或儲存過去的比賽。 一開始只是在他們的 Discord 上進行了一次簡單的聊天，後來變成了關於如何讓這個專案更快發展的長時間討論。 然後我決定和我的老闆談談，問他我是否可以和 YARG 的人一起工作，條件是建立一些足夠酷的東西來實現[ScyllaDB（NoSQL 寬列資料庫）](https://scylladb.com/) ，因為我在那裡擔任開發倡導者。您不會相信ScyllaDB帶來的簡單性和可擴展性如何完美契合YARG.in的需求！ 無論如何，談話是廉價的。讓我向您展示一些程式碼和概念！ 2.QDD－查詢驅動的資料建模 --------------- ![NoSQL 與關係型資料庫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ivkj9j8ni2fakkctx53n.png) 當我們談論使用**NoSQL**進行開發時，大多數情況下我們應該理解，根據範例（文件、圖形、寬列等），您應該先了解**要執行哪個查詢**。 在 MySQL 中，主要目標是了解一致性，而在 Scylla 中，您應該專注於查詢並基於該查詢建立模式。 在這個專案中，我們將處理兩種類型的範例，它們是： - 核心價值 - 寬列（聚類） 現在讓我們來談談我們建模的查詢/功能。 ### 2.1 功能：儲存匹配 ![提交詳情 YARG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jaw4q7349upgrsa5p5g3.png) 每次完成 YARG 遊戲時，最有趣的事情就是提交您的分數以及許多其他遊戲內指標。 基本上它將是基於主索引的單一查詢，僅此而已。 ``` SELECT score, stars, missed_notes, instrument, ... FROM leaderboard.submisisons WHERE submission_id = 'some-uuid-here-omg' ``` ### 2.2 功能：排行榜 ![排行榜 Figma 文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69jp0vgxef71titt9ks0.png) 現在我們的主要目標是：一個超酷的**排行榜**，在良好的資料建模之後你不需要關心它。排行榜是按歌曲計算的，因此每次您播放特定歌曲時，您的最佳成績都會被保存並排名。 然而，這個介面有一個重要的點，那就是有過濾器來準確地知道要帶來「哪個」排行榜： - 歌曲 ID：必填 - 儀器：必填 - 修飾符：必需 - 難度：必填 - 玩家 ID：可選 - 分數：可選 想像一下我們的查詢如下所示，它會傳回按分數降序排列的結果： ``` SELECT player_id, score, ... FROM leaderboard.song_leaderboard WHERE instrument = 'guitar' AND difficulty = 'expert' AND modifiers = {'none'} AND track_id = 'dani-california' LIMIT 100; -- player_id | score ----------------+------- -- tzach | 12000 -- danielhe4rt | 10000 -- kadoodle | 9999 ----------------+------- ``` 現在我們知道了將在這裡使用的功能，但是您能想像最終的模式將如何嗎？ 不？好的，讓我來幫助你！ 3. 資料建模時間！ ---------- 是時候深入研究 ScyllaDB 的資料建模並更好地了解如何擴展它了。 ### 3.1 - 匹配建模 ![遊戲結束畫面](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6kedk7iu67zg7myj9mp.png) 首先，讓我們先來了解遊戲本身： - 這是一個節奏遊戲； - 您一次播放一首特定的歌曲； - 您可以在遊戲前啟動“修改器”，讓您的生活變得更輕鬆或更困難； - 您必須選擇一種樂器（例如吉他、鼓、貝斯和麥克風）。 - 遊戲玩法的各個方面都會被跟踪，例如： - Score; - Missed notes; - Overdrive count; - Play speed (1.5x ~ 1.0x); - Date/time of gameplay; - And other cool stuff. 考慮到這一點，我們可以輕鬆地開始我們的資料建模，這將變成這樣： ``` CREATE TABLE IF NOT EXISTS leaderboard.submissions ( submission_id uuid, track_id text, player_id text, modifiers frozen<set<text>>, score int, difficulty text, instrument text, stars int, accuracy_percentage float, missed_count int, ghost_notes_count int, max_combo_count int, overdrive_count int, speed int, played_at timestamp, PRIMARY KEY (submission_id, played_at) ); ``` 讓我們跳過所有`int/text`值並跳到`set<text>` 。 **集合**類型可讓您儲存特定類型的專案清單。我決定使用這個清單來儲存修飾符，因為它非常適合。看看查詢是如何執行的： ``` INSERT INTO leaderboard.submissions ( submission_id, track_id, modifiers, played_at ) VALUES ( some-cool-uuid-here, 'starlight-muse' {'all-taps', 'hell-mode', 'no-hopos'}, '2024-01-01 00:00:00' ); ``` 使用這種類型，您可以輕鬆儲存專案清單以供以後檢索。 另一個很酷的資訊是這個查詢是一個鍵值對！這意味著什麼？ 由於您始終僅透過`submission_id`來查詢它，因此它可以歸類為鍵值。 ### 3.2 排行榜建模 ![排行榜濾鏡 Figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lpmzngra3jk5ipf3os3i.png) 在本文的這一部分中，您將學習一些很酷的寬列資料庫概念。 在我們的排行榜查詢中，如前所述，我們總是需要在 WHERE 子句中使用一些動態值，這意味著這些值將屬於**分區鍵**，而**聚類鍵**將具有可以是「可選」的值。 **分區鍵**是基於您新增的用於標識值**的欄位組合的**雜湊。你明白了嗎？不？好吧，我也花了一段時間才明白這一點，但讓我向你展示一些東西： 假設您玩了`Starlight - Muse` 100 次。如果您要查詢此訊息，將透過`score`或`player_id`等聚類鍵區分出100倍不同的結果。 ``` SELECT player_id, score --- FROM leaderboard.song_leaderboard WHERE track_id = 'starlight-muse' LIMIT 100; ``` 如果有 1.000.000 個玩家播放這首歌，你的查詢會變得很慢，並且將來會成為一個問題，因為你的分區鍵只包含一個字段，即`track_id` 。 但是，如果您向**Partition Key**加入更多字段，例如玩遊戲之前的強制性內容，也許我們可以縮小這些可能性以實現更快的查詢。現在你看到大局了嗎？加入諸如**“樂器”** 、 **“難度**”和**“修改器”等**欄位將為您提供一種均勻分割有關特定曲目的資訊的方法。 讓我們想像一些簡單的數字： ``` -- Query Partition ID: '1' SELECT player_id, score, ... FROM leaderboard.song_leaderboard WHERE instrument = 'guitar' AND difficulty = 'expert' AND modifiers = {'none'} AND -- Modifiers Changed track_id = 'starlight-muse' LIMIT 100; -- Query Partition ID: '2' SELECT player_id, score, ... FROM leaderboard.song_leaderboard WHERE instrument = 'guitar' AND difficulty = 'expert' AND modifiers = {'all-hopos'} AND -- Modifiers Changed track_id = 'starlight-muse' LIMIT 100; ``` 因此，如果您以特定形狀建立查詢，它將始終查找特定令牌並根據這些特定分區鍵檢索資料。 我們來看看最終的建模，談談聚類鍵和應用層： ``` CREATE TABLE IF NOT EXISTS leaderboard.song_leaderboard ( submission_id uuid, track_id text, player_id text, modifiers frozen<set<text>>, score int, difficulty text, instrument text, stars int, accuracy_percentage float, missed_count int, ghost_notes_count int, max_combo_count int, overdrive_count int, speed int, played_at timestamp, PRIMARY KEY ((track_id, modifiers, difficulty, instrument), score, player_id) ) WITH CLUSTERING ORDER BY (score DESC, player_id ASC); ``` 分區鍵的定義如上所述，由我們**所需的參數**組成，例如：track\_id、修飾符、難度和樂器。在**聚類鍵**上，我們新增了**Score**和**player\_id** 。 > 請注意，預設情況下，聚類欄位按`score DESC`排序，以防萬一玩家得分相同，選擇獲勝者的標準將按`alphabetical` ¯\\\_(ツ)\_/¯。 首先很容易理解的是，我們**每個玩家只有一個分數**，但透過這種建模，如果玩家以不同的分數兩次經歷同一條賽道，它將產生兩個不同的條目。 ``` INSERT INTO leaderboard.song_leaderboard ( track_id, player_id, modifiers, score, difficulty, instrument, stars, played_at ) VALUES ( 'starlight-muse', 'daniel-reis', {'none'}, 133700, 'expert', 'guitar', '2023-11-23 00:00:00' ); INSERT INTO leaderboard.song_leaderboard ( track_id, player_id, modifiers, score, difficulty, instrument, stars, played_at ) VALUES ( 'starlight-muse', 'daniel-reis', {'none'}, 123700, 'expert', 'guitar', '2023-11-23 00:00:00' ); SELECT player_id, score FROM leaderboard.song_leaderboard WHERE instrument = 'guitar' AND difficulty = 'expert' AND modifiers = {'none'} AND track_id = 'starlight-muse' LIMIT 2; -- player_id | score ----------------+------- -- daniel-reis | 133700 -- daniel-reis | 123700 ----------------+------- ``` 那我們要如何解決這個問題呢？嗯，這本身不是問題。這是一個特點！哈哈 身為開發人員，您必須根據專案需求建立自己的業務規則，這也不例外。我這麼說是什麼意思？ 您可以在插入新條目之前執行簡單的**DELETE**查詢，並確保在該特定**分區鍵**組內， **player\_id**中的特定資料不會低於新**分數**。 ``` -- Before Insert the new Gampleplay DELETE FROM leaderboard.song_leaderboard WHERE instrument = 'guitar' AND difficulty = 'expert' AND modifiers = {'none'} AND track_id = 'starlight-muse' AND player_id = 'daniel-reis' AND score <= 'your-new-score-here'; -- Now you can insert the new payload... ``` 這樣我們就完成了簡單的排行榜系統，該系統與 YARG 中執行的系統相同，也可以在每秒數百萬個條目的遊戲中使用:D 4. 如何為 YARG 做出貢獻 ---------------- 這是我邀請您為這個精彩的開源專案做出貢獻的文字部分！ 今天，我們正在為所有玩家建立一個全新的平台，使用： - 遊戲：Unity3d [（儲存庫）](https://github.com/YARC-Official/YARG) - 前端：NextJS [（儲存庫）](https://github.com/YARC-Official/yarg.in) - 後端：Laravel 10.x [（儲存庫）](https://github.com/YARC-Official/yarg-api) 我們將需要盡可能多的開發人員和測試人員與主要貢獻者一起討論遊戲的未來實現！ ![YARG 不和諧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5b2pdxvrth2o6jfmada.png) 首先，請確保加入他們的[Discord 社群](https://discord.gg/sqpu4R552r)。在進入開發板之前，所有技術討論都會在社群後台進行。 此外，在 Discord 之外，YARG 社群主要關注[EliteAsian](https://twitter.com/EliteAsian123) （核心貢獻者和專案所有者）Twitter 帳戶的開發展示。一定要跟著他去那裡。 https://twitter.com/EliteAsian123/status/1736149319382671766 僅供參考，遊戲的**首席美術師**（又稱[Kadu）](https://twitter.com/kaduyarg)也是**Elgato**的**廣播專家**和**產品創新**開發人員，曾與以下串流媒體合作： - 忍者 - 納德肖特 - 石山64 - 以及傳奇 DJ Marshmello。 Kadu 也使用他的 Twitter 分享一些見解以及 YARG 新功能和實驗的早期預覽。所以，別忘了在 Twitter 上關注他！ https://twitter.com/kaduyarg/status/1689489132060397568 以下是一些有用的連結，可以幫助您了解有關該專案的更多訊息： - [官方網站](https://yarg.in/) - [Github 儲存庫](https://github.com/YARC-Official/YARG) - [任務板](https://yarg.youtrack.cloud/agiles/147-7/current) > 有趣的事實：YARG 受到了 Guitar Hero 專案負責人[Brian Bright](https://twitter.com/BrianBright/status/1744533504531317194)的關注，他喜歡該專案的開源特性。太棒了，對吧？ 5. 結論 ----- 資料建模有時具有挑戰性，這項研究花了 3 個月的時間研究了許多新的 ScyllaDB 概念，並與我在 Twitch 的社群一起進行了大量測試。 我還發布了[遊戲排行榜演示](https://github.com/scylladb/gaming-leaderboard-demo)，您可以在其中獲得有關如何使用**NextJS**和**ScyllaDB**實現同一專案的一些見解！ 另外，如果您喜歡 ScyllaDB 並想了解更多訊息，我強烈建議您觀看我們的免費[大師班課程](https://lp.scylladb.com/masterclass-ondemand-main?siteplacement=navigation)或存取[ScyllaDB 大學](https://university.scylladb.com/)！ 不要忘記喜歡這篇文章，在社交上關注我並填滿你的水瓶 xD 下一篇文章見！ [在推特上關注我](https://twitter.com/danielhe4rt) [在 Github 上關注我](https://twitter.com/danielhe4rt) [在 Github 上關注我](https://twitter.com/danielhe4rt) [關注並訂閱我的 Twitch 頻道](https://twitch.tv/danielhe4rt) --- 原文出處：https://dev.to/danielhe4rt/database-101-how-to-model-leaderboards-for-1m-players-game-2pfa

0個讚   0留言 218瀏覽

🪄與您的簡歷製作者聊天 - 使用 Next.js、OpenAI 和 CopilotKit 📑✨

#TL;博士 在本文中，您將了解如何使用 Nextjs、CopilotKit 和 OpenAI 建立人工智慧驅動的簡歷產生器應用程式。 我們將涵蓋： - 利用 ChatGPT 撰寫履歷和求職信 📑 - 透過與履歷聊天逐漸完善你的履歷💬 - 將您的履歷和求職信匯出為 PDF 🖨️ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxzcx6jqet2anmr2pu6c.gif) --- ## CopilotKit：建構深度整合的應用內人工智慧聊天機器人 💬 只是簡單介紹一下我們的背景。 CopilotKit 是[開源 AI 副駕駛平台。](https://github.com/CopilotKit/CopilotKit) 我們可以輕鬆地將強大的 AI 聊天機器人整合到您的 React 應用程式中。完全可定制和深度集成。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wf9zcyvtu9q293uej2n.gif) {% cta https://github.com/CopilotKit/CopilotKit %} Star CopilotKit ⭐️ {% endcta %} 現在回到文章。 --- ## **先決條件** 要開始學習本教程，您需要在電腦上安裝以下軟體： - 文字編輯器（例如 Visual Studio Code） - 節點.js - 套件管理器 ## **使用 NextJS 建立簡歷應用程式前端** **步驟 1：** 開啟命令提示字元並執行下列命令。 ``` npx create-next-app@latest ``` --- **第 2 步：** 系統將提示您選擇一些選項，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvk0mgct4ypra7ao9u18.png) **步驟 3：** 使用您選擇的文字編輯器開啟新建立的 Nextjs 專案。然後，在命令列上執行以下命令，以使用 Tailwind CSS 安裝帶有 NextJS 的 Preline UI。依照[本指南](https://preline.co/docs/frameworks-nextjs.html)完成 Preline 設定。 ``` npm install preline ``` --- **步驟4：** 在resume/app/page.tsx檔案中，新增以下程式碼內容。 ``` export default function Home() { return ( <> <header className="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-slate-900 bg-gradient-to-b from-violet-600/[.15] via-transparent text-sm py-3 sm:py-0 dark:bg-gray-800 dark:border-gray-700"> <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"> <a className="flex-none text-xl text-gray-200 font-semibold dark:text-white py-8" href="#" aria-label="Brand"> ResumeBuilder </a> </div> </nav> </header> {/* <!-- Hero --> */} <div className="bg-slate-900 h-screen"> <div className="bg-gradient-to-b from-violet-600/[.15] via-transparent"> <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-24 space-y-8"> {/* <!-- Title --> */} <div className="max-w-3xl text-center mx-auto pt-10"> <h1 className="block font-medium text-gray-200 text-4xl sm:text-5xl md:text-6xl lg:text-7xl"> Craft A Compelling Resume With AI Resume Builder </h1> </div> {/* <!-- End Title --> */} <div className="max-w-3xl text-center mx-auto"> <p className="text-lg text-gray-400"> ResumeBuilder helps you create a resume that effectively highlights your skills and experience. </p> </div> {/* <!-- Buttons --> */} <div className="text-center"> <a className="inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-blue-600 to-violet-600 shadow-lg shadow-transparent hover:shadow-blue-700/50 border border-transparent text-white text-sm font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white py-3 px-6 dark:focus:ring-offset-gray-800" href="#"> Get started <svg className="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m9 18 6-6-6-6" /> </svg> </a> </div> {/* <!-- End Buttons --> */} </div> </div> </div> {/* <!-- End Hero --> */} </> ); } ``` **步驟 5：** 在命令列上執行命令 *npm run dev*。導航至 http://localhost:3000/，您應該會看到新建立的 NextJS 專案。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56ymnb9iir7z14bx4ofm.png) --- ## 使用 GitHub GraphQL 從 GitHub 取得履歷資料 **步驟 1：** 使用下列命令安裝 Axios HTTP 用戶端。 ``` npm i axios ``` **步驟 2：** 在應用程式資料夾中，建立一個名為 API 的資料夾。然後，在 API 資料夾中建立一個名為 GitHub 的資料夾。在GitHub資料夾中建立一個名為route.ts的檔案並加入以下程式碼。 ``` import { NextResponse } from "next/server"; import axios from "axios"; // Environment variables for GitHub API token and user details const GITHUB_TOKEN = "Your GitHub personal access token"; const GITHUB_USERNAME = "Your GitHub account username"; // Axios instance for GitHub GraphQL API const githubApi = axios.create({ baseURL: "https://api.github.com/graphql", headers: { Authorization: `bearer ${GITHUB_TOKEN}`, "Content-Type": "application/json", }, }); // GraphQL query to fetch user and repository data const getUserAndReposQuery = ` query { user(login: "${GITHUB_USERNAME}") { name email company bio repositories(first: 3, orderBy: {field: CREATED_AT, direction: DESC}) { edges { node { name url description createdAt ... on Repository { primaryLanguage{ name } stargazers { totalCount } } } } } } } `; // API route to handle resume data fetching export async function GET(request: any) { try { // Fetch data from GitHub const response = await githubApi.post("", { query: getUserAndReposQuery }); const userData = response.data.data.user; // Format resume data const resumeData = { name: userData.name, email: userData.email, company: userData.company, bio: userData.bio, repositories: userData.repositories.edges.map((repo: any) => ({ name: repo.node.name, url: repo.node.url, created: repo.node.createdAt, description: repo.node.description, language: repo.node.primaryLanguage.name, stars: repo.node.stargazers.totalCount, })), }; // Return formatted resume data return NextResponse.json(resumeData); } catch (error) { console.error("Error fetching data from GitHub:", error); return NextResponse.json({ message: "Internal Server Error" }); } } ``` **步驟 3：** 在應用程式資料夾中，建立一個名為 Components 的資料夾。然後，在元件資料夾中建立一個名為 githubdata.tsx 的檔案並新增以下程式碼。 ``` "use client"; import React, { useEffect, useState } from "react"; import axios from "axios"; // Resume data interface interface ResumeData { name: string; email: string; company: string; bio: string; repositories: { name: string; url: string; created: string; description: string; language: string; stars: number; }[]; } export const useGithubData = () => { const [resumeData, setResumeData] = useState<ResumeData | null>(null); // Fetch resume data from API useEffect(() => { axios .get("/api/github") .then((response) => { setResumeData(response.data); }) }, []); return { resumeData, }; } ``` --- ## 建立求職信和履歷功能 **步驟 1：** 透過在命令列上執行以下命令來安裝 CopilotKit 前端軟體包。 ``` npm i @copilotkit/react-core @copilotkit/react-ui @copilotkit/react-textarea ``` **步驟2：** 在元件資料夾中建立一個名為resume.tsx 的檔案。然後在檔案頂端匯入 useMakeCopilotReadable、useMakeCopilotActionable 和 useGithubData 自訂掛鉤，如下所示。 ``` import React, { useState } from "react"; import { useGithubData } from "./githubdata"; import { useMakeCopilotReadable, useMakeCopilotActionable, } from "@copilotkit/react-core"; ``` **第 3 步：** 建立一個名為 CoverLetterAndResume 的元件。在元件內部，使用 useGithubData 掛鉤檢索從 GitHub 取得的資料。然後，宣告一個名為 createCoverLetterAndResume 的狀態變數和一個用於更新它的名為 setCreateCoverLetterAndResume 的函數。使用包含 letter 和 resume 兩個屬性的物件初始化 useState，如下所示。 ``` export const CoverLetterAndResume = () => { const {resumeData } = useGithubData(); const [createCoverLetterAndResume, setCreateCoverLetterAndResume] = useState({ letter: "", resume: "" }); } ``` **步驟 4：** 使用 useMakeCopilotReadable 掛鉤將從 GitHub 取得的資料新增為應用程式內聊天機器人的上下文。 ``` useMakeCopilotReadable(JSON.stringify(resumeData)); ``` **步驟 5：** 使用 useMakeCopilotActionable 掛鉤設定一個名為 createCoverLetterAndResume 的操作，其中包含描述和實作函數，該函數使用提供的求職信和簡歷更新 createCoverLetterAndResume 狀態，如下所示。 ``` useMakeCopilotActionable( { name: "createCoverLetterAndResume", description: "Create a cover letter and resume for a software developer job application.", argumentAnnotations: [ { name: "coverLetterMarkdown", type: "string", description: "Markdown text for a cover letter to introduce yourself and briefly summarize your professional background as a software developer.", required: true, }, { name: "resumeMarkdown", type: "string", description: "Markdown text for a resume that displays your professional background and relevant skills.", required: true, }, ], implementation: async (coverLetterMarkdown, resumeMarkdown) => { setCreateCoverLetterAndResume((prevState) => ({ ...prevState, letter: coverLetterMarkdown, resume: resumeMarkdown, })); }, }, [] ); ``` **步驟 6：** 在 CoverLetterAndResume 元件外部，建立一個名為 CoverLetterResume 的元件，用於在 Web 應用程式 UI 上顯示求職信和履歷。 ``` type CoverLetterResumeProps = { letter: string; resume: string; }; const CoverLetterResume = ({ letter, resume }: CoverLetterResumeProps) => { return ( <div className="px-4 sm:px-6 lg:px-8 bg-slate-50 py-4"> <div className="sm:flex sm:items-center"> <div className="sm:flex-auto"> <h1 className="text-3xl font-semibold leading-6 text-gray-900"> ResumeBuilder </h1> </div> </div> {/* Cover Letter Start */} <div className="mt-8 flow-root bg-slate-200"> <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <div> <h2 className="text-lg font-semibold leading-6 text-gray-900 mb-4 p-2"> Cover Letter </h2> <div className="min-w-full divide-y divide-gray-300 p-2"> {/* <Thead /> */} <div className="divide-y divide-gray-200 bg-white p-2"> <ReactMarkdown>{letter}</ReactMarkdown> </div> </div> </div> </div> </div> </div> {/* Cover Letter End */} {/* Cover Letter Preview Start */} <div className="mt-8 flow-root bg-slate-200"> <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <div> <h2 className="text-lg font-semibold leading-6 text-gray-900 mb-4 p-2"> Cover Letter Preview </h2> <div className="min-w-full divide-y divide-gray-300"> {/* <Thead /> */} <div className="divide-y divide-gray-200 bg-white"> <textarea className="p-2" id="coverLetter" value={letter} rows={20} cols={113} /> </div> </div> </div> </div> </div> </div> {/* Cover Letter Preview End */} {/* Resume Start */} <div className="mt-8 flow-root bg-slate-200"> <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <h2 className="text-lg font-semibold leading-6 text-gray-900 mb-4 p-2"> Resume </h2> <div className="min-w-full divide-y divide-gray-300"> {/* <Thead /> */} <div className="divide-y divide-gray-200 bg-white"> <ReactMarkdown>{resume}</ReactMarkdown> </div> </div> </div> </div> </div> {/* Resume End */} {/* Cover Letter Preview Start */} <div className="mt-8 flow-root bg-slate-200"> <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <div> <h2 className="text-lg font-semibold leading-6 text-gray-900 mb-4 p-2"> Cover Letter Preview </h2> <div className="min-w-full divide-y divide-gray-300"> {/* <Thead /> */} <div className="divide-y divide-gray-200 bg-white"> {/* {letter} */} {/* <ReactMarkdown>{letter}</ReactMarkdown> */} <textarea className="p-2" id="resume" value={resume} rows={20} cols={113} /> </div> </div> </div> </div> </div> </div> {/* Cover Letter Preview End */} </div> ); }; ``` **第7步：**然後返回CoverLetterAndResume元件內的CoverLetterResume元件，如下圖所示。 ``` return <CoverLetterResume {...createCoverLetterAndResume}/>; ``` **第8步：** 在應用程式資料夾中建立一個名為resumeandcoverletter的資料夾。然後，建立一個名為 page.tsx 的檔案並新增以下程式碼。 ``` "use client"; import { CopilotProvider } from "@copilotkit/react-core"; import { CopilotSidebarUIProvider } from "@copilotkit/react-ui"; import "@copilotkit/react-textarea/styles.css"; // also import this if you want to use the CopilotTextarea component import "@copilotkit/react-ui/styles.css"; // also import this if you want to use the chatbot component import React, { useEffect, useState } from "react"; import { CoverLetterAndResume } from "../components/resume"; function buildResume () { return ( <CopilotProvider chatApiEndpoint="./../api/copilotkit/chat"> <CopilotSidebarUIProvider> <CoverLetterAndResume /> </CopilotSidebarUIProvider> </CopilotProvider> ); } export default buildResume; ``` **步驟 9：** 使用下列指令安裝 openai 軟體套件。 ``` npm i openai ``` **步驟 10：** 在應用程式資料夾中，建立一個名為 API 的資料夾。然後，在 API 資料夾中建立一個名為 copilotkit 的資料夾。在 copilotkit 資料夾中，建立一個名為 chat 的資料夾。然後，在聊天資料夾中建立一個名為route.ts的檔案並新增以下程式碼。 ``` import OpenAI from "openai"; const openai = new OpenAI({ apiKey: "Your ChatGPT API key", }); export const runtime = "edge"; export async function POST(req: Request): Promise<Response> { try { const forwardedProps = await req.json(); const stream = openai.beta.chat.completions .stream({ model: "gpt-4-1106-preview", ...forwardedProps, stream: true, }) .toReadableStream(); return new Response(stream); } catch (error: any) { return new Response("", { status: 500, statusText: error.error.message }); } } ``` **步驟 11：** 在應用程式資料夾中的 page.tsx 檔案中，在「開始」按鈕中新增一個連結，用於導航到簡歷和求職信頁面，如下所示。 ``` <div className="text-center"> <Link className="inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-blue-600 to-violet-600 shadow-lg shadow-transparent hover:shadow-blue-700/50 border border-transparent text-white text-sm font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white py-3 px-6 dark:focus:ring-offset-gray-800" href="/resumeandcoverletter"> Get started <svg className="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m9 18 6-6-6-6" /> </svg> </Link> </div> ``` **第12步：**導航至http://localhost:3000/，點擊「開始」按鈕，您將被重新導向到與聊天機器人整合的履歷和求職信頁面，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqfjykc75pherkjxut4p.png) **第 13 步：** 向右側的聊天機器人發出諸如“建立求職信和簡歷”之類的提示。聊天機器人將開始產生回應，完成後，它將在頁面左側顯示產生的求職信和履歷，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7muhhi4a85ol0ddyi1l.png) --- ## 建立更新求職信功能 **第 1 步：** 宣告一個名為 updateLetter 的變數，用於保存先前產生的求職信。 ``` const updateLetter = createCoverLetterAndResume.letter; ``` **步驟 2：** 使用 useMakeCopilotReadable 掛鉤新增 updateLetter 作為應用程式內聊天機器人的上下文。 ``` useMakeCopilotReadable("Cover Letter:" + JSON.stringify(updateLetter)); ``` **步驟 3：** 使用 useMakeCopilotActionable 掛鉤設定一個名為 updateCoverLetter 的操作，其中包含描述和實作函數，該函數使用提供的求職信更新來更新 createCoverLetterAndResume 狀態，如下所示。 ``` useMakeCopilotActionable( { name: "updateCoverLetter", description: "Update cover letter for a software developer job application.", argumentAnnotations: [ { name: "updateCoverLetterMarkdown", type: "string", description: "Update markdown text for a cover letter to introduce yourself and briefly summarize your professional background as a software developer.", required: true, }, { name: "resumeMarkdown", type: "string", description: "Markdown text for a resume that displays your professional background and relevant skills.", required: true, }, ], implementation: async (updatedCoverLetterMarkdown) => { setCreateCoverLetterAndResume((prevState) => ({ ...prevState, letter: updatedCoverLetterMarkdown, })); }, }, [] ); ``` ** 步驟 4：** 給聊天機器人一個提示，例如“更新求職信並加入我正在申請 CopilotKit 的技術寫作職位。”如下圖所示，您可以看到求職信已更新。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4dkm8zacgbmn19j9qtw6.png) --- ## 建立更新復原功能 **第 1 步：** 宣告一個名為 updateResume 的變數，用於保存先前產生的求職信。 ``` const updateResume = createCoverLetterAndResume.resume; ``` **步驟 2：** 使用 useMakeCopilotReadable 掛鉤新增 updateResume 作為應用程式內聊天機器人的上下文。 ``` useMakeCopilotReadable("Resume:" + JSON.stringify(updateResume)); ``` **步驟 3：** 使用 useMakeCopilotActionable 掛鉤設定一個名為 updateResume 的操作，其中包含描述和實作函數，該函數使用提供的求職信更新來更新 createCoverLetterAndResume 狀態，如下所示。 ``` useMakeCopilotActionable( { name: "updateResume", description: "Update resume for a software developer job application.", argumentAnnotations: [ { name: "updateResumeMarkdown", type: "string", description: "Update markdown text for a resume that displays your professional background and relevant skills.", required: true, }, ], implementation: async (updatedResumeMarkdown) => { setCreateCoverLetterAndResume((prevState) => ({ ...prevState, resume: updatedResumeMarkdown, })); }, }, [] ); ``` **第 4 步：** 向聊天機器人發出提示，例如「更新履歷並將我的姓名加入為 John Doe，將我的電子郵件加入為 [email protected]」。如下圖所示，可以看到履歷已更新。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2d9y6pmfynxwzff8be86.png) --- ## 建立下載求職信和履歷表 Pdfs 功能 **第 1 步：** 安裝 jsPDF，一個用 JavaScript 產生 PDF 的函式庫。 ``` npm i jspdf ``` **步驟 2：** 在 CoverLetterAndResume 元件內，使用 useMakeCopilotActionable 掛鉤設定一個名為“downloadPdfs”的操作，其中包含描述和實現函數，該函數使用 jsPDF 庫為求職信和簡歷建立 PDF，然後保存它們， 如下所示。 ``` function addTextToPDF(doc: any, text: any, x: any, y: any, maxWidth: any) { // Split the text into lines const lines = doc.splitTextToSize(text, maxWidth); // Add lines to the document doc.text(lines, x, y); } useMakeCopilotActionable( { name: "downloadPdfs", description: "Download pdfs of the cover letter and resume.", argumentAnnotations: [ { name: "coverLetterPdfA4", type: "string", description: "A Pdf that contains the cover letter converted from markdown text and fits A4 paper.", required: true, }, { name: "resumePdfA4Paper", type: "string", description: "A Pdf that contains the resume converted from markdown text and fits A4 paper.", required: true, }, ], implementation: async () => { const marginLeft = 10; const marginTop = 10; const maxWidth = 180; const coverLetterDoc = new jsPDF(); addTextToPDF( coverLetterDoc, createCoverLetterAndResume.letter, marginLeft, marginTop, maxWidth ); coverLetterDoc.save("coverLetter.pdf"); const resumeDoc = new jsPDF(); addTextToPDF( resumeDoc, createCoverLetterAndResume.resume, marginLeft, marginTop, maxWidth ); resumeDoc.save("resume.pdf"); }, }, [createCoverLetterAndResume] ); ``` **第 3 步：** 返回網頁應用程式中的聊天機器人，並提示「下載求職信和簡歷的 pdf 檔案」。 PDF 將開始下載，如果您開啟 coverLetter.pdf，您應該會看到產生的求職信，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4p853urbqn43jh6454at.png) --- ## 結論 總而言之，您可以使用 CopilotKit 建立應用內 AI 聊天機器人，該機器人可以查看當前應用程式狀態並在應用程式內執行操作。 AI 聊天機器人可以與您的應用程式前端、後端和第三方服務對話。 對於完整的源程式碼： https://github.com/TheGreatBonnie/AIPoweredResumeBuilder --- 原文出處：https://dev.to/copilotkit/how-to-build-the-with-nextjs-openai-1mhb

0個讚   0留言 149瀏覽

React 和 NextJS 2024 最佳免費開源 SaaS 初學者

## 長篇大論；博士 SaaS 樣板啟動器隨處可見，但它們非常昂貴（約 200-800 美元）。 我想為 React 和 NextJS 找到最好的免費開源 SaaS Starters，這些 Starters 將在 2024 年積極維護。 在下面的文章中，我將介紹每個初學者的功能及其優缺點，所以如果您有興趣，請繼續閱讀。但我還在下面整理了這個漂亮的圖表，可以一目了然地對它們進行比較（順便說一句，文章底部有同一圖表的文本版本，帶有可點擊的連結）。 享受！ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wr6z6jqmypnl5hzrgyr1.png) ## 介紹 軟體即服務 (SaaS) 應用程式是獨立駭客和個人企業家賺錢的最佳方式之一。這就是為什麼 SaaS 樣板啟動器正在崛起！但其中一些售價高達 2,000 美元以上，平均價格約為 200 美元。 這就是為什麼我開始尋找是否有免費的開源 SaaS 啟動器以及它們的表現如何。在找到了很多但注意到大多數不再積極維護後，我將範圍縮小到這四個免費的開源 SaaS Starter：BoxyHQ 的 SaaS Starter、Open SaaS、SaaS Starter Kit 和 Next SaaS Stripe Starter。 ## BOXYHQ SaaS 入門套件 “**您的終極企業級 Next.js 樣板”** ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51svaqq6lu6s3ldoy5i0.png) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xd6cftpnl9robmmtw36b.png) - GitHub：https://github.com/boxyhq/saas-starter-kit - 影片演練：[https://www.youtube.com/watch?v=oF8QIwQIhyo](https://www.youtube.com/watch?v=oF8QIwQIhyo) BoxyHQ 是一家專注於安全的公司，專注於單一登入 (SSO) 和企業安全解決方案。因此，這個 SaaS 入門套件雖然免費且開源，但更專注於企業需求也就不足為奇了。 因此，如果您正在尋找一個外觀簡潔、具有安全 SAML SSO、使用者帳戶建立、團隊建立和管理以及 Webhooks 和事件整合功能的樣板，那麼這就是您的範本。 優點： - SAML 單一登入 - 全面的角色和權限 - 專注於企業SaaS應用程式開發 缺點： - 更適合企業級應用程式，這對於較小的專案來說可能有點過分 - 一些即將推出的功能（例如計費和訂閱）尚未實現 ## 開放 SaaS 「***免費*具有超能力的 SaaS 範本」** ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awz3renuql3k5awlvkms.png) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ptji6f1viufkonb3bzw.png) - 網站與示範：https://OpenSaaS.sh - Github：https://github.com/wasp-lang/open-saas Open SaaS 專注於建立一個功能齊全的開源 SaaS 樣板，它擁有您期望從付費模板中獲得的一切，包括整合的人工智慧。範例、為您的網站流量和收入統計配置的分析儀表板以及完整的文件和支援。 它由 Wasp 團隊為您帶來，這是一個全端 React / NodeJS / Prisma 框架，可透過設定檔為您管理功能。例如，這意味著您只需幾行程式碼即可“推出您自己的身份驗證”，因為 Wasp 會為您管理樣板檔案。 優點： - 利用Wasp進行全端開發，減少開發時間 - 擁有完整的文件和多元化且支持性的社區 - 與 OpenAI API 集成，並包含人工智慧驅動的應用程式範例 - 開箱即用的端到端類型安全 缺點： - 可能缺少一些更廣泛的 SaaS 應用程式功能，例如測試 - 依賴 Wasp，一個鮮為人知但高效能的全端框架 ## SaaS 入門套件 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdy7kkxnwvddia1qcxii.png) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vqikv8rshdqq0yj1sas6.png) - 網站與示範：[https://www.saasstarterkit.com/](https://www.saasstarterkit.com/) - GitHub：[https://github.com/Saas-Starter-Kit](https://github.com/Saas-Starter-Kit) SaaS 入門套件是一個現代 SaaS 樣板，旨在建立具有免費/開源和專業/付費選項的全面 SaaS 解決方案。 這是一個簡單、乾淨的 UI，包含許多漂亮的 UI 元件，包括 Shadcn UI 分析儀表板元件。但不幸的是，您必須將它們與您自己的資料來源集成，因為大多數樣板都沒有管道。 目前它缺少很多配置，但看起來它在未來可能是一個有前途的模板 優點： - 提供免費版和專業版，使其能夠滿足多種需求 - 精心設計的 UI 元件，專門用於管理儀表板 缺點： - 具有增強功能的專業版不是免費的，這可能會讓一些用戶望而卻步 - 主要是內建Auth的UI元件集合，所以開發者還需要做很多工作 ## 下一個 SaaS Stripe 入門者 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ui7rg0yqafp9mf5nki0d.png) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pd9uqi903h358oqu37w9.png) - 網站與示範：[https://next-saas-stripe-starter.vercel.app/](https://next-saas-stripe-starter.vercel.app/) - GitHub：https://github.com/mickasmt/next-saas-stripe-starter Next SaaS Stripe Starter 是一個簡單、乾淨的 SaaS 樣板，可利用現代、流行的工具。儘管它不像其他一些軟體那麼功能齊全，但由於使用了 Shadcn UI 和 Contentlayer，它看起來很漂亮，並且有一個時尚的部落格。一般來說，它處於良好的狀態，可以用作 SaaS 的基礎。 如果您正在尋找一個最小的 NextJS 模板並且可以進行大量自訂和功能開發，那麼這就是適合您的模板。 優點： - 看起來不錯並且利用了各種流行的工具。 - 它包括未來的更新，涵蓋成功訂閱和切換訂閱計劃的重新發送功能。 缺點： - 很少甚至沒有文件 - 不像其他模板那樣功能豐富。 ##六。結論與建議 雖然所有 SaaS Starter 都為您的專案提供了良好的基礎，但如果您正在開發企業級應用程式，請考慮 BOXYHQ。如果您正在尋找可立即投入生產的模板並希望快速交付，那麼 Open SaaS 將是理想的整體模板，而如果您正在建置簡單/微型 SaaS 並且想要現代設計美感，則 Next SaaS Stripe Starter 則適合您。 | | [BoxyHQ SaaS 入門套件](https://github.com/boxyhq/saas-starter-kit) | [開放SaaS](https://opensaas.sh) | [SaaS 入門套件](https://www.saasstarterkit.com/) | [下一個 SaaS Stripe 入門](https://next-saas-stripe-starter.vercel.app/) | | --- | --- | --- | --- | --- | | **適合** | 🏢 📈<br/>企業。對於需要 Teams 功能的應用程式 | 🧑‍💻🤖 <br/>獨立駭客和新創公司快速建立現代 (AI) 應用程式 | 🧑‍💻🔧 <br/>獨立駭客正在尋找優秀的 UI 元件集合 | 🧑‍💻🎨 <br/>獨立駭客正在尋找簡約、時尚的 SaaS 樣板。 | | **易於使用** | 6/10 <br/>複雜，以企業為中心。 | 8/10 <br/>精簡且快速。有據可查。 | 5/10 <br/>需要大量額外設定。 | 7/10 <br/>良好的基礎，但缺乏一些功能 | | **授權** |透過 Auth.js 驗證電子郵件、SAML SSO、Google、Github |電子郵件已驗證，Google，Github 透過 Wasp w/ Lucia |電子郵件、Google 透過 Auth.js |谷歌透過 Auth.js | | **管理儀表板** |限團隊管理 |內建和預先配置的網站和收入分析 |用於收入分析的 UI 元件（未配置） |無 | | **付款** |否（即將推出）|條紋| Stripe（+ Lemonsqueezy 付費版）|條紋| | **分析** |透過 Mixpanel 進行第 3 方（付費）|合理（免費、開源）或 Google | Vercel 分析（付費）| Vercel 分析（付費）| | **人工智慧.準備好了** |沒有 |內建 AI 支援 https://opensaas.sh (OpenAI API) |沒有 |沒有 | | **端對端類型安全性** |沒有 |是的 |沒有 |沒有 | | **電子郵件發送器** |郵件發送 | SendGrid、EmailGun 或 SMTP |重新發送 |重新發送 | | **內建部落格** |沒有 |是（透過 https://astro.build/）|否（付費版本，是）|是（透過 https://contentlayer.dev/）| | **造型** |順風|順風| Tailwind，Shadcn ui | Tailwind，Shadcn ui | | **使用者介面與設計** |基本 |款式好看|帶有漂亮 UI 元件的基本 |現代、時尚的造型| | **社區支持** | https://discord.gg/uyb7pYt4Pa | https://discord.gg/aCamt5wCpS | https://www.reddit.com/r/saas_kit/（發佈時沒有討論）|無 | | **文件** |基本 |非常詳細|基本 |可憐| | **演示應用程式** |無 | https://opensaas.sh | https://www.saasstarterkit.com/ | https://next-saas-stripe-starter.vercel.app/ | https://next-saas-stripe-starter.vercel.app/ --- 原文出處：https://dev.to/vincanger/best-free-open-source-saas-starters-for-react-nextjs-2024-4nbn

0個讚   0留言 126瀏覽

😎 2024 年值得關注的 9 個熱門開源專案

身為一名熱衷於開源的開發人員，我不斷關注新興的專案、函式庫和服務。 你知道那些，似乎有那種特殊的醬汁。 ![燈泡時刻](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aj2mtk0t0oa7doj1midk.gif) 我整理了一份小清單，列出了我在新的一年中看到的趨勢或預期的趨勢。 讓我們來看看我最近遇到的一些最令人驚訝和印象深刻的專案。 ## 1. [Wing](https://github.com/winglang/wing) ![翼](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kj3n6z4negxh2rvthj3a.gif) Wing 開發了一種名為 **[Winglang](https://www.winglang.io/)** 的面向雲端的程式語言，專門用於解決雲端開發人員面臨的需求和挑戰。 將基礎設施和執行時程式碼組合成一種語言，並具有內建的本機模擬器以及可觀察性和偵錯控制台。 Wing 減少了認知負荷和上下文切換，使開發人員能夠保持創作流程。 Wing 如何促進您的發展： - 更快的迭代周期 - 透過機翼模擬器進行在地化測試 - 透過編寫更少的程式碼部署到雲端 {% cta https://dub.sh/wing-cloud %} 請star ⭐ Winglang {% endcta %} <小時/> ## 2. [也許](https://dub.sh/wing-cloud) ![也許](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8sdivkavkiuht8tgtsuq.gif) Maybe 最近開源了他們的個人理財 + 財富管理應用程式 一些功能包括： - 投資標桿 - 投資組合分配 - 債務洞察 {% cta https://github.com/maybe-finance/maybe %} 請加註星標 ⭐ 也許 {% endcta %} <小時/> ## 3. [Wstunnel](https://github.com/erebe/wstunnel?tab=readme-ov-file) ![Wstunnel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24jmmutuudqssociwxg9.gif) Wstunnel使用與http相容的WebSocket協定來繞過防火牆和代理程式。 這允許您傳輸您想要的任何流量並存取您需要的任何資源/網站。 {% cta https://github.com/erebe/wstunnel?tab=readme-ov-file %} 請加註星標 ⭐ wstunnel {% endcta %} <小時/> ## 4. [Spotube](https://github.com/KRTirtho/spotube) ![wstunnel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhcqt9wvdd0lchc3tsut.gif) 開源、跨平台的 Spotify 用戶端，利用 Spotify 的資料 API 和 YouTube（或 Piped.video 或 JioSaavn）作為音訊來源，跨多個平台相容， 不再需要 Spotify Premium。 順便說一句，這不是另一個 Electron 應用程式😉 {% cta https://github.com/KRTirtho/spotube %} 請加註星標 ⭐ Spotube {% endcta %} <小時/> ## 5. [柔術](https://github.com/martinvonz/jj) ![Jujutzu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcy49y6dpnwav2t4i8mw.gif) Jujutsu 是一個軟體專案的版本控制系統，以 Rust 編寫。 您用它來： - 取得/複製您的程式碼 - 追蹤程式碼的更改 - 發布這些變更以供其他人查看和使用。 {% cta https://github.com/martinvonz/jj %} 請star ⭐ Jujutsu {% endcta %} <小時/> ## 6. [黃蜂](https://github.com/wasp-lang/wasp) ![黃蜂](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1f3vyg7g6gn0wke26g9h.gif) Wasp（Web 應用程式規格）是一個類似 Rails 的 React、Node.js 和 Prisma 框架。 在一天之內建立您的應用程式並使用單一 CLI 命令進行部署！ - 快速開始 - 無樣板 - 沒有鎖定 {% cta https://github.com/wasp-lang/wasp %} 請加註星 ⭐ 黃蜂 {% endcta %} <小時/> ## 7. [最佳化](https://github.com/refinedev/refine) ![精煉](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atf3c2rldmw5zsk181cb.gif) 用於建立內部工具、管理面板、儀表板和 B2B 應用程式的 React 框架，具有無與倫比的靈活性。 Refine 不限於一組預先設計樣式的元件，而是提供以下集合： - 輔助掛鉤 - 成分 - 供應商 {% cta https://github.com/refinedev/refine %} 請加註星 ⭐ Refine {% endcta %} <小時/> ## 8. [DbGate](https://github.com/dbgate/dbgate) ![DbGate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3uwv1e66powp9mtli147.gif) DbGate 是一個跨平台資料庫管理器，其設計目的是在同時處理更多資料庫時使用簡單且有效率。 **支援的資料庫：** - MySQL - PostgreSQL - SQL伺服器 - 甲骨文（實驗性） - MongoDB - 雷迪斯 - SQLite - 亞馬遜紅移 - CockroachDB - 瑪麗亞資料庫 {% cta https://github.com/dbgate/dbgate %} 請star ⭐ DBGate {% endcta %} <小時/> ## 9. [ivy](https://github.com/unifyai/ivy) ![常春藤](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6z2k5064eyhfpdf3y71k.gif) Ivy是一個開源機器學習框架： - 自動調整您的模型 - 將程式碼轉換為任何框架 - 編寫與框架無關的程式碼 {% cta https://github.com/unifyai/ivy %} 請star ⭐ Ive {% endcta %} <小時/> --- 原文出處：https://dev.to/winglang/9-top-trending-open-source-projects-to-watch-for-in-2024-emb

0個讚   0留言 202瀏覽

📈 RAG 檢索增強生成：5 個適合初學者的開源程式庫 🚀

#RAG簡介 作為開發人員，您今天可以學到的最有價值的技能之一是學習如何使用大型語言模型 (LLM) 建立檢索增強生成 (RAG) 應用程式。 ## 為什麼？ 因為世界上有超過 64 ZB 的資料，這甚至不包括書籍或實體文件等實體資料。 （供您參考，1澤字節是一兆千兆位元組。） 不僅如此，全球90%的資料都是在過去兩年建立的，而且資料量每兩年就會翻倍。基本上，公司都在海量的資料中游泳，而且這些資料每天都在變得越來越大。 公司將如何存取和使用所有這些資料？ 現在每個人都聽說過使用檢索增強生成（RAG）來透過人工智慧尋找資訊。能夠存取和使用不斷增長的資料量是每個公司都需要的關鍵技能。 即使您知道 RAG 基本上是描述將文件或知識連結到 LLM 的工作流程的簡寫方式，許多開發人員自己（還）還沒有嘗試或試驗過這一點。 網路上充滿了圖書館列表，但如何開始呢？ 以下是幫助您開始使用 RAG 的最佳庫的簡短清單。 --- # 1. [LLMWare](https://github.com/llmware-ai/llmware) 在LLMWare中，您可以上傳文件，並透過幾行程式碼開始檢索資訊。它處理 RAG 所需的整個過程：文件攝取、解析、分塊、索引、嵌入、儲存到向量資料庫以及連結到 LLM 以檢索答案。 LLMWare 被設計為整合和端到端，因此所有這些步驟都可以開箱即用。它組裝了所有部件，因此您無需這樣做。 LLMWare 使其非常簡單且易於上手： - 只需幾行程式碼即可透過端到端範例實現 RAG 工作流程 - 建立庫並無縫載入文件 - 輕鬆產生嵌入 - 輕鬆進行語意搜尋 - 利用任何 Hugging Face 模型或 GPT-4 等封閉源模型來回答資料中的問題 - 範例包括無需 GPU 的 RAG 模型 https://github.com/llmware-ai/llmware ![LLMWARE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dy22hfga9az7uol150ar.png) --- # 2. [MongoDB](https://github.com/mongodb/mongo) MongoDB 是一種廣泛使用的開源 NoSQL 資料庫程式。它屬於以文件為導向的資料庫類別，這意味著它以類似於 JSON 文件的格式儲存和組織資料。 MongoDB 的設計具有靈活性和可擴展性，使其適合各種應用程式和行業。 資料庫（如 MongoDB）是 RAG 中非常重要的一步，因為它們在嵌入之前儲存從文件或知識庫中提取的訊息，包括重要的元資料。 https://github.com/mongodb/mongo ![MongodbVector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ii6vl3tu41gfo6v3zt5g.png) --- # 3. [Milvus 向量資料庫](https://github.com/milvus-io/milvus) Milvus 是一個開源向量資料庫，旨在為嵌入相似性搜尋和人工智慧應用程式提供支援。 Milvus 讓非結構化資料搜尋更容易存取，無論部署環境如何，都可以提供一致的使用者體驗。 Milvus DB，或類似的向量 DB，是 RAG 中至關重要的一步。它是存儲向量嵌入以進行相似性搜尋的地方。該資料庫允許人們用自然語言提出問題並檢索相關結果。如果沒有良好的嵌入和向量資料庫，LLM 模型將無法接收正確的文字區塊來讀取。 https://github.com/milvus-io/milvus ![Milvus DB](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5t6jyfaidyfvxwd8nb7.png) --- # 4. [擁抱臉](https://github.com/huggingface) 如果你還沒去過 Hugging Face，你真的應該去看看。這是所有開源模型的去處，並且可以單槍匹馬地將世界從人工智慧壟斷中拯救出來。就像 Github 用於開源專案一樣，Hugging Face 用於開源模型。有超過 450,000 個模型，所有模型都免費供任何想要使用它們的人使用。 Hugging Face 的 Transformers 庫是首選庫 提供數千個預訓練模型來執行不同模式（例如文字、視覺和音訊）的任務。 這些模型可應用於： - 文本，用於文本分類、資訊提取、問答、摘要、翻譯和文本生成等任務，支援 100 多種語言。 - 影像，用於影像分類、物件偵測和分割等任務。 - 音頻，用於語音辨識和音頻分類等任務。 Transformer 模型還可以組合執行多種模式的任務，例如表格問答、光學字元辨識、從掃描文件中提取資訊、視訊分類和視覺問答。 https://github.com/huggingface ![擁抱臉](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pn47bs3bd97eu4gulkzb.png) --- #5. [Llama.cpp](https://github.com/ggerganov/llama.cpp) 沒有GPU？沒問題！ Llama.cpp 來救援！ llama.cpp 的主要目標是在 MacBook 上使用 4 位元整數化來執行 LLaMA 模型。 * 無依賴的純 C/C++ 實現 * Apple Silicon 一等公民 - 透過 ARM NEON、Accelerate 和 Metal 框架進行最佳化 * 對 x86 架構的 AVX、AVX2 和 AVX512 支持 * 混合F16/F32精度 * 支援2位、3位、4位、5位、6位和8位整數化 * CUDA、Metal 和 OpenCL GPU 後端支持 一旦量化，更大的模型就可以在 CPU 上執行，而效能損失很小。尋找 GGUF 版本的模型來嘗試使用 LLMWare 或其他 RAG 工作流程。 https://github.com/ggerganov/llama.cpp ![Llama.cpp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vev1gzen7oolvnug4vfl.png) --- 這是幫助您開始使用 RAG 的非常基本的概述。如果您想要一個讓所有這些庫無縫協作的一站式整合解決方案，請造訪 LLMWare 的 GitHub 庫，找到 50 多個優秀範例來幫助您入門。 [在不和諧中找到我們](https://discord.gg/fCztJQeV7J) - 我們很樂意聽到您的來信！ --- 原文出處：https://dev.to/llmware/top-5-beginner-friendly-open-source-libraries-for-rag-1mhb

0個讚   0留言 857瀏覽

🏞️5 個可供學習並獲得靈感的開源網路應用程式🙇‍♀️💡

如標題所示，在這篇文章中，我們將介紹您可以學習並用作下一個專案起點的開源 Web 應用程式。堅持到最後，因為那裡有超酷的獎勵等著你！ 在我們開始討論之前，先說幾句智慧之言（希望如此）： ## （開源）榜樣的重要性 ![你很漂亮](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqf1wss7puysn3q0rhso.gif) **從頭開始一個新專案時，您可以做的最有幫助的事情之一就是選擇一個或多個角色模型。**例如，如果您正在建立一個新的生產力應用程式，您可能會關注Trello 等產品或體式。當然，您的應用程式不會相同，並且您可能會想到一些使您的應用程式獨一無二的核心差異，但仍然會有很多您不想重新發明的共享概念和機制。 即使您的角色模型是一個閉源應用程式，您仍然可以透過在野外觀察它來獲得很多價值 - 設計元素、UI、用戶旅程和使用的術語，... **但是現在想像一下，如果您決定學習的應用程式是開源的，並且您可以輕鬆地在 GitHub 上存取其完整原始程式碼 - 這將打開一個全新的可能性世界！** 接下來只需從“外面」並猜測幕後發生了什麼，現在您可以看到每一個細節並了解所做的每一個決定。架構、部署、API 設計、庫和使用的演算法 - 一切都在那裡供您查看！ ## 注意規模（也就是不要過度設計） 另一件需要記住的事情是您的專案目前所處的階段。下面，我們將看到開源 SaaS 應用程式的不同範例，從獨立駭客、「週末建置」副專案到企業級 Web 平台。 **儘管您可能會發現擁有數百萬用戶的專案是一個令人驚嘆的學習資源，但請記住，並非他們所做的一切都是您必須嚴格遵循的。由於他們每天遇到的用戶規模和數量龐大**，他們的架構和設計決策通常會更加複雜。如果您剛開始，最好堅持使用最簡單（但仍然合理）的方法，直到您希望需要更高級的方法。 > 從現在開始，對於我們提到的每個應用程式，我們將使用“T 卹尺寸”方法（S、M、L...），讓您大致了解其尺寸和複雜性（無論是在功能還是功能方面）。使用者。 現在，前言結束了，讓我們一起來看看一些令人驚嘆的開源應用程式，您可以立即開始學習： ![樂趣現在開始](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7z4q2cxeiocgpgj3ofs.gif) ## [CoverLetterGPT](https://coverlettergpt.xyz/) - 人工智慧驅動的 SaaS 的完美起點 💾 **原始碼**：https://github.com/vincanger/coverlettergpt 👕 **尺寸**：S **🛠️ Stack**：Chakra UI、React、Node.js 和 Prisma，由 [Wasp](https://github.com/wasp-lang/wasp) 提供支持 [CoverLetterGPT.xyz](http://CoverLetterGPT.xyz) 是每個獨立駭客的夢想- **它是一個由GPT 支援的SaaS，完全開源，最重要的是，它是人們每天使用並付費的真實產品為了**！根據您的履歷和職位描述，該工具將產生一封專業撰寫的求職信。然後，您可以進一步調整每個段落的語氣或手動編輯。 它非常適合學習，因為它不太大，架構也很簡單，但它具有應用程式中可能需要的所有功能 - 社交身份驗證 (Google)、cron 作業、文件上傳、GPT 集成、透過 Stripe 進行支付集成，甚至可以透過比特幣付款！ CoverLetterGPT 由 React、Node.js 和 Prisma 製成，由 [Wasp 框架](https://github.com/wasp-lang/wasp) 提供支持，它負責所有管道並刪除大量樣板檔案。 **最好的部分是，當您準備好時，可以透過執行單一 CLI 命令來免費部署應用程式**：「wasp deploy」。 <center><h3>🚨注意🚨</h3></center> > 提示：Wasp 團隊最近發布了 [OpenSaaS](https://kdta.io/github-wasp-lang-open_3)，**一個完全免費且開源的 React 和 Node.js 樣板啟動器**。它包含提到的所有內容 + Tailwind、管理儀表板、登陸頁面、部落格等。 [在此處查看](https://kdta.io/github-wasp-lang-open_4) 以更快地開始使用。 ## Supabase Studio - 儀表板傑作🖼️ ![Supabase 工作室](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jc2pz1vhg1wysk7o9148.gif) 💾 **原始碼**：https://github.com/supabase/supabase/tree/master/apps/studio **👕 尺寸**：M/L **🛠️ 堆疊：** Next.js (React)、Tailwind [Supabase](https://supabase.com/) 是一個著名的開源專案，其核心是用 Elixir 編寫的。但是，由於我們在本文中專注於 Web 應用程式，因此我們將看一下 **Supabase Studio - 一個儀表板，您可以在其中查看和管理所有專案。它本身就是一部傑作，而且完全開源！** 該設計是使用 Tailwind 定制的，您可能希望在自己的專案中重複使用許多元素 - 用戶管理、表格、列表等。它還有自己的 AI 集成，用於編寫 SQL 查詢，效果出奇的好。 ## Papermark - 開源 DocSend 替代方案 ✉️ ![papermark_banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kt76y923xnpjhbglbvmn.png) 💾 **原始碼**：https://github.com/mfts/papermark 👕 **尺寸**：M **🛠️ 堆疊**：Next.js (React)、Tailwind、Prisma [Papermark](https://github.com/mfts/papermark) 最近受到社群的廣泛喜愛，尤其是其簡潔的設計和直覺的介面。雖然從外觀上看起來很簡單，但該應用程式包含許多功能，使一切順利執行：文件上傳、電子郵件發送、內建分析和自訂網域... **如果您正在建立涉及大量文件管理和使用者協作的專案**，這絕對是您應該考慮的專案。 ## [Crowd.dev](http://Crowd.dev) - 開發社群資料平台，使用 Vue 製作 📊👩‍💻 ![crowd_dev_banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ykd2vxomnrl02j46i7mm.png) 💾 **原始碼**：https://github.com/CrowdDotDev/crowd.dev **👕 尺寸**：M **🛠️ 堆疊：** Vue、Node.js [Crowd.dev](http://Crowd.dev) 是 GitHub 最新的後起之秀之一 - 它是一個用於監控社區活動的平台，無論是在 Slack 還是 Discord 上。如果您正在經營自己的開發者社區，那麼這樣的工具是必須具備的，以便了解正在發生的事情以及最活躍的成員是誰。 它在儀表板方面提供了很多功能，但它的另一個強項是**集成 - 如果您正在建置一個從外部源獲取和處理大量資料的應用程式，那麼這是您的首選角色模型**。如果你是 Vue 愛好者，那就加分了，因為這個專案就是用它製作的！ ## Habitica - 作為角色扮演遊戲的習慣追蹤器🐲⚔️ ![habitica_banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g69lfe93k931fyoj1fzv.png) 💾 **原始碼**：https://github.com/HabitRPG/habitica **👕 尺寸**：L **🛠️ 堆疊：** Vue、Bootstrap、SAAS、Node.js、MongoDB [Habitica](https://habitica.com/) 是我見過的最酷的網頁應用程式之一（他們也有 iOS 和 Android 應用程式） - 它可以幫助您透過角色扮演遊戲！想像 Trello 這樣的看板，但對於您完成的每項任務，您都可以獲得 XP 和金幣，甚至可以與朋友組隊接受任務。 Habitica 已經存在 10 年了，它通過 Vue、Node.js/Express 和 MongoDB 的經典堆疊完美地經受住了時間的考驗。 **如果您想了解建立了多麼豐富的互動式 UI，以及執行這種規模的專案需要什麼樣的架構，那麼這個應用程式絕對值得一試。**誰知道，您甚至可能最終成為居住自己！ ## 🏆 **獎勵** 🏆 Appflowy - Rust 和 Flutter 中的概念替代品 🤯 ![appflowy_banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tlzizemi22g9wkb48yfz.png) 💾 **原始碼**：https://github.com/AppFlowy-IO/AppFlowy **👕 尺寸**：M **🛠️ 堆疊：** Flutter、Rust 如果您走到這一步，您應該得到特別的待遇！這不是一個網絡應用程式，但它太酷了，我無法控制自己 - 它是**一個用 Rust 和 Flutter 建置的 Notion 替代品（因此可以做筆記）**！由於其本地優先的性質，用戶體驗非常流暢，並且它還將所有內容同步到雲端（如果您願意，您可以自行託管）。 **如果您一直在使用 Rust，但也在尋找一個可以每天使用的專案，Appflowy 可能是完美的選擇。** 它擁有從資料儲存到業務邏輯和 UI 的所有內容，全部都包含在其中一個包供您學習並查看您認為最有趣的內容。 ## 就是這樣！我很想聽聽你的訊息🫵 ![that_is_all](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovyclq3iyi3d15kfxcaw.gif) 這就是我們今天的全部內容（*放下麥克風*），非常感謝您的閱讀！我希望您發現它有用和/或有趣。 我在撰寫本文時遇到了很多開源 Web 應用程式，很難只選擇其中 5 個。 **現在，我很想聽聽您的來信 - 您最喜歡的開源應用程式是什麼，以及您如何使用它們？寫在下面的評論👇** 謝謝您，下次再見！ 👋 --- 原文出處：https://dev.to/matijasos/5-beautiful-open-source-web-apps-to-learn-from-and-get-inspired-280f

0個讚   0留言 235瀏覽

🎀 讓您的 K8 體驗更愉快的五種工具 🎀

對外行人來說，**K8s 代表Kubernetes**，數字8 代表**K** 和**s 之間的八個字母。** Kubernetes 在當前的技術環境中幾乎不可避免，但仍然不受歡迎，因為它的複雜性和陡峭的學習曲線。 基於終端的交互在這個故事中發揮著重要作用。如果您曾經有幸觀看一位經驗豐富的 DevOps 使用 Kubernetes 集群工作的方式，您可能會像看一位經驗豐富的武術家展示他的戰鬥技巧一樣看待他。這是因為透過終端完成的所有事情總是看起來更可怕，似乎需要多年的培訓。 🥋 現在的問題是：我們怎麼能讓這樣一個複雜的問題（甚至它的名字還被美化了）變得更有趣呢？好吧，以同樣的方式，我們讓一切變得更愉快 → 讓它變得更容易，讓它更漂亮！ 🎀 你可能會問，你會怎麼做呢？具有**圖形使用者介面**或簡稱 GUI！讓我們來看看在處理 Kubernetes 時為您提供使用者介面的**五個工具**。 ### 向我們展示您的支持🙏🏻 ![ProductHunt 發佈](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khmbqrmp51l64u80tae3.gif) 在開始之前，我們想提一下，我們已經安排了 [Product Hunt 的首次發布](https://www.producthunt.com/products/cyclops)！點擊“通知我”按鈕，以便在我們外出並準備好接收您的回饋時收到提醒 🔔 如果您為我們的[儲存庫](https://github.com/cyclops-ui/cyclops)加註星標並幫助我們在其他開發人員面前獲得我們的工具，我們將非常高興 ⭐ ## Kubernetes 儀表板 讓我們深入了解 **Kubernetes 管理的精髓工具** – [**Kubernetes 儀表板**](https://kubernetes.io/docs/tasks/access-application-cluster/web-ui-dashboard/)。它會自動與您的叢集捆綁在一起，提供 Kubernetes 環境的圖形概覽。您可以使用它來概覽叢集上執行的應用程式、將容器化應用程式部署到 Kubernetes 叢集以及管理叢集資源。 Kubernetes 儀表板不僅提供概述，還有助於排除故障。它提供對 Kubernetes 資源運作狀況的洞察，突出任何操作錯誤。 透過它，您還可以部署應用程式。您可以使用您編寫的清單或透過您剛剛填寫的表單來完成此操作。但是，值得注意的是，該表單雖然用戶友好，但缺乏基本範例之外的自訂靈活性。 雖然 K8s 儀表板是**萬能**，但許多人發現它是一個多面手，缺乏深入的功能。這種限制鼓勵我們探索更多工具，每種工具都是為特定目的而設計的，因此我們透過我們探索過的工具清單開始我們的旅程。 ![K8s 儀表板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p971mxj9xkjng9vecrdd.png) ##K9s 透過終端探索集群時，[**K9s**](https://k9scli.io/) 是你最好的朋友（明白了嗎？🐶）。它與 Vim 的互動風格有共同點，即使用快捷鍵和以 `:` 開頭的命令，但不要因此而洩氣。 K9s 密切關注 Kubernetes 活動，為資源互動提供**即時**資訊和直覺的命令。 它幾乎可以取代標準的“kubectl”，並且在與 Kubernetes 互動時不需要您身邊有“備忘單”。您只需選擇資源並深入到最低級別即可遍歷資源。這樣可以輕鬆提取日誌並存取其外殼。 K9s 可讓您查看每個資源的清單，並能夠編輯和套用變更。正如我所提到的，它**幾乎**取代了“kubectl”。區別之一是您**無法**透過 K9 部署新資源。 K9s 具有過濾資源並使用「/」指令進行搜尋的功能，可以更輕鬆地在資源海洋中找到您要尋找的資源或透過特定 pod 的日誌進行過濾。 螢幕頂部隨時可以使用的命令和快捷方式清單是一個不錯的設計，它的皮膚和插件自訂為您提供了額外實用程式的空間。 ![K9s UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aq0z9w8iocwzut4qq545.png) ## 獨眼巨人 如果您在處理清單檔案時遇到困難，[**Cyclops**](https://cyclops-ui.com/) 就是適合您的工具！ Cyclops 透過將清單轉換為基於 Web 的結構化形式，消除了處理清單時的混亂和複雜性，從而消除了手動配置和命令列互動的需要。 這使得具有不同技術專業知識水平的個人**更容易理解**部署過程。 在 Cyclops 的架構中，核心元件是 [Helm](https://helm.sh/) 引擎。 Helm 在 Kubernetes 社群中非常受歡迎；很可能你已經遇到過它。 Helm 的流行因其簡單的整合而發揮了 Cyclops 的優勢。 ![獨眼巨人表格](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxyt0ydwckyjcxfp3j8g.png) 有了 Cyclops，您就不再局限於一刀切的方法。 **您可以自訂表單以滿足您的獨特需求。** 例如，團隊成員可以產生 Helm 圖表，讓其他人可以使用 Cyclops 定義必要的值，以實現輕鬆的應用程式部署。 一旦您聲明了應用程式的所需狀態，部署它就像單擊按鈕一樣簡單。此外，一旦部署應用程式，也可以透過 Cyclops 輕鬆更改所需狀態。 在 Cyclops 中，每個應用程式都列出了它使用的資源的詳細清單 - 部署、服務、pod 等，所有這些都在簡單的視圖中。您可以輕鬆追蹤它們的狀態，幫助您快速發現並修復應用程式中的任何問題。這就像有一個清晰的路線圖來導航和解決出現的任何問題。 ![獨眼巨人資源](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3x7n7zvfl50ipnowiufz.png) ## 開發空間 考慮每次儲存程式碼時自動刷新本機伺服器的便利性和節省時間，從而提供程式碼變更的即時視覺化。 想像一下將這種流暢的體驗進一步應用到 Kubernetes 叢集中； [**DevSpace**](https://www.devspace.sh/) 讓這一切成為可能。借助 DevSpace，您可以在編碼過程中**即時部署應用程式**，從而促進快速迭代。 DevSpace 透過自動將變更套用到 K8s 叢集來簡化流程，而無需整個映像建置和部署管道。它在本地建立映像，而不將其推送到註冊表，儘管在開發過程中需要它的人可以使用自動推送映像的選項。 此外，DevSpace 具有一個使用者介面，雖然有些限制，但可以快速概述叢集中的所有 Pod。它允許您**輕鬆存取 Pod 日誌，甚至直接在其中執行命令**，從而增強您的開發工作流程。 儘管我專注於本地開發，但 DevSpace 也用於建立工作流程。您的所有工作流程都保存在一個檔案中，從而可以使用單一「devspace deploy」命令輕鬆在任何電腦上重現環境。 ![DevSpace UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ylegdy0nnn4kjdhkdq4z.png) ## 庫貝前一個 與本文中提到的其他工具不同，[**Kubevious**](https://kubevious.io/) 無法更改叢集狀態。它僅用作可觀察性工具，重點關注集群中的潛在問題。它突出顯示了您可能執行的每種資源的潛在威脅和風險。 圖形視圖提供對容器、網路、暴露、RBAC 和 Helm 圖表的深入了解，以進行直觀的故障排除。 Kubevious 有一個**規則引擎**，有助於偵測並防止錯誤配置。它附帶了開箱即用的規則，但它也允許您建立自訂規則（例如，「不允許圖像位於*最新*標籤上」）。 它還配備了很酷的**時間機器**功能，允許用戶回到過去、審核應用程式、根本原因中斷和恢復清單，確保完全了解叢集歷史記錄。 我不得不提一下它提供的**全文**搜尋！您可以搜尋任何資源，而無需知道其特定名稱。一個很好的例子是，只需輸入「*port 3000*」即可搜尋使用特定連接埠的任何資源，Kubevious 就會找到您的資源。 ![Kubevious 儀表板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tdnmefdwc5i36vsul3m.png) ## 最後的想法 為了增強 Kubernetes 體驗，我們推出了五個令人愉悅的工具，每個工具都有其獨特的魅力，讓您的旅程更加順暢和愉快。 這些並不是為 Kubernetes 提供 UI 的唯一工具，但我們希望專注於一些可能不太知名的工具。 所有這些工具都是開源的，所以請嘗試一下；他們是免費的！ 我想用一個針對讀者的問題來結束這篇文章：您對 Kubernetes 的圖形表示有何看法？是否需要，或者「kubectl」是否佔據主導地位？ --- 原文出處：https://dev.to/cyclops-ui/five-tools-to-make-your-k8s-experience-more-enjoyable-5d85

0個讚   0留言 221瀏覽

React.js，你到底要發展成怎樣？

我正在寫這些隨機筆記作為**公開信，寫給我在 React**（更廣泛地說，開源）**社區**中深深信任的人。像是坦納·林斯利、勞裡·沃斯、卡西迪·威廉斯、麥可·傑克森、馬克·艾瑞克森、凱爾·馬修斯、蘇菲·阿爾珀特等人。 **在過去的幾個月裡，我一直對 React 感到矛盾**。它始於伺服器元件基本上在框架會議上宣布的日子，React 文件開始建議使用外部框架進行 React 開發。昨晚閱讀了 [Cassidy 的帖子](https://blog.cassidoo.co/post/annoyed-at-react/) 並分享了她的願景後，我也有表達我的擔憂的衝動。 **我在 2016 年愛上了 React**，當時 Angular 發布了 Angular 2，我們擔心會發生重大變化。我立即愛上了 React 社區，儘管我從未積極參與。 我記得蘇菲·阿爾珀特和丹·阿布拉莫夫之間的推文。我還記得 2016 年 Michele Bertoli 在 ReactJsDay（義大利）上的第一次演講，讓我眼前一亮。我無法忘記 2018 年版的 ReactJsDay，當時 Michael Jackson 在我們面前重新建立了大部分 React Router 實時編碼 - 那真是美好的日子！ 無論是作為 Web 開發機構還是現在作為產品公司，React 一直是我們的成功選擇。當我想起那一天（我相信是2020 年1 月2 日）時，我仍然很激動，當時我向Guillermo Rauch 展示了React Bricks 的第一個MVP，他是第一個相信這個專案的人，並給了我繼續下去的信心。 。 **然而，今天我看到兩個問題，讓我對 React 的喜愛少了一些**，並讓我擔心新開發人員可能會被它嚇倒：所有權和復雜性。 ## 所有權 至於所有權，我不是特別喜歡： 1. React [建議使用框架](https://react.dev/learn/start-a-new-react-project)啟動專案，建議使用三大主流開源框架之一，而不是僅使用反應。 2. 在框架會議期間，React Server 元件等新的 React 功能首次向社群的很大一部分介紹，就好像這只是一個框架成就一樣。 3. 最受歡迎的框架，它僱用了一些來自React 核心團隊的人員（這不是一件壞事，但肯定為他們提供了對開發的特權洞察力）使用金絲雀版本，而[React 的最後一個版本](https://github.com/facebook/react/releases) (18.2) 是2022 年6 月。透過這種方式，金絲雀功能進入了許多新React 專案的程式碼庫，成為“事實上的”穩定版本，但僅適用於 a可以安全地利用金絲雀功能的框架。 此外，諸如伺服器操作之類的功能（在雲端平台上託管時會觸發計量無伺服器函數呼叫）可能會增加未來前端應用程式的託管成本。雖然目前這不是問題，因為不存在壟斷，我們有選擇的自由，但**我希望**為社區提供一種方式**以保證明天仍然有多種選擇**可用。請理解，在這方面我不認為任何人是「邪惡的」。私人公司和社區之間的合作可以帶來偉大的成就。這只是一個分離關注點和責任的問題。 ## 複雜性 我從 1996 年開始建立網站，當時我 17 歲。當時，您建立了 HTML 檔案並將它們上傳到 FTP 伺服器上由 Web 伺服器提供服務的資料夾中。我管理自己的實體伺服器（Pentium 120），將其安置在當地的網路供應商。它在 Windows NT4 IIS 上執行作為 Web 伺服器，在 BIND 上執行 DNS，在 IPSwitch IMail 伺服器上執行電子郵件。一切都簡單明了。 如今，Web 開發變得更加強大，但也更加複雜。隨著轉譯器、捆綁器和框架的引入，我們已經失去了對幕後發生的事情的了解。然而，React 以其乾淨的單向資料流而脫穎而出。鉤子的事情變得有點複雜（它有一些幕後黑魔法:)，但它是可以管理的，並且最終是一個不錯的選擇。 **使用伺服器元件，一切都變得更加複雜，難以掌握**。而且，事實上它們是最廣泛使用的 React 框架的預設選擇，這在某種程度上迫使新手也學習這種新範例。我了解 RSC 的優勢，但現在我們甚至可以在同一個 React 框架內使用[兩種不同的方式](https://overreacted.io/the-two-reacts/)來建立東西。 我們最近完成了讓 React Bricks 函式庫與 RSC 相容的任務。這需要一個月的工作和數千行程式碼。然而，結果是，最終為開發者提供的 API 並不像以前那麼乾淨。我不確定為了輕微的效能提升而犧牲簡單性是否會真正使我們的客戶受益。儘管如此，由於它既是「預設」又是閃亮的新事物，我們必須擁有它。 **同時，隨著新框架的出現，React 世界之外發生了許多有趣的事情**。我不想成為新程式設計師現在就嘗試選擇他們的第一個框架，因為這個決定非常艱難。 React 是最受歡迎的，Vue 更容易使用，Svelte 是一個很酷的想法，Astro 真的很棒，然後還有由非常聰明和謙遜的 Ryan Carniato 開發的信號和 SolidJS。 Qwik 也非常聰明，我喜歡這種方法（它是由 React Bricks 的競爭對手建立的……但我非常尊重他們:)。所以……基礎框架的選擇已經這麼複雜了！ ## 一個夢？ 在這種複雜的場景中，**擁有一個「預設的官方」React 框架將是有益的，該框架涵蓋建立 SEO 友善網站的基本需求**，具有路由、SSG、SSR、ISR（以及所有排列）這些字母；）。我知道 Remix 團隊不會同意 SSG 的必要性，但我認為它有一個有效的用例。我希望它始終能夠在 Linux 機器上自行託管。 我設想這個預設框架由 React 社群開發，並有一個由來自 React 生態系統的公認貢獻者組成的**指導委員會（透過投票過程？）**。我知道通常開源不會以這種方式工作，但是......我夢想著這個“probi viri Fellowship of the Ring”做出決定。 這個預設框架**不應該旨在包含所有閃亮的新東西**，這些新東西可以在我使用和喜愛的 Remix 或 Next.js 等其他框架中找到。我相信它應該作為社區創造的堅實起點。我認為我們今天已經有了一些很棒的東西可以開始（坦納？）。 至於 RSC，我認為避免水合的概念很棒，但我們需要一種新型的伺服器客戶端整合來使它們易於使用。如果它們仍然很複雜，在當前的限制下，以簡單性換取效能對大多數網站來說不會有好處。無論如何，與 Qwik 之類的東西相比，RSC 可能在效能方面有所損失，因為它們執行相同的工作兩次，處理客戶端上序列化 JSON 的區塊。然而，這是需要單獨討論的材料。 ## 開放問題 所以，經過這麼長時間的意識流，我想向社區提出一些問題： 1. 您對React的未來有何看法？ 2. 您認為在沒有贊助公司但有選舉的指導委員會的情況下建立一個社區驅動的框架是否可行？這個獨立的指導委員會如何能夠得到社區或企業用戶的經濟支持，以保持其獨立性？ 馬泰奧·弗拉納 2023 年 1 月 16 日 --- 原文出處：https://dev.to/matfrana/react-where-are-you-going-5284

0個讚   0留言 215瀏覽

使用 Next.js、Resend 和 Trigger.dev 建立後台電子郵件通知

## 您會在本文中找到什麼？ 電子郵件通知是讓使用者了解應用程式所執行操作的最常用方法。典型的通知包括：有人追蹤您、有人喜歡您的貼文、有人查看了您的內容。在這篇文章中，我們將探索如何使用 Next.js、Resend 和 Trigger.dev 建立一個簡單的非同步電子郵件通知系統。 我們將使用 Next.js 作為框架來建立我們的應用程式。我們將使用 Resend 發送電子郵件，並使用 Trigger.dev 非同步卸載和發送電子郵件。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jwlb0t41kg2s3djcb072.gif) ## Papermark - 開源 DocSend 替代品。 在我們開始之前，讓我與您分享 Papermark。它是 DocSend 的開源替代方案，可幫助您安全地共享文件並從查看者那裡獲取即時的逐頁分析。全部都是開源的！ 如果您能給我們一顆星星，我會非常高興！別忘了在留言區分享你的想法❤️ [https://github.com/mfts/papermark](https://github.com/mfts/papermark) [![Papermark 應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/igzk8cdssbmla9uf1544.png)](https://github.com/mfts/papermark) ## 設定專案 讓我們繼續為我們的電子郵件後台通知系統設定專案環境。我們將建立一個 Next.js 應用程式，並設定為重新發送，最重要的是，設定觸發器來處理非同步電子郵件通知。 ### 使用 TypeScript 和 Tailwindcss 設定 Next.js 我們將使用「create-next-app」產生一個新的 Next.js 專案。我們還將使用 TypeScript 和 Tailwind CSS，因此請確保在出現提示時選擇這些選項。 ``` npx create-next-app # --- # you'll be asked the following prompts What is your project named? my-app Would you like to add TypeScript with this project? Y/N # select `Y` for typescript Would you like to use ESLint with this project? Y/N # select `Y` for ESLint Would you like to use Tailwind CSS with this project? Y/N # select `Y` for Tailwind CSS Would you like to use the `src/ directory` with this project? Y/N # select `N` for `src/` directory What import alias would you like configured? `@/*` # enter `@/*` for import alias ``` ### 安裝重新傳送和 React-Email Resend 是開發人員優先的事務性電子郵件服務。我們將使用它向我們的用戶發送電子郵件。 `react-email` 是一個 React 元件庫，可以輕鬆建立漂亮的電子郵件。 ``` npm install resend react-email ``` ### 安裝觸發器 Trigger 是 TypeScript 的後台作業框架。它允許您從主應用程式中卸載長時間執行的任務並非同步執行它們。我們將使用它非同步發送電子郵件。 觸發器 CLI 是在新的或現有的 Next.js 專案中設定觸發器的最簡單方法。有關更多訊息，請查看[他們的文件](https://trigger.dev/docs/documentation/quickstarts/nextjs)。 ``` npx @trigger.dev/cli@latest init ``` ## 建立應用程式 現在我們已經完成了設置，我們準備開始建立我們的應用程式。我們將介紹的主要功能是： - 設定重新發送電子郵件 - 編寫API路由來發送電子郵件 - 新增觸發器作業以使電子郵件發送非同步 ### #1 設定重新傳送電子郵件 首先，我們需要設定重新發送來發送電子郵件。我們將在專案中建立一個新檔案「resend-notification.ts」並新增以下程式碼。 ``` // lib/emails/resend-notification.ts import { Resend } from "resend"; import { NotificationEmail } from "@/components/emails/notification"; const resend = new Resend(process.env.RESEND_API_KEY!); export async function sendNotificationEmail({ name, email, }: { name: string | null | undefined; email: string | null | undefined; }) { const emailTemplate = NotificationEmail({ name }); try { // Send the email using the Resend API await resend.emails.send({ from: "Marc from Papermark <[email protected]>", to: email as string, subject: "You have a new view on your document!", react: emailTemplate, }); } catch (error) { // Log any errors and re-throw the error console.log({ error }); throw error; } } ``` 使用「react-email」的通知電子郵件範本將如下所示： ``` // components/emails/notification.tsx import React from "react"; import { Body, Button, Container, Head, Heading, Html, Preview, Section, Text, Tailwind, } from "@react-email/components"; export default function ViewedDocument({ name, }: { name: string | null | undefined; }) { return ( <Html> <Head /> <Preview>See who visited your document</Preview> <Tailwind> <Body className="bg-white my-auto mx-auto font-sans"> <Container className="my-10 mx-auto p-5 w-[465px]"> <Heading className="text-2xl font-normal text-center p-0 mt-4 mb-8 mx-0"> <span className="font-bold tracking-tighter">Papermark</span> </Heading> <Heading className="mx-0 my-7 p-0 text-center text-xl font-semibold text-black"> New Document Visitor </Heading> <Text className="text-sm leading-6 text-black"> Your document was just viewed by someone. </Text> <Text className="text-sm leading-6 text-black"> You can get the detailed engagement insights like time-spent per page and total duration for this document on Papermark. </Text> <Section className="my-8 text-center"> <Button className="bg-black rounded text-white text-xs font-semibold no-underline text-center" href={`${process.env.NEXT_PUBLIC_BASE_URL}/documents`} style={{ padding: "12px 20px" }}> See my document insights </Button> </Section> <Text className="text-sm"> Cheers, <br /> The Papermark Team </Text> </Container> </Body> </Tailwind> </Html> ); } ``` ### #2 撰寫API路由發送電子郵件 現在，我們已經準備好了電子郵件範本。我們可以使用它向我們的用戶發送電子郵件。我們將建立一個無伺服器函數，該函數會取得使用者的“姓名”和“電子郵件”，並使用我們之前建立的“sendNotificationEmail”函數向他們發送電子郵件。 ``` // pages/api/send-notification.ts import { NextApiRequest, NextApiResponse } from "next"; import prisma from "@/lib/prisma"; import { sendViewedDocumentEmail } from "@/lib/emails/resend-notification"; export const config = { maxDuration: 60, }; export default async function handle( req: NextApiRequest, res: NextApiResponse ) { // We only allow POST requests if (req.method !== "POST") { res.status(405).json({ message: "Method Not Allowed" }); return; } // POST /api/send-notification try { const { viewId } = req.body as { viewId: string; }; // Fetch the link to verify the settings const view = await prisma.view.findUnique({ where: { id: viewId, }, select: { document: { select: { owner: { select: { email: true, name: true, }, }, }, }, }, }); if (!view) { res.status(404).json({ message: "View / Document not found." }); return; } // send email to document owner that document await sendViewedDocumentEmail({ email: view.document.owner.email as string, name: view.document.owner.name as string, }); res.status(200).json({ message: "Successfully sent notification", viewId }); return; } catch (error) { console.log("Error:", error); return res.status(500).json({ message: (error as Error).message }); } } ``` ### #3 新增觸發器作業，使電子郵件傳送非同步 我們的電子郵件發送功能已準備就緒，但我們不想同步發送電子郵件，因此要等到電子郵件發送後應用程式才會回應使用者。我們希望將電子郵件傳送任務轉移到後台作業。我們將使用觸發器來做到這一點。 在設定中，Trigger CLI 在我們的專案中建立了一個「jobs」目錄。我們將在該目錄中建立一個新檔案“notification-job.ts”並新增以下程式碼。 ``` // jobs/notification-job.ts import { client } from "@/trigger"; import { eventTrigger, retry } from "@trigger.dev/sdk"; import { z } from "zod"; client.defineJob({ id: "send-notification", name: "Send Notification", version: "0.0.1", trigger: eventTrigger({ name: "link.viewed", schema: z.object({ viewId: z.string(), }), }), run: async (payload, io, ctx) => { const { viewId } = payload; // get file url from document version const notification = await io.runTask( "send-notification", async () => { const response = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/send-notification`, { method: "POST", body: JSON.stringify({ viewId }), headers: { "Content-Type": "application/json", }, } ); if (!response.ok) { await io.logger.error("Failed to send notification", { payload }); return; } const { message } = (await response.json()) as { message: string; }; await io.logger.info("Notification sent", { message, payload }); return { message }; }, { retry: retry.standardBackoff } ); return { success: true, message: "Successfully sent notification", }; }, }); ``` 將匯出新增至作業索引文件，否則觸發器將不知道該作業。雖然是小細節，但連我都忘記了這一點，並花了一個小時尋找錯誤。 ``` // jobs/index.ts export * from "./notification-job"; ``` ### 獎勵：防止惡意存取 API 路由 我們已準備好 API 路由，但我們不想允許任何人存取它。我們希望確保只有我們的應用程式可以存取它。我們將使用一個簡單的標頭身份驗證金鑰來做到這一點。 在觸發器作業中，我們將標頭加入到請求中： ``` // jobs/notification-job.ts .. ... const response = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/jobs/send-notification`, { method: "POST", body: JSON.stringify({ viewId }), headers: { "Content-Type": "application/json", Authorization: `Bearer ${process.env.INTERNAL_API_KEY}`, // <- add the authenication header with a local env variable }, }, ); ... .. ``` 在 API 路由中，我們將在「try {} catch {}」區塊之前檢查 API 金鑰是否符合： ``` // pages/api/send-notification.ts .. ... // Extract the API Key from the Authorization header const authHeader = req.headers.authorization; const token = authHeader?.split(" ")[1]; // Assuming the format is "Bearer [token]" // Check if the API Key matches if (token !== process.env.INTERNAL_API_KEY) { res.status(401).json({ message: "Unauthorized" }); return; } ... .. ``` 確保將“INTERNAL_API_KEY”新增至“.env”檔案中。 ``` # .env INTERNAL_API_KEY="YOUR_API_KEY" ``` ## 結論 瞧！我們已經準備好非同步電子郵件通知系統。我們現在可以非同步向用戶發送電子郵件，而不會影響用戶等待時間。我們還可以使用觸發器從主應用程式中卸載許多我們不希望用戶等待的其他任務。 感謝您的閱讀。我是 Marc，開源倡導者。我正在建立 [papermark.io](https://www.papermark.io) - DocSend 的開源替代品。 繼續編碼！ ## 幫幫我！ 如果您覺得這篇文章有幫助，並且對觸發器和後台任務有了更好的理解，如果您能給我們一顆星，我將非常高興！別忘了在評論中分享你的想法❤️ [https://github.com/mfts/papermark](https://github.com/mfts/papermark) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nk9c8ktyv1tf3n6jgbxh.gif) --- 原文出處：https://dev.to/mfts/building-background-email-notifications-with-nextjs-resend-and-triggerdev-4cem

0個讚   0留言 221瀏覽

極為簡單的 Python 專案結構與導入

喜歡這些文章嗎？買書吧！ [***Jason C. McDonald 的《Dead Simple Python》可從 No Starch Press 取得。](https://nostarch.com/dead-simple-python) --- 教程最糟糕的部分始終是它們的簡單性，不是嗎？您很少會發現一個包含多個文件的文件，更罕見的是包含多個目錄的文件。 我發現**建立 Python 專案**是語言教學中最常被忽略的部分之一。更糟的是，許多開發人員都會犯錯，在一堆常見錯誤中跌跌撞撞，直到他們得到至少「有效」的東西。 好訊息是：您不必成為他們中的一員！ 在《Dead Simple Python》系列的本期中，我們將探索「import」語句、模組、包，以及如何將所有內容組合在一起而不費力氣。我們甚至會涉及 VCS、PEP 和 Python 之禪。係好安全帶！ # 設定儲存庫 在我們深入研究實際的專案結構之前，讓我們先討論一下它如何適合我們的版本控制系統 [VCS]…從您*需要* VCS 的事實開始！有幾個原因是... * 追蹤您所做的每一個更改， * 弄清楚你什麼時候弄壞了東西， * 能夠查看舊版的程式碼， * 備份您的程式碼，以及 * 與他人合作。 您有很多選擇。 **Git** 是最明顯的，尤其是當您不知道還可以使用什麼時。您可以在 GitHub、GitLab、Bitbucket 或 Gitote 等上免費託管 Git 儲存庫。如果您想要 Git 以外的東西，還有許多其他選擇，包括 Mercurial、Bazaar、Subversion（儘管如果您使用最後一個，您可能會被同行視為恐龍。） 我將悄悄假設您在本指南的其餘部分中使用 Git，因為這是我專門使用的。 建立儲存庫並將「本機副本」複製到電腦後，您就可以開始設定專案了。您至少需要建立以下內容： - `README.md`：您的專案及其目標的描述。 - `LICENSE.md`：您的專案的許可證（如果它是開源的）。 （有關選擇一個的更多訊息，請參閱 [opensource.org](https://opensource.org/)。） - `.gitignore`：一個特殊文件，告訴 Git 要忽略哪些文件和目錄。 （如果您使用其他 VCS，則該檔案具有不同的名稱。請尋找。） - 包含您的專案名稱的目錄。 沒錯...**我們的Python 程式碼檔案實際上屬於一個單獨的子目錄！** 這非常重要，因為我們的儲存庫的根目錄將變得非常混亂，其中包含建置檔案、打包腳本、虛擬環境以及各種方式其他實際上不屬於原始碼的內容。 僅為了舉例，我們將虛構的專案稱為「awesomething」。 # PEP 8 和命名 Python 風格主要由一組稱為 **Python 增強提案**（縮寫為 **PEP**）的文件管轄。當然，並非所有 PEP 都被實際採納——這就是它們被稱為「提案」的原因——但有些是被採納的。您可以在Python官方網站上瀏覽主PEP索引。此索引的正式名稱為 [PEP 0](https://www.python.org/dev/peps/)。 現在，我們主要關注 [**PEP 8**](https://www.python.org/dev/peps/pep-0008/)，它最初由 Python 語言建立者 Guido van Rossum 於2001 年。該文件正式概述了所有Python 開發人員應普遍遵循的程式設計風格。把它放在枕頭下！學習它，遵循它，鼓勵其他人也這樣做。 （附註：PEP 8 指出樣式規則總是有例外。它是*指南*，而不是*命令*。） 現在，我們主要關注標題為 [“包和模組名稱”](https://www.python.org/dev/peps/pep-0008/#package-and-module-names)的部分。。 > 模組應該有簡短的、全小寫的名稱。如果可以提高可讀性，可以在模組名稱中使用下劃線。 Python 套件也應該有短的、全小寫的名稱，儘管不鼓勵使用底線。 我們稍後會了解*模組*和*包*到底是什麼，但現在，請了解**模組由檔案名稱命名**，而**套件由其目錄名稱命名**。 換句話說，**檔案名稱應全部小寫，如果可以提高可讀性，則使用下劃線。**同樣，**目錄名稱應全部小寫，如果可以避免，則不使用下劃線**。換句話說... + 執行此動作：`awesomething/data/load_settings.py` + 不是這個：`awesomething/Data/LoadSettings.py` 我知道，我知道，這是一種冗長的表達方式，但至少我在你的步驟中加入了一點 PEP。 （*你好？這個東西開著嗎？*） # 套件和模組 這會讓人感覺虎頭蛇尾，但這裡是那些承諾的定義： **任何Python（`.py`）檔案都是一個*模組*，目錄中的一堆模組是一個*套件*。** 嗯……差不多了。要讓目錄成為包，您還必須做另一件事，那就是將名為「__init__.py」的檔案貼到其中。實際上，您不必將任何內容*放入*該文件中。它必須在那裡。 您也可以使用`__init__.py` 做其他很酷的事情，但這超出了本指南的範圍，因此[請閱讀文件以了解更多資訊](https://docs.python.org/3/tutorial/modules.html#packages)。 如果你*確實*忘記了套件中的`__init__.py`，它會做一些比失敗更奇怪的事情，因為這使它成為一個**隱式命名空間包**。您可以使用這種特殊類型的套件做一些有趣的事情，但我不會在這裡討論。像往常一樣，您可以透過閱讀文件來了解更多：[PEP 420：隱式命名空間包](https://www.python.org/dev/peps/pep-0420/)。 所以，如果我們看看我們的專案結構，`awesomething` 實際上是一個包，它可以包含其他包。因此，我們可以將「awesomething」稱為我們的*頂級包*，以及其*子包*下的所有包。一旦我們開始進口東西，這將非常重要。 讓我們看一下我的現實專案“遺漏”的快照，以了解我們如何建置東西... ``` omission-git ├── LICENSE.md ├── omission │ ├── app.py │   ├── common │   │   ├── classproperty.py │   │   ├── constants.py │   │   ├── game_enums.py │   │   └── __init__.py │   ├── data │   │   ├── data_loader.py │   │   ├── game_round_settings.py │   │   ├── __init__.py │   │   ├── scoreboard.py │   │   └── settings.py │   ├── game │   │   ├── content_loader.py │   │   ├── game_item.py │   │   ├── game_round.py │   │   ├── __init__.py │   │   └── timer.py │   ├── __init__.py │   ├── __main__.py │   ├── resources │   └── tests │   ├── __init__.py │   ├── test_game_item.py │   ├── test_game_round_settings.py │   ├── test_scoreboard.py │   ├── test_settings.py │   ├── test_test.py │   └── test_timer.py ├── pylintrc ├── README.md └── .gitignore ``` （如果您想知道的話，我使用 UNIX 程式“tree”來製作上面的小圖。） 您會看到我有一個名為“omission”的頂級包，它有四個子包：“common”、“data”、“game”和“tests”。我還有“resources”目錄，但只包含遊戲音訊、圖像等（為簡潔起見，此處省略）。 `resources` 不是一個包，因為它不包含 `__init__.py`。 我的頂層包中還有另一個特殊檔案：`__main__.py`。這是當我們直接透過「python -m omission」執行頂級套件時執行的檔案。我們稍後會討論「__main__.py」中的內容。 # 導入如何進行 如果您以前編寫過任何有意義的 Python 程式碼，那麼您幾乎肯定熟悉「import」語句。例如... ``` import re ``` 知道當我們導入模組時，我們實際上是在執行它是有幫助的。這意味著模組中的任何“import”語句也正在執行。 例如，[`re.py`](https://github.com/python/cpython/blob/3.7/Lib/re.py#L122) 有幾個自己的 import 語句，當我們說 `導入重新`。這並不意味著它們可用於我們從*導入“re”的文件，但這確實意味著這些文件必須存在。如果（由於某種不太可能的原因）“enum.py”在您的環境中被刪除，並且您執行了“import re”，它將失敗並出現錯誤... > 回溯（最近一次呼叫最後一次）： > 檔案“weird.py”，第 1 行，位於 <module> 中 > 進口再 > 檔案“re.py”，第 122 行，位於 <module> 中 > 導入枚舉 > ModuleNotFoundError：沒有名為「enum」的模組 當然，讀到這裡，你可能會有點困惑。有人問我為什麼找不到外部模組（在本例中為“re”）。其他人想知道為什麼要導入內部模組（此處為“enum”），因為他們沒有直接在程式碼中請求它。答案很簡單：我們導入了 `re`，然後導入了 `enum`。 當然，上面的場景是虛構的：「import enum」和「import re」在正常情況下永遠不會失敗，因為這兩個模組都是Python核心庫的一部分。這只是一個愚蠢的例子。 ;) # 匯入註意事項 實際上有多種導入方式，但其中大多數應該很少使用（如果有的話）。 對於下面的所有範例，我們假設有一個名為「smart_door.py」的檔案： ``` # smart_door.py def close(): print("Ahhhhhhhhhhhh.") def open(): print("Thank you for making a simple door very happy.") ``` 例如，我們將在 Python 互動式 shell 中執行本節中的其餘程式碼，執行位置與「smart_door.py」相同。 如果我們想執行`open()`函數，我們必須先導入模組`smart_door`。最簡單的方法是...... ``` import smart_door smart_door.open() smart_door.close() ``` 我們實際上會說“smart_door”是“open()”和“close()”的**命名空間**。 Python 開發人員非常喜歡命名空間，因為它們讓函數和其他內容的來源一目了然。 （順便說一句，不要將 *命名空間* 與 *隱式命名空間包* 混淆。它們是兩個不同的東西。） **Python 之禪**，也稱為 [PEP 20](https://www.python.org/dev/peps/pep-0020/)，定義了 Python 語言背後的哲學。最後一行有一個聲明解決了這個問題： > 命名空間是一個非常棒的想法——讓我們做更多這樣的事情！ 然而，在某種程度上，命名空間可能會變得很痛苦，尤其是對於嵌套包來說。 `foo.bar.baz.whatever.doThing()` 太醜了。值得慶幸的是，我們確實有辦法避免*每次*呼叫函數時都必須使用命名空間。 如果我們希望能夠使用 `open()` 函數，而不必總是在其前面加上模組名稱，我們可以這樣做... ``` from smart_door import open open() ``` 但請注意，「close()」和「smart_door.close()」在最後一個場景中都不起作用，因為我們沒有直接匯入該函數。要使用它，我們必須將程式碼更改為這樣... ``` from smart_door import open, close open() close() ``` 在之前可怕的嵌套包噩夢中，我們現在可以說“from foo.bar.baz.whatever import doThing”，然後直接使用“doThing()”。或者，如果我們想要一點命名空間，我們可以說“from foo.bar.baz importwhatever”，然後說“whatever.doThing()”。 “導入”系統非常靈活。 但不久之後，您可能會發現自己說“但是我的模組中有數百個函數，我想全部使用它們！”這是許多開發人員偏離軌道的地方，這樣做... ``` from smart_door import * ``` **這非常非常糟糕！** 簡而言之，它直接導入模組中的所有內容，這是一個問題。想像一下下面的程式碼... ``` from smart_door import * from gzip import * open() ``` 你認為會發生什麼事？答案是，「gzip.open()」將是被呼叫的函數，因為這是在我們的程式碼中導入並定義的「open()」的最後一個版本。 `smart_door.open()` 已被 **shadowed** - 我們不能稱之為 `open()`，這意味著我們實際上根本無法呼叫它。 當然，由於我們通常不知道，或者至少不記得每個導入的模組中的*每個*函數、類別和變數，所以我們很容易陷入一堆混亂。 *Python 之禪* 也解決了這個情況... > 顯式優於隱式。 您永遠不必“猜測”函數或變數來自何處。文件中的某個位置應該有程式碼“明確”告訴我們它來自哪裡。前兩個場景證明了這一點。 我還應該提到，早期的 `foo.bar.baz.whatever.doThing()` 場景是 Python 開發人員不喜歡看到的。也來自 *Python 之禪*... > 扁平比嵌套更好。 一些包的嵌套是可以的，但是當你的專案開始看起來像一套精緻的俄羅斯娃娃時，你就做錯了。將模組組織到包中，但保持相當簡單。 # 在您的專案中匯入 我們之前建立的專案文件結構即將「非常方便」。回想一下我的「遺漏」專案... ``` omission-git ├── LICENSE.md ├── omission │ ├── app.py │ ├── common │ │ ├── classproperty.py │ │ ├── constants.py │ │ ├── game_enums.py │ │ └── __init__.py │ ├── data │ │ ├── data_loader.py │ │ ├── game_round_settings.py │ │ ├── __init__.py │ │ ├── scoreboard.py │ │ └── settings.py │ ├── game │ │ ├── content_loader.py │ │ ├── game_item.py │ │ ├── game_round.py │ │ ├── __init__.py │ │ └── timer.py │ ├── __init__.py │ ├── __main__.py │ ├── resources │ └── tests │ ├── __init__.py │ ├── test_game_item.py │ ├── test_game_round_settings.py │ ├── test_scoreboard.py │ ├── test_settings.py │ ├── test_test.py │ └── test_timer.py ├── pylintrc ├── README.md └── .gitignore ``` 在我的“game_round_settings”模組中，由“omission/data/game_round_settings.py”定義，我想使用“GameMode”類別。類別在「omission/common/game_enums.py」中定義。我怎樣才能到達它？ 因為我將“omission”定義為包，並將模組組織到子包中，所以實際上非常簡單。在“game_round_settings.py”中，我說...... ``` from omission.common.game_enums import GameMode ``` 這稱為**絕對導入**。它從頂級包“omission”開始，然後進入“common”包，在其中查找“game_enums.py”。 一些開發人員向我提供更像「from common.game_enums import GameMode」的導入語句，並想知道為什麼它不起作用。簡而言之，「data」套件（「game_round_settings.py」所在的位置）不知道其兄弟包。 然而，它確實知道它的父母。正因為如此，Python 有一種叫做「相對導入」的東西，它可以讓我們做同樣的事情，就像這樣... ``` from ..common.game_enums import GameMode ``` `..` 表示“此套件的直接父包”，在本例中為“omission”。因此，導入後退一級，進入“common”，並找到“game_enums.py”。 關於是否使用絕對導入或相對導入有許多爭論。就我個人而言，我更喜歡盡可能使用絕對導入，因為它使程式碼更具可讀性。不過，您可以自己做決定。唯一重要的部分是結果是「顯而易見的」——任何東西的來源都不應該是神秘的。 (繼續閱讀：[Real Python - Python 中的絕對導入與相對導入](https://realpython.com/absolute-vs-relative-python-imports/) 這裡還隱藏著另一個陷阱！在 `omission/data/settings.py` 中，我有這一行： ``` from omission.data.game_round_settings import GameRoundSettings ``` 當然，由於這兩個模組都在同一個包中，我們應該可以直接說“from game_round_settings import GameRoundSettings”，對嗎？ *錯誤！* 它實際上無法找到“game_round_settings.py”。這是因為我們正在執行頂級包“omission”，這意味著**搜尋路徑**（Python 查找模組的位置以及順序）的工作方式不同。 但是，我們可以使用相對導入來代替： ``` from .game_round_settings import GameRoundSettings ``` 在這種情況下，單一“.”表示“這個包”。 如果您熟悉典型的 UNIX 檔案系統，這應該開始有意義。 `..` 表示“後一級”，“.` 表示“目前位置”。當然，Python 更進一步：`...` 表示“後兩級”，`....` 表示“後三級”，依此類推。 但是，請記住，這些「等級」不僅僅是簡單的目錄。他們是包裹。如果在一個不是包的普通目錄中有兩個不同的包，則不能使用相對導入從一個包跳到另一個包。為此，您必須使用 Python 搜尋路徑，但這超出了本指南的範圍。 （請參閱本文末尾的文件。） # `__main__.py` 還記得我提到在我們的頂級包中建立一個 `__main__.py` 嗎？這是一個特殊的文件，當我們直接使用 Python 執行套件時會執行該文件。我的“omission”包可以使用“python -m omission”從我的存儲庫的根目錄執行。 這是該文件的內容： ``` from omission import app if __name__ == '__main__': app.run() ``` 是的，實際上就是這樣！我正在從頂級包“omission”導入我的模組“app”。 請記住，我也可以說「來自…」。改為導入應用程式。或者，如果我只想說“run()”而不是“app.run()”，我可以執行“from omission.app import run”或“from .app import run”。最後，只要程式碼可讀，我如何進行導入並沒有太大的技術差異。 （附註：我們可以爭論為我的主要`run()` 函數設定一個單獨的`app.py` 對我來說是否合乎邏輯，但我有我的理由......而且它們超出了本指南的範圍。 ） 首先讓大多數人感到困惑的部分是整個「if __name__ == '__main__'」語句。 Python 沒有太多**樣板** - 必須非常普遍地使用且幾乎不需要修改的程式碼 - 但這是那些罕見的位元之一。 `__name__` 是每個 Python 模組的特殊字串屬性。如果我將“print(__name__)”行貼在“omission/data/settings.py”的頂部，當該模組被導入（並因此執行）時，我們會看到“omission.data.settings”被打印出去。 當模組直接透過「python -m some_module」運作時，模組會被指派一個特殊值「__name__」：「__main__」。 因此，「if __name__ == '__main__':」實際上是在檢查該模組是否以 *main* 模組執行。如果是，它將在條件下執行程式碼。 您可以透過另一種方式看到這一點。如果我將以下內容加入到“app.py”的底部... ``` if __name__ == '__main__': run() ``` ……然後我可以直接透過 `python -m omission.app` 執行該模組，結果與 `python -m omission` 相同。現在`__main__.py`被完全忽略，`omission/app.py`的`__name__`是`"__main__.py"`。 同時，如果我只是執行“python -m omission”，“app.py”中的特殊程式碼將被忽略，因為它的“__name__”現在又是“omission.app”。 看看效果如何？ # 總結 我們來複習。 * 每個專案都應該使用 VCS，例如 Git。有很多選項可供選擇。 * 每個 Python 程式碼檔案 (`.py`) 都是一個 **模組**。 * 將您的模組組織到**包**中。每個包必須包含一個特殊的「__init__.py」檔案。 * 您的專案通常應由一個頂級包組成，通常包含子包。該頂級包通常共享您的專案的名稱，並作為專案存儲庫根目錄中的目錄存在。 * **永遠不要**在導入語句中使用「*」。在考慮可能的例外之前，Python 之禪指出「特殊情況並沒有特殊到足以違反規則」。 * 使用絕對或相對導入來引用專案中的其他模組。 * 可執行專案的頂層套件中應該有一個`__main__.py`。然後，您可以使用「python -m myproject」直接執行該套件。 當然，我們可以在建立 Python 專案時使用許多更高級的概念和技巧，但我們不會在這裡討論。我強烈建議閱讀文件： + [Python 參考：導入系統](https://docs.python.org/3/reference/import.html) + [Python 教學：模組](https://docs.python.org/3/tutorial/modules.html) + [PEP 8：Python 風格指南](https://www.python.org/dev/peps/pep-0008/) + [PEP 20：Python 之禪](https://www.python.org/dev/peps/pep-0020/) + [PEP 240：隱式命名空間套件](https://www.python.org/dev/peps/pep-0420/) --- *感謝 `grym`、`deniska` (Freenode IRC `#python`)、@cbrintnall 和 @rhymes (Dev) 提出的修改建議。* --- 原文出處：https://dev.to/codemouse92/dead-simple-python-project-structure-and-imports-38c6

0個讚   0留言 676瀏覽

每個開發者都必須知道的 12 個網站 🤩

**開發者們大家好！** 歡迎來到我的另一篇博文。 在這篇文章中，我想分享一些每個開發人員都必須了解的基本網站或工具。 所以讓我們**開始**👇並且不要**忘記**“💖🦄🔥”。 --- ## 1. [omatsuri.app](https://omatsuri.app) 🍡 ![omatsuri](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ic3rw7rpncvtsbas0an9.jpeg) Omatsuri 是一個提供網頁開發人員資源的日本網站。 “Omatsuri”，一個漸進式 Web 應用程式 (PWA)，提供 **12 個開源前端工具的集合**。 這些資源**免費使用**和自訂，這在您設計新網站或應用程式時非常有幫助。 --- ## 2. [htmlrev.com](https://htmlrev.com/) 📄 ![htmlrev](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qa8wq2cfu7bn12h34l85.jpeg) HTMLrev 是一個**尋找 HTML 範本**和設計資源的絕佳網站。 他們為網站、登陸頁面、部落格、作品集等提供免費的 html 模板。 這些模板隨時可用且易於自訂。這是滿足您所有範本需求的一站式場所。 --- ## 3. [Unicornicons.com](https://unicornicons.com/) 🦄 ![unicorcicons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zb4alzy6dmxa67p4prfk.jpeg) Unicornicons 擁有**漂亮的動畫圖示**，您可以在專案中使用它們。 他們有高級圖標包，但也提供許多**免費圖標**。這些圖標有助於使介面更具吸引力和樂趣。 您還可以輕鬆自訂顏色。 --- ## 4. [UiVerse.io](https://uiverse.io/)✨ ![uiverse](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iko1dy9qzowtp0m2pxs4.jpeg) UiVerse 是一個使用 CSS 和 Tailwind 建立的 UI 元素社群。 他們擁有超過 **3000 個元素，可以在 MIT 許可下免費**使用。 這對於建立 UI 元件並節省開發時間非常有用。您可以搜尋、篩選元素並直接取得要複製的程式碼。 --- ## 5. [undraw.co](https://undraw.co/illustrations) 🖌 ![取消繪製](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejqgeh89p0m4bxhqres4.jpeg) Undraw 是一個開源插圖函式庫。他們提供**美麗的 SVG 插圖**，您可以免費使用。 這些插圖很現代，可以輕鬆自訂。這對於登陸頁面、有關部分和產品行銷的內容非常有幫助。 他們也不斷加入新的插圖。 --- ## 6. [patternpad.com](https://patternpad.com/) 🎨 ![patternpad](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1dmudn1m4qkn5kb4ukl.jpeg) PatternPad 讓您設計來自無限顏色和形狀變化的圖案。您可以在這裡非常輕鬆地**建立獨特的品牌模式**、簡報、社交貼文等。 圖案匯出為 SVG 以供靈活使用。這是一個很好的工具，可以為您的設計增添視覺吸引力。 --- ## 7. [shapeivider.app](https://www.shapeivider.app/) 🗺 ![shapeivider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2rofzquhdbh1rh0zd4z.jpeg) ShapeDivider 可協助您非常輕鬆地**在**標題、段落或部分之間新增曲線形狀。它是設計中經常使用的技術。 該網站允許您透過選擇形狀和顏色類型來產生程式碼。您可以**直接複製並貼上程式碼**。非常有用的工具！ --- ## 8. [photopea.com](https://www.photopea.com/) 📸 ![photopea](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/811c325yaic55z5dyxnm.jpeg) Photopea 是一款線上照片編輯器，支援 PSD、XCF、Sketch、XD 和 CDR 格式。 **您可以免費開啟、編輯和儲存照片**，無需安裝任何軟體。 它具有類似於 Photoshop 的工具，但對初學者非常友好。這非常適合開發人員的基本影像編輯需求。 --- ## 9. [quickref.me](https://quickref.me/) 🧑‍💻 ![quickref](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/we3ozwf4mz5emjduqs9g.jpeg) QuickRef 是各種**開發人員工具、框架和技術**的備忘單集合。它們涵蓋了從程式語言、資料庫、設計工具到終端命令的所有內容。 這些備忘單可以幫助您更快學習，並且在開發過程中也非常方便。 **將此加入書籤！**。 --- ## 10. [devdocs.io](https://devdocs.io/) 📚 ![devdocs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfm13a7p6avflurnp7kc.jpeg) DevDocs 為許多程式庫和框架提供 API 文件。 **它從各種來源收集文件**並以有組織的方式呈現它們。 在開發過程中，經常需要參考文件。該網站使您可以輕鬆快速地找到所需的內容。 --- ## 11. [devhints.io](https://devhints.io/) 📝 ![devhints](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/233ziqtf3v6e0w9lkgyn.jpeg) Devhints 包含各種技術和工具的簡明備忘單。這些就像**開發人員的袖珍參考卡**。該資訊清晰呈現，沒有額外的細節。 他們專注於最重要的功能。這是一個很棒的網站，可以找到快速提醒。 --- ## 12. [開發工具](https://developer.chrome.com/docs/devtools/) 🛠 Chrome 開發者工具或 DevTools 是一套強大但有時令人難以抗拒的 Web 開發者工具。 developer.chrome 上的文件可協助您掌握這些工具。它涵蓋了每個面板的使用、鍵盤快捷鍵以及提示和技巧。任何開發人員都不應忽略 Chrome DevTools 文件。 --- ## 就是這樣😁 感謝您閱讀這篇部落格🙏，我希望這能為您帶來一些新的去處！ 如果您發現任何其他有用的網站，請發表評論📩。 並且不要忘記加上“💖🦄🔥” **快樂編碼👋** --- 原文出處：https://dev.to/random_ti/top-12-websites-that-every-developer-must-know-2a67

0個讚   0留言 279瀏覽

Deno 入門

如果你錯過了，Node 的建立者 Ryan Dahl 的新 Javascript 和 Typescript runtime[已發布](https://deno.land/)！它有一些非常酷的功能，可供公眾使用！讓我們來看看一些簡潔的功能，並開始建立一個簡單的 hello world！ ## 什麼是 Deno？ Deno 是 Typescript（和 Javascript）的新runtime，主要用 Rust 寫。它有一些[偉大的目標](https://deno.land/manual.html#goals)和一些非常有趣的“非目標”，例如不使用`npm`並且沒有package.json。 ## 安裝 安裝 deno 就像執行以下命令一樣簡單： `curl -fsSL https://deno.land/x/install/install.sh |噓` 然後複製“export”行並將其新增至“~/bashrc”或“~/bash_profile”中。 打開一個新終端並執行“deno”。您應該會收到“>”提示。輸入“exit”，讓我們深入研究一些功能！ ## Deno 中的酷功能 ### 預設打字稿 預設情況下，整合 Deno 來執行 Typescript 檔案。它基本上使 Javascript 中的類型成為一等公民。不再需要透過 Babel 編譯來在伺服器端 Javascript 中使用 Typescript。 ### 從 URL 導入 Deno 允許您從網頁匯入，就像在瀏覽器中一樣。只需在您通常命名模組的位置新增一個 URL： ``` import { bgBlue, red, bold } from "https://deno.land/std/colors/mod.ts"; ``` ### 標準庫 此外，Deno 有一個易於導入和使用的標準函式庫。有些模組可以執行多種不同的操作，例如 HTTP 處理、日期時間工作和檔案系統工作。您可以在[此處](https://github.com/denoland/deno_std)查看。 ### 使用 ES 模組 最後，Deno 僅支援 ES 模組語法，這表示不再需要 `require()` 語句，只需良好的 ole' `import x from "y"`。 ## 你好世界範例 讓我們快速看一下 Hello World，其中重點介紹了其中一些功能！ 將其複製到“hello-world.ts”檔案中。 ``` import { bgBlue, red, bold } from "https://deno.land/std/colors/mod.ts"; const sayHello = (name: string = "world") => { console.log(bgBlue(red(bold(`Hello ${name}!`)))); } sayHello(); sayHello("Conlin"); ``` 現在您可以使用“deno hello-world.ts”執行它，它應該會列印出一些內容。 將“sayHello”呼叫之一更改為“sayHello(15);”並重新執行它。您應該看到類型錯誤，因為 15 不是字串！太酷了！ 您還會注意到如何從 URL 導入 - 它從標準庫中獲取一些控制台顏色內容！ # 最後的想法 Deno 還沒有完全準備好用於生產 - 有幾個 [bug](https://deno.land/benchmarks.html#req-per-sec)，但開發正在快速推進！這絕對是一個很酷的新開源專案，值得關注！ --- 原文出處：https://dev.to/wuz/getting-started-with-deno-e1m

0個讚   0留言 174瀏覽
歡迎發文
💡 記錄日常工作的實踐、心得
💡 發表對生活和職場的感悟
💡 針對感興趣的事件發表隨筆或者雜談
💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣
💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）
熱門文章
🔥 背景颜色不会流畅的变化
🔥 Imgur API 串接問題
🔥 ✨ 如果您使用的是身分驗證提供者，請先執行此操作 🧙‍♂️ 🫵
🔥 設計模式 #4 - 發布者/訂閱者模式
🔥 Polyfill 供應鏈攻擊：將惡意軟體嵌入 JavaScript CDN
  近期留言
熱門搜尋： ? 測試 使用 題 開發 20 工作 前 學習 作為 for 專案 go with 研究 語言 c 技術 % 第一 1 . 前端 分享 C jav ul ＣＳＳ 網站 Ai 研 50 ui React 網頁 4 COM 搜尋 Java 2 查詢 AWS 作業 後端 10 結構 2023 app git error css 套件 ci JavaScript CD vs javascript github 遊戲 架構 Html 19 AI result ` todo 房 Python 乾淨 nodejs Git local user linux 主題 bi BASIC fetch 新創 html Line title prisma 工程師 履歷 js 開源 import oop react JS 部落格 資料庫 Github id 練習 json component python Javascript
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。