大匠之風: 2019

2019/11/22

在 React 使用 Font Awesome

在【[Day 09 - 網速換算器] 網速傻傻分不清楚 Mbps? Mb/s? 來寫個單位換算器吧】
這篇看到 REACT 搭配 Font Awesome 的畫面後，想試試看是否能在REACT專案中也套入它的效果。

因為REACT網站不能夠像範例那樣直接使用HTML引入的手法，所以就用正規的import方式來使用。

2019/11/20

認識 Delphi Community Edition (CE) 版本

【RAD Studio】=【Delphi】+【C++ Builder】

在認識Delphi CE之前，就不得不提一下Delphi在我心中到底是個什麼樣的存在。

從前從前，在我很小的時候，學習過Visual Basic、PowerBuilder、Foxpro、MS Access和JAVA等語言，每一項至少學習三個月以上。

2019/11/04

單機資料庫連結方式如何選擇，以SQLite為例

在描述選擇Delphi CE有什麼優缺點後，接下來就是要如何選擇資料庫的連結技術。

目前Delphi CE提供了ADO、dbExpress（DBX）和FireDAC資料庫連結技術，ADO它沒有壞掉，效能也好，在沒有跨平台需求用它就可以了。

DBX和FireDAC，這個比較難選，先來看看它們的差異：

單機版最常用的兩款資料庫：Access和SQLite在FireDAC上都有提供，但DBX只提供SQLite的連結方式。

而SQLite和MS Access相比下又有幾個優點：

小巧輕巧
速度快
跨平台

以實際操作來比較DBX和FireDAC的差別。

首先利用自己做的Dbexpress.SQLite.Factory建立資料庫和資料表格：

建立比操作輕鬆太多。（笑）

使用DBX連結資料表：

從Palette容器裡拖拉一個TSQLConnection到TForm中，並且設定好SQLite的連線參數。
從Palette容器裡拖拉一個TSQLDataSet到TForm中，在CommandText屬性輸入『SELECT * FROM biolife』。
對TSQLDataSet按右鍵，選『Fields Editor』，並對跳出的編輯器按右鍵，選『Add all fields』

上述步驟完成後，會得到以下結果：

    SQLDataSet1species_no: TWideMemoField;
    SQLDataSet1category: TWideMemoField;
    SQLDataSet1common_name: TWideMemoField;
    SQLDataSet1species_name: TWideMemoField;
    SQLDataSet1length_cm: TWideMemoField;
    SQLDataSet1length_in: TWideMemoField;
    SQLDataSet1notes: TWideMemoField;
    SQLDataSet1graphic: TWideMemoField;

表格內有 real, text, blob 型別，但轉換後全是 TWideMemoField，有點奇怪，來看看FireDAC會不會有所變化。

使用FireDAC連結資料表：

從Palette容器裡拖拉一個TFDPhysSQLiteDriverLink到TForm中。
從Palette容器裡拖拉一個TFDConnection到TForm中，並且設定好SQLite的連線參數。
從Palette容器裡拖拉一個TFDQuery到TForm中，在SQL屬性輸入『SELECT * FROM biolife』。
對TFDQuery按右鍵，選『Fields Editor』，並對跳出的編輯器按右鍵，選『Add all fields』

上述步驟完成後，會得到以下結果：

    FDQuery1species_no: TFloatField;
    FDQuery1category: TWideMemoField;
    FDQuery1common_name: TWideMemoField;
    FDQuery1species_name: TWideMemoField;
    FDQuery1length_cm: TFloatField;
    FDQuery1length_in: TFloatField;
    FDQuery1notes: TWideMemoField;
    FDQuery1graphic: TBlobField;

FireDAC可以正確的取得SQLite資料表各欄位格式。

結論

由上面的資料顯示，若使用SQLite單機資料庫，會是以FireDAC表現會比較好。

DBX Driver官方目前已不會有大幅度的功能更新，所以SQLite控制上不會比FireDAC來得好，建議有使用SQLite需求，應採用FireDAC。

2019/10/23

DBX Error: Driver could not be properly initialized in SQL SERVER

"DBX Error: Driver could not be properly initialized. Client library may be missing, not installed properly, of the wrong version, or the driver may be missing from the system path."

測試專案時並沒有遇到這類的問題，但在WebBroker專案下會出現這樣的 Error。

除了安裝 sqlncli.msi 是必須的之外，由於 DataSnap / WebBroker ：

早期的MSSQL driver使用COM
框架使用到 Thread

所以【CoInitialize / CoUninitialize】的呼叫也是必要的。

但這錯誤訊息完全無法看出端倪，故記錄在此。

題外話，新版的 MSSQL 為了跨平台，也開始使用ODBC連接，沒了COM，自然也就不用 CoInitialize / CoUninitialize，ODBC for DBX也許就可以拿來用了呢！（笑）

