前言近期安排特殊的行程，我會把 React、Vue 、Angular 三大架框玩過一輪，在分析各式的架框使用的方式。我們就直接先從React先下手。本篇教學如何安裝 三大架框環境，後續再針對架構探討。 基本安裝以下我會使用的工具，依據讀者的習慣分配自己的工具。 Node.js (必) Git VS Code 安裝環境時，請確認 node 版本在進行下方作業。 1npm -v 一、React官方網連結：[ https://zh-hant.reactjs.org/ ] 1 安裝/創建 React安裝 React 請輸入npx create-react-app [名稱] ，如果有遇到下方錯誤訊息，請參考下方處理方式。 解决npm安装时出现run npm audit fix to fix them, or npm audit for details 安裝完畢後，請移動到指定PATH，指令 :cd [名稱]，再來進行npm start開啟網站。 2 結果畫面二、Angular官方網連結：[ https://angular.io/ ] 1 安裝/創建 Angula ...

前言最近需要開始撰寫 ASP.Net MVC，目前遇到Form驗證實例會有自動驗證登入，藉由這次機會來展現身手。 FormsAuthenticationTicket功能主要紀錄使用者資訊，他會有一組Cookies暫存，內部值會經過加密編碼、解密。如果第一次使用這個功能，千萬記住不要嘗試把密碼填入當中。 使用方式從 Client 點入登入網頁，這時Controllers可以進行驗證判斷，若有取得ticket成功會轉到首頁或是會員頁面;若驗證失敗則重新登入。 Authorize 身分驗證確保不讓外界隨意登入，需要再 Controllers上方輸入 Authorize，如果沒有登入成功會有訊息提示。 12345678 namespace ExampleForm.Controllers{ [Authorize()] public class MainController : Controller { return View(); }} WebConfig 設定這邊需要加入錯誤導向頁面設定。 12345<sys ...

前言Angular 近期蠻多公司願意使用的一項框架，他使用Type-Script 來開發是一個好的選擇，後期其他前台框架陸續更近所以差異就不會太大。PS: 目前不介紹TS使用方式。 AngularAngular 是基於 TypeScript 的開發平台。通常是指 “Angular 2+” 或 “Angular v2 及更高版本，框架由 Google 的 Angular 團隊以及社群共同領導。 上圖。Angular 應用的架構。其主要的構造塊是模組、組件、模板、元資料、資料繫結、指令、服務和依賴注入。 前置作業 NodeJs VSC VSC Marketplace 安裝指令:必須要先安裝NodeJs才能執行。npm install @angular/cli 創建專案創建專案也是相對簡單，本篇範例是用 version 14 如果不知道自己版本可以使用ng v。 指令為 ng new [source name] 即可，14版本會詢問是否要routing 以及css，記得要把routing 允許以及選擇自己比較熟悉的css。 1ng new useAngular 創建Pages第一次 ...

前言去年製作 製作 Scanner 章節，想到 VTuber 製作部分可以直接使用這些工具嘗試製作。本作者不是專業VTuber 製作師不適合直接使用 Live2D 製作，因此用快速建檔方式完成建模。 (如果使用需要使用工具就需要自備) 相關章節 製作 Scanner (一) - 把手機轉換電腦攝影機 製作 Scanner (二) - 快速使用讀取器/掃描器 (使用 html5-qrcode ) 需要使用工具 Dev47Apps、手機 VRoid Studio、VRoid Hub VRoidVRoid 是一套免費軟體的VTuber 製作軟體，初期需要從這邊建立簡單人物。下圖為初起介面。 一、創建角色(角色配置不詳細介紹自行挖掘、製作) 二、匯出角色這邊會需要創建 VRM 副檔名，需要確認匯出是否是VRM 。如果要使用 VRoid Hub 也是一樣，至指定角色頁面按下下載即可。

前言繼續上一篇未完成部分安裝 VMagicMirror ，這軟體主要是補助角色在直播中使用你創建的角色直播，需要配合 OBS 來完成直播功能。 安裝 VMagicMirror下載點 : 請點擊 一、VMagicMirror初始會有兩個畫面存在，左邊會是創建角色的呈現位置，右邊則是設定檔。現在我們將剛才的VRM檔案開啟。 讀取完後，立即可以呈現目前角色模樣。(目前先不使用 Dev47App ) 二、使用 OBS現在使用 【視窗攝取】方式設定 VMagicMirror 視窗，就會完成以上動作。 如果需要移除後面的綠色背景請將透明背景打給即可。

近期因工作需要換 Git 工具，從 Github Desktop 轉換到 SourceTree 工具，目前最吸引的部分是圖形(Graph)部分非常好分析 branch marge 狀況以及 branch 使用狀況。這篇簡單操作 “創建多層次 branch”。 SourceTree 是以 Git 為基礎設計的 GUI 圖形化工具。與 Github Desktop 比較上 Github Desktop 缺少圖形化介面缺乏管理、維護。 官方網址SourceTree : https://www.sourcetreeapp.com/ 安裝方式step.1 註冊bitbucket 與 github 是同類型的工具，採用 Mercurial 和Git 作為版控部分。這邊就請自行註冊。 step.2 安裝工具 進階選項-備註來自 Sourcetree - git 的 GUI 管理軟體 第一項如果勾選的話會在 checkout ( 切換 commit ) 的時候，自動將斷行符號由 LF ( linux ) 轉成 CRLF ( windows )，如果是在 linux 的系統上安裝則相反，選擇這個的好處 ...

前言SourceTree 目前是眾多企業使用的一套Git GUI 介面軟體，初期因為努力摸索有幾些問題不知道怎樣排除，會配合Github Desktop 解決目前問題。遇到問題是當需要 Push 時候與Pull產生衝突，要如何解決。 驗證方式使用 Commit 中， “Amend latest commit” 選項達成當前情境。 步驟 創建新的分支，建議不要跟develop或是 master 有任何關聯。 新增 .Txt 就可 第一次Commit 不要勾選任何選項。但切記要隨便寫任何字。 第二次設定 Commit 需要把 “Amend latest commit” 勾起來，就可以達到這樣效果。 解決步驟選擇要Commit 項目 (通常是第一個)，再選擇 “Reset current branch to this commit”，選擇要保留方式即可完成。 目前為止還沒發現，Push 前可以使用 Undo 的方式 (Github 有這項功能)，那只能暫時使用這招解決現行問題。

前置作業準備工具、網址 Chocolatey : https://chocolatey.org/ Live Server : https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer 安裝方式 開啟系統管理員 Powershell 安裝 Chocolatey1Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1')) 安裝 mkcert1choco install mkcert Mkcert使用步驟一、創建 ...

2022 即將結束，我也要開始統計自己今年為自己提升、改變什麼吧! 2022 心路歷程過去以前不斷學習、盲目的直衝直撞找到軟體工程師的職業， 2020年當初因疫情提早為自己找一份工作，當中不斷需要與客戶、主管之間取得兩方溝通才能進行程式修改、變更以及自己非常不熟悉的系統受到極大的挫折感，面對前後的調適也讓我開啟撰寫Blog之路。 今年不斷位置自己突破技能，過程開發技術上還是沒辦法到達心目中的等級。今年算是我這一生有最大突破，也是動盪最大的一年。 過去公司文化不斷卡在落後技術，不斷的試著突破、創新讓公司文化可以為開發有一點點認同。團隊部分也下很大功夫，造就 Line bot 有五個人協助開發，API、 Net 6 、EF Core等技術也慢慢傳授給團隊，增強團隊獨立能力。 從團隊、指導、完善團隊開發流程到團隊解散算是結束最光輝的一年，曾為公司、團隊努力突破，同時為自己得到一些啟發。相信接下來的一年從下一份工作可以為我的能力有大幅進步，不管接下來有沒有比今年更有價值，期望接下來會用不同方式呈現給所有人看自己的能力。 2022 達成成就技術成就 使用 Electron 完成印表機列印 (T ...

本次使用 html-qrcode 快速完成掃描工具，此套件已經把版面建立完成，所以只需要測試鏡頭有沒有進去在選項中即可。 html5-qrcodeGithub : https://github.com/mebjas/html5-qrcode 使用方式1npm i html5-qrcode 程式碼以下範例有新增聲音，使用後就會達到抓取的感覺。聲音檔 : 點擊我 1234567891011121314151617181920212223242526272829303132333435363738394041<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi ...