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

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

🔍 搜尋結果：API

🔍 搜尋結果：API

大資料模型 📊 與電腦記憶體 💾

資料管道是任何資料密集型專案的支柱。 **隨著資料集的成長**超出記憶體大小（「核心外」），**有效處理它們變得具有挑戰性**。 Dask 可以輕鬆管理大型資料集（核心外），提供與 Numpy 和 Pandas 的良好相容性。 ![管道](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6nswebbzlo96ml1ofeb.png) --- 本文重點介紹 **Dask（用於處理核心外資料）與 Taipy** 的無縫集成，Taipy** 是一個用於 **管道編排和場景管理** 的 Python 庫。 --- ## Taipy - 您的 Web 應用程式建構器 關於我們的一些資訊。 **Taipy** 是一個開源程式庫，旨在輕鬆開發前端 (GUI) 和 ML/資料管道。 不需要其他知識（沒有 CSS，什麼都不需要！）。 它旨在加快應用程式開發，從最初的原型到生產就緒的應用程式。 ![QueenB 星星](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvt5qn1yadra3epnb07v.gif) https://github.com/Avaiga/taipy 我們已經快有 1000 顆星了，沒有你就無法做到這一點🙏 --- ## 1. 範例應用程式 透過範例最好地演示了 Dask 和 Taipy 的整合。在本文中，我們將考慮包含 4 個任務的資料工作流程： - **資料預處理與客戶評分** 使用 Dask 讀取和處理大型資料集。 - **特徵工程和分割** 根據購買行為對客戶進行評分。 - **細分分析** 根據這些分數和其他因素將客戶分為不同的類別。 - **高價值客戶的總統計** 分析每個客戶群以獲得見解 我們將更詳細地探討這 4 個任務的程式碼。 請注意，此程式碼是您的 Python 程式碼，並未使用 Taipy。 在後面的部分中，我們將展示如何使用 Taipy 對現有資料應用程式進行建模，並輕鬆獲得其工作流程編排的好處。 --- 該應用程式將包含以下 5 個檔案： ``` algos/ ├─ algo.py # Our existing code with 4 tasks data/ ├─ SMALL_amazon_customers_data.csv # A sample dataset app.ipynb # Jupyter Notebook for running our sample data application config.py # Taipy configuration which models our data workflow config.toml # (Optional) Taipy configuration in TOML made using Taipy Studio ``` --- ## 2. Taipy 簡介 - 綜合解決方案 [Taipy](https://docs.taipy.io/) **不只是另一個編排工具**。 Taipy 專為 ML 工程師、資料科學家和 Python 開發人員設計，帶來了幾個基本且簡單的功能。 以下是**一些關鍵要素**，使 Taipy 成為令人信服的選擇： 1. **管道執行註冊表** 此功能使開發人員和最終用戶能夠： - 將每個管道執行註冊為「*場景*」（任務和資料節點圖）； - 精確追蹤每個管道執行的沿襲；和 - 輕鬆比較場景、監控 KPI 並為故障排除和微調參數提供寶貴的見解。 2. **管道版本控制** Taipy 強大的場景管理使您能夠輕鬆調整管道以適應不斷變化的專案需求。 3. **智能任務編排** Taipy 讓開發人員可以輕鬆地對任務和資料來源網路進行建模。 此功能透過以下方式提供對任務執行的內建控制： - 並行執行您的任務；和 - 任務“跳過”，即選擇要執行的任務並 要繞過哪個。 4. **任務編排的模組化方法** 模組化不僅僅是 Taipy 的一個流行詞；這是一個核心原則。 設定可以互換使用的任務和資料來源，從而產生更乾淨、更易於維護的程式碼庫。 --- ## 3. Dask 簡介 Dask 是一個流行的分散式運算 Python 套件。 Dask API 實作了熟悉的 Pandas、Numpy 和 Scikit-learn API - ，這使得許多已經熟悉這些 API 的資料科學家更愉快地學習和使用 Dask。 如果您是 Dask 新手，請查看 Dask 團隊撰寫的精彩 Dask [10 分鐘簡介](https://docs.dask.org/en/stable/10-minutes-to-dask.html)。 --- ## 4. 應用：顧客分析 (*algos/algo.py*) ![DAG 架構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ru69b6jmhl73s9xxx2n.png) *我們的 4 項任務的圖表（在 Taipy 中可視化），我們將在下一節中對其進行建模。* 我們現有的程式碼（不含 Taipy）包含 4 個函數，您也可以在上圖中看到： - 任務 1：*預處理和評分* - 任務 2：*特徵化與細分* - 任務 3：*分段分析* - 任務 4：*high_value_cust_summary_statistics* 您可以瀏覽以下定義了 4 個函數的 *algos/algo.py* 腳本，然後繼續閱讀每個函數的簡要說明： ``` ### algos/algo.py import time import dask.dataframe as dd import pandas as pd def preprocess_and_score(path_to_original_data: str): print("__________________________________________________________") print("1. TASK 1: DATA PREPROCESSING AND CUSTOMER SCORING ...") start_time = time.perf_counter() # Start the timer # Step 1: Read data using Dask df = dd.read_csv(path_to_original_data) # Step 2: Simplify the customer scoring formula df["CUSTOMER_SCORE"] = ( 0.5 * df["TotalPurchaseAmount"] / 1000 + 0.3 * df["NumberOfPurchases"] / 10 + 0.2 * df["AverageReviewScore"] ) # Save all customers to a new CSV file scored_df = df[["CUSTOMER_SCORE", "TotalPurchaseAmount", "NumberOfPurchases", "TotalPurchaseTime"]] pd_df = scored_df.compute() end_time = time.perf_counter() # Stop the timer execution_time = (end_time - start_time) * 1000 # Calculate the time in milliseconds print(f"Time of Execution: {execution_time:.4f} ms") return pd_df def featurization_and_segmentation(scored_df, payment_threshold, score_threshold): print("__________________________________________________________") print("2. TASK 2: FEATURE ENGINEERING AND SEGMENTATION ...") # payment_threshold, score_threshold = float(payment_threshold), float(score_threshold) start_time = time.perf_counter() # Start the timer df = scored_df # Feature: Indicator if customer's total purchase is above the payment threshold df["HighSpender"] = (df["TotalPurchaseAmount"] > payment_threshold).astype(int) # Feature: Average time between purchases df["AverageTimeBetweenPurchases"] = df["TotalPurchaseTime"] / df["NumberOfPurchases"] # Additional computationally intensive features df["Interaction1"] = df["TotalPurchaseAmount"] * df["NumberOfPurchases"] df["Interaction2"] = df["TotalPurchaseTime"] * df["CUSTOMER_SCORE"] df["PolynomialFeature"] = df["TotalPurchaseAmount"] ** 2 # Segment customers based on the score_threshold df["ValueSegment"] = ["High Value" if score > score_threshold else "Low Value" for score in df["CUSTOMER_SCORE"]] end_time = time.perf_counter() # Stop the timer execution_time = (end_time - start_time) * 1000 # Calculate the time in milliseconds print(f"Time of Execution: {execution_time:.4f} ms") return df def segment_analysis(df: pd.DataFrame, metric): print("__________________________________________________________") print("3. TASK 3: SEGMENT ANALYSIS ...") start_time = time.perf_counter() # Start the timer # Detailed analysis for each segment: mean/median of various metrics segment_analysis = ( df.groupby("ValueSegment") .agg( { "CUSTOMER_SCORE": metric, "TotalPurchaseAmount": metric, "NumberOfPurchases": metric, "TotalPurchaseTime": metric, "HighSpender": "sum", # Total number of high spenders in each segment "AverageTimeBetweenPurchases": metric, } ) .reset_index() ) end_time = time.perf_counter() # Stop the timer execution_time = (end_time - start_time) * 1000 # Calculate the time in milliseconds print(f"Time of Execution: {execution_time:.4f} ms") return segment_analysis def high_value_cust_summary_statistics(df: pd.DataFrame, segment_analysis: pd.DataFrame, summary_statistic_type: str): print("__________________________________________________________") print("4. TASK 4: ADDITIONAL ANALYSIS BASED ON SEGMENT ANALYSIS ...") start_time = time.perf_counter() # Start the timer # Filter out the High Value customers high_value_customers = df[df["ValueSegment"] == "High Value"] # Use summary_statistic_type to calculate different types of summary statistics if summary_statistic_type == "mean": average_purchase_high_value = high_value_customers["TotalPurchaseAmount"].mean() elif summary_statistic_type == "median": average_purchase_high_value = high_value_customers["TotalPurchaseAmount"].median() elif summary_statistic_type == "max": average_purchase_high_value = high_value_customers["TotalPurchaseAmount"].max() elif summary_statistic_type == "min": average_purchase_high_value = high_value_customers["TotalPurchaseAmount"].min() median_score_high_value = high_value_customers["CUSTOMER_SCORE"].median() # Fetch the summary statistic for 'TotalPurchaseAmount' for High Value customers from segment_analysis segment_statistic_high_value = segment_analysis.loc[ segment_analysis["ValueSegment"] == "High Value", "TotalPurchaseAmount" ].values[0] # Create a DataFrame to hold the results result_df = pd.DataFrame( { "SummaryStatisticType": [summary_statistic_type], "AveragePurchaseHighValue": [average_purchase_high_value], "MedianScoreHighValue": [median_score_high_value], "SegmentAnalysisHighValue": [segment_statistic_high_value], } ) end_time = time.perf_counter() # Stop the timer execution_time = (end_time - start_time) * 1000 # Calculate the time in milliseconds print(f"Time of Execution: {execution_time:.4f} ms") return result_df ``` --- ### 任務 1 - 資料預處理與客戶評分 Python 函數：*preprocess_and_score* 這是管道中的第一步，也許也是最關鍵的一步。 它使用 **Dask** 讀取大型資料集，專為大於記憶體的計算而設計。 然後，它根據“*TotalPurchaseAmount*”、“*NumberOfPurchases*”和“*AverageReviewScore*”等各種指標，在名為 *scored_df* 的 DataFrame 中計算“*Customer Score*”。 使用 Dask 讀取和處理資料集後，此任務將輸出一個 Pandas DataFrame，以供其餘 3 個任務進一步使用。 --- ### 任務 2 - 特徵工程與分割 Python 函數：*featureization_and_segmentation* 此任務採用評分的 DataFrame 並新增功能，例如高支出指標。 它還根據客戶的分數對客戶進行細分。 --- ### 任務 3 - 細分分析 Python 函數：*segment_analysis* 此任務採用分段的 DataFrame 並根據客戶細分執行分組分析以計算各種指標。 --- ### 任務 4 - 高價值客戶的總統計 Python 函數：*high_value_cust_summary_statistics* 此任務對高價值客戶群進行深入分析並傳回匯總統計資料。 --- ## 5. 在 Taipy 中建模工作流程 (*config.py*) ![工作室中的 DAG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kyz7k3akkcbs48psodi.png) *Taipy DAG — Taipy「任務」為橘色，「資料節點」為藍色。* 在本節中，我們將建立對變數/參數進行建模的Taipy 配置（表示為[“資料節點”](https://docs.taipy.io/en/latest/manuals/core/concepts/data-node/ )）和 Taipy 中的函數（表示為 [“Tasks”](https://docs.taipy.io/en/latest/manuals/core/concepts/task/)）。 --- 請注意，以下 *config.py* 腳本中的此配置類似於定義變數和函數 - 只不過我們定義的是「藍圖變數」（資料節點）和「藍圖函數」（任務）。 我們通知 Taipy 如何呼叫我們之前定義的函數、資料節點的預設值（我們可能會在執行時覆蓋）以及是否可以跳過任務： ``` ### config.py from taipy import Config from algos.algo import ( preprocess_and_score, featurization_and_segmentation, segment_analysis, high_value_cust_summary_statistics, ) # -------------------- Data Nodes -------------------- path_to_data_cfg = Config.configure_data_node(id="path_to_data", default_data="data/customers_data.csv") scored_df_cfg = Config.configure_data_node(id="scored_df") payment_threshold_cfg = Config.configure_data_node(id="payment_threshold", default_data=1000) score_threshold_cfg = Config.configure_data_node(id="score_threshold", default_data=1.5) segmented_customer_df_cfg = Config.configure_data_node(id="segmented_customer_df") metric_cfg = Config.configure_data_node(id="metric", default_data="mean") segment_result_cfg = Config.configure_data_node(id="segment_result") summary_statistic_type_cfg = Config.configure_data_node(id="summary_statistic_type", default_data="median") high_value_summary_df_cfg = Config.configure_data_node(id="high_value_summary_df") # -------------------- Tasks -------------------- preprocess_and_score_task_cfg = Config.configure_task( id="preprocess_and_score", function=preprocess_and_score, skippable=True, input=[path_to_data_cfg], output=[scored_df_cfg], ) featurization_and_segmentation_task_cfg = Config.configure_task( id="featurization_and_segmentation", function=featurization_and_segmentation, skippable=True, input=[scored_df_cfg, payment_threshold_cfg, score_threshold_cfg], output=[segmented_customer_df_cfg], ) segment_analysis_task_cfg = Config.configure_task( id="segment_analysis", function=segment_analysis, skippable=True, input=[segmented_customer_df_cfg, metric_cfg], output=[segment_result_cfg], ) high_value_cust_summary_statistics_task_cfg = Config.configure_task( id="high_value_cust_summary_statistics", function=high_value_cust_summary_statistics, skippable=True, input=[segment_result_cfg, segmented_customer_df_cfg, summary_statistic_type_cfg], output=[high_value_summary_df_cfg], ) scenario_cfg = Config.configure_scenario( id="scenario_1", task_configs=[ preprocess_and_score_task_cfg, featurization_and_segmentation_task_cfg, segment_analysis_task_cfg, high_value_cust_summary_statistics_task_cfg, ], ) ``` 號 您可以在[此處的文件](https://docs.taipy.io/en/latest/manuals/core/config/)中閱讀有關配置場景、任務和資料節點的更多資訊。 --- ### Taipy Studio [Taipy Studio](https://docs.taipy.io/en/latest/manuals/studio/config/) **是來自Taipy 的VS Code 擴充功能**，讓您**透過簡單的方式建置和視覺化您的管道拖放互動**。 Taipy Studio 提供了一個圖形編輯器，您可以在其中建立 Taipy 配置**存儲在 TOML 文件中**，您的 Taipy 應用程式可以加載並執行這些配置。 編輯器將場景表示為圖形，其中節點是資料節點和任務。 --- *作為本節中 config.py 腳本的替代方案，您可以使用 Taipy Studio 產生 config.toml 設定檔。 本文的倒數第二部分將提供有關如何使用 Taipy Studio 建立 config.toml 設定檔的指南。* --- ## 6. 場景建立與執行 執行 Taipy 場景涉及： - 載入配置； - 執行 Taipy Core 服務；和 - 建立並提交場景以供執行。 這是基本的程式碼模板： ``` import taipy as tp from config import scenario_cfg # Import the Scenario configuration tp.Core().run() # Start the Core service scenario_1 = tp.create_scenario(scenario_cfg) # Create a Scenario instance scenario_1.submit() # Submit the Scenario for execution # Total runtime: 74.49s ``` --- ### 跳過不必要的任務執行 Taipy 最實用的功能之一是，如果任務的輸出已經計算出來，它能夠跳過任務執行。 讓我們透過一些場景來探討這一點： --- #### 更改付款閾值 ``` # Changing Payment Threshold to 1600 scenario_1.payment_threshold.write(1600) scenario_1.submit() # Total runtime: 31.499s ``` *發生了什麼事*：Taipy 夠聰明，可以跳過任務 1，因為付款閾值只影響任務 2。 在這種情況下，透過使用 Taipy 執行管道，我們發現執行時間減少了 50% 以上。 --- #### 更改細分分析指標 ``` # Changing metric to median scenario_1.metric.write("median") scenario_1.submit() # Total runtime: 23.839s ``` *會發生什麼事*：在這種情況下，只有任務 3 和任務 4 受到影響。 Taipy 巧妙地跳過任務 1 和任務 2。 --- #### 更改總計統計類型 ``` # Changing summary_statistic_type to max scenario_1.summary_statistic_type.write("max") scenario_1.submit() # Total runtime: 5.084s ``` *發生了什麼事*：這裡，只有任務 4 受到影響，Taipy 僅執行此任務，跳過其餘任務。 Taipy 的智慧任務跳過功能不僅能節省時間，還能節省時間。它是一個資源優化器，在處理大型資料集時變得非常有用。 --- ## 7. Taipy Studio 您可以使用 Taipy Studio 建置 Taipy *config.toml* 設定檔來取代定義 *config.py* 腳本。 ![Studio 內的 DAG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ct0bcisreqmg56mk4fgm.png) 首先，使用擴展市場安裝 [Taipy Studio ](https://marketplace.visualstudio.com/items?itemName=Taipy.taipy-studio)擴充。 --- ### 建立配置 - **建立設定檔**：在 VS Code 中，導覽至 Taipy Studio，然後透過點擊參數視窗上的 + 按鈕啟動新的 TOML 設定檔。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jqe1fq87jaauf56b7hg.png) - 然後右鍵單擊它並選擇 **Taipy：顯示視圖**。 ![配置顯示視圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7rkyipli0oq13iw8mxc.png) - **新增實體**到您的 Taipy 配置： 在 Taipy Studio 的右側，您應該會看到一個包含 3 個圖示的列表，可用於設定管道。 ![配置圖示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyxvv15nu9xr87n5y7q1.png) 1. 第一項是新增資料節點。您可以將任何 Python 物件連結到 Taipy 的資料節點。 2. 第二項用於新增任務。任務可以連結到預先定義的 Python 函數。 3. 第三項是新增場景。 Taipy 讓您在一個配置中擁有多個場景。 --- #### - 資料節點 **輸入資料節點**：建立一個名為“*path_to_data*”的資料節點，然後導航到“詳細資料”選項卡，新增屬性“*default_data*”，並將“*SMALL_amazon_customers_data.csv*”貼上為您的資料的路徑資料集。 --- **中間資料節點**：我們需要再增加四個資料節點：「*scored_df*」、「*segmented_customer_df*」、「*segment_result*」、「*high_value_summary_df*」。透過 Taipy 的智慧設計，您無需為這些中間資料節點進行任何配置；系統會巧妙地處理它們。 --- **具有預設值的中間資料節點**：我們最終定義了另外四個中間資料節點，並將「*default_data*」屬性設為以下內容： - payment_threshold: “1000:int” ![資料節點檢視](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odkrz0pq2dhqpm0gnta2.png) - 分數閾值：“1.5：浮動” - 測量：“平均值” -summary_statistic_type：“中位數” --- #### - 任務 點擊新增任務按鈕，您可以配置新任務。 新增四個任務，然後**將每個任務連結到「詳細資料」標籤下的對應函數**。 Taipy Studio 將掃描您的專案資料夾並提供可供選擇的分類函數列表，並按 Python 檔案排序。 --- **任務 1** (*preprocess_and_score*)：在 Taipy studio 中，您可以按一下「任務」圖示以新增任務。 您可以將輸入指定為“*path_to_data*”，將輸出指定為“*scored_df*”。 然後，在「詳細資料」標籤下，您可以將此任務連結到 *algos.algo.preprocess_and_score* 函數。 ![任務流程及評分](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnc57wbxafjh2s3m6fat.png) --- **任務 2** (*featurization_and_segmentation*)：與任務 1 類似，您需要指定輸入 (“*scored_df*”、“* payment_threshold*”、“*score_threshold*”) 和輸出 (“*segmented_customer_df*”) ” ）。將此任務連結到 *algos.algo.featurization_and_segmentation* 函數。 ![任務特徵化](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbtm200u9meq1x1rcy2w.png) --- **任務 3** (*segment_analysis*)：輸入為“*segmented_customer_df*”和“*metric*”，輸出為“*segment_result*”。 連結到 *algos.algo.segment_analysis* 函數。 ![任務片段分析](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnnl1w1q0blebzbyawvt.png) --- **任務 4** (high_value_cust_summary_statistics)：輸入包含「*segment_result*」、「*segmented_customer_df*」和「*summary_statistic_type*」。輸出為“*high_value_summary_df*”。連結到 *algos.algo.high_value_cust_summary_statistics* 函數。 ![任務統計](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tynu6e718z1dwf8id05m.png) --- ## 結論 Taipy 提供了一種**智慧方式來建立和管理資料管道**。 特別是可跳過的功能使其成為優化運算資源和時間的強大工具，在涉及大型資料集的場景中特別有用。 Dask 提供了資料操作的原始能力，而 Taipy 增加了一層智能，使您的管道不僅強大而且智能。 --- 其他資源 如需完整程式碼和 TOML 配置，您可以存取此 [GitHub 儲存庫](https://github.com/Avaiga/demo-dask-customer-analysis/tree/develop)。若要深入了解 Taipy，請參閱[官方文件](https://docs.taipy.io/en/latest/)。 一旦您了解 Taipy 場景管理，您就可以更有效率地為最終用戶建立資料驅動的應用程式。只需專注於您的演算法，Taipy 就會處理剩下的事情。 --- ![很多](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ua3x4t3yttba6g25jjqo.gif) 希望您喜歡這篇文章！ --- 原文出處：https://dev.to/taipy/big-data-models-vs-computer-memory-4po6

0個讚   0留言 143瀏覽

🦃 Reacts-giving：為專業人士提供 11 個 React 元件👩🏻‍🌾🍁

## 簡介 我收集了最好的 React 元件，您可以使用它來建立強大的 Web 應用程式。 每個都有自己的味道。 別忘了表達你的支持🌟 現在，讓我們仔細閱讀這段程式碼！ 🍽️ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2p4508nvzg74qd060lx.gif) --- ## 1. [CopilotPortal](https://github.com/RecursivelyAI/CopilotKit)：將可操作的 GPT 聊天機器人嵌入您的網路應用程式中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0s5nodilnbgy2myna6ny.png) 將 GPT 支援的聊天機器人插入您的 React 應用程式中。 可以將 RAG 與雲端和應用程式狀態即時整合。 需要幾行程式碼才能嵌入。 ``` 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/RecursivelyAI/CopilotKit --- ## 2. [ClickVote](https://github.com/clickvote/clickvote) - 按讚、投票並查看任何上下文 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xubftfmy9xum98zjgv5m.png) 輕鬆將點讚、按讚和評論加入到您的網路應用程式中。 用於加入這些元件的簡單反應程式碼。 ``` import { ClickVoteProvider } from '@clickvote/react'; import { ClickVoteComponent } from '@clickvote/react'; import { LikeStyle } from '@clickvote/react'; <ClickVoteProvider> <ClickVoteComponent id={CONTEXT} voteTo={ID}> {(props) => <LikeStyle {...props} />} </ClickVoteComponent> </ClickVoteProvider> ``` https://github.com/clickvote/clickvote --- ## 3. [React Flow](https://github.com/xyflow/xyflow) - 建立可拖曳工作流程的最佳方式！ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8hy0bsacbfzctin4r7tq.png) 專為建立基於節點的編輯器和互動式圖表而客製化的 React 元件。 它具有高度可自訂性，提供拖放功能以實現高效的工作流程建立。 ``` import ReactFlow, { MiniMap, Controls, Background, useNodesState, useEdgesState, addEdge, } from 'reactflow'; <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} > <MiniMap /> <Controls /> <Background /> </ReactFlow> ``` https://github.com/xyflow/xyflow --- ## 4. [CopilotTextarea](https://github.com/RecursivelyAI/CopilotKit/tree/main/CopilotKit/packages/react-textarea) - React 應用程式中的 AI 驅動寫作 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uye8z6aac1015iiqd3lk.png) 具有 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 --- ## 5. [Novu](https://github.com/novuhq/novu) - 將應用程式內通知新增至您的應用程式！ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c81fkg15xucqbyg4xctt.png) 用於在一個地方管理所有通訊管道的簡單元件和 API：電子郵件、SMS、Direct 和 Push 您可以使用此 React 元件為您的應用程式新增應用程式內通知。 ``` import { NovuProvider, PopoverNotificationCenter, NotificationBell, IMessage, } from "@novu/notification-center"; <NovuProvider subscriberId={"SUBSCRIBER_ID"} applicationIdentifier={"APPLICATION_IDENTIFIER"} > <PopoverNotificationCenter colorScheme="dark"> {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />} </PopoverNotificationCenter> </NovuProvider> ``` https://github.com/novuhq/novu --- ## 6. [ReactIcons](https://github.com/react-icons/react-icons) - 最受歡迎的反應圖示集合 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1sj51u7omogoa5v7di6.png) 輕鬆將 Font Awesome、Material Design 等中的流行圖標加入到您的 React 應用程式中。 為開發人員提供簡單、廣泛的選擇。 ``` import { FaBeer } from "react-icons/fa"; function Question() { return ( <h3> Lets go for a <FaBeer />? </h3> ); } ``` https://github.com/react-icons/react-icons --- ## 7. [React-dropzone](https://github.com/react-dropzone/react-dropzone) - 新增 HTML5 拖放 UI。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apr4lbjc1i0glbs0kize.png) 用於實作 HTML5 拖放區域的簡單 React 鉤子，重點放在檔案互動。 它提供了一個易於使用的介面，用於向 React 應用程式加入檔案拖放功能。 ``` import React from 'react'; import {useDropzone} from 'react-dropzone'; const Basic = (props)=>{ const {acceptedFiles, getRootProps, getInputProps} = useDropzone(); const files = acceptedFiles.map(file => ( <li key={file.path}> {file.path} - {file.size} bytes </li> )); return ( <section className="container"> <div {...getRootProps({className: 'dropzone'})}> <input {...getInputProps()} /> <p>Drag 'n' drop some files here, or click to select files</p> </div> <aside> <h4>Files</h4> <ul>{files}</ul> </aside> </section> ); } export default Basic; ``` https://github.com/react-dropzone/react-dropzone --- ## 8. [React ChartJS 2](https://github.com/reactchartjs/react-chartjs-2) - 建立和整合各種圖表。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k820fg3ep6cocfukqdny.png) 用於在 React 應用程式中繪製圖表的即插即用解決方案，類似於 Chart.js 功能。 啟用動態、互動式圖表。 適用於即時資料或預定義資料集。 ``` import React from 'react'; import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'; import { Doughnut } from 'react-chartjs-2'; ChartJS.register(ArcElement, Tooltip, Legend); const data = { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [ { label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', ], borderColor: [ 'rgba(255, 99, 132, 1)', ], borderWidth: 1, }, ], }; export default function ShowChart() { return <Doughnut data={data} />; } ``` https://github.com/reactchartjs/react-chartjs-2 ## 9. [Redux](https://github.com/reduxjs/redux) - 可預測的狀態容器庫 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7iv2maik6xq4w5yl21y.png) JavaScript 應用程式中 Redux 的無縫補充，提供可靠的狀態管理。 確保一致的應用程式行為。 便於輕鬆除錯和測試。 與各種庫整合。 https://github.com/reduxjs/redux --- ## 10. [Blueprint](https://github.com/palantir/blueprint) - Palantir 的密集 UI 庫 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/176noa7v8f25ll0jixqn.png) 提供一組用於建立複雜且資料豐富的介面的元件和樣式。 設計和開發具有現代外觀和感覺的類似桌面的 Web 應用程式。 由 Palantir 開發 ``` import React from 'react'; import '@blueprintjs/core/lib/css/blueprint.css'; import { H3, H4, OL, Pre } from "@blueprintjs/core"; function App() { return ( <div style={{ display: 'block', width: 500, padding: 30 }}> <h4>ReactJS Blueprint HTML Elements Component</h4> Heading Component: <H4>H4 Size Heading</H4> <H3>H3 Size Heading</H3> <br></br> OrderList Component: <OL> <li>1st item</li> <li>2nd item</li> </OL> Pre Component: <Pre>Sample Pre</Pre> </div> ); } ``` https://github.com/palantir/blueprint --- ## 11. [Headless UI](https://github.com/tailwindlabs/headlessui) - 可存取的 Tailwind 整合 UI 元件。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vsxfiivef7du8u3g5i5l.png) 在 React 和 Vue 應用程式中建立可存取的 UI 元件。 適用於即時資料或預定義資料集，使其成為現代 Web 開發專案的寶貴補充 ``` import React, { useState } from 'react'; import { Dialog } from '@headlessui/react'; function MyDialog() { let [isOpen, setIsOpen] = useState(true); return ( <Dialog open={isOpen} onClose={() => setIsOpen(false)} className="relative z-50"> {/* The backdrop, rendered as a fixed sibling to the panel container */} <div className="fixed inset-0 bg-black/30" aria-hidden="true" /> {/* Full-screen container to center the panel */} <div className="fixed inset-0 flex w-screen items-center justify-center p-4"> {/* Your dialog content goes here */} </div> </Dialog> ); } ``` https://github.com/tailwindlabs/headlessui --- 保存這些元件，以便像朝聖者一樣專業地建造。 謝謝大家，節日快樂！ --- 原文出處：https://dev.to/copilotkit/reacts-giving-11-react-components-for-aspiring-pros-eck

0個讚   0留言 173瀏覽

🚀 發送 Github 星星監測通知的 4 種方式 ⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️

# 簡介 在上一篇文章中，我討論了建立一個[GitHub stars 監視器](https://dev.to/triggerdotdev/take-nextjs-to-the-next-level-create-a-github-stars-monitor-130a)。 在這篇文章中，我想向您展示如何每天了解新星的資訊。 我們將學習： - 如何建立通用系統來建立和使用提供者。 - 如何使用提供者發送通知。 - 使用不同提供者的不同用例。 ![通知](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5uwpjomw3pbrpq885q8z.gif) --- ## 你的後台工作平台🔌 [Trigger.dev](https://trigger.dev/) 是一個開源程式庫，可讓您使用 NextJS、Remix、Astro 等為您的應用程式建立和監控長時間執行的作業！   [![GiveUsStars](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bm9mrmovmn26izyik95z.gif)](https://github.com/triggerdotdev/trigger.dev) 請幫我們一顆星🥹。 這將幫助我們建立更多這樣的文章💖 https://github.com/triggerdotdev/trigger.dev --- ## 讓我們來設定一下 🔥 我們將建立不同的提供者來通知我們何時有新的明星。我們將設定「電子郵件」、「簡訊」、「Slack」和「Discord」通知。 我們的目標是讓每個貢獻者都足夠簡單，以便在未來貢獻更多的提供者。 每個提供者都會有一組不同的參數，有些只有“API 金鑰”，有些則有電話號碼，具體取決於提供者。 為了驗證這些金鑰，讓我們安裝“zod”；它是一個很棒的庫，可以定義模式並根據模式檢查資料。 您可以透過執行以下命令開始： ``` npm install zod --save ``` 完成後，建立一個名為「providers」的新資料夾，然後在其中建立一個名為「register.provider.ts」的新檔案。 這是文件的程式碼： ``` import {Schema} from "zod"; export function registerProvider<T>( name: string, options: {active: boolean}, validation: Schema<T>, run: (libName: string, stars: number, values: T) => Promise<void> ) { // if not active, we can just pass an empty function, nothing will run if (!options.active) { return () => {}; } // will validate and remove unnecessary values (Security wise) const env = validation.parse(process.env); // return the function we will run at the end of the job return async (libName: string, stars: number) => { console.log(`Running provider ${name}`); await run(libName, stars, env as T); console.log(`Finished running provider ${name}`); } } ``` 程式碼不多，但可能有點複雜。 我們首先建立一個名為「registerProvider」的新函數。該函數獲得一個通用類型“T”，基本上是我們所需的環境變數。 然後我們還有 4 個參數： - 名稱 - 可以是「Twilio」、「Discord」、「Slack」或「Resend」中的任何一個。 - 選項 - 目前，一個參數是提供者是否處於活動狀態？ - 驗證 - 在這裡，我們在 .env 檔案中傳遞所需參數的「zod」模式。 - run - 實際上用於發送通知。請注意，傳入其中的參數是庫名稱、星星數量以及我們在「validation」中指定的環境變數 **然後我們就有了實際的功能：** 首先，我們檢查提供者是否處於活動狀態。如果沒有，我們發送一個空函數。 然後，我們驗證並提取我們在模式中指定的變數。如果變數缺少 `zod` 將發送錯誤並且不會讓應用程式執行。 最後，我們傳回一個函數，該函數會取得庫名稱和星星數量並觸發通知。 在我們的「providers」資料夾中，建立一個名為「providers.ts」的新文件，並在其中新增以下程式碼： ``` export const Providers = []; ``` 稍後，我們將在那裡加入所有提供者。 --- ## 修改 TriggerDev 作業 本文是上一篇關於建立 [GitHub stars 監視器](https://dev.to/triggerdotdev/take-nextjs-to-the-next-level-create-a-github-stars-monitor-130a)。 編輯檔案 `jobs/sync.stars.ts` 並將以下程式碼加入檔案底部： ``` const triggerNotification = client.defineJob({ id: "trigger-notification", name: "Trigger Notification", version: "0.0.1", trigger: invokeTrigger({ schema: z.object({ stars: z.number(), library: z.string(), providerNumber: z.number(), }) }), run: async (payload, io, ctx) => { await io.runTask("trigger-notification", async () => { return Providers[payload.providerNumber](payload.library, payload.stars); }); } }); ``` 此作業取得星星數量、圖書館名稱和提供者編號，並從先前定義的提供者觸發特定提供者的通知。 現在，我們繼續修改“getStars”，在函數末尾加入以下程式碼： ``` for (let i = 0; i < Providers.length; i++) { await triggerNotification.invoke(payload.name + '-' + i, { library: payload.name, stars: stargazers_count - payload.previousStarCount, providerNumber: i, }); } ``` 這將觸發每個圖書館的通知。 完整頁面程式碼： ``` import { cronTrigger, invokeTrigger } from "@trigger.dev/sdk"; import { client } from "@/trigger"; import { prisma } from "../../helper/prisma"; import axios from "axios"; import { z } from "zod"; import {Providers} from "@/providers/providers"; // Your first job // This Job will be triggered by an event, log a joke to the console, and then wait 5 seconds before logging the punchline. client.defineJob({ id: "sync-stars", name: "Sync Stars Daily", version: "0.0.1", // Run a cron every day at 23:00 AM trigger: cronTrigger({ cron: "0 23 * * *", }), run: async (payload, io, ctx) => { const repos = await io.runTask("get-stars", async () => { // get all libraries and current amount of stars return await prisma.repository.groupBy({ by: ["name"], _sum: { stars: true, }, }); }); //loop through all repos and invoke the Job that gets the latest stars for (const repo of repos) { await getStars.invoke(repo.name, { name: repo.name, previousStarCount: repo?._sum?.stars || 0, }); } }, }); const getStars = client.defineJob({ id: "get-latest-stars", name: "Get latest stars", version: "0.0.1", // Run a cron every day at 23:00 AM trigger: invokeTrigger({ schema: z.object({ name: z.string(), previousStarCount: z.number(), }), }), run: async (payload, io, ctx) => { const stargazers_count = await io.runTask("get-stars", async () => { const {data} = await axios.get(`https://api.github.com/repos/${payload.name}`, { headers: { authorization: `token ${process.env.TOKEN}`, }, }); return data.stargazers_count as number; }); await io.runTask("upsert-stars", async () => { await prisma.repository.upsert({ where: { name_day_month_year: { name: payload.name, month: new Date().getMonth() + 1, year: new Date().getFullYear(), day: new Date().getDate(), }, }, update: { stars: stargazers_count - payload.previousStarCount, }, create: { name: payload.name, stars: stargazers_count - payload.previousStarCount, month: new Date().getMonth() + 1, year: new Date().getFullYear(), day: new Date().getDate(), }, }); }); for (let i = 0; i < Providers.length; i++) { await triggerNotification.invoke(payload.name + '-' + i, { library: payload.name, stars: stargazers_count - payload.previousStarCount, providerNumber: i, }); } }, }); const triggerNotification = client.defineJob({ id: "trigger-notification", name: "Trigger Notification", version: "0.0.1", trigger: invokeTrigger({ schema: z.object({ stars: z.number(), library: z.string(), providerNumber: z.number(), }) }), run: async (payload, io, ctx) => { await io.runTask("trigger-notification", async () => { return Providers[payload.providerNumber](payload.library, payload.stars); }); } }); ``` 現在，有趣的部分🎉 讓我們繼續建立我們的提供者！ 首先建立一個名為「providers/lists」的新資料夾 --- ## 1. Discord ![Discord](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqw7u3s19vtffxc197up.png) 建立一個名為「discord.provider.ts」的新檔案並新增以下程式碼： ``` import {object, string} from "zod"; import {registerProvider} from "@/providers/register.provider"; import axios from "axios"; export const DiscordProvider = registerProvider( "discord", {active: true}, object({ DISCORD_WEBHOOK_URL: string(), }), async (libName, stars, values) => { await axios.post(values.DISCORD_WEBHOOK_URL, {content: `The library ${libName} has ${stars} new stars!`}); } ); ``` 如您所見，我們正在使用 `registerProvider` 建立一個名為 DiscordProvider 的新提供程序 - 我們將名稱設定為“discord” - 我們將其設定為活動狀態 - 我們指定需要一個名為「DISCORD_WEBHOOK_URL」的環境變數。 - 我們使用 Axios 的簡單 post 指令將資訊加入支票中。 若要取得“DISCORD_WEBHOOK_URL”： 1. 前往您的 Discord 伺服器 2. 點選其中一個頻道的“編輯” 3. 轉到“整合” 4. 點選“建立 Webhook” 5. 點選建立的 webhook，然後點選“複製 webhook URL” 在根專案上編輯“.env”檔案並加入 ``` SLACK_WEBHOOK_URL=<your copied url> ``` ![Spidy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oyxvihf75afjubopy6dp.png) --- ## 2. Slack ![Slack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9t9ep538nt39j0xylcqp.png) 建立一個名為「slack.provider.ts」的新檔案並新增以下程式碼： ``` import {object, string} from "zod"; import {registerProvider} from "@/providers/register.provider"; import axios from "axios"; export const SlackProvider = registerProvider( "slack", {active: true}, object({ SLACK_WEBHOOK_URL: string(), }), async (libName, stars, values) => { await axios.post(values.SLACK_WEBHOOK_URL, {text: `The library ${libName} has ${stars} new stars!`}); } ); ``` 如您所見，我們正在使用 `registerProvider` 建立一個名為 SlackProvider 的新提供者 - 我們將名稱設定為“slack” - 我們將其設定為活動狀態 - 我們指定需要一個名為「SLACK_WEBHOOK_URL」的環境變數。 - 我們使用 Axios 的簡單 post 指令將資訊加入支票中。 要取得“SLACK_WEBHOOK_URL”： 1. 使用下列 URL 建立新的 Slack 應用程式：https://api.slack.com/apps?new_app=1 2. 選擇第一個選項：“從頭開始” 3. 指定應用程式名稱（任意）以及您想要新增通知的 Slack 工作區。點擊“建立應用程式”。 4. 在“新增特性和功能”中，按一下“傳入掛鉤” 5. 在啟動傳入 Webhooks 中，將其變更為「開啟」。 6. 按一下「將新 Webhook 新增至工作區」。 7. 選擇您想要的頻道並點選「允許」。 8. 複製 Webhook URL。 在根專案上編輯“.env”檔案並加入 ``` SLACK_WEBHOOK_URL=<your copied url> ``` ![SlackBot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stlaf1xmprg629tjz7wv.png) --- ## 3. 電子郵件 ![電子郵件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wq6t424munx90pdtzp7c.png) 您可以使用不同類型的電子郵件提供者。例如，我們將使用**Resend**來傳送電子郵件。 為此，讓我們在我們的專案上安裝重新發送： ``` npm install resend --save ``` 建立一個名為「resend.provider.ts」的新檔案並新增以下程式碼： ``` import {object, string} from "zod"; import {registerProvider} from "@/providers/register.provider"; import axios from "axios"; import { Resend } from 'resend'; export const ResendProvider = registerProvider( "resend", {active: true}, object({ RESEND_API_KEY: string(), }), async (libName, stars, values) => { const resend = new Resend(values.RESEND_API_KEY); await resend.emails.send({ from: "Eric Allam <[email protected]>", to: ['[email protected]'], subject: 'New GitHub stars', html: `The library ${libName} has ${stars} new stars!`, }); } ); ``` 如您所見，我們正在使用 `registerProvider` 建立一個名為 ResendProvider 的新提供程序 - 我們將名稱設定為“重新發送” - 我們將其設定為活動狀態 - 我們指定需要一個名為「RESEND_API_KEY」的環境變數。 - 我們使用重新發送庫向自己發送一封包含新星數的電子郵件。 若要取得“RESEND_API_KEY”： 1. 建立一個新帳戶：https://resend.com 2. 前往「API 金鑰」或使用此 URL https://resend.com/api-keys 3. 按一下“+ 建立 API 金鑰”，新增金鑰名稱，選擇“傳送存取”並使用預設的“所有網域”。單擊新增。 4. 複製 API 金鑰。 在根專案上編輯“.env”檔案並加入 ``` RESEND_API_KEY=<your API key> ``` ![埃里克·阿拉姆](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhk2hd2f53yfojn96yf3.png) --- ## 4.簡訊 ![Twilio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/036fdgpt0mp5h7wrisrn.png) SMS 有點複雜，因為它們需要多個變數。 為此，我們在專案中安裝 Twilio： ``` npm install twilio --save ``` 建立一個名為「twilio.provider.ts」的新檔案並新增以下程式碼： ``` import {object, string} from "zod"; import {registerProvider} from "@/providers/register.provider"; import axios from "axios"; import client from 'twilio'; export const TwilioProvider = registerProvider( "twilio", {active: true}, object({ TWILIO_SID: string(), TWILIO_AUTH_TOKEN: string(), TWILIO_FROM_NUMBER: string(), TWILIO_TO_NUMBER: string(), }), async (libName, stars, values) => { const twilio = client(values.TWILIO_SID, values.TWILIO_AUTH_TOKEN); await twilio.messages.create({ body: `The library ${libName} has ${stars} new stars!`, from: values.TWILIO_FROM_NUMBER, to: values.TWILIO_TO_NUMBER, }); } ); ``` 如您所見，我們正在使用 `registerProvider` 建立一個名為 TwilioProvider 的新提供者 - 我們將名稱設定為“twilio” - 我們將其設定為活動狀態 - 我們指定需要環境變數：`TWILIO_SID`、`TWILIO_AUTH_TOKEN`、`TWILIO_FROM_NUMBER` 和 `TWILIO_TO_NUMBER` - 我們使用 Twilio「建立」功能發送簡訊。 取得“TWILIO_SID”、“TWILIO_AUTH_TOKEN”、“TWILIO_FROM_NUMBER”和“TWILIO_TO_NUMBER” 1. 在 https://twilio.com 建立一個新帳戶 2. 標記您要使用它來發送簡訊。 3. 點選“取得電話號碼” 4. 複製“帳戶 SID”、“身份驗證令牌”和“我的 Twilio 電話號碼” 在根專案上編輯“.env”檔案並加入 ``` TWILIO_SID=<your SID key> TWILIO_AUTH_TOKEN=<your AUTH TOKEN key> TWILIO_FROM_NUMBER=<your FROM number> TWILIO_TO_NUMBER=<your TO number> ``` ![TwilioSMS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/474q2p4ejvji18xuo9om.png) --- ## 建立新的提供者 正如您所看到的，現在建立提供者非常容易。 您也可以使用開源社群來建立新的提供程序，因為他們只需要在「providers/list」目錄中建立一個新檔案。 最後要做的事情是編輯“providers.ts”檔案並加入所有提供程序。 ``` import {DiscordProvider} from "@/providers/list/discord.provider"; import {ResendProvider} from "@/providers/list/resend.provider"; import {SlackProvider} from "@/providers/list/slack.provider"; import {TwilioProvider} from "@/providers/list/twilio.provider"; export const Providers = [ DiscordProvider, ResendProvider, SlackProvider, TwilioProvider, ]; ``` 請隨意建立更多推播通知、網路推播通知、應用程式內通知等提供者。 你就完成了🥳 --- ## 讓我們聯絡吧！ 🔌 作為開源開發者，我們邀請您加入我們的[社群](https://discord.gg/nkqV9xBYWy)，以做出貢獻並與維護者互動。請隨時造訪我們的 [GitHub 儲存庫](https://github.com/triggerdotdev/trigger.dev)，貢獻並建立與 Trigger.dev 相關的問題。 本教學的源程式碼可在此處取得： [https://github.com/triggerdotdev/blog/tree/main/stars-monitor-notifications](https://github.com/triggerdotdev/blog/tree/main/stars-monitor-notifications) 感謝您的閱讀！ --- 原文出處：https://dev.to/triggerdotdev/top-4-ways-to-send-notifications-about-new-stars-1cgb

0個讚   0留言 140瀏覽

作為開發者賺取額外現金的 50 種方法💰