See also

2019/10/09

TIdHTTPWebBrokerBridge and HTTPS

為了提高網路傳輸的安全性，許多前端套件都開始強制要求使用HTTPS連線才能操作。

然而這在Delphi DataSnap / WebBroker server Debug很是困難，因為預設沒有 HTTPS。

自XE2版後，DataSnap精靈也可以看到HTTPS的選項。

但下一頁的憑證要求應該讓不少人傻眼吧。

文件裡寫的資料不多，很多OpenSSL的小技巧需要留意。

實作的程式碼就是 Indy HTTP SERVER + SSL，第一次看到實作碼時還不自覺地笑噴。

江湖一點訣啊！

結語

經實驗證明可以使用，但因為舊版 Indy 不支援 TLS1.1 以上加密等級，所以Browser會加上【弱加密】警告標語，請留意 Indy 使用版本。

See also :

2019/10/02

TIdHTTPWebBrokerBridge效能和驗證(Authorization)

圖／取自網路

TIdHTTPWebBrokerBridge 目前會用到的地方大概只有 Stand-Alone 場合，更偏向於 Debug 應用。

看到 Marco 寫的 Thread Pooling 文章，不太能夠理解只是Debug為什麼還需要這麼大的效能。

Thread Pooling

Marco原文是這樣說的：

Regarding threading, creating one for each incoming request is Indy’s IdHTTPServer default configuration, but you can tune it adding code to the server main form, which creates and manages the Web server component.

大意上是說每個Client都會建立一條Thread，所以用了Thread Pooling後可以預先把Thread開好，就不用花時間在每次連接的Thread建立時間。

另一個好處是：限制Client數上限(MaxConnections)，總比Server崩潰要好一點。

使用它不吃虧，就記錄一下要怎麼用吧！

2019/09/23

Auto set up the TDBXParameters DataType

圖/VManninen@flickr

好消息！ dbExpress driver 增加對 Linux 平台的支援！

緣起

本以為 dbExpress 不再更新後就要比 BDE 提早領便當，成了史上最悲劇的官方資料庫存取技術代表。

然而在 Devart 的巧手下，2019年又讓 dbExpress 再一次跨好跨滿跨平台。❤❤❤

聽到這個消息超開心的，2002 Borland 時期 Kylix的未竟之夢，總算在 2019 由 Idera / Embarcadero 圓夢完成，真是太感動了！

感動之餘，也想到 DataSnap 轉到 Linux 主機上，是否應該作些準備？

前面提到的【DevExtreme DataGrid Demo with DataSnap Server】章節，已經知道前端要採用與 Delphi 無綠的 JavaScript 應用，而前端最常用的 TClientDataSet / TFdMemTable 也就不會再使用，面對 JavaScript，最終是要包成 JSON。

既然不會再使用 Delphi 前端元件，那資料庫來源在不妨礙開發為前提下能多底層就底層。

有想法，就來試試看！

2019/09/20

DevExtreme DataGrid Demo with DataSnap Server - The Front End

資料來源：網路

前面提到 DevExtreme DataGrid Demo with DataSnap Server 1 + 2，已經知道 DevExtreme DataGrid 是如何向後端伺服器取得資料，其它的『新增』、『更新』、『刪除』要如何實作呢？

在實作之前，要先知道 DataGrid 是如何動作的。

2019/09/11

DevExtreme DataGrid Demo with DataSnap Server 2/2

DataSnap 是 Delphi Enterprise 中極好用的 framework 之一！

隨著行動平台的使用人數提高，漸漸也就有了跨平台的需求。

商城上架費太貴、各平台開發的眉眉角角太多。

說白了就是想一套產品通吃各平台。

能滿足所有條件的只有 Web 了！

其實 Web 的水更深，箇中奧妙待日後細說。（笑）

上回提到 DataSnap REST Server 可以提取跨網站資料。

這篇有幾個目標：

2019/09/10

DevExtreme DataGrid Demo with DataSnap Server 1/2

DataSnap 是 Delphi Enterprise 中極好用的 framework 之一！

使用 Delphi 開發時大多遇到的都是資料庫應用，而其中 3rd party 最常用的就是 DevExpress 的 cxGrid 元件，導致在開發 Web 平台時也需要無痛移轉，使用者就是愛 cxGrid，所以在平台移轉上困難重重。

而 DevExpress 的明日之星【ExpressWeb Framework】卻早已停止開發！ (已哭)

取而代之的是 ASPx 套件和純 HTML5 的 DevExtreme framework。(喔氣氣氣氣氣氣！)

ASP.NET 套件試用好一陣子，不僅僅要熟悉 Dx 元件，再加上 ASP.NET C# 技術知識，別忘了還有前端的 HTML / CSS / JavaScript 的知識要學習，一個人的工作量也太大了。

