###### tags: `Nas and Android`

在進入該步驟之前，先了解一個觀念: https://www.youtube.com/watch?v=6ULyxuHKxg8&ab_channel=ByteByteGo
一般情況，前端想要存取後端與資料庫，那麼後端得先要提供服務(也就是API)，而後端可以決定要提供甚麼服務(客製化API)。

如何存取DATABASE?
1. 後端存取DATABASE，是直接存取(因為通常都在同個區網)，並提供API(php,flask-python,nodejs)。
2. 前端透過後端開放的API，存取DATABASE。

# 第三步:建立登入系統與帳號管理系統(Flask、MySQL)

依照我們的[後端需求](https://hackmd.io/3L2So2rGRtqU5rn54LIlSg)，要建立一個適合的資料庫，以及使用者
由於我不知道怎麼設計資料庫，所幸先從登入系統開始。
注意! 不懂前後端如何溝通的人做這項專案會非常頭大。

## flask-python(後端) 與 MySQL(資料庫)做出會員管理系統 的API。
### 1. 後端Flask與MySQL的連結
首先，我想借由(後端)Python執行MySQL指令。 首先要在同個網域內連到Nas上的MySQL(如下圖:)，但發現了一個錯誤。 

會發生該問題的原因是上圖紅框中的內容 caching_sha2_password，是mysql在創建使用者時的問題: **由於我使用的MySQL使8.0以上的版本**，我[在第二步，在NAS上基於Docker安裝Python與Flask並架設一個簡易Web應用。](https://hackmd.io/FxETO9isSySELDVB_16KBA)當中的步驟在手動創立新的使用者的時候不是用mysql_native_pasword，詳細如圖:
參考網站: 後端存取database遇到問題: https://www.jianshu.com/p/a97be774fae5

由於python的mysql.connector不支援caching_sha2_password所以我將我現有的使用者加密認證方式改為mysql_native_password。(我不想動到root，所以另創一個權限的使用者，因為這操作好像會導致無法使用myphpadmin)

 => 

重新執行後，得到結果。

-------------------

### 2. 後端Flask設計API。 ☆☆☆☆☆

當前端要進行註冊時，會執行以下MySQL指令，我們係用Python將這些動作寫成api。下面的參考網站就是這麼一個例子，在開始實作前，我們先建立對應的database名稱與table如下2個圖。
創立database
建立table。

[參考網站](https://tutorial101.blogspot.com/2020/02/login-register-sytem-with-python-flask.html):該網站示範了以<font color=red>Web作為前端，透過Flask提供的登入與註冊的API來對MySQL(Database)進行存取。</font>
已註冊與登入的API來講，範例如下。

| RegisterAPI | LoginAPI |
| -------- | -------- |
| | |

#### 執行結果:
程式與執行。
註冊後的資料庫:

登入成功畫面

## 前端[Web、APP] 與 後端[flask(Server-API)、MySQL(Database)]登入系統。

我們還需要提供手機作為前端，與Flask與MySQL後端與資料庫進行互動。使用Flutter設計APP達到與上述[參考網站](https://tutorial101.blogspot.com/2020/02/login-register-sytem-with-python-flask.html)相同的功能。
由於太麻煩，於是我參考該網站:https://github.com/mohammedhashim44/Flutter-Flask-Login
該github是在2020年撰寫的，但我在做這項專案的時候是2022年，這2年的時間flutter更新了很多次，所以程式、gradle甚麼東西的版本都可能不匹配。
所以debug了很久，由於我在debug的過程都是有功能就好，所以詳細流程就不說明。 直接提供debug完後的程式碼。https://github.com/cjh8817676/mysql_flask_flutter