React 綜合應用 (1)：登入頁面

要來驗收學習成果，但有個範例試作總是讓人安心，從 Login 開始進入好像是不錯的開始。

參考國外部落格教學後，發現是個很好學習的小型案例，就決定動手模仿開始：

首先使用 Create-React-App 進行專案建立。

安裝：
React Router
React Bootstrap
React icons
Styled-Components

Login 元件程式碼：

Delphi 操作 AD / LDAP 的相關資源

以往登入介面會想使用在資料庫建立使用者清單，但老是會被提到不要讓使用者多記一組密碼。

而大多數的企業內都是使用 Active Directory 管理登入，能夠使用 AD 驗證登入資訊當然是最佳解。

Google 搜尋後驚覺有提到 AD 的都是 C# 內容，Delphi 相關的很少很少。

不過呢，在有限的資料中卻發現：Delphi 和 Active Directory (AD / LDAP) 也蠻合的，而且 ADOQuery 居然還能查 AD 資料，ADO 也太威能了吧！

2020.02.05補充：

執行時的 Access EViolation

由於LDAP filter 會用到冒號【:】，這是Delphi SQL 參數的保留字，若沒有關閉ParamCheck會造成參數存取錯誤（Access Violation）的情形。

SQL Like 語法調整

雖然LDAP可以用類SQL語法查詢，畢竟不是SQL-92標準，如LIKE語法沒有提供，取而代之的是使用米字符號【*】表示。

See also :

• UniGUI -- LDAP
• Active Directory Service Interfaces
• 請問使用LDAP(ADSI)進行公司內網帳號與密碼驗證的問題？
• LDAP query with FILTER 
• Chapter 20. Using ADO for Searching
• 本文圖片來源 

React Router 和 Bootstrap 整合

React基礎看了一陣子，總算是看到 Router 章節，突然豁然開朗。

React 屬於 View Library 的一種，對我來說，直接從 Router 看回去反而更容易理解 React 是想要做到什麼樣的設計思路。

看直播主 Step by step 玩出一個版面，一邊學習一邊做，可以理解設計者到底是怎麼想的，很謝謝這位直播主的解說。


See also:

• Build a website with React, React-Bootstrap, React-Router and Styled-Components
• Styled-Components

REACT Plugin list in Visual Studio Code

編寫 REACT 的過程中，記錄一下目前用到的 Plugin，就算未來重裝系統也不用煩腦當初到底用過哪些。

首先是列出清單的指令：

code --list-extensions | xargs -L 1 echo code --install-extension

接著會回傳包含安裝指令的 Plugin 清單：

code --install-extension burkeholland.simple-react-snippets
code --install-extension esbenp.prettier-vscode
code --install-extension mgmcdermott.vscode-language-babel
code --install-extension MS-CEINTL.vscode-language-pack-zh-hant
code --install-extension teabyii.ayu

See also:

• How can you export VS Code extension list
• Learn React - React Crash Course [2019] - React Tutorial with Examples | Mosh
• Simple React Snippets for VS Code that you will actually use 
• Prettier formatter for Visual Studio Code
• mgmcdermott.vscode-language-babel
• teabyii.ayu

【會後心得】Delphi Web開發框架評估和討論網路研討會

在 Web 化的路上跌跌撞撞，每家 Delphi Web 的解決方案幾乎都試過。

一直到今天才有很全面的研討會的內容。

EMBT 把 3rd-Party 整理成 3 個區塊：

Client Focused

利用【Pascal to JavaScript】引擎，把 Delphi 程式碼轉譯成 JavaScript 程式碼，【TMS WEB Core】讓人驚豔，能在 Browser 直接 Debug Pascal 程式碼，這親切感就是比其它家還高出很多。

Balanced Full-Stack

Server (Delphi)和 Client (JavaScript)全面交由 Framework 控制，開發者在絕大部份的場景完全不需手刻 JavaScript 程式碼。

Server Focused

Framework 可以 Render HTML 內指定標籤成完整 HTML 格式，所有的程式碼轉換都是在 Server 端完成。

它們前端大多有綁定某家 JS 框架(如 uniGUI 綁 ExtJS)，而這其實有好處，代表 Framework 可控度更好，不過缺點也是選擇太少 (笑)。

我的理想目標是：

以擅長的 Delphi，能少寫HTML / CSS / JavaScript 就少寫它們，並且高速完成專案。

則 TMS Web Core 和 uniGUI 可以滿足這個目標。

如果理想目標是：

需要明確的設計規範 + 彈性的前端需求。

則 Delphi MVC framework 可以滿足這個目標。


除此之外，未來的產品路線越來越明確。身為所有後端框架基礎的 WebBroker 被賦於更大的期待，花點時間投資它我相信是明確的選擇。

See also :

• Delphi Web 開發框架評估和討論 網路研討會：影片、 簡報

REACT Basic Inclusion Boilerplate 小型樣板

REACT CDN (Basic inclusion) 樣板

以入門的角度來說，立即可以看到結果是蠻重要的 ── 在環境設置上花了很多時間的心得。

CDN (Content delivery network) + REACT + BABEL

其它元件的 JS 內容：

Open dbExpress update - 2019.04.29 version

Update: 2019.04.29 support 10.3 Rio (Arc / Ent / Professional / Community Edition)

• Download Link
• Github

In version 2019.04.29, the corrections are as follows:

• Fix bugs during the installation period.

中文說明：
2019.04.29 支援 Delphi 10.3 Rio，主要是提供 Professional / Community Edition 中 dbExpress 無 ODBC Driver 的解決方案。

在 2019.04.29 版本，修正訊息如下：

• 修正安裝時期的Bug