Preparations.md

title	Preparations
description	準備事項(技能樹、軟體安裝、環境建置)
published	true
date	2023-11-03 01:40:52 UTC
tags
editor	markdown
dateCreated	2022-04-28 00:51:37 UTC

Skill Tree

• roadmap
• developer-roadmap
• developer-roadmap-chinese
• backend
• ExplainThis
• IT-Tools
• Essential skills for a web developer

簡介 intro

後端 backend

開發維運 devops

前端 frontend

Install Software

Visual Studio Code

Version

 code -v

Extension Module

• Chinese (Traditional) Language Pack for Visual Studio Code
• Prettier - Code formatter
• ESLint

npm install -g eslint
eslint --init

• Prettier ESLint
• vscode-icons
• Path Intellisense
• Prisma (ORM)
• Git History
• gitignore
• GitLens — Git supercharged
• Jest Runner
• TODO Highlight
• Todo Tree
• Git Graph

usage info {.is-info}

• CodeSnap (可以輕鬆生成高解析度，精美的程式碼圖片)

usage info {.is-info}

• Code Spell Checker
• live server
• SQLite (搭配 SQLite 使用)：檢視 ➔ 命令選擇區 ➔ 輸入 SQLite: Open Database ➔ 左下方會出現 SQLITE EXPLORER ➔ 可查看 table 及其資料
• Codeium (自動化生成程式碼。它支援超過 40 種語言，且仍在不斷擴充中。)

usage info {.is-info}

• code runner
• AWS Toolkit

usage info {.is-info}

• New Relic CodeStream
• Postman
• CodiumAI (Test writing)

Postman

Learning

[POSTMAN] 該知道的都知道，不知道的慢慢瞭解 - 與波斯麵三十天的感情培養 {.is-info}

Set Environment

set environment info {.is-info}

Pre-request Scripts

Pre-request Scripts info {.is-info}

Discord

SQL Server

SQL Server download info {.is-info}

• DB : sql0802-srv

DBeaver

DBeaver download info {.is-info}

SourceTree (Option)

SourceTree download info {.is-info}

• set developer info in SourceTree for each project with the following steps

1. Settings
2. Advanced
3. uncheck the option : Use global user settings
4. then you can see developer info in Author when commit

Sumatra PDF

Sumatra PDF download info

Notepad++

• set in the direction C:\Program Files (x86)

Ngrok (Option)

• 快速讓外網連接本機的利器 — ngrok
• 架設臨時伺服器不求人，用 ngrok 一個指令搞定！（含 Windows + MacOS 環境變數教學） {.is-info}

Download and use ngrok.exe

Ngrok download info {.is-info}

Login Account

https://dashboard.ngrok.com/get-started/setup

• get add-authtoken

Usage

path：C:\Program Files (x86)\ngrok-v3-stable-windows-amd64\ngrok.exe

Connect your account

ngrok config add-authtoken 20MMLwQdaSofUxU14BZFFBqDcFv_2mhM2W7XfAds39MJv4cr8

Fire it up

// listen port
ngrok http 8110

Gain ngrok url

• random url will change when ngrok restart

https://a7ab-122-147-204-116.jp.ngrok.io

Access local resource

https://a7ab-122-147-204-116.jp.ngrok.io/swagger/WebSignin_API

cmder

cmder download info {.is-info}

Usage

介紹好用工具：Cmder ( 具有 Linux 溫度的 Windows 命令提示字元工具 )

WinSCP

WinSCP download info {.is-info}

Lightshot

Lightshot download info {.is-info}

TryCloudflare (Option)

使用 Cloudflare Tunnel 的 TryCloudflare 取代 ngrok {.is-info}

Build Environment

工具	功能
nvm	管理 Node.js 版本
npm	管理 Node.js 套件
node	Node.js 執行程式

nvm

nvm 是用來管理 Node.js 版本的工具。它可以讓我們在同一台電腦上安裝和切換不同的 Node.js 版本。

nvm download info {.is-info}

cmd 使用管理員身分執行 {.is-warning}

安裝時將 nvm 及 node 都安裝在 D:\SDK {.is-warning}

• install nvm

nvm install

• get nvm version list

nvm list

• show now using node.js version

nvm version

• location：D:\SDK

npm

npm 是用來管理 Node.js 套件的工具。npm 可以讓我們下載、安裝、更新和卸載 Node.js 套件。

• install

npm install -g npm
npm install -g npm@10.2.2

• get package list

npm list

node

node 是 Node.js 的執行程式。當我們執行 node 命令時，它將啟動 Node.js 執行環境，並允許我們執行 JavaScript 程式碼。 node releases

• install this node.js version

nvm install 14.18.0
nvm install 18.17.0
nvm install 20.9.0

• use this node.js version

nvm use 14.18.0
nvm use 18.17.0
nvm use 20.9.0

• check node.js version

node -v

• 資料夾 SDK 會出現兩個資料夾 nvm 與 nodejs

• 設定 nvm 與 nodejs 的環境變數
• NVM_HOME：D:\SDK\nvm
• NVM_SYMLINK：D:\SDK\nodejs

SonarQube 程式碼品質分析工具

Install jdk

https://www.oracle.com/java/technologies/downloads/#jdk18-windows

Download sonar-scanner

https://binaries.sonarsource.com/Distribution/sonar-scanner-cli/sonar-scanner-cli-4.7.0.2747-windows.zip

Set environment variables

https://www.cnblogs.com/Uni-Hoang/p/15207178.html

Check installation is successful

sonar-scanner -v

INFO: Scanner configuration file: C:\Program Files\sonar-scanner-4.7.0.2747-windows\bin\..\conf\sonar-scanner.properties
INFO: Project root configuration file: NONE
INFO: SonarScanner 4.7.0.2747
INFO: Java 11.0.14.1 Eclipse Adoptium (64-bit)
INFO: Windows 10 10.0 amd64

sonar-scanner -version

ERROR: Unrecognized option: -version
INFO:
INFO: usage: sonar-scanner [options]
INFO:
INFO: Options:
INFO:  -D,--define <arg>     Define property
INFO:  -h,--help             Display help information
INFO:  -v,--version          Display version information
INFO:  -X,--debug            Produce execution debug output

Add sonar-scanner config in the project root

C:\Program Files\sonar-scanner-4.7.0.2747-windows\conf copy sonar-scanner.properties to project

Excute sonar-scanner

// cd to project
D:\mandy\Project\Koa\WebSignin_API>

// excute sonar-scanner
sonar-scanner.bat 
-D"sonar.projectKey=WebSignin_API" 
-D"sonar.sources=." 
-D"sonar.host.url=http://192.168.25.59:9005" 
-D"sonar.login=d9951190925904006e8e49454bc0588d9b9661ff"

Login

http://192.168.25.59:9005/

帳號：11542
密碼：qaz123