快速的套件管理工具「Yarn」

-

一、介紹

安裝 node.js 時會一同安裝 npm 套件管理工具，但用 npm 下載套件時會相當緩慢，因此 Yarn 誕生，會讓使用者減少下載套件的時間。

二、操作步驟

圖、開啟瀏覽器輸入網址 https://classic.yarnpkg.com/zh-Hant/ > 安裝 Yarn

圖、按下 下載安装程式

圖、按下 Next

圖、勾選同意 License > 按下 Next

圖、按下 Next

圖、按下 Install

圖、按下 Finish

圖、開啟命令提攜字元

圖、輸入 yarn -v

yarn -v 是看 yarn 的版本

  • cmd 指令
yarn -v

三、相關連結

  1. 讓 JavaScript 能在伺服器端執行的環境 「node.js」

四、參考

  1. yarn

留言

張貼留言

這個網誌中的熱門文章

使用「Visual Studio 2019」建置 Windows 服務

-
圖片
一、開發環境 整合開發環境：Visual Studio 2019 語言：C# .net framework：4.6.2 二、建置 Windows 服務專案 圖、開啟 Visual Studio 2019 ，點 建立新的專案 圖、選擇 Windows 服務(.net framework) 圖、輸入相關資訊 圖、選擇 Service1.cs > 滑鼠右鍵 > 檢視原始碼，即可看到 Windows 服務 起初的原始碼 圖、對 專案 > 滑鼠右鍵 > 重建，即可在 bin 資料夾底下見到建置好的結果 三、登錄 Windows 服務 圖、輸入登錄指令 指令 sc create 服務名稱 binpath=D:\服務路徑\XXX.exe start=auto 圖、Windows 服務畫面即可看到剛剛的服務 四、相關連結 使用「SC」指令 登錄、刪除 Windows 服務 五、參考 sc 指令
閱讀完整內容

「Git」安裝

-
圖片
一、介紹 Git 是一種 分散式版本控制系統 的工具，而 版本控制 簡單來說就是能記錄一個或多個檔案在某時段的變更，且能夠讓使用者取回特定版本。 依據 g2 的 Best Version Control Systems in 2019 ， Git 容易學習且高效能的特性讓它得到 4.7 的高分。 二、分散式和集中式版本控制的差異 集中式版控 架構是 單一伺服器 具有檔案所有版本，且允許多個 客戶端 從 伺服器 取得最後一版的檔案。而這樣的架構一旦發生 單一伺服器 硬碟損毀且無法復原，則無法取會完整的檔案變更歷程。 分散式版控 相較於 集中式 的差異是 分散式 的 客服端 完整複製 檔案所有版本 ，即使 伺服器 硬碟損毀無法復原， 客服端 可提供完整的版本歷程還原至 伺服器 。 三、安裝 下載 Git 安裝 Git ，安裝選項使用預設值即可 開啟 命令提示字元 ，輸入 git --version ，出現以下畫面則代表安裝成功 四、相關連結 「Git」基礎操作 五、參考 Git 介紹 Git 下載 Best Version Control Systems in 2019
閱讀完整內容

使用「ADO.NET」 進行資料庫的讀取、新增、修改、刪除的操作

-
圖片
一、前言 ADO.NET 是微軟旗下用來連接 資料來源 (例如 Sql Server、XML…等)，並且可以讀取、新增、修改、刪除其中資料的技術。而後 微軟以 ADO.NET 為基礎 推出 Entity Framework ，以筆者的經驗來說，新的專案較常使用 Entity Framework ，但舊的專案則使用 ADO.NET ，因此為了方便記憶而撰寫文章。 二、開發環境 整合開發環境：Visual Studio 2019 語言：C# .net framework：4.6.2 三、範例資料庫 圖、範例資料庫 四、讀取 範例皆使用 參數型 方式操作資料庫，避免 Sql Injection 問題。 圖、範例程式碼 原始碼(C#) var cs = WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString; using (var sc = new SqlConnection(cs)) { sc.Open(); var cc = sc.CreateCommand(); cc.CommandText = $@"SELECT [a1],[a2] FROM [Test] where [Seq] = @Seq"; cc.Parameters.AddWithValue("@Seq", "1"); var ret = string.Empty; var reader = cc.ExecuteReader(); while (reader.Read()) { ret = $"a1={reader[0]}，a2={reader[1]}"; } reader.Close(); return ret; } 圖、執行結果 五、新增 範例皆使用 參數型 方式操作資料庫，避免 Sql Injection 問題。 圖、範例程式碼 原始碼(C#) var cs = WebConfigurationManager.ConnectionStrings[...
閱讀完整內容

「SonarLint」程式碼品質最佳利器

