熱血巴!衝浪怪獸!Kirin!

  透過Angular 來開發 Google Chrome Extension 的重點設定 如果沒接觸的朋友可以參考這一篇  https://medium.com/hybrid-maker/簡單來做一個-chrome-extension-2359e43f282a Google Chrome Extension Wiki 因為公司內部有個系統是用Chrome Extension,來做操作介面,然後是使用ko.js ,費了好大筆勁目前已經換成 Angular10 這邊就先來做個筆記 設定 manifest.json 編輯  {rootproject}/manifest.json 設定以下的內容 { "manifest_version": 2, ..., "content_security_policy": "script-src 'self' 'unsafe-eval' https://xxx; object-src 'self'", "content_scripts": [ ... ] } "script-src ‘self’ 這個security policy務必要設定 設定 angular.json 編輯  {root}/{angular-project}/angular.json 設定輸出專案的位置,如下 { " projects ": { " forest-admin-client ": { " architect ": { " build ": { " builder ": "@angular-devkit/build-angular:browser" , " options ": { " outputPath ": "輸出專案的位置" , 本專的 outputPath 設定是  dist/forest-admin-...

  Google Map 單車路徑計算坡度和角度小工具 本人最近開始稍微開始認真騎腳踏車,然後我常用google map 去安排路線(癡迷上自己亂排路線的快感 XD) 但是常常google會帶入非人性化的路線,例如用走的都幾乎走不上去,於似乎本人找了幾個工具 像是 bikeroll 非常直觀好用,但是坡度顯示不精準 (12% ~ 48% <--- 48%會往生XD) 所以本人就想說來開發一個能夠自己決定每幾公尺就計算這個區段的坡度的工具,工具網址如下 https://mapsteepness.web.app 源始碼 Github :  https://github.com/kirinchen/map-steepness-gradient 設定教學 一進入網站就會先到設定頁  https://mapsteepness.web.app/config 設定基本參數 設定說明 A: 設定語系 B: 設定每幾公尺為一個路徑 C :設定 Google Map 金鑰,請看此  教學 Google Map 金鑰要啟用 Directions API / Maps Elevation API / Maps JavaScript API 三個服務 啟用服務教學 :  教學 為什麼要此金鑰,因為Google這幾年增加圖資的費用,所以很多地圖相關的APP都取消服務,而我們採用各自申請金鑰來提供此服務,且沒有超過一定的使用量基本上是免費的 操作教學 1. 準備單車路徑的KML檔案 google map 匯出KML教學 範例檔案 ：  點我下載 KML  Wiki 2. 匯入KML檔案到 mapsteepness 系統中 :  連結   3. 等匯入完成 就可以點選 路徑列表   4. 查看此次路徑，的每個路徑分段，並選擇要在地圖上觀察的分段 可以用上面的過濾器 透過夾角或是坡度來篩選 要的路徑 起點/終點 : 標示路段起點/終點的經緯度 距離 : 該路段的長度 海拔 : 終點的海拔高度 坡度/夾角 : 該路段的爬升坡度,與夾角 選取 : 選區的路段可以顯示在地圖上 5. 顯示在地圖上  5.1 點選其中的一段的路徑 點擊地圖標示 起點/終點   : 起點...

如何申請Google Map 開發者金鑰並啟用付費 最近本人開始騎單車的爬坡,所以開發了一個爬坡小工具,那就會用到Google Map API,這邊先做個預告,順便寫個Gmap小筆記啦 創建API Key 1.先到 Google雲端後台 .  Google Cloud Platform Console 2.請先選擇一個專案 (如果沒有請按建立) 3.啟用API,這邊以Map JavaScript 為例 (選擇自己需要的API) 先到憑證,並建立API KEY 5.再到 Google雲端後台 .  Google Cloud Platform Console  並選則憑證 這邊可以看之前申請的Key,也可以複製金鑰 啟用付費 以Map JavaScript API 為例,如果不啟用付費,很多功能都無法使用(ex Directions API,Maps Elevation API…) 不過不用擔心,基本上google 每個月都有一定的Quota,沒超過是不用付費的,已開發來說很夠了 Google Map Api 定價  https://cloud.google.com/maps-platform/pricing 先到google後台 啟用付費 —>  https://console.cloud.google.com/project/_/billing/enable 2 . 如果沒有付費帳號請先建立 連結付費帳號 4.這樣就啟用成功了 md code # 如何申請Google Map 開發者金鑰並啟用付費 最近本人開始騎單車的爬坡,所以開發了一個爬坡小工具,那就會用到Google Map API,這邊先做個預告,順便寫個Gmap小筆記啦 ## 創建API Key 1.先到 Google雲端後台 . [Google Cloud Platform Console](https://cloud.google.com/console/google/maps-apis/overview) ![accept.jpg](https://github.com/kirinchen/note-annex/blob/m...