在絕望之餘，才發現 Delphi 新版的 DataSnap 已經內建了 JavaScript framework，使用上也不算太困難，就差在前端 HTML 必須自行開發。

所謂的 JavaScript framework，意謂著前端的功能也必須使用 JavaScript 進行開發，當然也是有優缺點：

2019/09/03

Script Engine in Delphi

圖片來源：網路

系統維護一段時間之後，總會遇到各式各樣的需求，哪怕是改字改公式這樣的小需要，都必須把專案修改後重新編譯以及發佈這樣的改版模式，才能讓使用者順利使用。

『如果有一套語言引擎嵌入到系統中，我只需要改腳本就能夠無痛更新。』

這樣的念頭在我腦海中出現，有想法就來試試看。

在開始之前，自造輪子不如使用輪子，來看看 3rd party 有沒有好用的函式庫可以使用，如果有就不需要再重新寫起。

2019/07/18

ADO in Web application for Delphi

主題雖然說是 ADO，其實泛指利用操作COM*的資料庫 Driver 皆適用，例如：使用到 OleDB / SQL Native Client 的 dbExpress、Devart DAC、FireDAC 元件等。

*元件物件模型（英語：Component Object Model，縮寫COM）

Delphi 在 Web Application 開發會使用到 Thread，所以使用 COM 技術時，必須要使用 CoInitialize / CoUninitialize 來避免存取錯誤。

使用時機通常是伴隨著 Method 開始和結束，例如：

procedure Method;
begin
CoInitialize(nil);
...
CoUninitialize;
end;

每一個 Method 要設定也太累人，總是想找個簡易的作法，運氣不錯，一找就看到有意思的作法，高手連結在此。

WebModule的【BeforeDispatch】和【AfterDispatch】事件主要控制 Method (Action) 的起始和結束，所以我們可以分別加入 CoInitialize 和 CoUnitialize，如此一來便可以少寫很多的程式碼。

文中的 CGI 模式也可以套用到 Windows Service 專案中，真是長知識了！

See also:

2019/06/26

Delphi ICS 在 WinXP 下的使用

ICS 全名為【Internet Component Suite】，和 Indy 齊名的網路元件組之一。

最近證交所網站開始轉用 TLS 1.2，這意味著加密等級上限是 TLS 1.1 的 WinXP / Win2003 系統已經無法再用 IE 取得資料，Indy 同時也受限於此，然而因為這個原因全面將公司內所有系統升級是不切實際的。~~(升級，公司會倒)~~

那怎麼辦？

雖然 IE 不能連結證交所，但 Firefox 可以，既然 Firefox 可以，那麼就一定有可以連線的方式。

有想法就開始吧，立馬下載 ICS 來使用。結果：

hmm... 出錯了

找不到【bcrypt.dll】，這個檔案是新版 OpenSSL 呼叫 CryptoAPI 裡的 BCryptGenRandom 函式時所必須使用的檔案，而該檔案到了 Vista 才開始提供，因為系統版本不符，所以【把 bcrypt.dll 檔案移殖到 WinXP】這個邪惡的念頭只能放棄不予採用。

新版 OpenSSL 的版號呢？

ICS v8.58 附帶的 OpenSSL 是 1.1.1.0，而上個版次的 ICS v8.44 附帶的 OpenSSL 則是 1.1.0.5。

至於替換的結果，就請想試的紳士們體驗一下囉！

See also:

2019/06/19

React 綜合應用 (2)：載入 JavaScript library

React 核心觀念就是物件導向，可是在實務上並不能排除需要 3rd party 的 JavaScript library / framework 的場合，本次使用到的即是 JavaScript DataSnap framework。

2019/06/13

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

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

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

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

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

2019/06/11

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 :

2019/06/06

React Router 和 Bootstrap 整合

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

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

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

See also:

2019/05/30

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:

2019/05/29

【會後心得】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 開發框架評估和討論網路研討會：影片、簡報

2019/05/04

REACT Basic Inclusion Boilerplate 小型樣板

REACT CDN (Basic inclusion) 樣板

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

CDN (Content delivery network) + REACT + BABEL

其它元件的 JS 內容：

2019/04/29

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

2019/04/18

npm start giving error in REACT

REACT 專案建了幾個後，在切換專案進行 npm start 啟動 Web 時，不定時會遭遇啟動失敗的情形。

而看 LOG 幫助實在很少，最後採用的作法如下：

刪除專案中的 node_modules 目錄
在該目錄下重新執行 npm install
執行 npm / yarn start 即可順利執行

See also:

npm start giving error in node.js

2019/03/27

What is Encryption in Delphi? (1)

記得之前和網友討論到 Delphi 官方沒有加密單元時，總覺得很不可思議，因為 DataSnap 有這個加密 Filter：

TTransportFilterItem.FilterId: PC1 / RSA