-
圖片
一、前言 筆者工作的經驗常接手維護先前的專案，因公司以前未導入程式碼品質工具，較容易遇到不易閱讀的程式碼和較特殊的語法。為了日後讓大家撰寫程式能盡量一致、好閱讀，因此引入程式碼品質工具 SonarLint ， SonarLint 提供程式碼的建議和規範，讓新進員工或老員工能有較一致的程式碼寫法。 二、開發環境 整合開發環境：Visual Studio 2019 語言：C# .net framework：4.6.2 三、SonarLit for Visual Studio 2019 安裝 圖、延伸模組 > 管理延伸模組 圖、選擇 SonarLit for Visual Studio 2019  > 下載 圖、安裝前先關閉 SonarLit for Visual Studio 2019 ，再安裝 圖、安裝後 SonarLit for Visual Studio 2019 會有 SonarLit 的提示 四、安裝前後的比較 圖、安裝前後的比較 五、相關連結 使用「Visual Studio 2019」建置一個有 Mvc 和 Web Api 架構的網站 「軟體三層式架構」介紹與實作 使用「Visual Studio 2019」建置單元測試專案
閱讀完整內容

「Katalon Recorder」簡化測試腳本撰寫的工具

-
圖片
一、介紹 「Katalon Recorder」 是一款錄製 Web UI 測試 工具，安裝於 Chrome、FireFox 瀏覽器。 Katalon Recorder 錄製瀏覽器的操作過程，並可產生 C#, Java, Python 的測試原始碼，讓工程師更易撰寫 WEB UI 測試。 此文章將介紹使用 Katalon Recorder 錄製腳本，並把腳本移至 Visual Studio 2019 做單元測試。 二、腳本內容 開啟 Google 搜尋關鍵字 測試 ，檢視第二筆搜尋結果的描述是否為 「這是一個根據弗洛伊德焦慮類型理論…」 。 三、 Nuget 套件 MSTest.TestAdapter ( 測試專案預設會安裝 ) MSTest.TestFramework ( 測試專案預設會安裝 ) Selenium.WebDriver Selenium.WebDriver.ChromeDriver 四、教學步驟 圖一、安裝套件。 圖二、 Chrome 瀏覽器安裝 Katalon Recorder 。 圖三、開啟 Katalon Recorder ( 注意右上角的 ICON ) 圖四、開始錄製腳本 圖五、操作瀏覽器(此時 Katalon Recorder 就會錄製腳本) 圖六、停止錄製 圖七、產生 C# 程式碼 圖八、將程式碼貼到 測試專案 圖九、將 FirefoxDriver 改成 ChromeDriver ，讓單元測試使用 Chrome 瀏覽器。 圖十、執行 測試 。 圖十一、測試結果。 四、相關連結 Selenium 前端 UI 自動化測試、爬蟲程式 最佳利器 五、參考 Katalon Recorder Katalon Recorder 下載 ( Chrome 擴充功能 )
閱讀完整內容

「軟體三層式架構」介紹與實作

-
圖片
一、前言 專案開發前如果沒有分層概念，當專案功能越多，專案越大，則越難維護。因此筆者會依據專案架構與日後規劃而決定要不要分層，以便日後好維護與交接。 二、基本分層 圖、基本分層 Presentation Layer：展示層、最直接與使用者互動。 Business Layer：商業邏輯層。 Data Layer：資料存取層。 三、以 Asp.net MVC 和 Web Api 三層式分層 筆者近幾年公司的經驗，軟體分層大致如下圖，讀者可能依據各自公司的經驗，對分層和架構有不同的解釋與建議，因此示意圖僅供參考 圖、以 Asp.net MVC 和 Web Api 三層式分層 四、參考 ASP.NET Core Application Architecture
閱讀完整內容

使用「Vue Cli」建立、打包、安裝 專案

-
圖片
一、介紹 Vue CLI 是由 Vue.js 團隊所開發，用來提供開發者快速建置 Vue.js 專案並整合相關工具鍊工具。 二、建置新專案 建立新資料夾 開啟 命令提示字元 切換至 新建立的資料夾 下指令 vue create test 建立 vue 專案 專案名稱 只能是小寫英文、底線、 vue create 專案名稱 選擇 Default 剛建立好的 test 專案 三、啟動新專案 切換至 新建置的專案 下指令 yarn serve yarn serve 打開 瀏覽器 ，輸入網址 http://localhost:8080/ ，即可看到運行的網站 四、打包新專案 切換至 新建置的專案 選擇 public 、 src 、 babel.config.js 、 package.json 、 README.md 後，加壓縮檔案 此檔案即可傳送給其他人使用 五、安裝 打包好的新專案 解壓縮檔案 開啟 命令提示字元 切換至 解壓縮檔案的位置 執行指令 yarn install 安裝相關的套件 yarn install 執行指令 yarn serve 運行專案 yarn serve 打開 瀏覽器 ，輸入網址 http://localhost:8080/ ，即可看到運行的網站 六、相關連結 「Visual Studio Code」安裝與擴充工具安裝 快速開發 Vue.js 工具「Vue CLI」安裝教學 快速的套件管理工具「Yarn」 讓 JavaScript 能在伺服器端執行的環境 「node.js」 使用「Vue Cli」建立、打包、安裝 專案 七、參考 安裝 node.js v14.15.1 yarn node.js vue cli
閱讀完整內容