目前大環境不好，但作為開發人員，我們擁有一套獨特的技能，如果您知道在哪裡尋找，這些技能的需求量很大！ 這篇文章簡要概述了 50 個作為開發人員可以用來賺取額外收入的副業 --- ### 1. 銷售注意力 基於參與度的收入是指您將根據使用者在您的網站、個人資料或消費您的內容上花費的時間來獲得收入分成。它通常很小，至少對於較小的網站或創作者來說是這樣，但隨著時間的推移，它會增加，任何人都可以啟用它 - 所以你不會有任何損失。 - [Brave](https://creators.brave.com/) - 為使用 Brave 瀏覽器造訪您的網站、個人資料或查看您的內容的使用者付費。資金以 [BAT](https://basicattentiontoken.org/) 形式存入您的 Uphold 帳戶，然後可以以美元、英鎊或歐元形式提取至您的銀行帳戶 - [Flattr](https://flattr.com/) - 付費使用 Flattr 的用戶將其資金分配給用戶存取過其內容的創作者 > 幾年前，我親自報名了 Brave Rewards。在驗證了我的網域和個人資料的所有權後，我每月一直賺幾英鎊 - 到目前為止大約 200 英鎊以上（儘管我是 Firefox 用戶！）。雖然不多，但只需付出很少的努力，就值得了。 有關其工作原理的更多訊息，請查看 [webmonetization.org](https://webmonetization.org/) 規範，該規範利用了 [付款指針](https://paymentpointers.org/)通過[ILP](https://interledger.org/) 透過使用簡單的`<link rel="monetization" href="your-pointer-here" />` 標籤來串流來自支援WM 的訪客的收入。 --- ### 2. API 即服務 RapidAPI 等平台可讓您從 API 中[賺取被動收入](https://rapidapi.com/guides/earn-a-passive-venue-by-monetizing-apis-as-a-developer)。 建置並部署簡單的 API 後，您可以將其匯入 RapidAPI Hub，選擇使用和定價計劃，然後點擊發布。您的 API 可大可小，如您所願。 如果您正在為一個簡單的第一個專案尋找靈感，請考慮將開放資料集轉換為 API。對於初學者，RapidAPI 有一個關於如何入門的[影片系列](https://rapidapi.com/courses/build-and-sell-your-own-api)。其他想法可能包括將現有套件包裝為 API、向其他服務（如 OpenAI）加入功能或建置執行一些簡單計算的端點。 --- ### 3. 發放賞金 這些是開源專案的熱門功能請求。用戶可以在承諾一定金額的情況下提供“賞金”，然後將其支付給第一個完成並合併該功能的開發人員。 - [BOSS.dev](https://www.boss.dev/) - 完成功能請求和錯誤修復，獎金從 30 美元到 1000 美元不等。 --- ### 4. 贊助商 如果您在 GitHub 或其他平台上有業務，那麼啟用贊助是一種為您的工作帶來收入的有益方式。 不要忘記啟用贊助商按鈕。這適用於各種平台以及 GitHub 贊助商 - [GitHub Sponsors](https://github.com/sponsors) - 對於開發人員（無論規模大小）來說都是一個不錯的選擇。如果支持者已經在 GitHub 上，則零費用且進入門檻低 - [Patreon](https://www.patreon.com/) - 允許向您的支持者提供福利和獨家內容。如果您在 GitHub 以外的其他平台上有業務，這是一個不錯的選擇 - [LibrePay](https://liberapay.com/) - 針對那些建立開源內容的人 - [Open Collective](https://opencollective.com/) - 如果您正在為特定專案籌集資金，並使用收益來支持該專案（而不是個人），那麼這是一個不錯的選擇 - [Steday](https://steadyhq.com/en) - [TideLift](https://tidelift.com) - 更針對那些開發企業級開源專案的人，潛在收入更大，但僅限於最大的專案 - [LFX](https://lfx.linuxfoundation.org/) - 由 Linux 基金會提供 > 贊助（特別是GitHub 贊助商）是我個人最喜歡的方法之一，因為付費是可選的，所以你不會阻止那些無力承擔費用的人存取，而且那些支持你的人已經知道他們會預先得到什麼，所以您永遠不會讓客戶失望。 --- ### 5. 小費 您可能遇到過這樣的情況，您發現某個部落格文章、SO 答案、GitHub 儲存庫或論壇回應非常有幫助，以至於您希望可以為作者買一杯啤酒來表示感謝。 支援這些小額一次性付款的平台可以免費註冊，並且在您的個人資料中或在部落格文章末尾加入「提示」按鈕不會有任何損失。 - [Ko-fi](https://ko-fi.com/) - [請我喝杯咖啡](https://www.buymeacoffee.com/) - [Tipeee](https://en.tipeee.com/) - [PayPal Me](https://www.paypal.com/paypalme/) 提示：不要乞求。建立一些有用的內容，然後將提示連結放在底部。 --- ### 6. 企業贊助 許多具有一定下載量/經常性用戶的開源專案將開始被希望贊助創作者作品的公司接洽，以換取他們的公司徽標+連結包含在自述文件頂部附近。與個人贊助不同，這些贊助通常起價為 100-500 美元/月，專案使用量越大，贊助金額就越多。 --- ### 7. 黑客松 編碼競賽一直在遠端進行。這些通常由公司贊助，並向獲獎者支付現金獎勵。 - [程式碼之夏](https://summerofcode.withgoogle.com/) - 由 Google 執行，您將收到[貢獻者津貼](https://developers.google.com/open-source/gsoc/help/student-stipends) 成功接受後，金額從750 美元到6000 美元不等，金額取決於您所在的國家/地區和專案規模 - [CodeHeat](https://codeheat.org/) - 由 FOSS Asia 運營，每兩週 100 新元，外加較小的獎品 - [HackerEarth](https://www.hackerearth.com/challenges/hackathon/) - [Hackathon.com](https://www.hackathon.com/online) - [Devfolio 黑客松](https://devfolio.co/hackathons/upcoming) > 當我還是學生時，我[曾經參加過很多](https://alicia.omg.lol/hackathons) 黑客馬拉松（大部分是面對面的），並且經常能夠通過參加各種活動來資助我的暑假活動！這也是認識新朋友、學習新事物的好方法，而且非常有趣！ --- ### 8. 依賴套件的贊助 如果您有一個軟體包（例如 NPM 模組），那麼在您的設定檔中啟用贊助將允許您的程式碼的使用者在財務上做出貢獻。 - NPM 資金 - 您可能熟悉執行“npm 基金”，並查看您正在使用的正在尋求資金的軟體包清單。新增了 [npm 基金](https://docs.npmjs.com/cli/v6/commands/npm-fund)，以便更輕鬆地向專案所依賴的依賴項的維護者捐款。如果您維護 NPM 包，只需在 package.json 中包含「funding」字段，用戶將能夠更輕鬆地支援您。 - [StackAid](https://www.stackaid.us/) - 只需安裝 StackAid GitHub 應用程式並連結您的 Stripe 帳戶，直接或間接使用您專案的支持者捐贈的部分資金將分配給您每個月 - GitHub Sponsors - GitHub Sponsors 再次出現，因為它[讓用戶提供他們最常用的依賴項](https://github.com/sponsors/explore) - 儘管這是一個手動過程，而不是自動的。 --- ### 9. 回報問題 如果您注重安全性，或喜歡在應用程式中尋找錯誤和漏洞，那麼這款就適合您。最受歡迎的平台是[HackerOne](https://hackerone.com/opportunities/all/search?ordering=Highest+bounties)，每個負責任地披露的錯誤都可以在其中賺取20 到200,000 美元的收入。 許多其他網站也直接提供負責任的揭露政策，他們會獎勵您的工作。如果您對此感興趣，我在以下位置保留了 1000 多個賞金計劃的清單：[https://bug-bounties.as93.net](https://bug-bounties.as93.net) > 我個人透過這種方法取得了很大的成功，而且也很有趣 - 所以我強烈推薦它！ 其他值得查看的平台包括： - [HackerOne](https://www.hackerone.com/) - 排名第一的平台，最多的賞金以及良好的保護和支付率 - [Immunefi](https://immunefi.com/) - 專門針對 Web3 - [BugCrowd](https://www.bugcrowd.com/bug-bounty-list/) - [Intigriti](https://www.intigriti.com/) - [issuehunt](https://issuehunt.io/) --- ### 10.開放核心模型 這是您的大部分程式碼都是開源的，但某些擴充功能或附加元件（特別是針對企業客戶的擴充或附加元件）被授權為專有的。 因此，開發者可以在其他開源專案中自由使用該軟體。然而，公司必須為使用企業特定的模組或整合付費。 請記住，這通常說起來容易做起來難。您需要能夠分離專有功能，而大公司通常會採取一切措施（包括違反許可限制）來避免付費。 --- ### 11. 付費升級套件 這些服務可以輕鬆為常見註冊管理機構提供高級/付費方案。例如，如果您希望分發 NPM 模組的高級版本，或對特定軟體包功能收費，這可能是個不錯的選擇。 - [PrivJS](https://www.privjs.com/) - 分發 Node 套件的進階版本 - [CodeShip](https://codecodeship.com/) - 私人註冊中心，用戶需要付費才能使用你的包 --- ### 12.贊助支持 在開源專案中加入專業支援計劃選項使客戶能夠支付一次性或持續的幫助和支援費用，以啟動和執行。 這可以透過您自己的系統啟用，也可以使用現有的贊助平台（例如Patreon 和GitHub Sponsors），或使用專門的服務（例如[Otechie](https://otechie.com/)）來啟用，該服務加入了付費功能+ 支援通過嵌入的聊天對話框。 [Calendly](https://calendly.com/) 等工具可以讓客戶將時間放入日曆中，或者對於較大的專案，投資專用的客戶支援平台，例如[HelpScout](https://www.helpscout.com/) 可能會讓這件事變得更容易。 --- ### 13. 寫文件 - [撰寫文件](https://www.writethedocs.org/) 是所有文件的首選位置。 - [文件季節](https://developers.google.com/season-of-docs) - 在 Google 的支持下，每年都有技術作家為開源專案做出貢獻。參與專案將獲得 5,000 至 15,000 美元的贈款，然後通常透過 Open Collective 分發給貢獻者。 - 如果你環顧四周，你會發現還有很多產品正在尋找技術作家。 Julia 列出了一份[好名單](https://dev.to/juliafmorgado/get-paid-to-write-technical-articles-16cl)，列出了願意付費讓你撰寫技術內容的公司 - 版權也屬於這一類。 [scripted](https://www.scripted.com/) 等服務可讓您透過校對或編輯其他文字內容來賺錢。 即使只是記錄您自己的和其他開發人員的儲存庫也是一個不錯的起點。 如果專案被記錄下來，它的價值就會大幅增加。如果沒有文件，潛在使用者、客戶或開發人員將不知道它的用途、如何使用它、如何在其基礎上建立或如何做出貢獻。 > 我可能是唯一的一個，但我個人喜歡寫文件。 [我的所有專案](https://github.com/Lissy93?tab=repositories) 包括完整的使用、開發和貢獻文件。這促進了它們的成功和採用。我覺得如果你不花一點時間向人們展示如何使用它，那麼花幾個小時建立一些很棒的東西是沒有意義的。 --- ### 14. 廣告 在你跳過這一點之前——我也討厭廣告。它們很煩人，並且經常涉及某種形式的跟踪，從而損害用戶的隱私。但是，對於開源專案，還有一些其他選項沒有這些缺點。 - [Ethical Ads](https://www.ethicalads.io/) - [Carbon Ads](https://www.carbonads.net/open-source) 如果您正在維護獲得穩定流量的 GitHub 儲存庫、網站、部落格或服務，那麼這是一個不錯的選擇。通常每月至少需要約 10,000 個用戶，但如果您每月獲得 50,000 以上的用戶，您將獲得更好的回報。 --- ### 15. 出售你的程式碼 > 我個人不同意這種方法，只是因為出售的許多程式碼都是開源軟體的糟糕的重新設計版本，並且並不總是給予原始作者適當的榮譽。也就是說，一些開發商確實設法讓它發揮作用，建造簡單的專案然後將其出售。 - [IndieMaker](https://indiemaker.co/) - 出售您的整個專案 - [PieceX](https://www.piecex.com/) - 出售現成的原始碼 - [Codester](https://www.codester.com/info/seller) - 針對 PHP 和 Wordpress --- ### 16.銷售內容 當您查看開發人員的副業時，這是一個常見的建議。但有充分的理由 - 如果您能夠建立高品質的內容，您可以賺到很多錢。特別是如果您對新興領域有深入的了解。 銷售內容的熱門網站包括： - [GumRoad](https://gumroad.com/) - 程式碼、課程、貼文、藝術、設計、媒體（10% 費用） - [AppSumo](https://sell.appsumo.com/) - 程式碼、應用程式、擴充功能、課程、範本等 --- ### 17.寫作 這是一套獨特的技能。要么您非常擅長編寫引人入勝的內容，要么您對特定的熱門領域有深入的了解。否則，如果您對此感興趣，請考慮電子書出版，如果您的書不成功，也不會造成任何損失。 - [LeanPub](https://leanpub.com/) - 一個自助出版技術/開發電子書和課程的平台，具有豐厚的收入模式（您可以保留 70%） - [Amazon KDP](https://kdp.amazon.com/en_US/) - 發佈至 Amazon Kindle，並立即向全球數百萬用戶提供（亞馬遜將收取至少 30% 的佣金，可能會更多）小出版商） - [SmashWords](https://www.smashwords.com/) 和 [Draft2Digital](https://draft2digital.com/sw/) - 分發給全球其他電子書賣家，這是一種簡單的開始出版。他們收取的佣金比亞馬遜少，但比 LeanPub 多。 --- ### 18.補助金 補助金和企業贊助涉及多個領域，包括開源、創新、DeFi、人工智慧等。它們通常是為了幫助您在從事特定工作時支付短期生活費用。 - [GitHub Sponsors](https://github.com/sponsors) - 為個人和組織提供經濟支援開源開發者的平台。金額依贊助情況而有所不同。 - [Google Summer of Code (GSoC)](https://summerofcode.withgoogle.com/) - 學生開發者為開源專案做出貢獻的全球計劃，津貼通常為 1500 美元到 3300 美元不等。 - [Mozilla 開源支援 (MOSS)](https://www.mozilla.org/en-US/moss/) - 為開源軟體開發提供資助，特別是與 Mozilla 使命相符的專案。 - [Linux 基金會資助](https://www.linuxfoundation.org/) - 為從事 Linux 基金會專案的開發人員提供各種資助和獎學金。 - [NumFOCUS 小額發展補助金](https://numfocus.org/programs/small-development-grants) - 支援資料科學和科學計算的小型專案。資助金額各不相同（所有申請人均分配 285,000 美元）。 - [Apache 軟體基金會贊助](https://www.apache.org/foundation/sponsorship.html) - 對 Apache 軟體專案的財務支持，重點關注 Apache 軟體生態系統。 - [Outreachy](https://www.outreachy.org/) - 為技術領域代表性不足的群體提供為期三個月的實習機會，津貼通常約為 5,500 美元。 - [奈特基金會](https://knightfoundation.org/grants/) - 為促進優質新聞業的技術專案提供資助。根據專案範圍的不同，贈款金額差異很大。 - [原型基金](https://prototypefund.de/) - 在六個月內提供高達 47,500 歐元的開源原型支持，重點支持德國的軟體開發人員。 - [斯隆基金會](https://sloan.org/programs/digital-technology) - 為開放科學社群計畫提供資助，特別是那些增強研究中的開源軟體的計畫。 - [Chan Zuckerberg Initiative 開源軟體專案](https://chanzuckerberg.com/rfa/) - 專注於支援對生物醫學研究至關重要的開源軟體。資助金額各不相同。 - [Raspberry Pi 基金會](https://www.raspberrypi.org/grants/) - 為涉及 Raspberry Pi 和計算教育的教育計畫提供補助。 - [GitCoin](https://gitcoin.co/) - 一個為開源專案提供資金的眾籌平台，特別是在以太坊和 Web3 領域。資金根據社區支持而有所不同。 - [NLnet 基金會](https://nlnet.nl/foundation/) - 支援網路科技與網路研究計畫。補助金額各不相同。 - [開放技術基金](https://www.opentech.fund/) - 支持開發促進人權和開放社會的開放技術的專案。資金各不相同。 --- ### 19. 舉辦活動 活動空間是一個利潤豐厚的行業，尤其是如果您能夠舉辦一場精彩的活動並為自己贏得大型贊助商的話。雖然不適合所有人，但舉辦活動可以帶來以下 10 個潛在收入來源： - **門票銷售**：透過收取入場費來產生收入。使用 [Eventbrite](https://www.eventbrite.co.uk/)、[Meetup](https://meetup.com/) 或 [Ticketmaster](https://ticketmaster.com) 等平台取得門票管理。 - **贊助**：確保科技公司的財務捐助，以換取活動中的促銷機會。 - **研討會和培訓課程**：提供特定技術或程式語言的專業實務學習經驗，收取額外費用。 - **虛擬活動**：使用[Zoom](https://zoom.us/)、[WebEx](https://www.webex.com/) 或 [Hopin](https://hopin.com/)。 - **黑客馬拉松**：舉辦收取報名費的程式設計競賽，或尋找贊助商來支付費用並提供獎金。 - **社交活動**：針對技術專業人士的社交活動收費，可能會吸引招聘公司的贊助。 - **演講活動**：利用您在特定技術領域的專業知識，組織並負責演講活動或小組討論。 - **企業培訓及靜修**：為企業內部培訓或團隊建立活動提供活動組織服務。 - **聯盟行銷**：在活動期間利用科技產品或服務的聯盟行銷來獲取額外收入。 - **產品發布**：與科技公司合作舉辦產品發布活動，為您提供收費的組織服務。 --- ### 20.研究 您的意見很有價值，尤其是作為開發人員。有些研究人員會付錢給你參加他們的研究、調查或智庫。通常，好的研究機會很少而且相距甚遠，或者報酬相當低。 這類工作的熱門平台包括：[Testable Minds](https://minds.testable.org/)、[Respondent](https://app.respondent.io/signup) --- ### 21. 建立課程 - [Skillshare](https://www.skillshare.com/teach) - 根據課程觀看分鐘數提供付款以及推薦獎金。 - [Coursera](https://www.coursera.org/for-universities) - 與機構合作提供課程；付款通常基於收入分享協議。 - [LinkedIn Learning](https://www.linkedin.com/learning/instructors) - 講師可以為專業人士建立課程；薪酬詳細資訊由 LinkedIn 安排。 - [Thinkific](https://www.thinkific.com/) - 提供建立、行銷和銷售線上課程的工具，具有各種定價計劃，包括免費選項。 - [Kajabi](https://kajabi.com/) - 線上課程、行銷、支付和網站建立的一體化平台。 - [Podia](https://www.podia.com/) - 提供一個用於舉辦課程、網路研討會和數位下載的平台，並直接向觀眾銷售。 - [Pluralsight](https://www.pluralsight.com/teach) - 專注於科技與創意課程；根據課程的受歡迎程度向教師支付版稅。 - [MasterClass](https://www.masterclass.com/teach) - 高品質、名人主導的課程；講師通常是各自領域的知名專家或名人。 - [uTeach](https://ueach.io/) - [NewLine](https://www.newline.co/) --- ### 22.時事通訊 隨著流行的社群媒體管道變得更加集中和受控，電子郵件通訊和基於訂閱的 RSS 來源正在慢慢捲土重來。 這種模式的工作方式要么是提供對技術主題或新聞的有價值的見解，並建立一個龐大的（因此有價值的）訂閱者基礎，要么是向少數用戶收取更新費用。 提供此功能的流行平台包括： - [子堆疊](https://substack.com) - [ButtonDown](https://buttondown.email/) - [ConvertKit](https://convertkit.com/) - [穩定](https://steadyhq.com) - [幽靈](https://ghost.org/) --- ### 23. 僅限會員的網站 - [MemberSpace](https://www.memberspace.com/) - 讓您能夠為網站的某些部分付費，僅供會員使用 - [Patreon](https://www.patreon.com/) - 因設定具有獨家內容和福利的會員等級而廣受歡迎。 - [Substack](https://substack.com/) - 新聞通訊的理想選擇；提供付費訂閱獨家內容的能力。 - [Ghost](https://ghost.org/) - 內建會員和訂閱功能的專業發布平台。 - [Podia](https://www.podia.com/) - 允許銷售會員資格、線上課程和數位下載。 - WordPress 與 [MemberPress 外掛程式](https://memberpress.com/) - 供 WP 使用者建立會員網站的外掛程式。 - [Wild Apricot](https://www.wildapricot.com/) - 與您的網站整合的會員管理軟體。 - [Kajabi](https://kajabi.com/) - 提供用於建立線上課程、會員網站等的工具，重點是行銷。 - [Mighty Networks](https://www.mightynetworks.com/) - 建立一個包含會員資格、訂閱和課程的社群。 --- ### 24. VIP 貼文 還有許多公司會為您在其平台上分享的優質貼文付費。這既可以提高您的知名度（幫助您擴大人脈並獲得未來的工作），也可以帶來一些短期收入。 如果您正在努力獲得這些計劃的錄取，請先編寫自己的帖子並將其發佈到流行的基於開發的社交網絡（例如 DEV.to！）。這將增強您的寫作技巧，並幫助您向潛在公司展示您的知識。 例如，以下網站將為高品質的訪客貼文付費： - [Linode](https://www.linode.com/lp/write-for-linode/) - [日誌火箭](https://blog.logrocket.com/become-a-logrocket-guest-author/) - [Smashing 雜誌](https://www.smashingmagazine.com/contact/?Becoming%20an%20Author/Reviewer%20(自動回覆)) - [Auth0](https://auth0.com/apollo-program) - [CSS 技巧](https://css-tricks.com/guest-writing-for-css-tricks/) - [DelftStack](https://www.delftstack.com/write-for-us/) - [DigitalOcean](https://www.digitalocean.com/community/pages/write-for-digitalocean) - [Infatica](https://infatica.io/contribute/) - [蜜罐](https://blog.honeypot.io/write-for-honeypot/) - [進階編碼](https://premiumcoding.com/write-for-us-premiumcoding/) - [反思](https://reflectoring.io/contribute/become-an-author/) - [Strapi](https://strapi.io/write-for-the-community) - [Android 權威](https://www.authoritymedia.com/jobs) - [SitePoint](https://www.sitepoint.com/write-for-us/) - [TutorialsPoint](https://www.tutorialspoint.com/about/tutorials_writing.htm) - [真正的Python](https://realpython.com/jobs/tutorial-writer/) - [Dart Creations](https://www.dart-creations.com/about-us/write-for-us.html) Dmytro Spilka 編制了一份包含 300 多個[接受訪客貼文的網站](https://solvid.co.uk/180-websites-that-accept-guest-posts/) 的清單。另一個很棒的清單[由 Julia 在 Dev.to 上整理](https://dev.to/juliafmorgado/get-paid-to-write-technical-articles-16cl)。 --- ### 25. 諮詢 您可能沒有意識到，您從日常工作中累積的技能和經驗對許多公司來說可能非常有價值。尤其是尚無法聘請全職專家的新創公司和小型企業。對能夠提供最新趨勢、工具和最佳實踐見解的專業人士的需求非常高。 尖端： - 以適當的速度開始的最佳方式是透過網路和口碑。但如果做不到這一點，總有自由工作網站可以幫助您累積經驗。 - 記錄你所獲得的經驗，或在你工作的過程中建立一個投資組合，因為這將幫助你在未來獲得更好的工作。 - 在開始任何專案之前，請先明確您的空閒時間、條款、日薪和工作範圍。 - 切勿拒絕潛在的聯絡人。您會驚訝地發現，即使多年後，誰可能會重新與您聯繫並尋求諮詢支援。 --- ### 26. 指導 無論您的級別如何，您作為開發人員的經驗都可以真正幫助經驗不足的其他人。指導是一種非常有益的方式，可以幫助他人，同時也能帶來一些額外的收入。 - [MentorCruise](https://mentorcruise.com/) - 主要是長期的，按月付費，非常適合建立專業關係（每個學員每月賺取 50-500 美元） - [CodeMentor](https://www.codementor.io/) - 更適合短期，按小時收費，非常適合解決特定問題（每小時賺取 60-300 美元） --- ### 27.輔導 隨著 CompSci 現在成為國家課程的一部分（至少在英國和大部分歐洲），大量學生（11 歲至 18 歲以上）正在尋找導師來幫助他們獲得編碼技能並準備考試。收入範圍為每小時 15 美元到 150 美元以上，具體取決於級別、經驗和背景。 - [Super Prof](https://www.superprof.co.uk/) - 列出您的全球服務（30-300 美元/小時） - [The Profs](https://www.theprofs.co.uk/become-a-private-tutor/) - 經過驗證的導師（收入未知） - [我的導師](https://www.mytutor.co.uk/) - 僅限英國，（22-55 英鎊/小時） - [Tutor.com](https://www.tutor.com/) - 美國高中學費（$75-$100/小時） --- ### 28.社群媒體 市場存在巨大空白，等待主流社群媒體平台上真正優秀的、注重發展的影響者來填補。 許多社群媒體平台允許您透過內容貨幣化，您通常會按觀看次數付費，金額根據內容類別、地區和聲譽而有所不同。但請注意，您通常必須擁有一定數量的追蹤者才有資格，而且您還將受到「演算法」的支配。 - YouTube - 每年至少需要 1,000 訂閱者 + 4,000 小時觀看時間 - X - 需要 Twitter Blue 訂閱，無最低追蹤人數 - TikTok - 需要至少 10k 追蹤者 + 100k 瀏覽量/月 - Instagram - 需要至少 10k 追蹤者 - Snap - 1,000 名追蹤者，1,000 次瀏覽/月，10 多個每月貼文 - Facebook - 10k 追蹤者或 600k 影片觀看分鐘 - Twitch - 350 位每月付費訂閱者 --- ### 29.品牌優惠 繼上面的社群媒體部分之後，一旦您成功突破了數百名訂閱者，您可能還可以開始考慮品牌交易，這有助於帶來額外收入。同樣，這些需要您的受眾達到一定程度的參與度，您可能還需要同意提供贊助的公司的條款。 --- ### 30.串流媒體 開發串流是一個快速成長的利基市場，不要指望立即[加入排行榜](https://twitch.pages.dev/)，但它可能是一個很好的起點，特別是如果您已經有串流媒體經驗（例如影片遊戲）。 Nick Taylor 寫了一篇關於 [開發串流媒體入門的精彩文章](https://dev.to/nickytonline/getting-started-with-streaming-on-twitch-4im7)。 --- ### 31.SaaS 如果您能夠做到這一點，那麼它就是開源專案的最佳收入模式之一。您的程式碼仍然是 100% 免費和開源的，用戶仍然可以免費下載和自行託管它，但您還提供付費/託管計劃，您可以在其中託管應用程式並負責小型伺服器的所有伺服器管理經常性費用。 此模型符合開源精神，同時也使您的應用程式可供更廣泛的用戶使用。 [Stripe](https://stripe.com/docs/payments) 等服務讓您的應用程式接受付款和新增訂閱功能變得非常簡單。 --- ### 32.微型 SaaS 如果從頭開始建立一個生產就緒的應用程式聽起來像是一項艱鉅的任務（因為它確實如此！），那麼另一種方法就是 Micro-SaaS 應用程式。這些是較小的應用程式，它們執行一項非常具體的任務，例如： - 自動執行重複和/或乏味的任務。 - 執行目前手動計算的計算。 - 連接不同的系統。 - 取代 Excel 電子表格解決方法。 - 填補宿主生態系中缺失功能的空白 - 加強報告 --- ### 33. 寫外掛 與 SaaS 應用程式不同，一旦建置並發布了擴展，通常不需要太多的持續管理。您也可能會發現，如果您的專案為已經完善的網站加入功能，那麼您的專案會更容易快速獲得關注。 儘管網路擴展似乎是一個過時的或完全飽和的市場，但仍然有很多可以做的事情，而且這些對於新開發人員來說都是很棒的專案。 以下是一些可以幫助您入門的想法： - [WA Web Plus](https://chrome.google.com/webstore/detail/wa-web-plus-by-elbruz-tec/ekcgkejcjdcmonfpmnljobemcbpnkamh) 已下載 200 萬次（22k 評級），收費 12 美元/每個用戶的月。為什麼不為 Telegram、Threema、Wire、Messenger 等建立類似的東西呢？ - Runkeeper擁有4500萬用戶，但UI在資料顯示方式方面有所欠缺。為什麼不建立一個擴充功能來加入更好的報告、過濾以及與相關外部資料的組合？ （與 [Elevate for Strava](https://chrome.google.com/webstore/detail/elevate-for-strava/dhiaggccakkgdfcadnklkbljcgicpckn) 類似，但適用於 RunKeeper） - 選擇一個提供基本服務但 UI 過於不切實際的網站（也許是 Microsoft Azure？），然後建立一個擴充功能以簡化導覽、顯示關鍵指標或提供不那麼難看的使用者體驗 - 使用人工智慧增強任何現有網站。這比聽起來容易得多，您的擴充功能可以利用 OpenAI 的 API 等服務來總結網頁，或重新措辭選定的內容（用於複製/貼上到作業中！？） - 如果您知道某個網站的使用者數量很高，但 UI 很糟糕，那麼一個簡單的擴充想法可以是應用 CSS 覆蓋來重新設計它的樣式。例如亞馬遜、雅虎、Instagram 都是高流量網站，設計改善空間巨大（深色模式？！） - 即使是簡單的獨立擴展應用程式也可能具有很大的潛力。就像番茄計時器、貨幣轉換器、IP 位址小部件或只是一個網路應用程式快捷方式。 --- ### 34. 發布應用程式 建立簡單的應用程式或遊戲，並將其在平台應用程式商店上提供，使您能夠透過簡單的盈利模型來瞄準數百萬客戶。所有主流應用程式商店 - Google Play、Apple App Store、Windows Store、Steam 等都提供對付費應用程式、進階功能和應用程式內購買的支援。 請記住，在發布第一個應用程式之前通常需要支付安裝費，應用程式商店也會從您的收入中抽取一部分，並且小型創作者獲得單次或雙次下載的情況並不罕見。人物。 --- ### 35. 為小型企業開發網站 許多小型企業都專注於自己的業務，沒有時間或專業知識建立自己的網站。作為開發人員，這是我們能夠很快完成的事情，如果您也託管他們的網站，您將能夠收取定期付款。 一旦您開始進行網頁設計和開發，並為一些客戶提供服務，您就會發現透過口碑和展示您的作品集來找到未來的工作要容易得多。 為了在這方面取得成功，您可能還需要設計、溝通和銷售方面的技能。 --- ### 36. 兜售網域 隨著新 TLD 的湧入，域名經銷商市場正在迎來第二波受歡迎。域名翻轉涉及註冊未來可能有價值的域名，然後將其轉售給想要將該名稱用於企業或專案的買家。 雖然這可能有利可圖，但它確實涉及高風險，並且需要對市場有充分的了解。 尖端： - 研究簡短或令人難忘的域名，或者可能具有較高關鍵字潛力的域名（您可以使用諸如使用 Google 關鍵字規劃師等工具來幫助進行這項研究） - 停放您目前未使用的域名，以便您同時獲得一些廣告收入 - 查看最近過期的域名，特別是那些正在使用的域名，因為這些域名可能會收到流量 - 接收流量的網域更有價值。因此，請考慮在您持有網域時為其建立網站、應用程式或登入頁面 --- ### 37. 使用者測試 開發應用程式的公司通常需要獲得用戶的回饋。這就是用戶測試服務的用武之地。您花 10-30 分鐘嘗試給定的網站或應用程式，然後提供反饋或填寫調查，並獲得報酬！ 儘管並非特定於開發人員，但憑藉您的技術背景，您會發現自己具有獨特的優勢，可以快速完成這些工作並提供良好的反饋，從而使您比普通用戶更快地賺錢。您還將獲得有關用戶測試流程如何運作的寶貴見解，這可能對您在自己的應用程式上進行委託測試時有用。 - [嘗試我的 UI](https://www.trymyui.com/) - 每個網站或應用程式測試平均費用為 10 美元 - [Userlytics](https://www.userlytics.com/user-experience-research/paid-ux-testing/) - 根據測試的複雜程度和長度，賺取 5 至 50 美元之間 - [使用者測試](https://www.usertesting.com/get-paid-to-test) - 透過 PayPal 付款，在測試會話期間需要螢幕共用和/或網路攝影機存取。每次測試賺取約 10 美元，較長時間或現場會議的某些測試最高可支付 50 美元 - [TestingTime](https://www.testingtime.com/en/become-a-paid-testuser/) - 面對面或視訊通話測試的選項。不太定期，但測試時間更長。當您考慮到會話之間的延遲時，報酬比其他選擇更低 - [IntelliZoom](https://www.intellizoom.com/) - 每 10 分鐘學習可賺取 2 至 10 美元。透過 PayPal 付款，延遲 3-5 天 --- ### 38.微任務 與開發人員的具體關係不大，但如果您來自技術背景，您可能會發現這些工作比那些沒有開發技能的工作更有利可圖。 - [Amazon Mechanical Turk](https://www.mturk.com/) - 外包虛擬微任務的眾包市場 - [Sequence Works](https://sequence.work/contributors/) - 影像標註、資料標記與分類 - [App Jobber](https://en.appjobber.com/) - 市場調查，去商店拍攝特定植入式廣告的照片 - [GigWalk](https://www.gigwalk.com/gigwalkers/) - 應用程式為基礎的行動微任務 - 請造訪 [GigWorker.com](https://gigworker.com/) 以了解更多微任務和零工工作 --- ### 39. 調查 儘管對具有某些技能（如軟體工程）的參與者的需求較高，但調查的報酬往往很低，因此可以賺更多一點。即便如此，除非您有大量時間，或使用比美元弱得多的貨幣，否則這可能不是一個好的選擇。 這些通常涉及測試新產品或服務，並提供回饋 - 或回答問題以協助市場研究活動。 有很多不同的基於調查的公司，所以我不會全部連結到它們。但 [Swagbucks](https://www.swagbucks.com/)、[20Cogs](https://20cogs.co.uk/)、[TestingTime](https://www.testingtime.com/en/become-a-paid-testuser) 是一些著名的。 --- ### 40.去中心化節點 這可能不適合所有人，因為收益通常以加密貨幣形式支付，而加密貨幣的波動性非常大。但是，您可以自願為許多 Web3 專案執行節點（通常在 Rasperry Pi、雲端伺服器或備用筆記型電腦上），這將為您支付正常執行時間、頻寬、磁碟空間、運算、IP/代理或其他一些費用。計算資源。 作為開發人員，管理基礎設施是我們所擅長的，因此，如果您有任何閒置資源，您也許可以將它們投入使用，並在睡覺時賺取一些額外的現金。 - [Storj](https://www.storj.io/node)：執行Storj節點，用於去中心化雲端運算 - [Network3](https://network3.io/)：用於訓練和驗證模型的 AIoT 第 2 層 - [Flux](https://runonflux.io/)：去中心化基礎設施 - [Mysterium](https://mystnodes.com/): P2P VPN 節點 - [Koii](https://www.koii.network/node): 分散式雲 - [Helium](https://www.helium.com/mine)：提供遠端物聯網設備無線連接 - [Filecoin](https://filecoin.io/)：它是一個去中心化儲存網絡，將雲端儲存轉變為演算法市場。用戶可以出租閒置的儲存空間並賺取 Filecoin 代幣。 - [Sia Network](https://sia.tech/host)：這是一個由區塊鏈技術所保障的去中心化儲存平台。 Sia 透過去中心化網路儲存和加密您的檔案。您可以透過出租未使用的硬碟空間來賺取 Siacoins。 - [Crust Network](https://wiki.crust.network/docs/en/nodeOverview)：與 Filecoin、Sia 類似，Crust 支援 IPFS 等多種儲存層協議，並為應用層提供儲存介面。 - [Arweave](https://www.arweave.org/)：一個基於區塊鏈的平台，以永久和去中心化的方式提供資料儲存。透過託管資料，用戶可以獲得 Arweave 代幣獎勵。 - [BitTorrent](https://docs.btfs.io/v2.0/docs/install-run-btfs20-node)：該平台標記了世界上最大的文件共享協議，使用戶能夠通過在網路上。 - [HOLO](https://holo.host/)：Holochain 應用程式 (hApps) 的點對點託管平台。在電腦上託管 hApp 的用戶將獲得 HOT 代幣獎勵。 --- ### 41.其他 Web3 方法 加密產業還有許多其他賺取被動收入的方式，從PoS 質押、持有生息數位資產、借貸、流動性挖礦、雲端挖礦、賺取股息的代幣、流動性挖礦、交易、本地/ PoW 思維、NFT 等等。很少。 我不會在這裡連結到任何具體細節，因為這是一個風險非常高的行業，因此您自己進行研究很重要。但作為技術專家，我們能夠理解任何給定協議或 Web3 資產背後的基本概念，並確定其可行性。 我的建議是閱讀白皮書，如果你不能立即理解它，那就遠離它！這是狂野的西部，所以除非一個專案的基本面是堅實的，否則你應該做好失去投資的任何資金的準備。 --- ### 42. 聯盟行銷 聯盟行銷對於那些剛開始的人來說是眾所周知的無利可圖，但我將其包含在此處是因為作為開發人員，有一定的空間來自動化許多過程。此外，您行銷的服務越細分，支付的佣金通常就越高。因此，如果您融入了技術社區，您可能處於銷售小批量高回報服務的有利位置。 同樣，如果您已經有了追蹤者（社交、部落格、YouTube 頻道...），那麼聯盟行銷可能更有意義，因為如果您獲得了大量點擊。 值得注意的是，您可能不應該在未透露它是附屬連結的情況下共享附屬連結。並儘量避免宣傳您自己沒有使用過或不會推薦給朋友的產品。 > 作為範例，[此處](https://notes.aliciasykes.com/p/3Ia4JzPw43) 是我使用過且擁有附屬帳戶的一些服務。我從未從其中任何一個身上賺過任何有意義的錢。 --- ### 43.經銷商 這涉及建立一個應用程式來包裝現有服務，同時加入 USP - 技術、客戶支援、UI 或其他功能。如果您有行銷或銷售背景，這可能適合您。如果您想加入功能或使流程自動化，那麼將需要大量的前期工作，但您將能夠更好地獲得收入。 您可以在大多數主要行業中找到提供經銷商計劃的服務提供者。 一些例子包括： - [Supermetrics](https://supermetrics.com/)：行銷報告、分析、資料整合、20% 經常性佣金。 - [Keap](https://keap.com/)：CRM、銷售與行銷自動化、20-30% 經常性佣金。 - [Klaviyo](https://www.klaviyo.com/)：電子郵件與簡訊行銷，5–15% 一次性付款，10–20% 收入分成。 - [Drift](https://www.drift.com/)：即時聊天軟體，20%收益分成。 - [ActiveCampaign](https://www.activecampaign.com/)：電子郵件行銷、CRM、20–30% 佣金或折扣模式。 - [HubSpot](https://www.hubspot.com/)：CRM、入站行銷、銷售、20% 營收分成。 - [Gorgias](https://www.gorgias.com/)：電子商務幫助台，20% 收入分成。 - [Shopify](https://www.shopify.com/)：電子商務平台，佣金20%，Shopify Plus 10%。 - [LiveChat](https://partners.livechat.com/)：客戶服務平台，即時聊天，委託20%。 - [GetResponse](https://www.getresponse.com/)：電子郵件行銷、線上活動管理、子帳號 35% 折扣、35% 經常性佣金。 --- ### 44. 人體實驗 這與技術根本無關。但作為程式設計師，我們通常可以在任何地方工作 - 那麼為什麼不在有報酬的地方編寫程式碼呢？ 通常，您的收入在 2,000 美元到 10,000 美元之間，具體取決於試用期、持續時間、是否為住宅和具體情況。 像[流感營](https://flucamp.com/) 這樣的地方將支付您 4,000 英鎊，讓您在舒適的酒店式套房中入住兩週，同時他們會測試新的治療方法。那些患有氣喘等特定疾病的人可能可以透過參加更專業的試驗來賺取更多收入 --- ### 45.自由職業 自由職業可能會根據您的技能、經驗和您所在的領域而有所不同。對於新自由工作者來說，某些領域（例如網頁開發）的費率往往非常低，但您擁有的經驗和客戶滿意度越高，您就越能夠充電。 開發人員零工工作的三個主要平台是： - [Fiverr](https://www.Fiverr.com/)：Fiverr 以其多元化的市場而聞名，非常適合剛開始從事自由職業的開發人員 - [Upwork](https://www.upwork.com/work)：Upwork 迎合了廣泛的專業人士，但它對經驗豐富的開發人員特別有利。它提供了長期合約和高薪工作的潛力。該平台適合喜歡從事更實質專案的人。 - [People per Hour](https://www.peopleperhour.com/)：這個平台對歐洲市場的開發者有好處。它強調當地的商業聯繫，並在短期和長期專案之間提供良好的平衡。 --- ### 46. 說話 面對面的和移除的開發者聚會和活動在全球各地不斷發生。這些活動需要演講者，許多人願意付費以獲得良好的演講。支付的金額根據規模、觀眾、主題、演講者（你！）和其他因素而有很大差異。通常，您必須先自願在當地的小型技術聚會上發表演講，然後逐步提高。 --- ### 47. 遠端技術支持 這不是最迷人的角色，但較小的公司通常無法聘請全職的專門技術支援人員，因此您可以找到很多兼職工作。如果您擁有雲端經驗或認證，這些的薪資等級會大幅提高。只需查看任何求職板（例如 [WeWorkRemotley](https://weworkremotely.com/)），您就會看到大量職位。 請注意，您通常需要在特定時間內有空，並期望您可以在給定的時間內回覆。在申請之前，請確保這是您可以解決的問題。 --- ### 49. 投資 是的，這不是副業——但聽我說完… 如果您每年的收入為 6 萬美元，生活成本為 4 萬美元，那麼 5 年後您可能會有 10 萬美元的儲蓄。如果您將其投資於年平均回報率為10 - 15% 的標準普爾500 指數- 您每月可能會從您的投資中獲得超過1,000 美元的額外收入，並且您的投資能力越強，收入就會不斷增加儲蓄（當然，投資可以減少也可以增加）。這已經比這裡列出的許多副業更好的回報了！ --- ### 50. 就業 我們不要忘記，儘管目前情況看起來很艱難，但身為開發人員，即使只有一兩年的經驗，我們也處於非常幸運的地位，與平均收入者相比，我們的薪水很高。 如果你的工作不適合你——換公司通常是提高薪資的可靠方法，如果你不喜歡目前的工作，這可能是值得考慮的事情。 也許經歷了這一切之後，你所追求的不是副業，而是更好的「主業」？ --- ## 真實的說話 儘管您可能會在 IndieHackers 和 Instagram 上看到一些內容，但副業並不是全部。這通常需要大量的工作，但回報卻非常有限。因此，在在這裡或其他地方進行任何事情之前，請退後一步，思考「我為什麼要這樣做？」。如果您這樣做是為了累積經驗、學習新技能並享受樂趣——那就太好了。如果你這樣做是為了快速致富 - 你可能會非常失望。 還有一點要注意的是，儘管看起來不公平，但與那些剛起步的人相比，那些已經擁有強大追隨者或幾個成功的開源專案的人將處於更好的位置來利用機會。 因此，從短期來看，作為一名開發人員，您的時間可能會更好地花在提升自己身上。如果您不確定從哪裡開始，這裡有 5 個關鍵提示： - **網絡** - 建立你的網絡，參加聚會、黑客馬拉松和開發活動，加入社區，結交朋友 - **開源** - 將您的工作放在那裡，公開學習，建立您感興趣的迷你專案，並且不要害怕失敗 - **經驗** - 獲得實務經驗，申請實習機會，作為自由開發人員提供服務 - **基礎知識** - 確保您對電腦科學基礎知識有深入的了解，其餘的就會容易得多 - **玩得開心！** - 你自然會在你真正熱愛的領域做得更好。如果你不喜歡你正在做的事情，請退一步，考慮不同的方法是否更適合你 --- ## 免責聲明 - 以上列表僅供您參考。 - 我沒有親自測試過這裡列出的所有服務。 - 如果您有 - 我很想聽聽您的回饋。同樣，如果有任何需要加入或刪除的內容，請在下面告訴我。 - 並非所有服務都在所有國家/地區提供（此清單主要針對英國/歐洲和美國🇬🇧🇪🇺🇺🇸） - 有些平台會抽取您的收入。這通常是一個很小的數額，但重要的是你要考慮到 - 如果您已經擁有大量追隨者或流行的開源專案，賺錢通常會容易得多 - 有些方法涉及風險。儘管我已盡力強調這一點，但請記住，您的投資可能會下降而不是上升 - 您的結果可能會有所不同 - 沒有保證 --- 原文出處：https://dev.to/lissy93/50-ways-to-bring-in-extra-cash-as-a-developer-19b6