既然有加密設定，想必加密法肯定暗藏在 Source 裡的某個角落。

2019/03/20

Howto: create-react-app

在重新安裝 create-react-app 發生拒絕存取的訊息：

使用：

sudo chown -R $USER:$USER '/home/[USER_NAME]/.npm/'

即可解決這個問題。

create-react-app 屬於模板套件，必須先使用 npm 進行安裝。

完成後才使用它來建立新的專案。

例如：

create-react-app my-app

See also:

2019/03/19

Howto: Install NodeJS in Linux mint

Step 1 – Configure Node.js PPA

sudo apt-get install curl python-software-properties

curl -sL https://deb.nodesource.com/setup_11.x | sudo bash -

Step 2 – Install Node.js on Linux Mint

sudo apt-get install nodejs

Step 3 – Install Yarn using NPM

sudo npm install yarn -g

Step 4 – Check Node.js Version

node -v (11.12.0)

npm -v (6.7.0)

yarn -v (1.13.0)

See also:

2019/03/16

Solution: Socket Error 10054 in DataSnap

Bug 保護色做得太真，導致找不到它
（示意圖／翻攝自Pixabay）

使用 SQLConnection 連接 DataSnap 的開發者都知道這是一種長連接的作法。

但這個作法有個缺點，就是如果 Client 發生瞬斷情形，在獲取資料會觸發以下例外：

EIdSocketError 10054 : Connection reset by peer.
EOleException: Connection Closed Gracefully.

在網路上看到解決方式是：
設置心跳包，每分鐘進行連線一次。

這個方式可以確保連線不會被默默切斷，只是這方式卻不能避免網路異常所導致的斷線情形。

再加上異常補獲的方式就更好了。

以下便是我的範例解法：

2019/01/30

Test DevExtreme DataGrid data binding

DataGrid 是 DevExtreme 主打的元件之一，把 PHP 環境架設好之後，就拿了官方範例來使用。

範例都很佛的放在 Github 供人下載

範例 JS 的這段程式碼讓我覺得非常奇怪：

    var url = "php/service.php";
    var db = DevExpress.data.AspNet.createStore({
        key: "ID",
        loadUrl: url,
        insertUrl: url,
        updateUrl: url,
        deleteUrl: url
    });

後端使用了 PHP，卻在前端使用 AspNet 建構式。

除了 DevExtreme 主程式外，還需要額外下載 ASP.NET 外掛程式 (JavaScript)

再看看 PHP 是怎麼寫的：

2019/01/28

WebBroker and Unicode

以下的內容在 Delphi 10.2 (含)以上版本已經解決，新版使用者可以略過不看。

===========================================

TWebRequest 遇到 Unicode

出來江湖混，該還的還是要還。

前端寫久了，還是遇到了 Unicode 解析問題。

以 HTTP Method GET 為例：
http://{local}/action?id=許功蓋堃

已知：
Delphi 2009 以上的 string = UTF-16 格式。

而取得的內容是這樣的：

看到這個心都涼了半截

仔細攻略了 IdHTTPWebBrokerBridge 和 HTTPApp 兩個單元後，才發現裡頭大部份的函式及屬性都是 AnsiString 而非 String 基礎類別。

而 IdHTTPWebBrokerBridge 單元主要只應用在 HTTP Server 上，搬上 IIS 後就和它無關，所以可以直接忽略這個單元不看，雖然我也是看了它很久很久才驚覺這個答案。(眼神死)

接著再把注意力轉到 HTTPApp 單元，最關鍵的就在這句話：

一律使用 AnsiString，Unicode 都不 Unicode 了

ExtractHeaderFields 這個函式遇到要解析的內容僅僅只做了百分比符號轉換，還少做了一道Unicode / UTF-8 (UTF8) 編碼轉換的工作。

於是我們的 Unicode 文字就被轉成亂碼直出了。

現在，到底是該 Debug HTTPApp 還是有其它 3rd party 的解法呢？

訂閱：文章 (Atom)

網頁

2019/11/22

2019/11/20

2019/11/04

使用DBX連結資料表：

使用FireDAC連結資料表：

結論

2019/10/23

2019/10/09

結語

2019/10/02

Thread Pooling

2019/09/23

緣起

2019/09/20

在實作之前，要先知道 DataGrid 是如何動作的。

2019/09/11

2019/09/10

2019/09/03

2019/07/18

2019/06/26

2019/06/19

2019/06/13

2019/06/11

2020.02.05補充：

執行時的 Access EViolation

SQL Like 語法調整

2019/06/06

2019/05/30

2019/05/29

Client Focused

Balanced Full-Stack

Server Focused

2019/05/04

2019/04/29

2019/04/18

2019/03/27

2019/03/20

2019/03/19

2019/03/16

2019/01/30

2019/01/28

TWebRequest 遇到 Unicode