前言完成作業初期，你可能會疑惑如何增加多個頁面或佈局，這些問題都需要使用到路由器（router）。前端架構將依賴路由器進行所需頁面和佈局之間的切換。而組件（component）則可以看作是我們的視圖，是可重複使用的程式碼塊，用於呈現單一元件的內容。在上一篇文章中，我們已經實現了組件的基礎並且理解了它的重要性。 React Router安裝 Router首先，安裝 React Router：在命令行中執行 npm install react-router-dom。 創建 component加入 template-page 下方可以使用範本來快速建檔，如下 : 12345678910111213141516171819202122232425262728// Home.tsximport React from 'react';const Home = () => { return ( <div> <h1>Home</h1> <p>Welcome to my home page ...

前言近期會慢慢研究 react 使用方式，今後會使用 TS 來完成專案，並包含其他前端架購。本篇使用以下版本，若無法正常執行請確認版本再進行作業。 設定檔12345678910111213141516//package.json "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/node": "^16.18.26", "@types/react": "^18.2.6", "@typ ...

React 介紹React 可稱 ReactJs ，主要由Facebook、Instagram 和一個由個人開發者和企業組成的社群維護。 React為程式設計師提供了一種子組件不能直接影響外層組件（”data flows down”）的模型，資料改變時對HTML文件的有效更新，和現代單頁應用中組件之間乾淨的分離。 手機開發為 React Native : https://reactnative.dev/ JSX 語法JSX語法是開發React的核心語法，是一個 JavaScript 的語法擴充，X為Xml之意。使用方式會與js不同，React能使用方式如下。 🎈 注意 : 以下範例為 index.js 輸入的方式，並非在App.js所使用。 1234567const el = <p>Hello React !!</p>;ReactDom.render( el, document.getElementById('root')); StrictMode 主要用來檢查component有無錯誤的方式 123456ReactDOM.rend ...

起因今年因為疫情造成很多公司居家上班，因此我想找時間去把握時間去考以下為時間軸。 2022/03/27 : 報名考試 2022/05/09 (稱作為勝利日) 2022/04/09 : 開始練習機車，每周六日去練習場練習 2022/05/09 : 順利拿到機車駕照 第一天授課這邊先給個觀念，練習機車前必須要留意各項機車動作以及注意事項，主要原因: 了解目前機車款式、操作 基本開車箱、油門、開啟電力等 遠近光燈打開後特徵等。 有了這些基礎，可以從裡面知道學科一些基礎概念，相當好上手。 熟悉機車特性第二天相對需要抓緊時間去了解手感，騎車與腳踏車不同處會在於轉角時候，機車如果座得太前面有時候會卡到膝蓋，相對要習慣自己能轉到怎樣的程度。 為自己騎乘方式記錄記錄自己騎乘很多方式，因為我有帶朋友去練習場練習，所以可以藉由他來得知自己哪個關卡不足。如果沒有朋友可以考慮用行車紀錄器紀錄，效果會不錯。 第三天我直接到練習場練習轉彎處、直線七秒，當中兩段式可能需要抓一些範圍才能適應。 從別人失敗的關卡學習第四天我依據影片 ...