TypeScript 如何讓 Plain Object 轉成 Class 物件 Plain Object , 在Java稱為 POJO（Plain Ordinary Java Object）, 有時候會稱為DTO,指的就是沒有邏輯處理的物件,只有geter 和 seter ,那我們常把此Raw Data 變成有需要邏輯處理的方法的物件,就可以用等下介紹套件來解決 使用情境 export class Test{ name = 'World' ; public sayHello(): void { console .log( 'hello ' + this .name); } } 一般我們會將物件序列化為JSON string const o = new Test(); const jsonS = JSON .stringify(o) 然後將json string 存起來 然後之後還原回來,作使用 const ino:Test = JSON .parse(jsonS); ino.sayHello(); // 這時候會報錯 undefined method 結果會發現報錯 undefined method 解決方法 npm 安裝 class-transformer  npm i class-transformer 修改程式碼為 import { plainToClass } from 'class-transformer' ; ... const ino = JSON .parse(jsonS); const inPo = plainToClass(Test, ino); inPo.sayHello(); 這樣就解了 官方連結 :  https://github.com/typestack/class-transformer 如果是巢狀結構的物件,要再做以下修改 import { Type } from 'class-transformer' ; ... export class Test{ name = 'Wor...

Angular專案 如何在Chrome 的開發小工具DevTool Debug 下中斷點 因為在Angular專案下,透過Page的樹狀工具是找不到,ts 腳本的,還好 ng server 可以補足這個缺點,所以寫一下如何找到腳本的方法 只有在 ng dev server ,才找的到,如果deploy到 prod server 就無法找到ts 腳本 1. 先透過 ng CLI 啟動 Dev Server ng serve 在console 會顯示 ** Angular Live Development Server is listening on localhost: 4200 , open your browser on http://localhost: 4200 / ** : Compiled successfully. 打開Chrome 瀏覽器 開啟  http://localhost:4200/ 看你專案的啟動設定,有可能port 或 path 不一定 打開開發者工具 (DevTool) 按下 F12 3.到  Sources  下,打開open file 4.輸入你要debug 的腳本 檔名就如專案中的檔名一至 只有在 ng dev server ,才找的到,如果deploy到 prod server 就無法使用中斷點了 5.可以下中斷點了 Google DevTool 中斷點 詳細教學 :  https://developers.google.com/web/tools/chrome-devtools/javascript?hl=zh-tw md code: # Angular專案 如何在Chrome 的開發小工具DevTool Debug 下中斷點 因為在Angular專案下,透過Page的樹狀工具是找不到,ts 腳本的,還好 ng server 可以補足這個缺點,所以寫一下如何找到腳本的方法 >> 只有在 ng dev server ,才找的到,如果deploy到 prod server 就無法找到ts 腳本 ## 1. 先透過 ng CLI 啟動 Dev Server ```cmd...

最近自己的 一些 project, 剛好要用java11 才能compile, 但是用Jenkins內建安裝只能到Java9 ,索性就安裝Graalvm, 發現問題 springboot 要打包docker 就發生以下的錯誤 /var/lib/jenkins/workspace/BZK Removing network bzk_default Network bzk_default not found. Error: No such image: net.bzk/bzkflow [Gradle] - Launching build. [bzkflow] $ /var/lib/jenkins/tools/hudson.plugins.gradle.GradleInstallation/Gradle6.4/bin/gradle clean dockerClean docker Starting a Gradle Daemon (subsequent builds will be faster) > Task :bzkflow:clean UP-TO-DATE > Task :bzkflow:dockerClean UP-TO-DATE > Task :Comm:compileJava FAILED FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':Comm:compileJava'. > Could not target platform: 'Java SE 11' using tool chain: 'JDK 8 (1.8)'. * Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. * Get more help at https://help.gradle.org Deprecated Gr...