1個讚   0留言 648瀏覽

😂11 個有趣的 Python 函式庫，讓你的一天更美好☀️

## **簡介** 在這篇文章中，我將介紹 11 個我玩得很開心並想與您分享的函式庫。 ![介紹 GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5jwsqkoegdsvksunxjk.gif) --- ## 1. [Taipy](https://github.com/Avaiga/taipy) Taipy 是一個開源程式庫，旨在輕鬆開發前端 (GUI) 和 ML/資料管道。 不需要其他知識（不需要 CSS，不需要 JS，什麼都不需要！）。 建立您夢想的應用程式得益於： - 完整的客製化和互動 - 多頁和多用戶 - 管道圖形編輯器 - ...還有更多。 您甚至可以將以下所有庫與 Taipy 一起使用，並使其更加有趣。 你的想像力是極限！ ![太皮描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g40itmwejvzgrak3vfyn.gif) --- ![QueenB 星星](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvt5qn1yadra3epnb07v.gif) https://github.com/Avaiga/taipy 我們已經快有 1000 顆星了，沒有你就無法做到這一點🙏 --- ## 2.[Asciimatics](https://github.com/peterbrittain/asciimatics) Asciimatics 是一個可讓您建立全螢幕文字 UI 的程式庫。這個圖書館是出於對 80 年代的懷舊之情而建造的。 以下是它們的一些主要功能： - 彩色/樣式文字 - 遊標定位 - 鍵盤輸入（無阻塞或迴聲） ![Asciimatics 描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnvqj0yl0k45tdqxovzv.gif) --- ## 3.[Arcade](https://github.com/pythonarcade/arcade) 沒有遊戲，樂趣怎麼可能有意義呢？正如庫名稱所暗示的，它允許建立 2D 影片遊戲。是的，這看起來確實很難，但 Arcade 讓它變得容易。因此，「pip install arcade」並開始遊戲或從一些[現有遊戲](https://api.arcade.academy/en/latest/sample_games.html)中汲取靈感！ ![街機描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n0q7asll2jijtbs5opfh.gif) --- ## 4.[Rich](https://github.com/Textualize/rich) Rich 將為您的生活增添色彩！ Rich 在您的終端機中寫入豐富的文字（顏色+樣式），因此它們最終可以反映您是誰。 豐富包括： - 不同的風格 - 降價 - 進度條 - 亞洲語言支持 - ... 和更多！ ![豐富描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xo7ga376dr248zwvk91z.png) --- ## 5.[PyEphem](https://github.com/brandon-rhodes/pyephem) PyEphem 是一個在天空中迷失的好工具。該庫允許進行天文學計算；以下是一些有趣的用例： - 尋找行星在天空中的位置 - 確定春分和至日的日期 - 計算月相的日期 - ... 還有很多！ 這個圖書館一定會激發您的好奇心。 ![PyEphem 描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxtv1assuqhip7qy2i4i.png) --- ## 6.[tqdm](https://github.com/tqdm/tqdm) 光是這個圖書館的名字就已經很有趣了。 Tqdm 表示兩件事： - 是西班牙文「我非常愛你」的縮寫 (*te quiero demasiado)* - 源自阿拉伯語單字“*taqaddum* ()”，意思是進步，這實際上是對該庫所做工作的一個很好的介紹。 Tqdm 是任何循環的包裝器，它將透過進度條追蹤進度。您可以自訂它，讓等待任務完成不再那麼無聊！ ![tqdm 描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zexvoycl39mvfl0sl9rh.gif) --- ## 7. [Pygame](https://github.com/pygame/pygame) Pygame 讓編寫視訊遊戲變得容易。該庫將使您可以存取多種多媒體元素，例如： - 圖形 - 聲音 - 輸入設備 現在，發揮您的創造力，建立您自己的 2D 互動遊戲或探索一些[可用遊戲](https://www.pygame.org/tags/all)。 ![Pygame 描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ylzvyo099rgqbj05zxj3.png) --- ## 8.[Turtle](https://docs.python.org/3/library/turtle.html) 這個函式庫有所不同，因為它是 Python 語言的一部分，因此不需要 *pip install*。 Turtle 是為了教育目的而建立的，幫助新程式設計師透過在畫布上設計圖形來使用 Python 進行編碼。一種進入 Python 或享受一點創意樂趣的有趣方式。 ![海龜描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afsr71qceis4pjhhbp7z.png) --- ## 9.[MoviePy](https://github.com/Zulko/moviepy) MoviePy 是用 Python 編輯影片的便利工具。其功能包括： - 切割 - 連接 - 過濾 - 和轉變。 您可以閱讀許多不同的格式，包括 GIF。 ![MoviePy 描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqehjt9nxea75dkjci96.png) --- ## 10. [Emoji](https://github.com/carpedm20/emoji) 透過此庫在 Python 程式中使用表情符號。它只是使用 *emojize()* 函數將 unicode 表情符號轉換為表情符號名稱。其他功能包括加入表情符號、計算表情符號等… ![表情符號描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8yz3fmhxpcw49bea7m0.png) --- ## 11.[Pyjokes](https://github.com/pyjokes/pyjokes) 有了 pyjokes，您只需安裝一點就能獲得點播笑聲。這個圖書館會給你一些俏皮的笑話；您甚至可以選擇語言和類別。 玩得開心！ ![Pyjokes 描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbmwu55pqu1j94r56sut.png) --- 希望您喜歡這篇文章！ 我是一名新手作家，歡迎任何改進建議！ ![菜鳥 gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7qr8qikry1a2rf6x9dh.gif) 如果您有任何疑問，請隨時與我們聯繫。 --- 原文出處：https://dev.to/taipy/11-fun-python-libraries-to-make-your-day-better-4gpc

0個讚   0留言 421瀏覽

分享從十開始的轉職之路

哈囉大家好，我加入這平台有九個多月，後來神隱一段時間，趁現在的我有空閒時間，趕緊與大家分享我的轉職之路。 神隱的這段時間想當然是成功轉職，跑去上班，才有辦法與大家分享我的轉職心得XDD。開始上班後，因為有太多東西都是第一次接觸到，忙得不可開交，所以拖到現在才上來分享，抱歉><" ! 那麼就進入正文吧! 我大學是有接觸過程式的經驗的，正確來說，應該是這科系本來就會接觸到( C、C++、Java、Python等)，但因為學校的特殊性，也有碰到硬體，當時我是比較傾向於硬體，所以程式沒甚麼太專研，成績有過就好，後來畢業後也是從事硬體職位，程式幾乎只記得超基礎的東西。後來的職涯目標轉變，所以重新開始寫程式，跟別人不太一樣的地方大概就是有一點程式的基礎，但我也沒接觸過網頁，所以是從大概距離起跑點十的位置前進吧 ? 哈哈哈 ~ 確定目標後就果斷離職，離職後開始全力進修學網頁(3月開始)，也設定了進度: 三月 ~ 六月 : 學會HTML、 CSS、JS最基本語法。 六月 : 開始準備履歷作品、學 Vue 及投履歷 七月 : 邊面試、邊修履歷及作品 八月 : 開始上班。 一開始在找資源時，因緣際會下，發現到這平台，就跟著站長的那些課程進度走。我就真的只有上站長這裡的課程，完全沒去其他地方，例如udemy、Hahow 好學校等。沒錯......因為我想省錢，當時是想說先上看看，真的不行再去買那些課程，結果就一路到現在都還沒買其他課程......。 跟了這平台的課程後，也認識到了一些學習前端的免費資源，像是W3Schools等，所以雖然是跟著進度上，但我是搭配著上。甚麼意思呢 ? 舉例來說，在學HTML時，站長在文內可能只說學第幾個(A)跟第幾個(B)即可完成這作業，但在W3Schools，A跟B之間可能還有其他的部分，所以我是照W3Schools裡的HTML的順序學下來，學到課程內要學的A跟B，就先去完成作業，再接下去學。因為也有提供中文的W3Schools，所以也是這樣喔 ! 寫過的就當作複習，加深印象，打好基礎~ 而在自學中，最難的事之一就是自律這件事，所以我每天都一定強迫自己最晚十點到圖書館，午休一個小時，因為有找個兼職，要維持生活開銷，所以到六點就會離開圖書館。除了休息那一個小時外，我都是在學習，沒有中途玩手機還是做其他事喔 ! (有時覺得用眼過度，抬頭看窗外，那不到三分鐘的事不算~)，一周有六天都是如此，禮拜天就會給自己放鬆一下，只到下午兩、三點。 一直這狀態直到六月，開始準備作品，當時也是爬文、看別人都是怎麼準備、展示自己的作品的，就發現大多的人都會做個人網頁。而要怎麼做個人網頁呢?就繼續爬爬爬...，就認識到GitHub有提供GitHub Pages，能把自己的作品上傳到這後，別人就可以看到你的作品。真的是非常方便，而且又是免費的阿 ! 剛好課程也有教到Git指令，所以就架了一個自己的履歷網頁~ 準備得差不多後，就照著站長建議的，把工作經驗一年以下、無經驗的、可以應屆畢業生(雖然我不是)，全都投了一遍，只留自己夢想公司，這樣就能先累積面試經驗，並依面試得到的反應去修改自己的作品，再最後投夢想公司。能投得都投後，就開始照課程學框架Vue，若有做出作品就隨時更新到我的個人履歷網頁上。 面試時，大多都是看履歷問問題，有些有筆試，但都是像網路上大家說的那樣，前端必學觀念，沒遇過上機coding的。有些有手寫code，通常只有1-2題，印象中，有個題目是要你把字串反過來，怎麼寫 ? 只要把網路上大家說的必考題目弄熟，基本沒有太大問題。 而個人面試時有遇到的幾個問題，第一個是作品有點陽春Q，本身也沒有UI/UX的經驗等，所以是這職位轉過來的在這點上就會很加分呢 ! 我只能靠時間一點點的累積、培養了QQ。再來就是很常被問自學的困難點，又加上我只在這平台學習(雖然他們不知道)，但我認為最重要的還是有沒有決心想學前端，如果有就一定會去找資源，遇到問題，也不會那麼容易就挫折、放棄，畢竟已經下定決心自學的人都早就帶有這覺悟了吧 ? 就像在學Vue時，可能在這課程學到的不完善，但我認為這裏只是給一個學習的方向，那麼就可以朝這方向去找更多資訊，也能知道哪邊需要在著重釐清概念，就可以去看這部分的影片! 之後，運氣非常好的收到幾個offer，並在八月如預期開始上班，真是太開心了( 灑花~ 最後就說一些建議，雖然還是菜鳥，但應該可以多少能給一些方向 ? 這些建議是，若我今天還沒開始上班，我還會做甚麼事，大家就當作參考吧~ 假如我能帶著上班後遇到問題的記憶回到還沒就職時，我會: 1. 把JS基礎打好，多找題目做! 2. (假如學的框架是Vue)，慢慢開始從API換成CLI，並多做作品，熟悉框架物件等等之間的傳遞。 3. 認識更多套件，並學會使用，可以的話套看看在框架上，並把每個套件組合成一個流暢性的作品。 4. Code Review : 會打程式固然重要，但專案的架構、流程設計的好，真是輕鬆一半，也會更清楚程式間是如何傳遞的! 5. 課程的每個作業能把它做到最好就做到最好~ 就先大概這樣吧，真的是有太多東西等著我去學，希望未來的我不要菜味這麼重，也能為大家提出更實質性的建議或幫助，不管是自學的還是轉職的，大家一起加油吧 ! ( 我可能又會神隱一段時間，但有時間，一定會繼續完成站長的課程 & 與大家分享工作心得的 !

5個讚   2留言 16,615瀏覽

Laravel + GraphQL 接案心得＆範例分享 Part 2：前端 Query/Mutation 與 React 串接範例

在上一篇文章，我簡單介紹了 GraphQL 的好處，以及如何在 laravel 中實作 這一篇文章，接著介紹一下如何在前端使用 React 進行整合 # 實務範例與 API 線上試玩 上一篇文章我用 graphql + laravel 實作了簡單的電商後台 api https://graphql-laravel-example.tw/graphiql 這次我用 Next.js 開發了簡單的電商前端 web app https://graphql-react-example.vercel.app/ 歡迎試玩看看！可以瀏覽商品、輸入信箱訂閱電子報 --- 在前端發送 query 的程式碼，可以參考 https://github.com/howtomakeaturn/graphql-react-example/blob/main/app/page.js 在前端發送 mutation 的程式碼，可以參考 https://github.com/howtomakeaturn/graphql-react-example/blob/main/app/newsletter.js 我使用原生的 fetch 函數呼叫 graphql api，所以您用任何一款 http 函式庫也都可以做到 狀態管理我用 Next.js 社群的 swr 當作範例，您完全可以自由使用任何 state manager # 優點介紹 我認為前端可以自主決定，要撈取哪些資料，是 graphql 最強大的功能！ 後端設計好各種 type 之後，前端就可以自行根據 playground 試玩 api！ https://graphql-laravel-example.tw/graphiql 可以彈性、自由撈取資料，連關聯資料都可以巢狀撈取！ ``` const gql = `query { products { id name description featured_image price comments { content user { name } } }, }`; ``` 大幅減低後端開發時間、前後端溝通時間、以及處理不同情境需要新增多組類似 api 的時間！ # 完整程式碼 前端完整程式碼請參考 https://github.com/howtomakeaturn/graphql-react-example 上次的後端 graphql 試玩 https://graphql-laravel-example.tw/ 後端完整程式碼 https://github.com/howtomakeaturn/graphql-laravel-example # 結論 上面 graphql + laravel + react 的範例 我認為原始碼非常單純、易讀，容易開發、也容易維護 您應該可以根據我提供的範例，在專案中試著導入使用 我在替客戶導入 graphql + laravel + react 的時候，發現網路上教學雖然很多，但是缺少範例 所以我製作這些 sample project 方便大家參考＆入門 大家有機會的話一定要試試看 graphql 的威力！ （此為系列文章，更多內容會在近期發佈） --- # 系列文章 - [Laravel + GraphQL 接案心得＆範例分享 Part 1：強大優點、API 線上試玩、工具介紹](https://codelove.tw/@howtomakeaturn/post/yx08mx) - [Laravel + GraphQL 接案心得＆範例分享 Part 2：前端 Query/Mutation 與 React 串接範例](https://codelove.tw/@howtomakeaturn/post/2an0Gx)

0個讚   0留言 1,864瀏覽

Javascript Proxy Magic：我如何建立一個零依賴的 2kB 狀態管理器（以及它如何為我提供了兩個不同的工作機會）