相信很多人開發 API 有使用 RESTful API或是其他定義，很多設計模式可以提升撰寫的速度、閱讀。這章節會著重於介紹請各位參閱以下內容， API (application programming interface）API 稱作為 “應用程式介面”，定義上是多個軟體中介互相回應(Response)、請求(Request)。如果要更詳細介紹請到下方連結點選 詳細介紹 : API 到底是什麼？ 用白話文帶你認識 by Frankie : 請點我 API 請求種類API 從歷史到至今其實有很多使用方式，XML、JSON都是在傳輸過程中經常出現。 REST (Representational State Transfer)表現層狀態轉移, 英文 Representational State Transfer ，是近年來比較多人使用的一種，最常聽到 RESTful API是同個網路架構風格。REST通常基於HTTP、URI、XML以及HTML這些現有的廣泛流行的協定和標準，他的資源是由URI來指定。 REST架構的限制條件 客戶-服務器（Client-Server） 無狀態（Stat ...

前言近期執行專案時候，常常遇到對方使用的是 WSDL。當時剛入行軟體工程師非常震驚這是甚麼東西，WSDL 如何傳遞、如何使用，直到後期有發現不錯用的工具SoapUI 主要給 WSDL這個使用。接下來會直接讓各位參考如何執行簡易版的WSDL。 最近有製作簡易版本的response 工具，可以提供參考。 使用工具、指令 VSC : 點擊我 使用 Command : dotnet new console -f net5.0 Github 參考 : 點擊我 Web服務描述語言，Web Services Description Language基於 XML 用於 描述 、通訊(訪問) Web Services 的語言。常見相關名稱 Web Services SOAP (Simple Object Access Protocol) UDDI (Universal Description, Discovery, and Integration) 使用方式這邊只會使用 請求、回覆。若要看WSDL製作本篇不展示。 連線方式筆者案例是使用xml部分，需要使用 text/xml 才能啟動功能 ...

安裝方式.NET Cli 1dotnet add package StartFMS.Extensions.Configuration --version 1.0.0 Package Manager 1NuGet\Install-Package StartFMS.Extensions.Configuration -Version 1.0.0 使用目的利用擴充方式減少呼叫的動作以及方便呼叫 Azure 設定、管理使用者密碼(secrets.json)等檔案。 使用方式 使用 Config 呼叫 GetConfiguration() 可抓取 appsetting、secrets Azure Confidential 參數使用 GetAzureConfiguration() 範例透過 Program.cs 傳入參數 123var config = Config.GetConfiguration(); //加入設定檔var ChannelToken = config.GetValue<string>("Line:Bots:channelToken"); ...

安裝方式.NET Cli 1dotnet add package StartFMS.Extensions.Data --version 1.0.5 Package Manager 1NuGet\Install-Package StartFMS.Extensions.Data -Version 1.0.5 字串轉換提供 int 、Double、float、datetime等轉換資料型態，範例如下 12int Number = "100800".ToInt();DateTime dt = "2023/3/10".ToDateTime(); 千分位、小數點字串12345//千分位轉換string thousandths = "10000".ToThousandths();// 小數點string places = "10000".ToDecimalPlaces(6); 自動累加數字12string num = "0000".ToAutoNumber();string num1 = &q ...

起因開發過程中，使用 LineBotSDK 相當不順手以及建立方式，後面我另外把LineBotSDK 另外用 NET Core 版本擴充，方便後續引用、覆寫。請參考使用方式。 所需套件 StartFMS.Extensions.Line LineBotSDK 備註: 初版暫時使用兩種套件合併使用，後續看看有沒有空去修正現行狀況。 使用方式本範例 .NET6.0 展示，若有其他使用操作問題，可以在下方留言。 一、新創一個類別創建一個新的 Class 改寫LineBots 內容，後續會比較好使用。 123456789101112131415// Helper/LineBot.csusing StartFMS.Extensions.Line;namespace StartFMS.Partner.API.Helper{ public class LineBot:LineBots { public override void MessageText() { var @event = ReceivedMes ...

安裝.NET CLI 1dotnet add package StartFMS.Extensions.Line --version 1.0.2 Package Manager 1NuGet\Install-Package StartFMS.Extensions.Line -Version 1.0.2 使用方式 DI 確認專案需求調整 需要透過 新創類別修改，並繼承 StartFMS.Extensions.Line.LineBots 對象 a.基本做法 新增類別 12345678910111213141516// Helper/LineBot.csusing StartFMS.Extensions.Line;namespace StartFMS.Partner.API.Helper{ public class LineBot:LineBots { public override void MessageText() { var @event = LineReceived.events.Fir ...