如何取得 FaceBook 的「應用程式編號」、「應用程式密鑰」。

-
圖片
一、介紹 本文章將會介紹如何取得 FaceBook 的「應用程式編號」、「應用程式密鑰」。 二、OAuth 2.0 「OAuth 2.0」 是一個開放標準，允許使用者讓第三方應用程式取得該使用者在某個應用程式上的資訊，無須取得該用戶的密碼、帳號。 三、取得FaceBook的「應用程式編號」、「應用程式密鑰」 圖一、使用瀏覽器進入到 facebook developer ，點選 下一步 圖二、輸入 電話號碼 、 確認碼 圖三、點選 開發人員 圖四、點選 建立首款應用程式 圖五、選取 管理企業管理工具 ，再點選 繼續 圖六、輸入 應用程式顯示名稱 、應用程式用途選取 你自己或你的商家 、再點選 繼續 圖七、點選 提交 圖八、FaceBook 登入選擇 設定 圖九、選擇左邊選單的 設定 圖十、輸入 有效的 OAuth 重新導向 URI 圖十一、點選 設定 > 基本資料 ，即可取得 應用程式編號 、 應用程式密鑰 三、取得FB的「存取權杖工具 」 圖一、點選 上方 工具 ，再點選 存取權杖工具 圖二、取得FaceBook應用程式的 存取權杖工具 四、參考 facebook developer OAuth 2.0 facebook 存取權杖 建置一個使用「FaceBook」、「Google」帳號登入的「Asp.net MVC」 網站。
閱讀完整內容

使用「NLog」來記錄應用程式的大小事吧

-
圖片
一、介紹 NLog 是 .net 下的日誌套件，因為只要一句程式碼即可紀錄日誌，因此筆者常使用它記錄應用系統的錯誤、資訊…等。 二、開發環境 整合開發環境：Visual Studio 2019 語言：C# .net framework：4.6.2 三、 Nuget 安裝套件 NLog NLog.Config NLog.Schema 圖、套件清單 四、操作步驟 圖、修改 NLog.config 的 target 、 logger 元素 NLog.config 設定 < targets > < target xsi:type = "File" name = "f" fileName = "${basedir}/logs/${shortdate}.log" layout = "${longdate} ${uppercase:${level}} ${message}" /> </ targets > < rules > < logger name = "*" minlevel = "Debug" writeTo = "f" /> </ rules > 圖、使用 nlog 原始碼 c# public void LogTest() { var log = LogManager.GetCurrentClassLogger(); log.Info($"Test"); } 圖、執行後結果 五、相關連結 「NLog」與「Sql Server」資料庫的完美搭配 六、參考 NLog Tutorial NLog Nuget
閱讀完整內容

使用「LINE Messaging API」發送 line 訊息

-
圖片
一、介紹 LINE 是由LINE株式會社所開發的即時通訊平台，也是目前台灣目前最高使用率的社群平台。 二、登入 LINE console 圖、打開瀏覽器，進到 LINE Developers Console 登入頁 三、建立 Provider 和 Channel 圖、按下 Create ，輸入 Provider name ，再按下 Create 圖、按下 Create a Message API Channel 圖、輸入 Channel name 圖、Channel 資訊 四、webhook 每當LINE用戶加您的 Channel 為好友或是發送訊息，LINE平台透過 HTTP POST 發送 webhook 事件資訊 至您 LINE Developers Console 中所指定的 webhook URL 。 圖、點 Messaging API ，往下拉即可看到 webhook 相關設定 webhook 事件資訊 webhook 事件資訊為JSON格式的資料 點 webhook 的 Verify 按鈕，則會收到如下格式的 webhook 事件資訊。 圖、Verify 按鈕 {“events”:[],“destination”:“XXX”} 被加入好友，則會收到如下格式的 webhook 事件資訊。 {“events”:[{“type”:“follow”,“replyToken”:“XXX”,“source”:{“userId”:“XXX”,“type”:“user”},“timestamp”:XXX,“mode”:“active”}],“destination”:“XXX”} 其中 userId 為 加入您好友的用戶ID，此ID會使用於發送訊息。 發送訊息時，則會收到如下格式的 webhook 事件資訊。 {“events”:[{“type”:“message”,“replyToken”:“XXX”,“source”:{“userId”:“XXX”,“type”:“user”},“timestamp”:XXX,“mode”:“active”,“message”:{“type”:“sticker”,“id”:“XXX”,“stickerId”:“XXX”,“packageId”:“XXX”,“stic...
閱讀完整內容