狀態管理器到底是什麼？狀態管理器是一個智慧模組，能夠保留（應用程式或 Web 應用程式的）會話資料並對資料的變更做出反應。 您是網頁開發人員嗎？使用過 Redux、Mobx 或 Zustand 等函式庫嗎？恭喜！您已經使用了狀態管理器。 我記得我第一天嘗試為 React 設定（舊的）Redux。只要想到所有不必要的複雜性——調度程序、減速器、中間件，我就會患上創傷後壓力症候群（PTSD）！我只是想聲明一些變數，_請讓它停止_。 ![](https://media.tenor.com/Fj8YV_9ut8UAAAC/makeitstop-i-just-want-it-to-stop.gif) 這是一個過度設計、臃腫的庫，每個人都在使用！由於某種瘋狂的、未知的原因，它成為了當時的行業標準。 ###一些背景故事 2021 年的一個晚上，當我無法入睡時，我漫無目的地打開 GitHub，注意到我以前的大學課程老師（我在 GH 上關注過他）為他現在的學生上傳了一份作業。該作業要求學生使用公共 Pokemon API 建立一個 Pokedex 網站。目標是用 Javascript 實現它（沒有框架或函式庫，因為他目前的學生是 Web 開發初學者，仍在學習 Javascript 和開發的基礎知識）。 作為一個笑話，主要是因為我睡不著，我開始在我的神奇寶貝網站上工作。最終，我能夠建立一些可行的東西，而無需使用任何外部庫。 ### 但一路走來，我很掙扎...... 你看，我已經習慣了擁有一個狀態管理器，以至於在不使用外部框架或庫的情況下建置一個簡單的兩頁應用程式的要求讓我開始思考 - _為什麼狀態管理器必須如此復雜？這只是變數和事件._ 長話短說，我發現自己在凌晨 2 點組裝了一個超級簡單的狀態管理器模組，只是為了管理我的 Pokemon Web 應用程式的狀態。我將我的網站部署到了 GitHub 頁面，然後就忘記了這一切。 幾個月過去了，但出於某種原因，我時不時地思考我的狀態管理解決方案...你看，它有其他庫沒有的東西 - _它太簡單了。_ _“嘿！”我心想，「我應該將它重寫為 NPM 套件」。_ 當天晚上，我就這麼做了——我把它寫成了一個獨立的 NPM 包。最後，它的重量為 2kB（相比之下 Redux 的 150kB），具有零依賴性，並且使用起來非常簡單，您只需 3 行程式碼即可完成設定。 ### 我稱之為 VSSM 代表**_非常小的狀態管理器_**。 您可以在[GitHub](https://github.com/lnahrf/Vssm)上查看原始程式碼。另外，請查看使用 React 和 VSSM 建立的[文件網站](https://lnahrf.github.io/Vssm-docs/)。 第二天，我發布了我的 NPM 包，然後又忘記了這件事。 同年晚些時候，我面試了兩家不同公司的全端開發人員職位。我在第一家公司的面試中取得了優異的成績，這是一家非常成熟的科技公司。作為面試過程的一部分，他們要求我告訴他們我是否在空閒時間編碼，或者是否有我貢獻過的任何開源專案等等。 當時我做的唯一很酷的事情就是 VSSM，所以我告訴了他們。他們對我自己建立一個「Redux 替代方案」的想法印象深刻。 另一方面，我在第二家公司的面試中慘敗。我的大腦一片空白，我很緊張，無法回答簡單的問題，例如 > “React 會在狀態變更時重新渲染整個應用程式，還是在使用 Redux 時僅更新受影響的元件及其子元件？” “每次狀態更新時，它都會重新渲染整個應用程式”，我說。 ![](https://media.tenor.com/ZFc20z8DItkAAAAd/facepalm-really.gif) 我很緊張，哈哈，顯然我知道正確的答案是「它只渲染註冊的元件以及可能受影響的子元件」。 直到今天我也不明白為什麼二號公司決定給我第二次機會。他們邀請我再次接受採訪（是的！）。 在我的第二次面試中，他們要求我告訴他們我是否在空閒時間編碼、開源貢獻，你知道該怎麼做。當我告訴面試官我的小副專案時，他看起來很高興，似乎他喜歡我只是因為我從頭開始編寫了一個狀態管理器。 我想情況確實如此，因為我第二次面試也失敗了（在程式設計挑戰期間耗盡了時間），但仍然得到了一份工作機會。 1 號公司打算向我發送報價，但我已經與 2 號公司簽署了報價。 我的底線是——我建立 VSSM 幫助我獲得了這兩個機會。 ![](https://media.tenor.com/BuoCYXAkk0AAAAAC/big-lebowski.gif) ### 我是怎麼做到的？ 您是否知道 Javascript 內建了監視變數變更所需的所有功能？ 它被稱為代理（它很神奇）。 Javascript 代理程式是程式碼和變數分配之間的附加邏輯層。 如果您要將物件包裝在代理程式中，您可以決定在每次更新時將其值記錄到控制台，除了為該物件指派新值之外，無需執行任何操作。 ``` const target = { v: "hello" } const proxyTarget = new Proxy(target, { set: (target, property, value) => { console.log(`${property} is now ${value}`); target[property] = value; return target[property]; } }); proxyTarget.v = "world!" // v is now world! ``` VSSM 是基於代理建置，它在變數賦值和其餘程式碼之間建立了一個層。使用代理，您可以設定 setter、getter，並在操作或請求目標值時實現任何類型的邏輯。 VSSM 不僅僅是一個代理，它是各種智慧代理，它們知道分配給變數的值是它的新值還是回調方法。 例如，使用 VSSM，您只需幾行程式碼即可設定狀態、監聽變更並發出事件。 ``` import { createVSSM, createState } from 'vssm'; import { getVSSM } from 'vssm'; // Create the initial state createVSSM({ user: createState('user', { address: '' }) }); // Get the user proxy reference const { user } = getVSSM(); // Listen to events on user.address user.address = () => { console.log(`Address updated! the new address is ${user.address}`); }; // Emit the mutation event user.address = 'P.Sherman 42 Wallaby Way, Sydney' ``` 正如您所看到的，我確保我的狀態管理器盡可能簡單。我的目標是擺脫僅僅為了分配一些變數而陷入減速器、中間件和極其複雜的配置的困境。 現在，一切都透過分配變數來進行！想要設定監聽器嗎？將回調函數指派給變數。想要編輯值並發出事件嗎？只需指派一個新值即可。 直到今天我仍然不明白為什麼流行的狀態管理器必須如此複雜，也許我永遠不會。 我鼓勵您繼續閱讀 [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 上有關 Javascript 代理的所有內容。 ### 這一切的結論是什麼？ 我認為，對自己所做的事情充滿熱情是關鍵。 我建立 VSSM 只是為了突破自己的極限並發布合理的 NPM 包。它成功地給面試官和同事留下了深刻的印象，並讓我從那時起就進入了不同的職位。 沒有人會使用 VSSM，它不會流行。當我將其發佈到 NPM 時，我就意識到了這一事實。但我仍然選擇盡我所能，因為我熱衷於做一些我認為比行業標準更好的事情。我知道我可以做出一些必須更好的東西，即使這意味著它對我更好。 儘管 VSSM 已經死在 NPM 墓地裡，但它給我帶來了很多價值，並且因為這篇文章而繼續這樣做。 獲得開發工作的最佳方法是建立令人驚嘆的東西，即使您認為這一切以前都已經完成了 - 建置得更好。即使您認為沒有人會使用它，那又有什麼意義呢？ - 現在建置，價值稍後顯現。 不要低估你的能力，如果你認為自己有不足，請知道你會進步。走出去，建構能夠帶來價值的專案，一次一小步。 祝您工程之旅順利。 --- 原文出處：https://dev.to/lnahrf/javascript-proxy-magic-how-i-built-a-2kb-state-manager-with-zero-dependencies-and-how-it-got-me-two-different-job-offers-2539

0個讚   0留言 169瀏覽

這 5 家開源人工智慧新創公司正在改變人工智慧格局

隨著人工智慧市場的不斷成長。我們即將做出很多改變。 最近，我一直在思考在各個領域取得重大進展的最新新創公司。這些新創公司參與了開創性的工作，從增強資料互動性到探索大型語言模型在營運中的潛力（一種稱為 LLM Ops 的新概念）。此外，我對搜尋引擎和生成人工智慧的進步很著迷，它們正在徹底改變我們與技術互動的方式。 我在 DEV.to 上看到他們中的許多人，然後我想嘗試他們的專案。我對這些公司所付出的努力和創新感到驚訝。 ## [Pezzo：開發者優先的人工智慧平台](https://github.com/pezzolabs/pezzo) ![Pezzo：開發人員優先的人工智慧平台](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2mlbq7bfir934rrnt5x.png) **GitHub 儲存庫**：[GitHub 上的 Pezzo](https://github.com/pezzolabs/pezzo) **網址**：[片段](https://pezzo.ai/) **描述**： Pezzo 是一個為開發人員量身定制的開源雲端原生 LLMOps 平台。它透過提供簡化的提示設計、版本管理、即時交付等，徹底改變了人工智慧操作。該平台能夠有效觀察和監控人工智慧操作、顯著降低成本和延遲、無縫協作以及立即交付人工智慧變更。 **主要特徵**： - **提示管理**：提示的集中管理和版本控制，允許即時部署到生產。 - **可觀察性**：提供有關人工智慧操作的詳細見解，優化支出、速度和品質。 - **故障排除**：即時檢查提示執行，最大限度地減少除錯工作。 - **協作**：促進同步團隊合作，以交付有影響力的 AI 功能。 **加入社群**： 加入他們的 [Discord 社群](https://pezzo.cc)，成為 Pezzo 創新之旅的一部分。透過為他們的 GitHub 儲存庫加註星標來為他們的使命做出貢獻並支持他們！ [在 GitHub 上給 Pezzo 一顆星](https://github.com/pezzolabs/pezzo) 🌟，加入 AI 維運革命！ https://github.com/pezzolabs/pezzo ## [Swirl：人工智慧驅動的多來源搜尋平台](https://github.com/swirlai/swirl-search) ![Swirl：人工智慧驅動的多源搜尋平台](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8u82em3x347qsc09dvz.png) **GitHub 儲存庫**：[GitHub 上的 Swirl](https://github.com/swirlai/swirl-search) **網站**：[Swirl](https://swirl.today/) **描述**： Swirl 是一款創新的開源軟體，它利用人工智慧同時搜尋多個內容和資料來源。它使用人工智慧對結果進行排名，獲取最相關的部分，並使用生成式人工智慧來提供從您自己的資料得出的答案。該工具對於整合和從各種資料來源中提取有價值的見解特別有用。 **主要特徵**： - **人工智慧驅動的搜尋**：同時搜尋多個來源，提供人工智慧排名的結果。 - **生成式人工智慧整合**：使用熱門搜尋結果提示生成式人工智慧提供全面的答案。 - **多樣化資料來源連線**：連接到資料庫（SQL、NoSQL、Google BigQuery）、公共資料服務以及 Microsoft 365、Jira、Miro 等企業來源。 - **可自訂和可擴展**：提供靈活的平台，用於資料豐富、實體分析以及整合各種應用程式的非結構化資料。 **加入社群**： 參與 Swirl 社區並貢獻您的想法！加入 [Swirl Slack 社群](https://join.slack.com/t/swirlmetasearch/shared_invite/zt-1qk7q02eo-kpqFAbiZJGOdqgYVvR1sfw)，並透過為他們的儲存庫加入星標來支持他們的成長。 [GitHub 上的 Star Swirl](https://github.com/swirlai/swirl-search) 並成為這令人興奮的人工智慧搜尋演化的一部分！ 🌟 https://github.com/swirlai/swirl-search ## [DeepEval：LLM評估架構](https://github.com/confident-ai/deepeval) ![DeepEval](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jrflequthxsxqyf281vi.png) **GitHub 儲存庫**：[GitHub 上的 DeepEval](https://github.com/confident-ai/deepeval) **網址**：【Confident AI】(https://www.confident-ai.com/) **描述**： DeepEval 是大型語言模型 (LLM) 的開源評估框架。它簡化了 LLM 應用程式的評估，類似於 Pytest 進行單元測試的操作方式。 DeepEval 因提供一系列專為 LLMs 量身定制的評估指標而脫穎而出，使其成為嚴格績效評估的生產就緒替代方案。 **主要特徵**： - **多樣化的評估指標**：提供由 LLMs 評估或透過統計方法和 NLP 模型計算的多種指標。 - **自訂指標建立**：允許輕鬆建立自訂指標，無縫整合到 DeepEval 的生態系統中。 - **批量資料集評估**：以最少的編碼工作促進整個資料集的評估。 - **與 Confident AI 整合**：能夠即時觀察評估結果並比較不同的超參數。 [在GitHub上Star DeepEval](https://github.com/confident-ai/deepeval)並為LLM評估架構的進步做出貢獻！ 🌟 https://github.com/confident-ai/deepeval ## [LiteLLM：通用LLM API介面](https://github.com/BerriAI/litellm) ![LiteLLM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d7095mo90atcer42ojpf.png) **GitHub 儲存庫**：[GitHub 上的 LiteLLM](https://github.com/BerriAI/litellm) **網站**：[LiteLLM 文件](https://docs.litellm.ai/docs/#quick-start/) **描述**： LiteLLM是一個開源工具，使用戶能夠使用統一的OpenAI格式呼叫各種LLM API。它支援廣泛的供應商，如 Bedrock、Azure、OpenAI、Cohere、Anthropic、Ollama、Sagemaker、HuggingFace、Replicate 等，提供與 100 多個LLMS合作的簡化方法。該工具對於以一致且高效的方式簡化不同LLMS的整合和利用至關重要。 **主要特徵**： - **通用 API 格式**：方便使用標準化 OpenAI 格式呼叫不同的 LLM API。 - **支援廣泛的LLMS**：與眾多LLMS提供者相容，包括 OpenAI、Azure、Cohere 和 HuggingFace 等主要提供者。 - **一致的輸出和異常映射**：確保統一的輸出結構並將跨提供者的常見異常映射到 OpenAI 異常類型。 - **易於使用**：支援批量操作並簡化與LLMS的交互，使其更適合各種應用程式。 **加入社群**： 參與 LiteLLM 的開發並分享您的改進！克隆存儲庫，進行更改並提交 PR。 [在 GitHub 上星標 LiteLLM](https://github.com/BerriAI/litellm) 並立即簡化您與LLMS的工作！ 🌟 https://github.com/BerriAI/litellm ## [Qdrant：人工智慧高效能向量資料庫](https://github.com/qdrant/qdrant) ![Qdrant](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1akr9ejoop3pa1h6czq6.png) **GitHub 儲存庫**：[GitHub 上的 Qdrant](https://github.com/qdrant/qdrant) **網址**：[Qdrant](https://qdrant.tech/) **描述**： Qdrant是專為下一代AI應用量身定制的高性能、大規模向量資料庫。它是一個向量相似性搜尋引擎和資料庫，透過易於使用的 API 提供生產就緒的服務。 Qdrant 對於神經網路或基於語義的匹配、分面搜尋以及其他需要有效處理具有相關負載的向量的應用特別有效。 **主要特徵**： - **豐富的資料類型和查詢規劃**：支援多種資料類型和查詢條件，包括字串比對、數值範圍、地理位置等，並利用有效負載資訊進行高效率的查詢規劃。 - **硬體加速和預寫式日誌記錄**：利用現代 CPU 架構實現更快的效能並確保資料持久性和可靠性。 - **分散式部署**：支援水平擴展，多台 Qdrant 機器形成集群，透過 Raft 協定進行協調。 - **集成**：輕鬆與 Cohere、DocArray、LangChain、LlamaIndex 等平台集成，甚至與 OpenAI 的 ChatGPT 檢索插件集成。 **加入社群**： 成為 Qdrant 社區的一部分並為這個創新專案做出貢獻。加入他們的 [Discord](https://qdrant.to/discord)。 [GitHub 上的 Star Qdrant](https://github.com/qdrant/qdrant) 並幫助塑造 AI 中向量資料庫的未來！ 🌟 https://github.com/qdrant/qdrant --- ### 衷心的感謝 您有興趣探索和了解這些新創公司正在研究的不同主題。成為他們社群的一部分肯定會幫助您成長並了解不同的軟體和人工智慧領域。 --- 原文出處：https://dev.to/fast/these-5-open-source-ai-startups-are-changing-the-ai-landscape-59dg

0個讚   0留言 171瀏覽

用 React 和 Node.js 建立 GPT Web 應用程式產生器 - 在 4 個月內，從點子到 25,000 個應用程式

我們正在開發 [Wasp](https://github.com/wasp-lang/wasp) - 一個基於 React、Node.js 和 Prisma 建置的全端 Web 框架。自從 GPT 出現以來，我們想知道是否可以使用它來更快地建立 Web 應用程式。這讓我們想到了 [MAGE - 一個由 GPT 驅動的 Web 應用程式產生器](https://usemage.ai/)，它可以根據簡短的描述建立完整的堆疊程式碼庫。 我們已經寫過[MAGE 可以（和不能）做什麼](https://dev.to/wasp/gpt-web-app-generator-let-ai-create-a-full-stack-react-nodejs-codebase-based-on-your-description-2g39)和[它在幕後的工作原理](https://wasp-lang.dev/blog/2023/07/17/how-we-built-gpt-web-app-generator)。這是關於它的起源和採用的故事 - 為什麼我們決定建立它，開發人員如何發現它，以及他們實際上用它做什麼。 ## 為什麼要建構另一個 AI 編碼代理？ 我們很晚才進入整個 GPT 編碼代理遊戲。在我們開始考慮建立自己的工具之前，Smol AI、GPT Engineer 和 MetaGPT 等工具就已經受到了廣泛的關注，我們對此也很清楚。 ![編碼代理景觀](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zw6vyjt79bxrsyvdhl78.png) 那為什麼還要麻煩呢？事實是，這些代理程式都不是專門為建立 Web 應用程式而設計的，而這正是我們看到機會的地方。 儘管使用 GPT 代理進行編碼可以讓人感覺超級強大，但它們通常會很慢並且沒有抓住要點，需要多次迭代，最終使該過程相當麻煩且昂貴。 有了這些經驗，我們想知道，*「如果我們為特定堆疊中的 Web 應用程式製作一個高度專業化的編碼代理，而不做其他事情會怎麼樣？它能變得更容易、更快、更便宜嗎？」* 儘管我們對此很感興趣，但作為一個兼顧多個優先事項的小團隊，我們仍然相當懷疑，幾乎放棄了整個專案。事實證明，它的效果比我們預期的還要好。 ## 第 1 步：建造它🛠️ ![運作方式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lkqk1i0p311u9zd9ouk6.png) 在決定 MAGE（*Magic App Generator*）的 v0 版本時，我們考慮了多種選擇。第一個也是最直接的一個是將其與 Wasp CLI 集成，因為我們已經擁有了圍繞它的所有工具。然後，開發人員將執行“wasp new myProject -ai”，而不是執行“wasp new myProject -ai”，CLI 會要求他們提供應用程式描述和其他所需的輸入，然後在終端中完成所有工作。 另一方面，我們知道在開始描述您的應用程式之前下載並安裝 Wasp 是一個很大的要求。最重要的是，CLI 中的使用者介面功能非常有限。這就是我們選擇網路介面的原因 - 零摩擦開始，我們可以讓應用程式建立流程變得非常簡單且美觀。 花了幾週的時間來建構它，最終的結果是一個[用Wasp 製作的完全開源的Web 應用程式](https://github.com/wasp-lang/wasp/tree/wasp-ai/wasp-ai)可以在 https://usemage.ai/ 上免費使用，或在本地託管以獲得更多控制和靈活性（例如，使用您自己的 OpenAI API 金鑰）。 ### 超級具體（僅限網頁應用程式）得到了回報！ ![法師計畫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqkrqj8b3we67ufxl8gm.png) 如上所述，我們的主要賭注是建立一個專門的編碼代理來建立全端 Web 應用程式，而不是其他任何東西，這得到了回報。它使我們能夠預先為代理提供大量上下文和結構，並引入專門的啟發式方法來修復錯誤。此外，由於 Wasp 的高級抽象（例如身份驗證、專案結構、查詢和作業系統等），我們顯著減少了錯誤的表面積。 另一個結果是執行時間顯著減少，甚至更重要的是成本減少。典型的MAGE 建立的Web 應用程式成本在0.10 至0.20 美元之間，而一般編碼代理[同一應用程式的花費可能高達10 美元](https://wasp-lang.dev/blog/2023/08/01/smol-ai-vs-wasp-ai#thoughts--further-considerations)（所有價格均在 OpenAI 23 年 11 月 7 日定價更新公告之前）。 您可以閱讀有關Wasp 內部工作原理的更多資訊[此處](https://wasp-lang.dev/blog/2023/07/17/how-we-built-gpt-web-app-generator)，以及它的比較其他編碼代理[此處](https://wasp-lang.dev/blog/2023/07/17/how-we-built-gpt-web-app-generator)。 ## 第 2 步：啟動它🚀 ![圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/icff70qgd5ozu23ghgw7.png) 開發產品是一回事，但傳播產品並讓人們使用它則完全是另一回事。在我們建立了 MAGE 並在團隊內對其進行了測試之後，問題是下一步該做什麼？我們如何真正聯繫開發人員並開始接收回饋？ ### 社區啟動 - 生命的證明 ![waspularity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwcmspqyer7hxjysjyjo.png) 由於當時我們已經擁有一個[擁有大約 1,000 名成員的 Wasp 社區](https://discord.gg/rzdnErX)，因此我們[發布了 MAGE 作為我們發布週 #3 的一部分](https://wasp-lang.dev/blog/2023/06/22/wasp-launch-week-third#gpt-web-app-generator--friday-waspularity---tutorial-o-thon)。這是一個很好的測試平台，我們可以看到第一個應用程式正在建置。儘管如此，更多的開發人員本可以從更簡單的方式來啟動他們的 React 和 Node.js 專案中受益，但他們卻無法找到 MAGE。 ### 啟動 Product Hunt — 首次「真正」使用 ![mage-ph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3z5dkjuxn8502699s5a.png) 這就是為什麼我們決定在內部社群啟動後將 MAGE 放在 Product Hunt 上。儘管Product Hunt 不是一個特定於開發工具的平台，並且吸引了來自不同背景的人群，但仍然有很多開發人員在使用它，而且我們[之前有很好的經驗](https://www.producthunt.com/products/wasp-lang-alpha/launches) 與它。 Product Hunt 對於[獲得Wasp 的第一批用戶並在GitHub 上獲得1,000 顆星](https://wasp-lang.dev/blog/2022/09/29/journey-to-1000-gh-stars) 至關重要，因此我們想再試一次。 有些人在發布準備工作上投入了大量精力，需要提前幾個月才能準備好，但我們沒有那個時間，只是想盡快完成。我們要求我們的朋友和社區查看 [MAGE on Product Hunt](https://www.producthunt.com/products/wasp-lang-alpha#gpt-webapp-generator-for-react-node-js) 並提供支持我們在發布當天就進入了當天的前十名產品，後來又躋身本週排名第二的開發者工具！ 這就是我們的目標，因為排名前十的產品最終會出現在第二天的電子報中，有超過 100 萬訂閱者閱讀。很快，我們看到建立的應用程式數量顯著增加，新的人開始加入我們的 Discord 社群！ ### 有機成長（又稱「無所事事」）階段 在 Product Hunt 推出後，我們放鬆了行銷工作，因為其他與 Wasp 相關的任務趕上了團隊。我們必須為即將到來的[發布週#4](https://wasp-lang.dev/blog/2023/10/13/wasp-launch-week-four)做準備，所以 MAGE 最終被擱置了。在我們決定投入更多資源之前，我們也想看看社區如何接受它。 我們發布了更多後續文章，「[它是如何在後台工作的](https://wasp-lang.dev/blog/2023/07/17/how-we-built-gpt-web-app-generator)”和“[MAGE vs. 一般編碼代理](https://wasp-lang.dev/blog/2023/08/01/smol-ai-vs-wasp-ai)”，獲得平均數量牽引力，但沒有爆炸。我們在 Reddit 和 Hackernews 上也沒有什麼成功，感覺社群已經厭倦了所有的人工智慧內容。 儘管如此，使用 MAGE 建立的應用程式數量持續增長（約 200 個應用程式/天），偶爾會出現小規模爆炸。我們無法真正追蹤用戶來自哪裡 - MAGE 似乎是透過封閉社區和時事通訊中的口碑傳播的。 ### YouTube 和 TikTok 影片 - 病毒式傳播（每天 1,300 個應用程式！） 在我們的第 4 週發布週結束後，我們意識到，在近 2 個月的時間裡，在我們付出最小努力的情況下，MAGE 一直在不斷成長。這向我們表明它具有一定的實際價值，因此我們決定對其進行更多投資。 ![matt_yt_video](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sztjfowul34w6uqwzb56.png) 我們決定與該領域的影響者碰碰運氣。我們不想簡單地支付廣告費用，而是希望與真正對我們正在建立的產品感興趣並且想要客觀地審查 MAGE 的人合作。我們發現 [Matthew Berman](https://www.youtube.com/watch?v=KQrGu8cnwvA&t=2s&ab_channel=MatthewBerman) 涵蓋了 LLM 領域從最新模型到工具的所有內容，他將 MAGE 視為非常適合他的觀眾。 該影片在幾週內就準備好了，當它發佈時，觀看次數很快就達到了約 25,000 次。許多觀眾對透過 Web 介面從單一提示中獲取全端程式碼庫的可能性感到興奮，我們看到使用率和開發人員再次嘗試。 ![tiktok_video](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cnfmgt026dvf5yn0a9sm.png) 大約一周後，我們看到建立的應用程式數量再次大幅增加，但無法弄清楚它來自哪裡。我們做了一些搜尋，在TikTok 上找到了一位開發者@techfren，他製作了[一個關於它的短影片](https://www.tiktok.com/@techfren/video/7288306291733269778)（MAGE 甚至最終無法在就是那個！），一天之內瀏覽量猛增至 20 萬次，並迅速走紅。如今，它的瀏覽量已接近 100 萬。 ## 現實 - 所有這些應用程式會發生什麼？ 儘管 25,000 個建立的應用程式聽起來令人印象深刻，但退後一步並進一步細分是很好的。 與大多數人工智慧驅動的編碼工具一樣，想要建立自己產品的開發人員和非開發人員都對該領域抱持極大的興趣和好奇心。許多人甚至沒有想要建立的具體專案，但他們熱衷於嘗試一下，看看它是如何運作的。此外，由於法學碩士不是確定性的，因此還沒有任何工具能夠完美執行，並且經常會出現需要手動幹預和編碼知識的小錯誤。 雖然我們對此非常明確(https://wasp-lang.dev/blog/2023/07/10/gpt-web-app-generator#what-kind-of-apps-can-i-build-with-it )和其他[挑戰](https://wasp-lang.dev/blog/2023/07/10/gpt-web-app-generator#challenges)GPT驅動的工具面臨，MAGE仍然吸引了一部分的用戶對建置自己的產品感到興奮，但不精通編碼，需要幫助下載、執行和修復應用程式。另一方面，它是一種非常友好且易於參與 Web 開發和編碼的方式。我們不會阻止非編碼人員嘗試，而是盡可能透明地管理期望。 因此，大約 40% 的所有建立的應用程式都會下載並在本地執行。 ## 結論 事實證明，我們對 MAGE 的實驗非常成功，甚至超越了我們最初的預期。除了許多現有的通用編碼代理之外，高度專業化和結構化的方法可以以低廉的價格產生更好、更一致的結果。 此外，開發人員對啟動全端應用程式的簡單方法（其中包含最佳實踐）感到興奮，並且正在積極尋找這樣的解決方案並在彼此之間共享。 我預計人工智慧輔助的 SaaS 新創公司將成為 Web 開發的未來。如果有人可以使用已經為其應用程式定制的資料模型和 CRUD 邏輯來建立他們的應用程式，那麼為什麼有人會使用通用樣板啟動器呢？另一個問題是誰以及如何具體實現這一點，但我預計未來每個主流框架都會有一個。 ## 祝你好運！ 我希望這篇概述對您有所幫助，並讓您了解建立和行銷新的（人工智慧驅動的）開發工具時幕後的情況。請記住，這是我們獨特的經歷，每個故事都是不同的，因此對一切都持保留態度，只選擇對您和您的產品有意義的內容。 我們祝您好運，如果您有任何疑問或想了解 [MAGE](https://usemage.ai/) 和 [Wasp](https://github.com/wasp-lang/wasp)！ --- 原文出處：https://dev.to/wasp/how-we-built-a-gpt-web-app-generator-for-react-nodejs-from-idea-to-25000-apps-in-4-months-1aol

0個讚   0留言 287瀏覽

不要在前端這樣做，或者說是......開發人員的前端 Best Practice

### console.log 拿掉吧。 刪除生產程式碼中的 console.log 對於防止敏感資訊洩漏並提高效能非常重要。 ### 控制台錯誤和警告 調查並修復。 解決生產程式碼中的控制台錯誤對於保持流暢且無錯誤的使用者體驗非常重要。 ### TypeScript 中的 any 把型別設定好吧。 應盡量減少在 TypeScript 中使用“any”，轉而使用明確類型，以增強程式碼的可靠性和可維護性。 ### 註解未使用的程式碼 刪掉吧。 註解掉未使用的程式碼是一種不好的做法，因為它會使程式碼變得混亂，妨礙維護，並可能導致註解資訊過時。 ### 超級元件和功能 如果您的元件很大，那麼就該將其分成更小的元件了。 想想 SOLID 的古老原則「單一職責」。 無論您是編寫函數程式碼還是類別程式碼。 ### 多次重寫CSS 為了阿達·洛夫萊斯、艾倫·圖靈和蒂姆·伯納斯·李的愛… 不要重複重寫顏色、字體和大小，使用設計標記來發揮自己的優勢，建立全域 CSS 變數或使用函式庫。 與您的團隊討論使用設計令牌的優勢。 ### 忽略 Linter 的標誌 範例：使用 `/* eslint-disable @typescript-eslint/no-unused-vars */` 修復你的程式碼。 不要傳送帶有 linter 錯誤的 Pull 請求。 如果您確實需要忽略，請仔細考慮可以忽略哪些 linter 警告。 ### 重新渲染和循環消耗大量資源或崩潰 範例：JavaScript 循環函數或 React 中的 useEffect 應用不佳。 這可能會導致 API 呼叫或值無限重複，從而導致記憶體溢出並導致應用程式崩潰。 修正你的邏輯。 * 注意：您的應用程式在瀏覽器中執行並消耗有限的最終用戶記憶體資源。 ### 前端的業務規則 請勿放置且不允許。 人們普遍認為，任何前端應用程式都不能有業務規則，只有使用者介面固有的規則，用於互動和使用者的成功旅程。 前端是客戶端，不是伺服器。 大公司和企業級應用程式採取的做法是不將業務規則和資料處理暴露在前端，而將其放在後端。 * 注意：對於簡單的無伺服器 Web 應用程式或參考第三方 API 的應用程式，可能有必要在前端放置一些業務規則 - 小心不要向客戶端暴露敏感或成本高昂的處理。 ### 不測試的文化 在您的程式碼庫上進行測試。沒有程式碼是完美的。 單元、整合、安全性、使用者體驗、效能和可存取性測試。使用測試工具產生錯誤報告和改進以糾正您的應用程式。 範例：部署管道中的 Cypress、Lighthouse、SAST 等。 與使用者體驗、品質保證和網路安全/滲透測試團隊合作（如果您公司有）。 ### 溝通恐懼 你是一個人。 當您遇到困難時，請致電其他開發人員或技術主管來分享您面臨的問題。 透過結對程式設計和共同思考，可以更快解決問題！ 請記住：他們曾經處於您的位置並且會提供幫助！ --- 我希望你喜歡！ 😃✌🏻 **你還有更多的TIPS嗎？** 支持我在 [Patreon.com/lucasm](https://patreon.com/lucasm) 上的工作 --- 原文出處：https://dev.to/lucasm/frontend-best-practices-guide-or-dont-do-it-on-frontend-32n4

0個讚   0留言 223瀏覽

10 個給 Web 開發者的好用 Chrome 外掛

## 介紹 Web 開發人員社群致力於建立能夠吸引目標受眾注意力的網站。成員總是在學習新的東西並創造有影響力的東西。這意味著生產力在他們的成功之路上發揮著重要作用。 網路上有許多我們可以遵循的技術來提高我們的生產力。 Chrome 擴充功能就是這樣一種技術，它使我們能夠提高我們致力於技術的辛勤工作的成果。 在本文中，我們將發現 10 個有用的 Chrome 擴充程序，它們可以提高 Web 開發人員的工作效率並讓我們的生活變得更美好。 ## Loom ![Loom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qfklh8cwrpcev4t9anhu.jpg) [Loom](https://chromewebstore.google.com/detail/loom-%E2%80%93-screen-recorder-sc/liecbddmkiiihnedobmlmillhodjkdmb) 是 Chrome 線上應用程式商店中最常用的螢幕錄製擴充功能之一。它使我們能夠記錄螢幕、以圖形方式分享我們的想法並提供即時回應。 ## Window Resizer ![視窗大小調整器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjy8xcsa2jih0gr8z27z.jpg) [Window Resizer](https://chromewebstore.google.com/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh) 調整瀏覽器視窗的大小以複製不同的解析度。它給我們一種個性化的感覺，因為它允許我們加入、刪除和重新排序我們想要測試的解析度清單。 ## 檢查我的連結 ![檢查我的連結](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzrr7hl03dhk1j2tu2tv.jpg) [檢查我的連結](https://chromewebstore.google.com/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf) 是一個連結分析器，用於掃描我們的網站是否有損壞的連結。此擴充功能專為網頁開發人員量身定制，因為他們始終致力於使網站內容完美無缺。 ## Wappalyzer ![Wappalyzer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uh8nfny8e3h914zxosnf.jpg) [Wappalyzer](https://chromewebstore.google.com/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg) 是一個技術堆疊評估器，列出了用於建立網站的工具和技術。它使我們能夠了解 CMS（內容管理系統）、框架、JavaScript 庫等。 ## Session Buddy ![會話好友](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxhi33bxt0cs2m313uzy.jpg) [Session Buddy](https://chromewebstore.google.com/detail/session-buddy/edacconmaakjimmfgnblocblbcdccpbko) 是一個擴展，使我們能夠方便地管理瀏覽器選項卡和書籤。它將打開的選項卡保存為集合，我們可以稍後在任何給定時間點恢復。 ## Lighthouse ![燈塔](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wijphg7u3a1htt3oavdd.jpg) [Lighthouse](https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) 是開源自主工具，用於提高網路應用程式的品質、效率和準確性。它透過在頁面上執行一系列測試來審核頁面，然後產生總結頁面效能的報表。 ## Requestly ![請求](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qa3uoc7g2qsguucri9n.jpg) [Requestly](https://chromewebstore.google.com/detail/requestly-open-source-htt/mdnleldcmiljblolnjhpnblkcekpdkpa) 讓我們可以使用攔截和修改HTTP 請求、模擬伺服器、API 用戶端和會話記錄來建置、測試和會話記錄來建置、測試和除錯Web 應用程式。它將 Fiddler、Charles Proxy 和更多此類工具的功能引入瀏覽器，並具有有吸引力的現代 UI。 ## Grepper ![Grepper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1o5sf4arl30ass61xpgf.jpg) [Grepper](https://chromewebstore.google.com/detail/grepper/amaaokahonnfjjemodnpmeenfpnnbkco) 是一個回答開發人員社群查詢的擴充。它使我們能夠從網路上快速提取程式碼片段，然後將其用於我們的專案中，以在我們的旅程中取得進展。 ## BrowserStack ![BrowserStack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2xzz5en8vux6k9oijkb.jpg) [BrowserStack](https://chromewebstore.google.com/detail/browserstack/nkihdmlheodkdfojglpcjjmioefjahjb) 使我們能夠在桌面或行動瀏覽器上測試我們的網站。對於希望將跨瀏覽器測試作為其開發工作流程不可或缺的一部分的 Web 開發人員來說，這是一個有用的擴充功能。 ## Octotree ![Octotree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9fly17l9cn4m6jztewe.jpg) [Octotree](https://chromewebstore.google.com/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc) 是一個擴展，可以幫助我們在 GitHub 上進行程式碼審查和探索。使用此工具，我們可以為儲存庫、問題、拉取請求和文件加入書籤，執行快速搜尋並輕鬆導航拉取請求。 ## 結論 我們已經到達終點了！我們上面討論的擴充功能非常有幫助，並且能夠大幅提高工作量。因此，讓我們使用它們，並在各自作為 Web 開發人員的旅程中不斷取得進展。 **快速說明：** > 感謝您花時間閱讀我的文章。這對我來說意義重大，並促使我創作更多這樣的內容。 **我的社交：** - [LinkedIn](https://www.linkedin.com/in/sriparnooy/) - [推特](https://twitter.com/Sriparno08) - [GitHub](https://github.com/Sriparno08) - [CodePen](https://codepen.io/Sriparno08) **我的部落格：** - [展示案例](https://www.showwcase.com/sriparno08) - [DEV](https://dev.to/sriparno08) - [哈希節點](https://hashnode.com/@sriparno08) --- 原文出處：https://dev.to/this-is-learning/10-useful-chrome-extensions-for-web-developers-meg

0個讚   0留言 185瀏覽

在 JS 應用程式中載入環境變數

#### 如何儲存並使用本機開發的環境變數 API 和第三方整合要求開發人員使用稱為**環境或配置變數**的配置資料。這些變數通常儲存在受密碼保護的地方，例如 CI 工具或部署管道，但是當我們在本地開發應用程式時如何使用它們？ ![](https://cdn-images-1.medium.com/max/1024/1*iTLvajtJ6tN3DnHArGKkDA.png) #### 簡介 - 不要在原始碼管理中儲存環境變數 - 使用 [dotenv](https://github.com/motdotla/dotenv) 從 .env 檔案讀取資料 - create-react-app 在環境變數上強制命名空間 這個簡短的教程將解釋在本地開發時將環境變數載入到程式碼中的一種方法。主要好處是 API 金鑰等秘密不會提交給原始碼控制，以確保您的應用程式更安全。 #### 要求： - 一個 JavaScript 應用程式 - 套件管理器（yarn 和 npm 都很棒） - Node 7+ ### 設定變數 在儲存庫的根目錄中建立一個名為「.env」的檔案。該文件稱為“點文件”，與常規文件不同，它通常隱藏在文件瀏覽器中。 大多數 IDE 允許使用者建立沒有名稱的文件，但如果情況並非如此，請轉到終端並 cd 進入應用程式的根資料夾。 ``` touch .env ``` 接下來，使用格式 key=value 設定變數，並以換行符號分隔： ``` API_KEY=abcde API_URL=https://my-api.com/api ``` 最後，確保 .env 檔案未提交到您的儲存庫。這可以透過開啟（或建立）.gitignore 檔案並新增以下行來實現： ``` .env # This contains secrets, don't store in source control ``` ### 使用變數 前往終端使用您首選的套件管理器安裝 [dotenv](https://github.com/motdotla/dotenv)： ``` # Using npm: npm i dotenv # Using yarn: yarn add dotenv ``` 現在您已準備好讀取 .env 檔案。儘早在您的應用程式中加入這行程式碼。對於 React 應用程式，通常是 index.js 或 App.js，但這完全取決於您的設定： ``` require('dotenv').config(); ``` 就是這樣！您的應用程式應該可以透過 process.env 物件存取環境變數。您可以透過撥打以下電話進行雙重檢查： ``` console.log(process.env); ``` 如果一切順利，您應該會看到類似以下內容： ``` { NODE_ENV: "development", API_KEY: "abcde", API_URL: "https://my-api.com/api" } ``` 🎉 現在您可以在應用程式中使用環境變數了！ 現在，對於我們這些使用 create-react-app 的人來說，有一個問題，我希望它能被更好地記錄下來。 ### 使用 create-react-app Facebook 的 [create-react-app](https://github.com/facebook/create-react-app) 的工作方式略有不同。如果您按照上述步驟操作但沒有彈出應用程式，那麼您應該看到的只是 NODE\_ENV 變數。這是因為 **create-react-app 只允許應用程式讀取帶有** **REACT\_APP\_ 前綴的變數。** 因此，為了使我們的變數起作用，我們需要像這樣更新我們的 .env 檔案： ``` REACT_APP_API_KEY=abcde REACT_APP_API_URL=https://my-api.com/api ``` 再次透過將 process.env 記錄到控制台來驗證您的設定： ``` { NODE_ENV: "development", REACT_APP_API_KEY: "abcde", REACT_APP_API_URL: "https://my-api.com/api" } ``` 你就完成了😎 ### 小技巧 .env 檔案中的變數不需要引號，除非值中有空格。 ``` NO_QUOTES=thisisokay QUOTES="this contains spaces" ``` 最好建立一個 .env.sample 檔案來追蹤應用程式應該期望的變數。這是我目前專案中的範例文件的樣子。請注意，它解釋了人們可以在哪裡找到這些金鑰和 URL。 ``` CONTENTFUL_SPACE_TOKEN="see Contentful dashboard" CONTENTFUL_API_KEY="see Contentful dashboard" S3_BUCKET_URL="check AWS" SHOW_DEBUG_SIDEBAR="if true, show debug sidebar" ``` ### 進一步閱讀： - [在 12-Factor App 方法中讀取環境中的設定](https://12factor.net/config) 感謝您的閱讀！您是否喜歡另一種在本地載入環境變數的方法？我很想在下面的評論中聽到它！ --- 原文出處：https://dev.to/deammer/loading-environment-variables-in-js-apps-1p7p

0個讚   0留言 225瀏覽

🔥 大幅提升你的 NextJS 能力：嘗試手寫一個 GitHub 星星監視器 🤯

在本文中，您將學習如何建立 **GitHub 星數監視器** 來檢查您幾個月內的星數以及每天獲得的星數。 - 使用 GitHub API 取得目前每天收到的星星數量。 - 在螢幕上每天繪製美麗的星星圖表。 - 創造一個工作來每天收集新星星。 ![吉米](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n524rmr0gpgr79p4qlhj.gif) --- ## 你的後台工作平台🔌 [Trigger.dev](https://trigger.dev/) 是一個開源程式庫，可讓您使用 NextJS、Remix、Astro 等為您的應用程式建立和監控長時間執行的作業！   [![GiveUsStars](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bm9mrmovmn26izyik95z.gif)](https://github.com/triggerdotdev/trigger.dev) 請幫我們一顆星🥹。 這將幫助我們建立更多這樣的文章💖 https://github.com/triggerdotdev/trigger.dev --- ## 這是你需要知道的 😻 取得 GitHub 上星星數量的大部分工作將透過 GitHub API 完成。 GitHub API 有一些限制： - 每個請求最多 100 名觀星者 - 最多 100 個同時請求 - 每小時最多 60 個請求 [TriggerDev](https://github.com/triggerdotdev/trigger.dev) 儲存庫擁有超過 5000 顆星，實際上不可能在合理的時間內（即時）計算所有星數。 因此，我們將採用與 [GitHub Stars History](https://star-history.com/) 相同的技巧。 - 取得星星總數 (**5,715**) 除以每頁 **100** 結果 = **58 頁** - 設定我們想要的最大請求量（**20 頁最大**）除以 **58 頁** = 跳過 3 頁。 - 從這些頁面中獲取星星**（2000 顆星）**，然後獲取剩餘的星星，我們將按比例加入到其他日期（**3715 顆星**）。 它會為我們繪製一個漂亮的圖表，並在需要的地方用星星凸起。 當我們每天獲取新數量的星星時，事情就會變得容易得多。 我們將用目前擁有的星星總數減去 GitHub 上的新星星數量。 **我們不再需要迭代觀星者。** --- ## 讓我們來設定一下 🔥 我們的申請將包含一頁： - 新增您想要監控的儲存庫。 - 查看儲存庫清單及其 GitHub 星圖。 - 刪除那些你不再想要的。 ![StarsOverTime](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbii15mn1tyuz63kjphk.png) > 💡 我們將使用 NextJS 新的應用程式路由器，在安裝專案之前請確保您的節點版本為 18+。 > 使用 NextJS 設定一個新專案 ``` npx create-next-app@latest ``` 我們必須將所有星星保存到我們的資料庫中！ 在我們的示範中，我們將使用 SQLite 和 `Prisma`。 它非常容易安裝，但可以隨意使用任何其他資料庫。 ``` npm install prisma @prisma/client --save ``` 在我們的專案中安裝 Prisma ``` npx prisma init --datasource-provider sqlite ``` 轉到“prisma/schema.prisma”並將其替換為以下模式： ``` generator client { provider = "prisma-client-js" } datasource db { provider = "sqlite" url = env("DATABASE_URL") } model Repository { id String @id @default(uuid()) month Int year Int day Int name String stars Int @@unique([name, day, month, year]) } ``` 然後執行 ``` npx prisma db push ``` 我們基本上已經在 SQLite 資料庫中建立了一個名為「Repository」的新表： - 「月」、「年」、「日」是日期。 - `name` 儲存庫的名稱 - 「星星」以及該特定日期的星星數量。 你還可以看到我們在底部加入了一個`@@unique`，這意味著我們可以將`name`，`month`，`year`，`day`一起重複記錄。它會拋出一個錯誤。 讓我們新增 Prisma 客戶端。 建立一個名為「helper」的新資料夾，並新增一個名為「prisma.ts」的新文件，並在其中新增以下程式碼： ``` import {PrismaClient} from '@prisma/client'; export const prisma = new PrismaClient(); ``` 我們稍後可以使用該「prisma」變數來查詢我們的資料庫。 --- ## 應用程式 UI 骨架 💀 我們需要一些函式庫來完成本教學： - **Axios** - 向伺服器發送請求（如果您覺得更舒服，可以隨意使用 fetch） - **Dayjs -** 很棒的處理日期的函式庫。它是 moment.js 的替代品，但不再完全維護。 - **Lodash -** 很酷的資料結構庫。 - **react-hook-form -** 處理表單的最佳函式庫（驗證/值/等） - **chart.js** - 我選擇繪製 GitHub 星圖的函式庫。 讓我們安裝它們： ``` npm install axios dayjs lodash @types/lodash chart.js react-hook-form react-chartjs-2 --save ``` 建立一個名為“components”的新資料夾並新增一個名為“main.tsx”的新文件 新增以下程式碼： ``` "use client"; import {useForm} from "react-hook-form"; import axios from "axios"; import {Repository} from "@prisma/client"; import {useCallback, useState} from "react"; export default function Main() { const [repositoryState, setRepositoryState] = useState([]); const {register, handleSubmit} = useForm(); const submit = useCallback(async (data: any) => { const {data: repositoryResponse} = await axios.post('/api/repository', {todo: 'add', repository: data.name}); setRepositoryState([...repositoryState, ...repositoryResponse]); }, [repositoryState]) const deleteFromList = useCallback((val: List) => () => { axios.post('/api/repository', {todo: 'delete', repository: `https://github.com/${val.name}`}); setRepositoryState(repositoryState.filter(v => v.name !== val.name)); }, [repositoryState]) return ( <div className="w-full max-w-2xl mx-auto p-6 space-y-12"> <form className="flex items-center space-x-4" onSubmit={handleSubmit(submit)}> <input className="flex-grow p-3 border border-black/20 rounded-xl" placeholder="Add Git repository" type="text" {...register('name', {required: 'true'})} /> <button className="flex-shrink p-3 border border-black/20 rounded-xl" type="submit"> Add </button> </form> <div className="divide-y-2 divide-gray-300"> {repositoryState.map(val => ( <div key={val.name} className="space-y-4"> <div className="flex justify-between items-center py-10"> <h2 className="text-xl font-bold">{val.name}</h2> <button className="p-3 border border-black/20 rounded-xl bg-red-400" onClick={deleteFromList(val)}>Delete</button> </div> <div className="bg-white rounded-lg border p-10"> <div className="h-[300px]]"> {/* Charts Component */} </div> </div> </div> ))} </div> </div> ) } ``` **超簡單的React元件** - 允許我們新增新的 GitHub 庫並將其發送到伺服器 POST 的表單 - `/api/repository` `{todo: 'add'}` - 刪除我們不需要 POST 的儲存庫 - `/api/repository` `{todo: 'delete'}` - 所有新增的庫及其圖表的清單。 讓我們轉到本文的複雜部分，新增儲存庫。 --- ## 數星星 ![CountingStars](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4m2j6046myxwv2c8kwla.gif) 在「helper」內部建立一個名為「all.stars.ts」的新檔案並新增以下程式碼： ``` import axios from "axios"; import dayjs from "dayjs"; import utc from 'dayjs/plugin/utc'; dayjs.extend(utc); const requestAmount = 20; export const getAllGithubStars = async (owner: string, name: string) => { // Get the amount of stars from GitHub const totalStars = (await axios.get(`https://api.github.com/repos/${owner}/${name}`)).data.stargazers_count; // get total pages const totalPages = Math.ceil(totalStars / 100); // How many pages to skip? We don't want to spam requests const pageSkips = totalPages < requestAmount ? requestAmount : Math.ceil(totalPages / requestAmount); // Send all the requests at the same time const starsDates = (await Promise.all([...new Array(requestAmount)].map(async (_, index) => { const getPage = (index * pageSkips) || 1; return (await axios.get(`https://api.github.com/repos/${owner}/${name}/stargazers?per_page=100&page=${getPage}`, { headers: { Accept: "application/vnd.github.v3.star+json", }, })).data; }))).flatMap(p => p).reduce((acc: any, stars: any) => { const yearMonth = stars.starred_at.split('T')[0]; acc[yearMonth] = (acc[yearMonth] || 0) + 1; return acc; }, {}); // how many stars did we find from a total of `requestAmount` requests? const foundStars = Object.keys(starsDates).reduce((all, current) => all + starsDates[current], 0); // Find the earliest date const lowestMonthYear = Object.keys(starsDates).reduce((lowest, current) => { if (lowest.isAfter(dayjs.utc(current.split('T')[0]))) { return dayjs.utc(current.split('T')[0]); } return lowest; }, dayjs.utc()); // Count dates until today const splitDate = dayjs.utc().diff(lowestMonthYear, 'day') + 1; // Create an array with the amount of stars we didn't find const array = [...new Array(totalStars - foundStars)]; // Set the amount of value to add proportionally for each day let splitStars: any[][] = []; for (let i = splitDate; i > 0; i--) { splitStars.push(array.splice(0, Math.ceil(array.length / i))); } // Calculate the amount of stars for each day return [...new Array(splitDate)].map((_, index, arr) => { const yearMonthDay = lowestMonthYear.add(index, 'day').format('YYYY-MM-DD'); const value = starsDates[yearMonthDay] || 0; return { stars: value + splitStars[index].length, date: { month: +dayjs.utc(yearMonthDay).format('M'), year: +dayjs.utc(yearMonthDay).format('YYYY'), day: +dayjs.utc(yearMonthDay).format('D'), } }; }); } ``` 那麼這裡發生了什麼事： - `totalStars` - 我們計算圖書館擁有的星星總數。 - `totalPages` - 我們計算頁數 **（每頁 100 筆記錄）** - `pageSkips` - 由於我們最多需要 20 個請求，因此我們檢查每次必須跳過多少頁。 - `starsDates` - 我們填充每個日期的星星數量。 - `foundStars` - 由於我們跳過日期，我們需要計算實際找到的星星總數。 - `lowestMonthYear` - 尋找我們擁有的恆星的最早日期。 - `splitDate` - 最早的日期和今天之間有多少個日期？ - `array` - 一個包含 `splitDate` 專案數量的空陣列。 - `splitStars` - 我們缺少的星星數量，需要按比例加入每個日期。 - 最終返回 - 新陣列包含自開始以來每天的星星數量。 所以，我們已經成功建立了一個每天可以給我們星星的函數。 我嘗試過這樣顯示，結果很混亂。 您可能想要顯示每個月的星星數量。 此外，您可能想要累積星星**而不是：** - 二月 - 300 顆星 - 三月 - 200 顆星 - 四月 - 400 顆星 **如果有這樣的就更好了：** - 二月 - 300 顆星 - 三月 - 500 顆星 - 四月 - 900 顆星 兩個選項都有效。 **這取決於你想展示什麼！** 因此，讓我們轉到 helper 資料夾並建立一個名為「get.list.ts」的新檔案。 這是文件的內容： ``` import {prisma} from "./prisma"; import {groupBy, sortBy} from "lodash"; import {Repository} from "@prisma/client"; function fixStars (arr: any[]): Array<{name: string, stars: number, month: number, year: number}> { return arr.map((current, index) => { return { ...current, stars: current.stars + arr.slice(index + 1, arr.length).reduce((acc, current) => acc + current.stars, 0), } }).reverse(); } export const getList = async (data?: Repository[]) => { const repo = data || await prisma.repository.findMany(); const uniqMonth = Object.values( groupBy( sortBy( Object.values( groupBy(repo, (p) => p.name + '-' + p.year + '-' + p.month)) .map(current => { const stars = current.reduce((acc, current) => acc + current.stars, 0); return { name: current[0].name, stars, month: current[0].month, year: current[0].year } }), [(p: any) => -p.year, (p: any) => -p.month] ),p => p.name) ); const fixMonthDesc = uniqMonth.map(p => fixStars(p)); return fixMonthDesc.map(p => ({ name: p[0].name, list: p })); } ``` 首先，它將所有按日的星星轉換為按月的星星。 稍後我們會累積每個月的星星數量。 這裡要注意的一件主要事情是 `data?: Repository[]` 是可選的。 我們制定了一個簡單的邏輯：如果我們不傳遞資料，它將為我們資料庫中的所有儲存庫傳遞資料。 如果我們傳遞資料，它只會對其起作用。 為什麼問？ - 當我們建立一個新的儲存庫時，我們需要在將其新增至資料庫後處理特定的儲存庫資料。 - 當我們重新載入頁面時，我們需要取得所有資料。 現在，讓我們來處理我們的星星建立/刪除路線。 轉到“src/app/api”並建立一個名為“repository”的新資料夾。在該資料夾中，建立一個名為「route.tsx」的新檔案。 在那裡加入以下程式碼： ``` import {getAllGithubStars} from "../../../../helper/all.stars"; import {prisma} from "../../../../helper/prisma"; import {Repository} from "@prisma/client"; import {getList} from "../../../../helper/get.list"; export async function POST(request: Request) { const body = await request.json(); if (!body.repository) { return new Response(JSON.stringify({error: 'Repository is required'}), {status: 400}); } const {owner, name} = body.repository.match(/github.com\/(?<owner>.*)\/(?<name>.*)/).groups; if (!owner || !name) { return new Response(JSON.stringify({error: 'Repository is invalid'}), {status: 400}); } if (body.todo === 'delete') { await prisma.repository.deleteMany({ where: { name: `${owner}/${name}` } }); return new Response(JSON.stringify({deleted: true}), {status: 200}); } const starsMonth = await getAllGithubStars(owner, name); const repo: Repository[] = []; for (const stars of starsMonth) { repo.push( await prisma.repository.upsert({ where: { name_day_month_year: { name: `${owner}/${name}`, month: stars.date.month, year: stars.date.year, day: stars.date.day, }, }, update: { stars: stars.stars, }, create: { name: `${owner}/${name}`, month: stars.date.month, year: stars.date.year, day: stars.date.day, stars: stars.stars, } }) ); } return new Response(JSON.stringify(await getList(repo)), {status: 200}); } ``` 我們共享 DELETE 和 CREATE 路由，這些路由通常不應在生產中使用，但我們在本文中這樣做是為了讓您更輕鬆。 我們從請求中取得 JSON，檢查「repository」欄位是否存在，並且它是 GitHub 儲存庫的有效路徑。 如果是刪除請求，我們使用 prisma 根據儲存庫名稱從資料庫中刪除儲存庫並傳回請求。 如果是建立，我們使用 getAllGithubStars 來獲取資料以保存到我們的資料庫中。 > 💡 由於我們已經在 `name`、`month`、`year` 和 `day` 上放置了唯一索引，如果記錄已經存在，我們可以使用 `prisma` `upsert` 來更新資料 最後，我們將新累積的資料回傳給客戶端。 最困難的部分完成了🍾 --- ## 主頁人口 💽 我們還沒有建立我們的主頁元件。 **我們開始做吧。** 前往“app”資料夾建立或編輯“page.tsx”並新增以下程式碼： ``` "use server"; import Main from "@/components/main"; import {getList} from "../../helper/get.list"; export default async function Home() { const list: any[] = await getList(); return ( <Main list={list} /> ) } ``` 我們使用與 getList 相同的函數來取得累積的所有儲存庫的所有資料。 我們還修改主要元件以支援它。 編輯 `components/main.tsx` 並將其替換為： ``` "use client"; import {useForm} from "react-hook-form"; import axios from "axios"; import {Repository} from "@prisma/client"; import {useCallback, useState} from "react"; interface List { name: string, list: Repository[] } export default function Main({list}: {list: List[]}) { const [repositoryState, setRepositoryState] = useState(list); const {register, handleSubmit} = useForm(); const submit = useCallback(async (data: any) => { const {data: repositoryResponse} = await axios.post('/api/repository', {todo: 'add', repository: data.name}); setRepositoryState([...repositoryState, ...repositoryResponse]); }, [repositoryState]) const deleteFromList = useCallback((val: List) => () => { axios.post('/api/repository', {todo: 'delete', repository: `https://github.com/${val.name}`}); setRepositoryState(repositoryState.filter(v => v.name !== val.name)); }, [repositoryState]) return ( <div className="w-full max-w-2xl mx-auto p-6 space-y-12"> <form className="flex items-center space-x-4" onSubmit={handleSubmit(submit)}> <input className="flex-grow p-3 border border-black/20 rounded-xl" placeholder="Add Git repository" type="text" {...register('name', {required: 'true'})} /> <button className="flex-shrink p-3 border border-black/20 rounded-xl" type="submit"> Add </button> </form> <div className="divide-y-2 divide-gray-300"> {repositoryState.map(val => ( <div key={val.name} className="space-y-4"> <div className="flex justify-between items-center py-10"> <h2 className="text-xl font-bold">{val.name}</h2> <button className="p-3 border border-black/20 rounded-xl bg-red-400" onClick={deleteFromList(val)}>Delete</button> </div> <div className="bg-white rounded-lg border p-10"> <div className="h-[300px]]"> {/* Charts Components */} </div> </div> </div> ))} </div> </div> ) } ``` --- ## 顯示圖表！ 📈 前往“components”資料夾並新增一個名為“chart.tsx”的新檔案。 新增以下程式碼： ``` "use client"; import {Repository} from "@prisma/client"; import {useMemo} from "react"; import React from 'react'; import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, } from 'chart.js'; import { Line } from 'react-chartjs-2'; ChartJS.register( CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend ); export default function ChartComponent({repository}: {repository: Repository[]}) { const labels = useMemo(() => { return repository.map(r => `${r.year}/${r.month}`); }, [repository]); const data = useMemo(() => ({ labels, datasets: [ { label: repository[0].name, data: repository.map(p => p.stars), borderColor: 'rgb(255, 99, 132)', backgroundColor: 'rgba(255, 99, 132, 0.5)', tension: 0.2, }, ], }), [repository]); return ( <Line options={{ responsive: true, }} data={data} /> ); } ``` 我們使用“chart.js”函式庫來繪製“Line”類型的圖表。 這非常簡單，因為我們在伺服器端完成了所有資料結構。 這裡需要注意的一件大事是我們「匯出預設值」我們的 ChartComponent。那是因為它使用了「Canvas」。這在伺服器端不可用，我們需要延遲載入該元件。 讓我們修改“main.tsx”： ``` "use client"; import {useForm} from "react-hook-form"; import axios from "axios"; import {Repository} from "@prisma/client"; import dynamic from "next/dynamic"; import {useCallback, useState} from "react"; const ChartComponent = dynamic(() => import('@/components/chart'), { ssr: false, }) interface List { name: string, list: Repository[] } export default function Main({list}: {list: List[]}) { const [repositoryState, setRepositoryState] = useState(list); const {register, handleSubmit} = useForm(); const submit = useCallback(async (data: any) => { const {data: repositoryResponse} = await axios.post('/api/repository', {todo: 'add', repository: data.name}); setRepositoryState([...repositoryState, ...repositoryResponse]); }, [repositoryState]) const deleteFromList = useCallback((val: List) => () => { axios.post('/api/repository', {todo: 'delete', repository: `https://github.com/${val.name}`}); setRepositoryState(repositoryState.filter(v => v.name !== val.name)); }, [repositoryState]) return ( <div className="w-full max-w-2xl mx-auto p-6 space-y-12"> <form className="flex items-center space-x-4" onSubmit={handleSubmit(submit)}> <input className="flex-grow p-3 border border-black/20 rounded-xl" placeholder="Add Git repository" type="text" {...register('name', {required: 'true'})} /> <button className="flex-shrink p-3 border border-black/20 rounded-xl" type="submit"> Add </button> </form> <div className="divide-y-2 divide-gray-300"> {repositoryState.map(val => ( <div key={val.name} className="space-y-4"> <div className="flex justify-between items-center py-10"> <h2 className="text-xl font-bold">{val.name}</h2> <button className="p-3 border border-black/20 rounded-xl bg-red-400" onClick={deleteFromList(val)}>Delete</button> </div> <div className="bg-white rounded-lg border p-10"> <div className="h-[300px]]"> <ChartComponent repository={val.list} /> </div> </div> </div> ))} </div> </div> ) } ``` 您可以看到我們使用“nextjs/dynamic”來延遲載入元件。 我希望將來 NextJS 能為客戶端元件加入類似「使用延遲載入」的內容 😺 --- ## 但是新星呢？來認識一下 Trigger.Dev！ 每天加入新星星的最佳方法是執行 cron 請求來檢查新加入的星星並將其加入到我們的資料庫中。 不要使用 Vercel cron / GitHub 操作，或（上帝禁止）為此建立一個新伺服器。 我們可以使用 [Trigger.DEV](http://Trigger.DEV) 直接與我們的 NextJS 應用程式搭配使用。 那麼就讓我們來設定一下吧！ 註冊 [Trigger.dev 帳號](https://trigger.dev/)。 註冊後，建立一個組織並為您的工作選擇一個專案名稱。 ![新組織](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bdnxq8o7el7t4utvgf1u.jpeg) 選擇 Next.js 作為您的框架，並按照將 Trigger.dev 新增至現有 Next.js 專案的流程進行操作。 ![NextJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4kt7e5r1mwg60atqfka.jpeg) 否則，請點選專案儀表板側邊欄選單上的「環境和 API 金鑰」。 ![開發金鑰](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ser7a2j5qft9vw8rfk0m.png) 複製您的 DEV 伺服器 API 金鑰並執行下面的程式碼片段以安裝 Trigger.dev。 仔細按照說明進行操作。 ``` npx @trigger.dev/cli@latest init ``` 在另一個終端中執行以下程式碼片段，在 Trigger.dev 和您的 Next.js 專案之間建立隧道。 ``` npx @trigger.dev/cli@latest dev ``` 讓我們建立 TriggerDev 作業！ 您將看到一個新建立的資料夾，名為“jobs”。 在那裡建立一個名為“sync.stars.ts”的新文件 新增以下程式碼： ``` import { cronTrigger, invokeTrigger } from "@trigger.dev/sdk"; import { client } from "@/trigger"; import { prisma } from "../../helper/prisma"; import axios from "axios"; import { z } from "zod"; // Your first job // This Job will be triggered by an event, log a joke to the console, and then wait 5 seconds before logging the punchline. client.defineJob({ id: "sync-stars", name: "Sync Stars Daily", version: "0.0.1", // Run a cron every day at 23:00 AM trigger: cronTrigger({ cron: "0 23 * * *", }), run: async (payload, io, ctx) => { const repos = await io.runTask("get-stars", async () => { // get all libraries and current amount of stars return await prisma.repository.groupBy({ by: ["name"], _sum: { stars: true, }, }); }); //loop through all repos and invoke the Job that gets the latest stars for (const repo of repos) { getStars.invoke(repo.name, { name: repo.name, previousStarCount: repo?._sum?.stars || 0, }); } }, }); const getStars = client.defineJob({ id: "get-latest-stars", name: "Get latest stars", version: "0.0.1", // Run a cron every day at 23:00 AM trigger: invokeTrigger({ schema: z.object({ name: z.string(), previousStarCount: z.number(), }), }), run: async (payload, io, ctx) => { const stargazers_count = await io.runTask("get-stars", async () => { const { data } = await axios.get( `https://api.github.com/repos/${payload.name}`, { headers: { authorization: `token ${process.env.TOKEN}`, }, } ); return data.stargazers_count as number; }); await prisma.repository.upsert({ where: { name_day_month_year: { name: payload.name, month: new Date().getMonth() + 1, year: new Date().getFullYear(), day: new Date().getDate(), }, }, update: { stars: stargazers_count - payload.previousStarCount, }, create: { name: payload.name, stars: stargazers_count - payload.previousStarCount, month: new Date().getMonth() + 1, year: new Date().getFullYear(), day: new Date().getDate(), }, }); }, }); ``` 我們建立了一個名為“Sync Stars Daily”的新作業，該作業將在每天下午 23:00 執行 - 它在 cron 文本中的表示為：`0 23 * * *` 我們在資料庫中取得所有目前儲存庫，按名稱將它們分組，並對星星進行求和。 由於一切都在 Vercel 無伺服器上執行，因此我們可能會在檢查所有儲存庫時遇到逾時。 為此，我們將每個儲存庫傳送到不同的作業。 我們使用“invoke”建立新作業，然後在“獲取最新的星星”中處理它們 我們迭代所有新儲存庫並獲取當前的星星數量。 我們用舊的星星數量去除新的星星數量，得到今天的星星數量。 我們使用“prisma”將其新增至資料庫。沒有比這更簡單的了！ 最後一件事是編輯“jobs/index.ts”並將內容替換為： ``` export * from "./sync.stars"; ``` 你就完成了🥳 --- ## 讓我們聯絡吧！ 🔌 作為開源開發者，我們邀請您加入我們的[社群](https://discord.gg/nkqV9xBYWy)，以做出貢獻並與維護者互動。請隨時造訪我們的 [GitHub 儲存庫](https://github.com/triggerdotdev/trigger.dev)，貢獻並建立與 Trigger.dev 相關的問題。 本教學的源程式碼可在此處取得： [https://github.com/triggerdotdev/blog/tree/main/stars-monitor](https://github.com/triggerdotdev/blog/tree/main/stars-monitor) 感謝您的閱讀！ --- 原文出處：https://dev.to/triggerdotdev/take-nextjs-to-the-next-level-create-a-github-stars-monitor-130a

0個讚   0留言 305瀏覽

使用 Python 和 Pytest 自動化 API 測試

您是否想過如何使用 python 測試您的 API？在本文中，我們將學習如何使用 Python 和 pytest 框架來測試我們的 API。 對於本教程，您需要安裝 python，您可以在[此處](https://www.python.org/downloads/)下載它 --- ### 簡介： - [什麼是 Python 和 Pytest 框架](#what-is-python-and-pytest-framework) - [我們專案的設定](#configuration-of-our-project) - [使用python建立虛擬環境](#creation-of-virtual-environment-with-python) - [測試的依賴關係設定](#setup-of-dependency-for-the-tests) - [建立我們的第一個測試](#creating-our-first-test) - [將被測試的 API 的定義](#definition-of-the-api-that-will-be-tested) - [建立我們的測試](#creating-our-test) - [重建我們的測試](#refactoring-our-tests) - [產生 html 報告結果](#generate-html-report-result) - [結論](#conclusion) --- ## 什麼是 Python 和 Pytest 框架 「Python」是一種高級通用程式語言，以其簡單性和可讀性而聞名。它由 Guido van Rossum 建立，於 1991 年首次發布。 Python 的設計易於學習，並且具有乾淨簡潔的語法，這使其成為初學者和經驗豐富的程式設計師的流行選擇。 「pytest」框架可以輕鬆編寫小型、可讀的測試，並且可以擴展以支援應用程式和程式庫的複雜功能測試。 --- ## 我們專案的配置 ### 用python建立虛擬環境 在開始建立之前，我們先來了解一下什麼是Python上的虛擬環境。 Python 中的虛擬環境是一個獨立的目錄或資料夾，可讓您為專案建立和管理隔離的 Python 環境。透過環境，您可以輕鬆管理依賴項，避免與不同版本的 python 發生衝突。 虛擬環境（除其他外）是： - 用於包含支援專案（庫或應用程式）所需的特定 Python 解釋器以及軟體庫和二進位檔案。預設情況下，它們與其他虛擬環境中的軟體以及作業系統中安裝的 Python 解釋器和庫隔離。 - 包含在專案目錄中的目錄中，通常名為“venv”或“.venv”，或在許多虛擬環境的容器目錄下，例如“~/.virtualenvs”。 - 未簽入原始碼控制系統（例如 Git）。 - 被認為是一次性的 - 應該很容易刪除並從頭開始重新建立它。您沒有在環境中放置任何專案程式碼 - 不被視為可移動或可複製 - 您只需在目標位置重新建立相同的環境。 您可以在[此處](https://docs.python.org/3/library/venv.html#venv-def)閱讀有關 python 環境的更多資訊。 #### 視窗 首先，為您的專案建立一個資料夾，然後打開 cmd 並使用命令 cd 導航到該資料夾： ``` cd tests_with_python ``` 如果您不知道資料夾在哪裡，可以執行命令“ls”，您將看到資料夾列表，並且可以瀏覽它們。在我們的專案資料夾中，執行以下命令： ``` python -m venv name_of_environment ``` 您的環境名稱可以是任何人，只需記住python 區分大小寫，請查看[PEP 8 風格指南](https://peps.python.org/pep-0008/) 以了解有關Python 約定的更多資訊. 要啟動我們的環境，我們使用以下命令： ``` name_of_environment\Scripts\Activate ``` 如果一切正確，您的環境將被激活，並且在 cmd 上您將看到如下所示： ``` (name_of_environment) C:\User\tests ``` 要停用您的環境，只需執行： ``` deactivate ``` #### Linux 或 MacOS 為您的專案建立一個資料夾，然後打開 cmd 並使用命令 cd 導航到該資料夾： ``` cd tests_with_python ``` 要啟動我們的環境，我們使用以下命令： ``` source name_of_environment/bin/activate ``` 如果一切正確，您的環境將被激活，並且在 cmd 上您將看到如下所示： ``` (name_of_environment) your_user_name tests % ``` 要停用您的環境，只需執行： ``` deactivate ``` ### 設定測試的依賴關係 當我們要測試 API 時，我們需要安裝依賴項來幫助我們進行測試，首先我們將安裝「requests」函式庫來幫助我們發出請求： PS：在執行此命令之前請確保您的環境已激活 ``` pip install requests ``` 為了進行測試，我們將安裝「pytests」框架： ``` pip install pytest ``` --- ## 建立我們的第一個測試 ### 將要測試的 API 的定義 在本教程中，我們將使用返回小行星列表的 Nasa API：[Asteroids - NeoWs](https://api.nasa.gov/#donkiGST)，我們將測試檢索基於小行星列表的端點在他們最接近地球的日期。 關於API： - 基本網址：`https://api.nasa.gov/neo/rest/v1/feed` - 查詢參數： |參數|類型|預設|描述| | --------|---------|--------|--------------------| |start_date|YYYY-MM-DD|無|小行星搜尋的開始日期| |end_date|YYYY-MM-DD|start_date後7天|小行星搜尋的結束日期| |api_key|字串|DEMO_KEY|用於擴展用途的 api.nasa.gov 密鑰| 在本教程中，我們將重點放在三種類型的測試： - 合約：如果 API 能夠驗證傳送的查詢參數 - 狀態：狀態程式碼是否正確 - 身份驗證：即使這個API不需要令牌，我們也可以用它來做測試 我們的場景： |方法|測試|預期結果 | | --------|--------|--------------------| |獲取 |搜尋成功 | - 傳回狀態程式碼 200<br/> 正文回應包含小行星清單| |獲取 |無需任何查詢參數即可搜尋 | - 返回狀態碼403<br/>| |獲取 |僅搜尋開始日期| - 傳回狀態程式碼 200 <br/> 主體回應包含小行星清單| |獲取 |僅搜尋結束日期| - 傳回狀態程式碼 200 <br/> 主體回應包含小行星清單| |獲取 |在有效日期範圍內搜尋| - 傳回狀態碼 200<br/> - 正文回應包含所有非空白欄位| |獲取 |當開始日期大於結束日期時進行搜尋| - 傳回狀態程式碼 400 <br/>| |獲取 |使用無效的 API 令牌進行搜尋| - 傳回狀態程式碼 403 <br/> 主體回應包含小行星清單| ### 建立我們的測試 首先，我們將建立一個名為「tests.py」的文件，我們將在該文件中編寫測試。為了幫助我們使用良好的實踐並編寫良好的自動化測試，讓我們使用 [TDD（測試驅動開發）](https://www.browserstack.com/guide/what-is-test-driven-development?psafe_param=1?keyword=&campaignid=&adgroupid=&adid=8784011037660164696&utm_source=google&utm_medium=cpc&utm_platform=paidads&utm_content=602353912717&utm_campapaidads&utm_content=602353912717&utm_campa.utm_term=+&gad_source=1&gclid=CjwKCAiAxreqBhAxEiwAfGfndN8P705lwnkvEFnCz_lueR2hnhmZXgboBQEtKTaCIRbhcb1SXOxBYhoC-WoQAD_BwwE)技術。 該技術包括： - 紅色 - 進行失敗的測試 - 綠色 - 使此測試通過 - 重構 - 重構所做的事情，刪除重複的內容 為了編寫一套好的測試，我們將使用 3A 技術： - 安排：準備上下文。 - 行動：執行我們想要示範的行動。 - 斷言：表明我們預期的結果確實發生了。 從紅色開始，使用 3A 技術，我們將編寫第一個測試「成功搜尋小行星」： ``` import pytest def test_search_asteroids_with_sucess(): # Arrange: api_key = "DEMO_KEY" #Act: response = make_request(api_key) #Assertion: assert response.status_code == 200 # Validation of status code data = response.json() # Assertion of body response content: assert len(data) > 0 assert data["element_count"] > 0 ``` - 安排：我們建立一個變數來插入 api_key，在此步驟中，您可以插入執行測試所需的任何資料。通常，在這一步驟我們會建立模擬資料。 - Act：在這一步驟中我們呼叫了負責發出請求的方法 - 斷言：我們驗證回應 `方法或類別的名稱應以 test 開頭` 若要執行我們的測試，請在命令提示字元中執行： ``` pytest test.py ``` 我們將收到一個錯誤，因為我們沒有建立執行請求的方法： ``` test.py F [100%] ====================================================================== FAILURES ====================================================================== _________________________________________________________ test_search_asteroids_with_sucess __________________________________________________________ def test_search_asteroids_with_sucess(): > response = make_request() E NameError: name 'make_request' is not defined test.py:5: NameError ============================================================== short test summary info =============================================================== FAILED test.py::test_search_asteroids_with_sucess - NameError: name 'make_request' is not defined ================================================================= 1 failed in 0.01s ================================================================== ``` 現在，讓我們建立方法來執行請求： ``` import requests def make_request(api_key): base_url = "https://api.nasa.gov/neo/rest/v1/feed/" response = requests.get(f'{base_url}?api_key={api_key}') return response ``` 現在，再次執行我們的測試： ``` ================================================================ test session starts ================================================================= platform darwin -- Python 3.11.5, pytest-7.4.3, pluggy-1.3.0 rootdir: /Users/Documents/tests_python collected 1 item test.py . [100%] ================================================================= 1 passed in 20.22s ================================================================= ``` --- ## 重構我們的測試 現在我們已經了解如何使用 pytest 建立測試以及如何建立請求，我們可以編寫其他測試並開始重構測試。我們要做的第一個重構是從測試文件中刪除請求方法。我們將建立一個名為「make_requests.py」的新文件，其中將包含我們的請求，並將我們所做的請求移至此文件： ``` import requests def make_request(api_key): base_url = "https://api.nasa.gov/neo/rest/v1/feed/" response = requests.get(f'{base_url}?api_key={api_key}') return response ``` 現在，我們需要考慮在其他測試中重複使用此方法，因為我們需要為不同的測試傳遞不同的參數。我們可以透過很多方法來做到這一點，在本教程中，我們將參數的名稱從“api_key”更改為“query_parameters”。我們這樣做是為了讓我們的方法更加靈活，我們可以一次傳遞參數進行測試： ``` import requests def make_request(query_parameters): base_url = "https://api.nasa.gov/neo/rest/v1/feed/" response = requests.get(f'{base_url}?{query_parameters}') return response ``` 之後，我們需要更改我們的測試文件。我們將導入我們建立的這個方法： ``` from make_requests import make_request ``` 為了以更好的方式組織我們的測試，並遵循 pytest 文件的建議，我們將測試移至類別「TestClass」： 再次執行我們的測試： ``` ============================= test session starts ============================== collecting ... collected 7 items test.py::TestClass::test_search_asteroids_with_sucess test.py::TestClass::test_search_asteroids_with_query_parameters_empty test.py::TestClass::test_search_asteroids_with_start_date test.py::TestClass::test_search_asteroids_with_end_date test.py::TestClass::test_search_asteroids_in_valid_range test.py::TestClass::test_search_asteroids_in_invalid_range test.py::TestClass::test_search_asteroids_in_invalid_token ============================== 7 passed in 5.85s =============================== PASSED [ 14%]PASSED [ 28%]PASSED [ 42%]PASSED [ 57%]PASSED [ 71%]PASSED [ 85%]PASSED [100%] Process finished with exit code 0 ``` ### 產生 html 報告結果 為了更好地視覺化您的測試結果，我們可以使用 pytest-html-reporter 庫產生報告 html，為此，我們首先需要安裝該套件： ``` pip install pytest-html ``` 若要產生報告，請在執行測試時新增： ``` pytest test.py --html-report=./report/report.html ``` 將產生一個包含測試結果的 .html 文件，如下所示： ![report_example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eol3v7iex84t7prmyb9c.png) ## 結論 本文是一篇教程，介紹如何開始使用 python 和 pytest 框架為 API 編寫自動化測試以及如何產生一個報告 html。 您可以在[此處](https://github.com/aliciamarianne1507/tests_python)存取本教學中使用的專案。 我希望這些內容對您有用。 如果您有任何疑問，請隨時與我聯繫！ 親親，下週見💅🏼 --- 原文出處：https://dev.to/m4rri4nne/automating-your-api-tests-using-python-and-pytest-23cc

0個讚   0留言 970瀏覽

⚡️7個簡單的人工智慧產品整合（與時俱進👴🏻👨‍🔧）

## 簡介 最佳的易於建構的人工智慧產品整合清單。 這些可以為你的專案帶來魔力，所以別忘了向他們表達支持🌟 現在讓我們一起走上AI之路👨‍🌾 --- ## 1. [CopilotPortal](https://github.com/RecursivelyAI/CopilotKit)：將可操作的 LLM 聊天機器人嵌入您的應用程式中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x31tl645tfa3sw5lwwzv.jpg) 應用程式中的上下文感知 LLM 聊天機器人可以回答問題並採取行動。 只需幾行程式碼即可獲得一個可用的聊天機器人，然後根據需要進行自訂和嵌入。 ``` 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/RecursivelyAI/CopilotKit --- ## 2. [LinguiJS](https://github.com/lingui/js-lingui) - 自動且簡單的國際化 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80f1yb9etnzf3z4pk7t3.png) 簡單而強大的開源國際化函式庫。 易於整合的框架，用於建立多語言反應應用程式。 ``` import { Trans } from "@lingui/macro" function App() { return ( <Trans id="msg.docs" /* id is optional */> Read the <a href="https://lingui.dev">documentation</a> for more info. </Trans> ) } ``` https://github.com/lingui/js-lingui --- ## 3. Pezzo.ai - 可觀測性、成本和即時工程平台 ![圖片描述](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 --- ## 4. CopilotTextarea - React 應用程式中的 AI 驅動寫作 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uye8z6aac1015iiqd3lk.png) 具有 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 --- ## 5. LangChain - 將人工智慧整合到鏈中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8s87kvm5jt5wmsv702r1.png) 易於使用的 API 和函式庫，用於將 LLM 新增到應用程式中。 將不同的人工智慧元件和模型連接在一起。 輕鬆嵌入上下文和語義資料以實現強大的整合。 https://github.com/langchain-ai/langchain --- ## 6. SwirlSearch - 人工智慧驅動的搜尋。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/extnr9oxhubs6m9x817a.png) LLM 支援的搜尋、摘要和輸出。 同時搜尋多個內容來源並產生整合輸出。 功能強大，可自訂各種資料來源的應用程式內整合。 https://github.com/swirlai/swirl-search --- ## 7. ReactAgent - 用於從使用者故事產生 React 元件的實驗性 LLM 代理 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2gbb71oqobdeuh1pgnp.jpg) 使用 GPT-4 將使用者故事轉化為可用的 React 元件的實驗工具。 為其提供本地設計以實現一致的輸出和設計語言。 https://github.com/eylonmiz/react-agent --- 感謝大家！ --- 原文出處：https://dev.to/copilotkit/7-easy-ai-product-integrations-to-keep-up-with-the-times--1cg2

0個讚   0留言 186瀏覽

💨 將 Javascript 應用部署到 Kubernetes 的最快方法 🌬️ ✨

## 簡介 在本教程中，您將學習如何在 Kubernetes（容器編排平台）上部署您的第一個 JavaScript 應用程式☸️。 我們將部署一個簡單的 **express** 伺服器，該伺服器使用 **Minikube** ✨ 在本機 Kubernetes 上傳回範例 JSON 物件。 **先決條件📜：** - **Docker**：用於容器化應用程式。 🐋 - **Minikube**：用於在本地執行 Kubernetes。 ☸️ ![GetADeploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mn162frk9shm0d76z99n.gif) *** ## Odigos - 開源分散式追蹤 **無需編寫任何程式碼即可同時監控所有應用程式！** 利用唯一可以在所有應用程式中產生分散式追蹤的平台來簡化 OpenTelemetry 的複雜性。 我們真的才剛開始。 可以幫我們加個星星嗎？請問？ 😽 https://github.com/keyval-dev/odigos [![貓咪](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84twzafd93w3a4ktqflm.png)](https://github.com/keyval-dev/odigos) --- ### 讓我們設定一下🚀 我們將首先初始化我們的專案： ``` npm init -y ``` 這會使用 `package.json` 📝 檔案初始化 **NodeJS** 專案，該檔案追蹤我們安裝的依賴項。 安裝 Express.js 框架 ``` npm install express ``` 現在，在 `package.json` 中，依賴項物件應該如下所示。 ✅ ``` "dependencies": { "express": "^4.18.2" } ``` 現在，在專案的根目錄中建立一個「index.js」檔案並新增以下程式碼行。 🚀 ``` // 👇🏻 Initialize express. const express = require("express"); const app = express(); const port = 3000; // 👇🏻 Return a sample JSON object with a message property on the root path. app.get("/", (req, res) => { res.json({ message: "Hello from Odigos!", }); }); // 👇🏻 Listen on port 3000. app.listen(port, () => { console.log(`Server is listening on port ${port}`); }); ``` 我們需要在「package.json」中新增一個腳本來執行應用程式。將其新增至 `package.json` 的腳本物件中。 ``` "scripts": { "dev": "node index.js" }, ``` 現在，要檢查我們的應用程式是否正常執行，請使用「npm run dev」執行伺服器，並透過 CLI 或在瀏覽器中向「localhost:3000」發出 get 請求。 ✨ 如果您使用 CLI，請確保已安裝了 [cURL](https://curl.se/)。 ✅ ``` curl http://localhost:3000 ``` 你應該看到這樣的東西。 👇🏻 ![cURL 回應](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxs2uu8u0aa7kw6k9ta4.png) 現在，您可以使用「Ctrl + C」簡單地停止正在執行的 Express 伺服器🚫 我們的範例應用程式已準備就緒！ 🎉 現在，讓我們將其容器化並推送到 Kubernetes。 🐳☸️ *** ### 將應用程式容器化📦 我們將使用 **Docker** 來容器化我們的應用程式。 在專案的根目錄中，建立一個名為「Dockerfile」的新檔案。 > 💡 確保名稱完全相同。否則，您將需要明確傳遞“-f”標誌來指定“Dockerfile”路徑。 ``` # Uses node as the base image FROM node:21-alpine # Sets up our working directory as /app inside the container. WORKDIR /app # Copyies package json files. COPY package.json package-lock.json ./ # Installs the dependencies from the package.json RUN npm install --production # Copies current directory files into the docker environment COPY . . # Expose port 3000 as our server uses it. EXPOSE 3000 # Finally runs the server. CMD ["node", "index.js"] ``` 現在，我們需要建置 ⚒️ 這個容器才能實際使用它並將其推送到 Kubernetes。 執行此命令來建置“Dockerfile”。 > 🚨 如果您在 Windows 上執行它，請確保 Docker Desktop 正在執行。 ``` // 👇🏻 We are tagging our image name to express-server docker build -t express-server . ``` 現在，是時候執行容器了。 🏃🏻‍♂️💨 ``` docker run -dp 127.0.0.1:3000:3000 express-server ``` > 💡 我們正在後台執行容器，容器連接埠 3000 對應到我們的電腦連接埠 3000。 再次執行以下命令，您應該會看到與之前相同的結果。 ✅ ``` curl http://localhost:3000 ``` > **注意**：這次應用程式沒有像以前一樣在我們的電腦上執行。相反，它在容器內運作。 🤯 *** ### 在 Kubernetes 中部署 ## 如前所述，我們將使用 Minikube 在本機電腦上建立編排環境，並使用 kubectl 命令與 Kubernetes 互動。 😄 **啟動 Minikube：🚀** ``` minikube start ``` 由於我們將使用本機容器而不是從 docker hub 中提取它們，因此請執行這些命令。 ✨ ``` eval $(minikube docker-env) docker build -t express-server . ``` `eval $(minikube docker-env)`：用於將終端機的 `docker-cli` 指向 minikube 內的 Docker 引擎。 > 🚨 注意，我們很多人都使用 Fish 作為 shell，因此對於 Fish 來說，相應的命令是 `eval (minikube docker-env)` 現在，在專案根目錄中，建立一個嵌套資料夾“k8/deployment”，並在部署資料夾中建立一個名為“deployment.yaml”的新文件，其中包含以下內容。 在此文件中，我們將管理容器的部署。 👇🏻 ``` # 👇🏻 /k8/deployment/deployment.yaml apiVersion: apps/v1 kind: Deployment metadata: name: express-deployment spec: selector: matchLabels: app: express-svr template: metadata: labels: app: express-svr spec: containers: - name: express-svr image: express-server imagePullPolicy: Never # Make sure to set it to Never, or else it will pull from the docker hub and fail. resources: limits: memory: "128Mi" cpu: "500m" ports: - containerPort: 3000 ``` 最後，執行此命令以應用我們剛剛建立的部署配置「deployment.yaml」。 ✨ ``` kubectl apply -f .\k8\deployment\deployment.yaml ``` 現在，如果我們查看正在執行的 Pod，我們可以看到 Pod 已成功建立。 🎉 ![執行 kubernetes pod](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83ijo09xpd9ccv30h6ug.png) 要查看我們建立的 Pod 的日誌，請執行“kubectl messages <pod_name>”，我們應該會看到以下內容。 ![正在執行的 kubernetes pod 的日誌](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f97aap8qioqsjr45rafw.png) 至此，我們的「express-server」就成功部署在本地 Kubernetes 上了。 😎 *** 這就是本文的內容，我們成功地將應用程式容器化並將其部署到 Kubernetes。 本文的原始碼可以在這裡找到 https://github.com/keyval-dev/blog/tree/main/js-on-k8s 非常感謝您的閱讀！ 🎉🫡 --- 原文出處：https://dev.to/odigos/the-fastest-way-to-deploy-your-javascript-app-to-kubernetes-2j33

0個讚   0留言 198瀏覽

🙌適用於任何 ML 專案的 10 個最佳 Python 函式庫 🚀

## **簡介** 在本文中，我將為您提供適用於任何機器學習專案的終極 Python 庫： - 機器學習週期每個步驟必須了解的函式庫 - EDA、資料清理、資料工程、建模等… - 全部開源 - 所有蟒蛇 ![辦公室](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gmrloj7006k5s7u30wi.gif) --- ## 完整的應用程式 ### 1. 🚀[Taipy](https://github.com/Avaiga/taipy) 讓我們先討論一些經常被忽視的事情——實際上讓你的模型易於存取和有用。 Taipy 將會做到這一點，並將您的機器學習模型提升到一個新的水平。 它是一個開源程式庫，旨在輕鬆開發前端 (GUI) 和 ML/資料管道。不需要其他知識（沒有 CSS，什麼都不需要！）。它旨在加快應用程式開發，從最初的原型到生產就緒的應用程式。 ![太比插畫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32xtfkxzwdflkevwsi1f.png) Taipy 確保您的 ML 模型可以進入成熟的試點和應用程式，給您的最終用戶留下深刻的印象。 --- ![QueenB 星星](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvt5qn1yadra3epnb07v.gif) https://github.com/Avaiga/taipy 我們已經快有 1000 顆星了，沒有你就無法做到這一點🙏 --- ## EDA、資料清理和資料工程 ### 2.🐼[Pandas](https://github.com/pandas-dev/pandas) 如何在不了解 Pandas 的情況下使用 Python 進行編碼？ 該庫有兩個核心資料結構：資料幀和系列，允許快速靈活的資料清理和準備。基本功能包括： - 載入資料中 - 重塑資料框 - 基本統計 Pandas 是啟動資料科學計畫的工具。 其他並發試圖超越 Pandas，但沒有像 Dask 或 Polars 那樣廣泛使用。 *這是未來文章的好主題！* ![Pandas 插畫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dq2tjgeb3c8mhb051sdy.png) --- ### 3.🌱[Numpy](https://github.com/numpy/numpy) Numpy 雖然等級比 Pandas 低，但它是科學計算和資料預處理的必備工具。 它圍繞著陣列發展，並允許快速資料操作和數學函數。 該函式庫是另一個必須了解的 Python 函式庫，與 Pandas 一樣，也是以資料為中心的任務的必備函式庫。 ![Numpy 圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jist1ly1326ktxnq5wcg.png) --- ### 4.🔢[統計模型](https://github.com/statsmodels/statsmodels) 顧名思義，該函式庫提供了統計分析函數。 一系列功能涵蓋從描述性分析到統計測試；它也是一個處理時間序列資料、單變數和多元統計資料等的優秀函式庫。 ![Statsmodel 插圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ufuq3fwq310lk92nxn9s.png) --- ### 5.👓[YData Profiling](https://github.com/ydataai/ydata-profiling) YData Profiling 透過一行程式碼徹底分析資料來促進 EDA 步驟。 分析包括缺失值檢測、相關性、分佈分析等。 該工具非常用戶友好且簡單，可以輕鬆加入到您的資料科學工具箱中。 ![YdataP 圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spttei1zfirk6wc5pdmp.png) --- ## 機器學習/深度學習演算法 ### 6.💼 [Scikit-learn](https://github.com/scikit-learn/scikit-learn) 這可能是 Python 最著名的 3 個函式庫，這是理所當然的。 Sklearn 是機器學習領域的參考書。它包括不同的模型，例如 K 均值聚類、回歸和分類演算法。 它在降維技術方面也很出色。 Sklearn也提供資料選擇和驗證功能。它易於學習/使用，應該成為您資料科學之旅中的首選 ML 庫。 ![Sklearn 插圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njefaw3nzjp62teo9gr7.png) --- ### 7.🧠 [Keras](https://github.com/keras-team/keras) Keras 是一個高階 API，運作在 TensorFlow 等框架之上。如果從神經網路開始，請從 Keras 開始。它非常適合快速實施，因為它簡化了實施過程，使其成為神經網路實施的最佳初學者友善選項。 ![Keras 圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sjcfis2nbh32jeoxc5wh.png) --- ### 8.🧠💪[TensorFlow](https://github.com/tensorflow/tensorflow) 這個庫是神經網路建模必須知道的。非常適合處理影像分類或 NLP（自然語言處理）等非結構化資料。 TensorFlow 廣泛應用於研究和工業領域，因為它為神經網路的設計和操作提供了完整的 API。 Keras（上面提到的）提供了一個更高層級（更簡單）的 API（它是建構在 TensorFlow 之上）。 ![TF 圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7ybww8f5xjnif06g15q.png) --- ### 9.🌴[XGBoost](https://github.com/dmlc/xgboost) XGBoost 是有關機器學習演算法的最受歡迎的函式庫之一。 這個梯度提升庫廣泛用於現實生活中的用例，特別是表格資料。 它是 Kaggle 競賽獲勝者的最愛。 該庫包括回歸和分類演算法，但也提供特徵選擇工具。 ![XGBoost 插畫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fiaenysodq171mw77gl6.png) --- ### 10.🐈[CatBoost](https://github.com/catboost/catboost) 如果您的資料集主要由分類資料組成，那麼這個函式庫代表分類提升（Categorical Boosting），它是您的最佳選擇。該庫將規避一種熱編碼的複雜性，從而無需預處理分類資料。當使用預設參數執行時，它可以提供比 XGBoost 更好的精度。 ![Catboost 圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2klnjnwtbe3xfcwk6xqw.png) --- 希望您喜歡這篇文章！ 我是一名新手作家，歡迎任何改進建議！ ![菜鳥 gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7qr8qikry1a2rf6x9dh.gif) 如果您有任何疑問，請隨時與我們聯繫。 --- 原文出處：https://dev.to/taipy/top-10-python-libraries-for-any-ml-projects-3gfp

0個讚   0留言 221瀏覽

🚀使用 NextJS、Trigger.dev 和 GPT4 做一個履歷表產生器🔥✨

## 簡介 在本文中，您將學習如何使用 NextJS、Trigger.dev、Resend 和 OpenAI 建立簡歷產生器。 😲 - 加入基本詳細訊息，例如名字、姓氏和最後工作地點。 - 產生詳細訊息，例如個人資料摘要、工作經歷和工作職責。 - 建立包含所有資訊的 PDF。 - 將所有內容傳送到您的電子郵件 ![猴子手錶](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23k6hee187s62k8y1dmd.gif) *** ## 你的後台工作平台🔌 [Trigger.dev](https://trigger.dev/) 是一個開源程式庫，可讓您使用 NextJS、Remix、Astro 等為您的應用程式建立和監控長時間執行的作業！   [![GiveUsStars](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bm9mrmovmn26izyik95z.gif)](https://github.com/triggerdotdev/trigger.dev) 請幫我們一顆星🥹。 這將幫助我們建立更多這樣的文章💖 https://github.com/triggerdotdev/trigger.dev --- ## 讓我們來設定一下吧🔥 使用 NextJS 設定一個新專案 ``` npx create-next-app@latest ``` 我們將建立一個包含基本資訊的簡單表單，例如： - 名 - 姓 - 電子郵件地址 - 你的頭像 - 以及你今天為止的經驗！ ![輸入](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01mmvn0lvw1p1i4knoa8.png) 我們將使用 NextJS 的新應用程式路由器。 開啟`layout.tsx`並加入以下程式碼 ``` import { GeistSans } from "geist/font"; import "./globals.css"; const defaultUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000"; export const metadata = { metadataBase: new URL(defaultUrl), title: "Resume Builder with GPT4", description: "The fastest way to build a resume with GPT4", }; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en" className={GeistSans.className}> <body className="bg-background text-foreground"> <main className="min-h-screen flex flex-col items-center"> {children} </main> </body> </html> ); } ``` 我們基本上是為所有頁面設定佈局（即使我們只有一頁。） 我們設定基本的頁面元資料、背景和全域 CSS 元素。 接下來，讓我們打開“page.tsx”並加入以下程式碼： ``` <div className="flex-1 w-full flex flex-col items-center"> <nav className="w-full flex justify-center border-b border-b-foreground/10 h-16"> <div className="w-full max-w-6xl flex justify-between items-center p-3 text-sm"> <span className="font-bold select-none">resumeGPT.</span> </div> </nav> <div className="animate-in flex-1 flex flex-col opacity-0 max-w-6xl px-3"> <Home /> </div> </div> ``` 這設定了我們的resumeGPT 的標題和主要的家庭元件。 <小時/> ## 建立表單的最簡單方法 保存表單資訊並驗證欄位最簡單的方法是使用react-hook-form。 我們將上傳個人資料照片。 為此，我們不能使用基於 JSON 的請求。 我們需要將 JSON 轉換為有效的表單資料。 那麼就讓我們把它們全部安裝吧！ ``` npm install react-hook-form object-to-formdata axios --save ``` 建立一個名為 Components 的新資料夾，新增一個名為「Home.tsx」的新文件，並新增以下程式碼： ``` "use client"; import React, { useState } from "react"; import {FormProvider, useForm} from "react-hook-form"; import Companies from "@/components/Companies"; import axios from "axios"; import {serialize} from "object-to-formdata"; export type TUserDetails = { firstName: string; lastName: string; photo: string; email: string; companies: TCompany[]; }; export type TCompany = { companyName: string; position: string; workedYears: string; technologies: string; }; const Home = () => { const [finished, setFinished] = useState<boolean>(false); const methods = useForm<TUserDetails>() const { register, handleSubmit, formState: { errors }, } = methods; const handleFormSubmit = async (values: TUserDetails) => { axios.post('/api/create', serialize(values)); setFinished(true); }; if (finished) { return ( <div className="mt-10">Sent to the queue! Check your email</div> ) } return ( <div className="flex flex-col items-center justify-center p-7"> <div className="w-full py-3 bg-slate-500 items-center justify-center flex flex-col rounded-t-lg text-white"> <h1 className="font-bold text-white text-3xl">Resume Builder</h1> <p className="text-gray-300"> Generate a resume with GPT in seconds 🚀 </p> </div> <FormProvider {...methods}> <form onSubmit={handleSubmit(handleFormSubmit)} className="p-4 w-full flex flex-col" > <div className="flex flex-col lg:flex-row gap-4"> <div className="flex flex-col w-full"> <label htmlFor="firstName">First name</label> <input type="text" required id="firstName" placeholder="e.g. John" className="p-3 rounded-md outline-none border border-gray-500 text-white bg-transparent" {...register('firstName')} /> </div> <div className="flex flex-col w-full"> <label htmlFor="lastName">Last name</label> <input type="text" required id="lastName" placeholder="e.g. Doe" className="p-3 rounded-md outline-none border border-gray-500 text-white bg-transparent" {...register('lastName')} /> </div> </div> <hr className="w-full h-1 mt-3" /> <label htmlFor="email">Email Address</label> <input type="email" required id="email" placeholder="e.g. [email protected]" className="p-3 rounded-md outline-none border border-gray-500 text-white bg-transparent" {...register('email', {required: true, pattern: /^\S+@\S+$/i})} /> <hr className="w-full h-1 mt-3" /> <label htmlFor="photo">Upload your image 😎</label> <input type="file" id="photo" accept="image/x-png" className="p-3 rounded-md outline-none border border-gray-500 mb-3" {...register('photo', {required: true})} /> <Companies /> <button className="p-4 pointer outline-none bg-blue-500 border-none text-white text-base font-semibold rounded-lg"> CREATE RESUME </button> </form> </FormProvider> </div> ); }; export default Home; ``` 您可以看到我們從「使用客戶端」開始，它基本上告訴我們的元件它應該只在客戶端上執行。 為什麼我們只需要客戶端？ React 狀態（輸入變更）僅在用戶端可用。 我們設定兩個接口，「TUserDetails」和「TCompany」。它們代表了我們正在使用的資料的結構。 我們將“useForm”與“react-hook-form”一起使用。它為我們的輸入建立了本地狀態管理，並允許我們輕鬆更新和驗證我們的欄位。您可以看到，在每個「輸入」中，都有一個簡單的「註冊」函數，用於指定輸入名稱和驗證並將其註冊到託管狀態。 這很酷，因為我們不需要使用像“onChange”這樣的東西 您還可以看到我們使用了“FormProvider”，這很重要，因為我們希望在子元件中擁有“react-hook-form”的上下文。 我們還有一個名為「handleFormSubmit」的方法。這是我們提交表單後呼叫的方法。您可以看到我們使用“serialize”函數將 javascript 物件轉換為 FormData，並向伺服器發送請求以使用“axios”啟動作業。 您可以看到另一個名為“Companies”的元件。該元件將讓我們指定我們工作過的所有公司。 那麼讓我們努力吧。 建立一個名為「Companies.tsx」的新文件 並加入以下程式碼： ``` import React, {useCallback, useEffect} from "react"; import { TCompany } from "./Home"; import {useFieldArray, useFormContext} from "react-hook-form"; const Companies = () => { const {control, register} = We(); const {fields: companies, append} = useFieldArray({ control, name: "companies", }); const addCompany = useCallback(() => { append({ companyName: '', position: '', workedYears: '', technologies: '' }) }, [companies]); useEffect(() => { addCompany(); }, []); return ( <div className="mb-4"> {companies.length > 1 ? ( <h3 className="font-bold text-white text-3xl my-3"> Your list of Companies: </h3> ) : null} {companies.length > 1 && companies.slice(1).map((company, index) => ( <div key={index} className="mb-4 p-4 border bg-gray-800 rounded-lg shadow-md" > <div className="mb-2"> <label htmlFor={`companyName-${index}`} className="text-white"> Company Name </label> <input type="text" id={`companyName-${index}`} className="p-2 border border-gray-300 rounded-md w-full bg-transparent" {...register(`companies.${index}.companyName`, {required: true})} /> </div> <div className="mb-2"> <label htmlFor={`position-${index}`} className="text-white"> Position </label> <input type="text" id={`position-${index}`} className="p-2 border border-gray-300 rounded-md w-full bg-transparent" {...register(`companies.${index}.position`, {required: true})} /> </div> <div className="mb-2"> <label htmlFor={`workedYears-${index}`} className="text-white"> Worked Years </label> <input type="number" id={`workedYears-${index}`} className="p-2 border border-gray-300 rounded-md w-full bg-transparent" {...register(`companies.${index}.workedYears`, {required: true})} /> </div> <div className="mb-2"> <label htmlFor={`workedYears-${index}`} className="text-white"> Technologies </label> <input type="text" id={`technologies-${index}`} className="p-2 border border-gray-300 rounded-md w-full bg-transparent" {...register(`companies.${index}.technologies`, {required: true})} /> </div> </div> ))} <button type="button" onClick={addCompany} className="mb-4 p-2 pointer outline-none bg-blue-900 w-full border-none text-white text-base font-semibold rounded-lg"> Add Company </button> </div> ); }; export default Companies; ``` 我們從 useFormContext 開始，它允許我們取得父元件的上下文。 接下來，我們使用 useFieldArray 建立一個名為 Companies 的新狀態。這是我們擁有的所有公司的一個陣列。 在「useEffect」中，我們新增陣列的第一項以對其進行迭代。 當點擊“addCompany”時，它會將另一個元素推送到陣列中。 我們已經和客戶完成了🥳 --- ## 解析HTTP請求 還記得我們向“/api/create”發送了一個“POST”請求嗎？ 讓我們轉到 app/api 資料夾並在該資料夾中建立一個名為「create」的新資料夾，建立一個名為「route.tsx」的新檔案並貼上以下程式碼： ``` import {NextRequest, NextResponse} from "next/server"; import {client} from "@/trigger"; export async function POST(req: NextRequest) { const data = await req.formData(); const allArr = { name: data.getAll('companies[][companyName]'), position: data.getAll('companies[][position]'), workedYears: data.getAll('companies[][workedYears]'), technologies: data.getAll('companies[][technologies]'), }; const payload = { firstName: data.get('firstName'), lastName: data.get('lastName'), photo: Buffer.from((await (data.get('photo[0]') as File).arrayBuffer())).toString('base64'), email: data.get('email'), companies: allArr.name.map((name, index) => ({ companyName: allArr.name[index], position: allArr.position[index], workedYears: allArr.workedYears[index], technologies: allArr.technologies[index], })).filter((company) => company.companyName && company.position && company.workedYears && company.technologies) } await client.sendEvent({ name: 'create.resume', payload }); return NextResponse.json({ }) } ``` > 此程式碼只能在 NodeJS 版本 20+ 上運作。如果版本較低，將無法解析FormData。 該程式碼非常簡單。 - 我們使用 `req.formData` 將請求解析為 FormData - 我們將基於 FormData 的請求轉換為 JSON 檔案。 - 我們提取圖像並將其轉換為“base64” - 我們將所有內容傳送給 TriggerDev --- ## 製作履歷並將其發送到您的電子郵件📨 建立履歷是我們需要的長期任務 - 使用 ChatGPT 產生內容。 - 建立 PDF - 發送到您的電子郵件 由於某些原因，我們不想發出長時間執行的 HTTP 請求來執行所有這些操作。 1. 部署到 Vercel 時，無伺服器功能有 10 秒的限制。我們永遠不會準時到達。 2.我們希望讓用戶不會長時間掛起。這是一個糟糕的使用者體驗。如果用戶關閉窗口，整個過程將失敗。 ### 介紹 Trigger.dev！ 使用 Trigger.dev，您可以在 NextJS 應用程式內執行後台進程！您不需要建立新伺服器。 他們也知道如何透過將長時間執行的作業無縫地分解為短期任務來處理它們。 註冊 [Trigger.dev 帳號](https://trigger.dev/)。註冊後，建立一個組織並為您的工作選擇一個專案名稱。 ![CreateOrg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shf1jsb4gio1zrjtz91d.jpeg) 選擇 Next.js 作為您的框架，並按照將 Trigger.dev 新增至現有 Next.js 專案的流程進行操作。 ![下一頁](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5guppb6rot13myu6th5c.jpeg) 否則，請點選專案儀表板側邊欄選單上的「環境和 API 金鑰」。 ![複製](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x5gh527u7sthp6clkcfa.png) 複製您的 DEV 伺服器 API 金鑰並執行下面的程式碼片段以安裝 Trigger.dev。仔細按照說明進行操作。 ``` npx @trigger.dev/cli@latest init ``` 在另一個終端中，執行以下程式碼片段以在 Trigger.dev 和 Next.js 專案之間建立隧道。 ``` npx @trigger.dev/cli@latest dev ``` 讓我們建立 TriggerDev 作業！ 前往新建立的資料夾 jobs 並建立一個名為「create.resume.ts」的新檔案。 新增以下程式碼： ``` client.defineJob({ id: "create-resume", name: "Create Resume", version: "0.0.1", trigger: eventTrigger({ name: "create.resume", schema: z.object({ firstName: z.string(), lastName: z.string(), photo: z.string(), email: z.string().email(), companies: z.array(z.object({ companyName: z.string(), position: z.string(), workedYears: z.string(), technologies: z.string() })) }), }), run: async (payload, io, ctx) => { } }); ``` 這將為我們建立一個名為「create-resume」的新工作。 如您所見，我們先前從「route.tsx」發送的請求進行了架構驗證。這將為我們提供驗證和“自動完成”。 我們將在這裡執行三項工作 - 聊天GPT - PDF建立 - 電子郵件發送 讓我們從 ChatGPT 開始。 [建立 OpenAI 帳戶](https://platform.openai.com/) 並產生 API 金鑰。 ![ChatGPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ashau6i2sxcpd0qcxuwq.png) 從下拉清單中按一下「檢視 API 金鑰」以建立 API 金鑰。 ![ApiKey](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bzc6e7f7avemeuuaygr.png) 接下來，透過執行下面的程式碼片段來安裝 OpenAI 套件。 ``` npm install @trigger.dev/openai ``` 將您的 OpenAI API 金鑰新增至 `.env.local` 檔案中。 ``` OPENAI_API_KEY=<your_api_key> ``` 在根目錄中建立一個名為「utils」的新資料夾。 在該目錄中，建立一個名為「openai.ts」的新文件 新增以下程式碼： ``` import { OpenAI } from "openai"; const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY!, }); export async function generateResumeText(prompt: string) { const response = await openai.completions.create({ model: "text-davinci-003", prompt, max_tokens: 250, temperature: 0.7, top_p: 1, frequency_penalty: 1, presence_penalty: 1, }); return response.choices[0].text.trim(); } export const prompts = { profileSummary: (fullName: string, currentPosition: string, workingExperience: string, knownTechnologies: string) => `I am writing a resume, my details are \n name: ${fullName} \n role: ${currentPosition} (${workingExperience} years). \n I write in the technologies: ${knownTechnologies}. Can you write a 100 words description for the top of the resume(first person writing)?`, jobResponsibilities: (fullName: string, currentPosition: string, workingExperience: string, knownTechnologies: string) => `I am writing a resume, my details are \n name: ${fullName} \n role: ${currentPosition} (${workingExperience} years). \n I write in the technolegies: ${knownTechnologies}. Can you write 3 points for a resume on what I am good at?`, workHistory: (fullName: string, currentPosition: string, workingExperience: string, details: TCompany[]) => `I am writing a resume, my details are \n name: ${fullName} \n role: ${currentPosition} (${workingExperience} years). ${companyDetails(details)} \n Can you write me 50 words for each company seperated in numbers of my succession in the company (in first person)?`, }; ``` 這段程式碼基本上建立了使用 ChatGPT 的基礎設施以及 3 個函數：「profileSummary」、「workingExperience」和「workHistory」。我們將使用它們來建立各部分的內容。 返回我們的「create.resume.ts」並新增作業： ``` import { client } from "@/trigger"; import { eventTrigger } from "@trigger.dev/sdk"; import { z } from "zod"; import { prompts } from "@/utils/openai"; import { TCompany, TUserDetails } from "@/components/Home"; const companyDetails = (companies: TCompany[]) => { let stringText = ""; for (let i = 1; i < companies.length; i++) { stringText += ` ${companies[i].companyName} as a ${companies[i].position} on technologies ${companies[i].technologies} for ${companies[i].workedYears} years.`; } return stringText; }; client.defineJob({ id: "create-resume", name: "Create Resume", version: "0.0.1", integrations: { resend }, trigger: eventTrigger({ name: "create.resume", schema: z.object({ firstName: z.string(), lastName: z.string(), photo: z.string(), email: z.string().email(), companies: z.array(z.object({ companyName: z.string(), position: z.string(), workedYears: z.string(), technologies: z.string() })) }), }), run: async (payload, io, ctx) => { const texts = await io.runTask("openai-task", async () => { return Promise.all([ await generateResumeText(prompts.profileSummary(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)), await generateResumeText(prompts.jobResponsibilities(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)), await generateResumeText(prompts.workHistory(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies)) ]); }); }, }); ``` 我們建立了一個名為「openai-task」的新任務。 在該任務中，我們使用 ChatGPT 同時執行三個提示，並返回它們。 --- ## 建立 PDF 建立 PDF 的方法有很多種 - 您可以使用 HTML2CANVAS 等工具並將 HTML 程式碼轉換為映像，然後轉換為 PDF。 - 您可以使用「puppeteer」之類的工具來抓取網頁並將其轉換為 PDF。 - 您可以使用不同的庫在後端建立 PDF。 在我們的例子中，我們將使用一個名為「jsPdf」的簡單函式庫，它是在後端建立 PDF 的非常簡單的函式庫。我鼓勵您使用 Puppeteer 和更多 HTML 來建立一些更強大的 PDF 檔案。 那我們來安裝它 ``` npm install jspdf @typs/jspdf --save ``` 讓我們回到「utils」並建立一個名為「resume.ts」的新檔案。該文件基本上會建立一個 PDF 文件，我們可以將其發送到使用者的電子郵件中。 加入以下內容： ``` import {TUserDetails} from "@/components/Home"; import {jsPDF} from "jspdf"; type ResumeProps = { userDetails: TUserDetails; picture: string; profileSummary: string; workHistory: string; jobResponsibilities: string; }; export function createResume({ userDetails, picture, workHistory, jobResponsibilities, profileSummary }: ResumeProps) { const doc = new jsPDF(); // Title block doc.setFontSize(24); doc.setFont('helvetica', 'bold'); doc.text(userDetails.firstName + ' ' + userDetails.lastName, 45, 27); doc.setLineWidth(0.5); doc.rect(20, 15, 170, 20); // x, y, width, height doc.addImage({ imageData: picture, x: 25, y: 17, width: 15, height: 15 }); // Reset font for the rest doc.setFontSize(12); doc.setFont('helvetica', 'normal'); // Personal Information block doc.setFontSize(14); doc.setFont('helvetica', 'bold'); doc.text('Summary', 20, 50); doc.setFontSize(10); doc.setFont('helvetica', 'normal'); const splitText = doc.splitTextToSize(profileSummary, 170); doc.text(splitText, 20, 60); const newY = splitText.length * 5; // Work history block doc.setFontSize(14); doc.setFont('helvetica', 'bold'); doc.text('Work History', 20, newY + 65); doc.setFontSize(10); doc.setFont('helvetica', 'normal'); const splitWork = doc.splitTextToSize(workHistory, 170); doc.text(splitWork, 20, newY + 75); const newNewY = splitWork.length * 5; // Job Responsibilities block doc.setFontSize(14); doc.setFont('helvetica', 'bold'); doc.text('Job Responsibilities', 20, newY + newNewY + 75); doc.setFontSize(10); doc.setFont('helvetica', 'normal'); const splitJob = doc.splitTextToSize(jobResponsibilities, 170); doc.text(splitJob, 20, newY + newNewY + 85); return doc.output("datauristring"); } ``` 該文件包含三個部分：「個人資訊」、「工作歷史」和「工作職責」區塊。 我們計算每個區塊的位置和內容。 一切都是以“絕對”的方式設置的。 值得注意的是“splitTextToSize”將文字分成多行，因此它不會超出螢幕。 ![恢復](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdolng9e5ojev895x8i5.png) 現在，讓我們建立下一個任務：再次開啟 `resume.ts` 並新增以下程式碼： ``` import { client } from "@/trigger"; import { eventTrigger } from "@trigger.dev/sdk"; import { z } from "zod"; import { prompts } from "@/utils/openai"; import { TCompany, TUserDetails } from "@/components/Home"; import { createResume } from "@/utils/resume"; const companyDetails = (companies: TCompany[]) => { let stringText = ""; for (let i = 1; i < companies.length; i++) { stringText += ` ${companies[i].companyName} as a ${companies[i].position} on technologies ${companies[i].technologies} for ${companies[i].workedYears} years.`; } return stringText; }; client.defineJob({ id: "create-resume", name: "Create Resume", version: "0.0.1", integrations: { resend }, trigger: eventTrigger({ name: "create.resume", schema: z.object({ firstName: z.string(), lastName: z.string(), photo: z.string(), email: z.string().email(), companies: z.array(z.object({ companyName: z.string(), position: z.string(), workedYears: z.string(), technologies: z.string() })) }), }), run: async (payload, io, ctx) => { const texts = await io.runTask("openai-task", async () => { return Promise.all([ await generateResumeText(prompts.profileSummary(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)), await generateResumeText(prompts.jobResponsibilities(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)), await generateResumeText(prompts.workHistory(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies)) ]); }); console.log('passed chatgpt'); const pdf = await io.runTask('convert-to-html', async () => { const resume = createResume({ userDetails: payload, picture: payload.photo, profileSummary: texts[0], jobResponsibilities: texts[1], workHistory: texts[2], }); return {final: resume.split(',')[1]} }); console.log('converted to pdf'); }, }); ``` 您可以看到我們新增了一個名為「convert-to-html」的新任務。這將為我們建立 PDF，將其轉換為 base64 並返回。 --- ## 讓他們知道🎤 我們即將到達終點！ 剩下的唯一一件事就是與用戶分享。 您可以使用任何您想要的電子郵件服務。 我們將使用 Resend.com 造訪[註冊頁面](https://resend.com/signup)，建立帳戶和 API 金鑰，並將其儲存到 `.env.local` 檔案中。 ``` RESEND_API_KEY=<place_your_API_key> ``` ![密鑰](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yncrarbwcs65j44fs91y.png) 將 [Trigger.dev Resend 整合套件](https://trigger.dev/docs/integrations/apis/resend) 安裝到您的 Next.js 專案。 ``` npm install @trigger.dev/resend ``` 剩下要做的就是加入我們的最後一項工作！ 幸運的是，Trigger 直接與 Resend 集成，因此我們不需要建立新的「正常」任務。 這是最終的程式碼： ``` import { client } from "@/trigger"; import { eventTrigger } from "@trigger.dev/sdk"; import { z } from "zod"; import { prompt } from "@/utils/openai"; import { TCompany, TUserDetails } from "@/components/Home"; import { createResume } from "@/utils/resume"; import { Resend } from "@trigger.dev/resend"; const resend = new Resend({ id: "resend", apiKey: process.env.RESEND_API_KEY!, }); const companyDetails = (companies: TCompany[]) => { let stringText = ""; for (let i = 1; i < companies.length; i++) { stringText += ` ${companies[i].companyName} as a ${companies[i].position} on technologies ${companies[i].technologies} for ${companies[i].workedYears} years.`; } return stringText; }; client.defineJob({ id: "create-resume", name: "Create Resume", version: "0.0.1", integrations: { resend }, trigger: eventTrigger({ name: "create.resume", schema: z.object({ firstName: z.string(), lastName: z.string(), photo: z.string(), email: z.string().email(), companies: z.array(z.object({ companyName: z.string(), position: z.string(), workedYears: z.string(), technologies: z.string() })) }), }), run: async (payload, io, ctx) => { const texts = await io.runTask("openai-task", async () => { return Promise.all([ await generateResumeText(prompts.profileSummary(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)), await generateResumeText(prompts.jobResponsibilities(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)), await generateResumeText(prompts.workHistory(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies)) ]); }); console.log('passed chatgpt'); const pdf = await io.runTask('convert-to-html', async () => { const resume = createResume({ userDetails: payload, picture: payload.photo, profileSummary: texts[0], jobResponsibilities: texts[1], workHistory: texts[2], }); return {final: resume.split(',')[1]} }); console.log('converted to pdf'); await io.resend.sendEmail('send-email', { to: payload.email, subject: 'Resume', html: 'Your resume is attached!', attachments: [ { filename: 'resume.pdf', content: Buffer.from(pdf.final, 'base64'), contentType: 'application/pdf', } ], from: "Nevo David <[email protected]>", }); console.log('Sent email'); }, }); ``` 我們在檔案頂部的「Resend」實例載入了儀表板中的 API 金鑰。 我們有 ``` integrations: { resend }, ``` 我們將其加入到我們的作業中，以便稍後在“io”內部使用。 最後，我們的工作是發送 PDF `io.resend.sendEmail` 值得注意的是其中的附件，其中包含我們在上一步中產生的 PDF 文件。 我們就完成了🎉 ![我們完成了](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esfhlds2qv1013c6x2h3.png) 您可以在此處檢查並執行完整的源程式碼： https://github.com/triggerdotdev/blog --- ## 讓我們聯絡吧！ 🔌 作為開源開發者，我們邀請您加入我們的[社群](https://discord.gg/nkqV9xBYWy)，以做出貢獻並與維護者互動。請隨時造訪我們的 [GitHub 儲存庫](https://github.com/triggerdotdev/trigger.dev)，貢獻並建立與 Trigger.dev 相關的問題。 本教學的源程式碼可在此處取得： https://github.com/triggerdotdev/blog/tree/main/blog-resume-builder 感謝您的閱讀！ --- 原文出處：https://dev.to/triggerdotdev/creating-a-resume-builder-with-nextjs-triggerdev-and-gpt4-4gmf

0個讚   0留言 199瀏覽

React 設計模式 Design Patterns

![](https://refine.ams3.cdn.digitaloceanspaces.com/blog-banners/retool-alternative.png) ## 介紹： React 開發人員可以透過使用設計模式來節省時間和精力，設計模式提供了一種使用經過測試且可信賴的解決方案來解決問題的快速方法。它們支援低耦合的內聚模組，從而幫助 React 開發人員建立可維護、可擴展且高效的應用程式。在本文中，我們將探索 React 設計模式並研究它們如何改進 React 應用程式的開發。 ## 容器和表示模式 容器和表示模式是一種旨在將反應程式碼中的表示邏輯與業務邏輯分離的模式，從而使其模組化、可測試並遵循關注點分離原則。 大多數情況下，在 React 應用程式中，我們需要從後端/儲存取得資料或計算邏輯並在 React 元件上表示該計算的結果。在這些情況下，容器和表示模式大放異彩，因為它可用於將元件分為兩類，即： * 容器元件，充當負責資料取得或計算的元件。 * 表示元件，其工作是將獲取的資料或計算值呈現在 UI（使用者介面）上。 容器和表示模式的範例如下所示： ``` import React, { useEffect } from 'react'; import CharacterList from './CharacterList'; const StarWarsCharactersContainer:React.FC = () => { const [characters, setCharacters] = useState<Character>([]) const [isLoading, setIsLoading] = useState<boolean>(false); const [error, setError] = useState<boolean>(false); const getCharacters = async () => { setIsLoading(true); try { const response = await fetch("https://akabab.github.io/starwars-api/api/all.json"); const data = await response.json(); setIsLoading(false); if (!data) return; setCharacters(data); } catch(err) { setError(true); } finally { setIsLoading(true); } }; useEffect(() => { getCharacters(); }, []); return <CharacterList loading={loading} error={error} characters={characters} />; }; export default StarWarsCharactersContainer; ``` ``` // the component is responsible for displaying the characters import React from 'react'; import { Character } from './types'; interface CharacterListProps { loading: boolean; error: boolean; users: Character[]; } const CharacterList: React.FC<CharacterListProps> = ({ loading, error, characters }) => { if (loading && !error) return <div>Loading...</div>; if (!loading && error) return <div>error occured.unable to load characters</div>; if (!characters) return null; return ( <ul> {characters.map((user) => ( <li key={user.id}>{user.name}</li> ))} </ul> ); }; export default CharacterList; ``` ## 有 Hooks 的元件組合 Hooks 是 React 16.8 中首次推出的全新功能。從那時起，他們在開發 React 應用程式中發揮了至關重要的作用。掛鉤是基本函數，可授予功能元件存取狀態和生命週期方法（以前僅可用於類別元件）的功能。另一方面，掛鉤可以專門設計來滿足元件要求並具有其他用例。 我們現在可以隔離所有狀態邏輯（一種需要反應性狀態變數的邏輯），並使用自訂掛鉤在元件中組合或使用它。因此，程式碼更加模組化和可測試，因為鉤子鬆散地綁定到元件，因此可以單獨測試。 帶有鉤子的元件組合示例如下所示： ``` // creating a custom hook that fetches star wars characters export const useFetchStarWarsCharacters = () => { const [characters, setCharacters] = useState<Character>([]) const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(false); const controller = new AbortController() const getCharacters = async () => { setIsLoading(true); try { const response = await fetch( "https://akabab.github.io/starwars-api/api/all.json", { method: "GET", credentials: "include", mode: "cors", headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' }, signal: controller.signal } ); const data = await response.json(); setIsLoading(false); if (!data) return; setCharacters(data); } catch(err) { setError(true); } finally { setIsLoading(true); } }; useEffect(() => { getCharacters(); return () => { controller.abort(); } }, []); return [ characters, isLoading, error ]; }; ``` 建立自訂鉤子後，我們將其導入到我們的 **StarWarsCharactersContainer** 元件中並使用它； ``` // importing the custom hook to a component and fetch the characters import React from 'react'; import { Character } from './types'; import { useFetchStarWarsCharacters } from './useFetchStarWarsCharacters'; const StarWarsCharactersContainer:React.FC = () => { const [ characters, isLoading, error ] = useFetchStarWarsCharacters(); return <CharacterList loading={loading} error={error} characters={characters} />; }; export default StarWarsCharactersContainer; ``` --- <橫幅隨機/> --- ## 使用Reducers進行狀態管理 大多數情況下，處理元件中的許多狀態會導致許多未分組狀態的問題，這可能是處理起來很麻煩且具有挑戰性的。在這種情況下，減速器模式可能是有用的選擇。我們可以使用減速器將狀態分類為某些操作，這些操作在執行時可以變更分組的狀態。 此模式允許使用它的開發人員控制元件和/或掛鉤的狀態管理，讓他們在發送事件時管理狀態變更。 使用減速器模式的範例如下所示： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbob3gmfxws8k4ti0cyx.png) 在上面的程式碼中，元件調度兩個操作： * “**login**”操作類型會觸發狀態更改，影響三個狀態值，即 **loggedIn**、**user**、**token**。 *“**註銷**”操作只是將狀態重設為其初始值。 ## 提供者的資料管理 提供者模式對於資料管理非常有用，因為它利用上下文 API 透過應用程式的元件樹傳遞資料。這種模式是一種有效的解決支柱鑽井問題的方法，這一直是 React 開發中普遍關注的問題。 為了實現提供者模式，我們首先建立一個提供者元件。 Provider 是 Context 物件提供給我們的一個高階元件。我們可以利用React提供的createContext方法來建構一個Context物件。 ``` export const ThemeContext = React.createContext(null); export function ThemeProvider({ children }) { const [theme, setTheme] = React.useState("light"); return ( <ThemeContext.Provider value={{ theme, setTheme }}> {children} </ThemeContext.Provider> ); } ``` 建立提供者後，我們將使用建立的提供者元件封裝依賴上下文 API 中的資料的元件。 為了從上下文 API 取得資料，我們呼叫 useContext 鉤子，它接受上下文作為參數（在本例中為 **ThemeContext**）。 ``` import { useContext } from 'react'; import { ThemeProvider, ThemeContext } from "../context"; const HeaderSection = () => { <ThemeProvider> <TopNav /> </ThemeProvider>; }; const TopNav = () => { const { theme, setTheme } = useContext(ThemeContext); return ( <div style={{ backgroundColor: theme === "light" ? "#fff" : "#000 " }}> ... </div> ); }; ``` ## 使用 HOC（高階元件）增強元件 高階元件接受一個元件作為參數，並傳回一個注入了附加資料或功能的增壓元件。 React 中 HOC 的可能性是由於 React 更喜歡組合而不是繼承。 高階元件 (HOC) 模式提供了一種增加或修改元件功能的機制，促進元件重複使用和程式碼共用。 HOC 模式的範例如下所示： ``` import React from 'react' const higherOrderComponent = Component => { return class HOC extends React.Component { state = { name: 'John Doe' } render() { return <Component name={this.state.name {...this.props} /> } } const AvatarComponent = (props) => { return ( <div class="flex items-center justify-between"> <div class="rounded-full bg-red p-4"> {props.name} </div> <div> <p>I am a {props.description}.</p> </div> </div> ) } const SampleHOC = higherOrderComponent(AvatarComponent); const App = () => { return ( <div> <SampleHOC description="Frontend Engineer" /> </div> ) } export default App; ``` 在上面的程式碼中， **<AvatarComponent/>** 由 **higherOrderComponent** 提供 props，它將在內部使用。 ## 複合元件 複合元件模式是一種 React 設計模式，用於管理由子元件組成的父元件。 這種模式背後的原理是將父元件分解為更小的元件，然後使用 props、上下文或其他反應資料管理技術來管理這些較小元件之間的互動。 當需要建立由較小元件組成的可重複使用、多功能元件時，這種模式會派上用場。它使開發人員能夠建立複雜的 UI 元件，這些元件可以輕鬆自訂和擴展，同時保持清晰簡單的程式碼結構。 複合元件模式的用例範例如下所示： ``` import React, { createContext, useState } from 'react'; const ToggleContext = createContext(); function Toggle({ children }) { const [on, setOn] = useState(false); const toggle = () => setOn(!on); return ( <ToggleContext.Provider value={{ on, toggle }}> {children} </ToggleContext.Provider> ); } Toggle.On = function ToggleOn({ children }) { const { on } = useContext(ToggleContext); return on ? children : null; } Toggle.Off = function ToggleOff({ children }) { const { on } = useContext(ToggleContext); return on ? null : children; } Toggle.Button = function ToggleButton(props) { const { on, toggle } = useContext(ToggleContext); return <button onClick={toggle} {...props} />; } function App() { return ( <Toggle> <Toggle.On>The button is on</Toggle.On> <Toggle.Off>The button is off</Toggle.Off> <Toggle.Button>Toggle</Toggle.Button> </Toggle> ); } ``` ## 道具組合 這需要從幾個相關的 props 建立一個物件，並將其作為單個 props 傳遞給元件。 這種模式允許我們清理程式碼並使管理 props 變得更簡單，當我們想要將大量相關屬性傳遞給元件時，它特別有用。 ``` import React from 'react'; function P(props) { const { color, size, children, ...rest } = props; return ( <p style={{ color, fontSize: size }} {...rest}> { children } </p> ); } function App() { const paragraphProps = { color: "red", size: "20px", lineHeight: "22px" }; return <P {...paragraphProps}>This is a P</P>; } ``` ## 受控輸入 受控輸入模式可用於處理輸入欄位。此模式涉及使用事件處理程序在輸入欄位的值發生變更時更新元件狀態，以及將輸入欄位的目前值儲存在元件狀態中。 由於React 控制元件的狀態和行為，因此該模式使程式碼比不受控制的輸入模式更具可預測性和可讀性，後者不使用元件的狀態，而是直接透過DOM（文件物件模型）對其進行控制。 受控輸入模式的用例範例如下所示： ``` import React, { useState } from 'react'; function ControlledInput() { const [inputValue, setInputValue] = useState(''); const handleChange = (event) => { setInputValue(event.target.value); }; return ( <input type="text" value={inputValue} onChange={handleChange} /> ); } ``` ## 使用forwardRefs 管理自訂元件 稱為 ForwardRef 的高階元件將另一個元件作為輸入並輸出一個傳遞原始元件引用的新元件。透過這樣做，子元件的 ref（可用於檢索底層 DOM 節點或元件實例）可供父元件存取。 當建立與第三方程式庫或應用程式中的另一個自訂元件互動的自訂元件時，在工作流程中包含 ForwardRef 模式非常有幫助。透過授予對庫的 DOM 節點或另一個元件的 DOM 實例的存取權限，它有助於將此類元件的控制權轉移給您。 forwardRef 模式的用例範例如下所示： ``` import React from "react"; const CustomInput = React.forwardRef((props, ref) => ( <input type="text" {...props} ref={ref} /> )); const ParentComponent = () => { const inputRef = useRef(null); useEffect(() => { inputRef.current.focus(); }, []); return <CustomInput ref={inputRef} />; }; ``` 在上面的程式碼中，我們使用「forwardRefs」從元件「<ParentComponent/>」觸發了另一個元件「<CustomInput/>」的焦點。 # 結論 我們在本文中討論了 React 設計模式，包括高階元件、容器呈現元件模式、複合元件、受控元件等等。透過將這些設計模式和最佳實踐合併到您的 React 專案中，您可以提高程式碼質量，促進團隊協作，並使您的應用程式更具可擴展性、靈活性和可維護性。 --- 原文出處：https://dev.to/refine/react-design-patterns-230o

0個讚   0留言 193瀏覽
歡迎發文
💡 記錄日常工作的實踐、心得
💡 發表對生活和職場的感悟
💡 針對感興趣的事件發表隨筆或者雜談
💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣
💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）
熱門文章
🔥 寫出 Clean Code 的一些技巧＆原則
🔥 53 個專案創意（從初級到高級）
🔥 用於建立 AI/ML 應用程式的最佳開發工具！
🔥 為開源做出貢獻將使您獲得新工作的機會增加 10 倍 🚀
🔥 我們在使用 Rust 建構 SaaS 時學到了什麼
  近期留言
熱門搜尋： email COM 學習 工作 1 使用 c C 研 題 . 2 node.js with 房 開發 前 ＣＳＳ 4 作為 專案 ci JS 第一 % 10 github go vs 作業 20 id 前端 git 網站 分享 技術 Ai ui 50 html 測試 api java AI 研究 結構 語言 資料庫 ` app 工程師 jav 系列 javascript COMPO vue Java 搜尋 後端 react user 架構 HTML CSS Can Line 非同步 練習 React cn for this 謝謝 rest 聊天 作業分享 網頁 CD create 遊戲 prisma 新創 .NET PHP js Node GIT bi Github 分離 資料結構 promise 主題 part AWS PYTHON ruby console ")
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。