search

mdecourse / mocad

Mobile Oriented Computer Aided collaborative mechanical Design platform (MOCAD) 行動裝置導向電腦輔助協同機械設計平台
0 stars 0 forks source link

Flutter 相關資料 #3

Open mdecourse opened 4 years ago

mdecourse commented 4 years ago

下載 flutter_portable.7z

請登入 @gm 電子郵箱後, 下載 flutter_portable_final.7z, 並依照 http://mde.tw/cp2019/content/Flutter.html 說明進行測試.

解開後會發現與 Flutter 開發的目錄包括:

Android (包含 Android sdk) flutter (包含 Flutter sdk 與 dart sdk) - https://github.com/flutter/flutter java (包含 Openjdk) - https://github.com/AdoptOpenJDK/openjdk8-binaries/releases vscode (包含 Visual Studio Code) - https://github.com/microsoft/vscode/issues

手機程式開發流程

在 dos command 中輸入 code 即可打開 Visual Studio Code 程式編輯器, 而且已經安裝 Flutter 相關 extension, 使用 Ctr + Shift + P 即可建立 Flutter 相關專案.

目前此一可惜系統採用實體 Android 手機經過 USB 連接 Windows 10 進行 Flutter 程式開發, 在啟用 Virtual Technology 的電腦, 則可以透過 Emulator 建立虛擬 Android 手機進行 Flutter 程式開發測試.

Flutter 手機程式當前端, Python Flask 程式則當作後端

Flutter 手機程式主要提供表單, 將資料送回 Server 端由 Python 進行運算分析或虛擬或實體機電系統控制.

範例:

Flutter Apps <-> Python Flask Server <-> V-rep Robot or other Mechatronic systems

Flutter Apps <-> Python Flask Server <-> Pyslvs kernels

Flutter Apps <-> Python Flask Server <-> Deep Learning based Mechanical Parts Image recognition

haxm-windows_v7_5_2.zip Install Flutter SDK on windows without Android Studio.pdf latest_usb_driver_windows.zip vscode_keyboard-shortcuts-windows.pdf

Flutter 電子書

Practical Flutter

https://rd.springer.com/book/10.1007/978-1-4842-4972-7

mdecourse commented 4 years ago

Flutter and Flask

https://medium.com/analytics-vidhya/deploy-ml-models-using-flask-as-rest-api-and-access-via-flutter-app-7ce63d5c1f3b

https://flutter.dev/docs/cookbook/networking/fetch-data

http://blog.sina.com.cn/s/blog_573ef4200102y0je.html

mdecourse commented 4 years ago

如何建立 Flutter 可攜開發系統

https://flutter.dev/ https://flutter.dev/docs/get-started/install https://flutter.dev/docs/get-started/install/windows 指令搜尋路徑需要能夠執行 git.exe

Flutter sdk

在 y:\ 目錄 git clone flutter sdk

git clone -b stable https://github.com/flutter/flutter.git

將 y:\flutter\bin 加入指令搜尋路徑中

以 flutter doctor 進行檢查, 可知 Flutter sdk 已經完成安裝, 但是仍缺 dart-sdk 以及 Android sdk 以及 OpenJDK 系統.

OpenJDK

其中, OpenJDK 可以下載自 https://github.com/ojdkbuild/ojdkbuild/releases

並且設定 set java_home=%Disk%:\java\jdk8u222-b10

路徑加入 %Disk%:\java\jdk8u222-b10\bin

Android command line tool

https://developer.android.com/studio#downloads 下載 command line tool

解開 sdk-tools-windows-4333796.zip 後, 將 tools 放入

Y:\Android\sdk 目錄中, 並在命令搜尋路徑中加入 y:\Android\sdk\tools\ 以及 y:\Android\sdk\tools\bin\

並且設定

set ANDROID_SDK_home=%Disk%:\home_mdecourse set GRADLE_USER_home=%Disk%:\home_mdecourse set ANDROID_SDK_ROOT=%Disk%:\android\sdk

Batch 檔案中 set 與 setx 的差異

Set modifies the current shell's (the window's) environment values, and the change is available immediately, but it is temporary. The change will not affect other shells that are running, and as soon as you close the shell, the new value is lost until such time as you run set again.

setx modifies the value permanently, which affects all future shells, but does not modify the environment of the shells already running. You have to exit the shell and reopen it before the change will be available, but the value will remain modified until you change it again.

利用 Android\sdk\tools\bin 中的 sdkmanager.bat 下載其他 Android sdk 所需工具

基本指令, 但是必須配合下載特定版本, 而且目前 sdkmanager 只能在 IPv4 連線下執行. 或者利用 proxy 設定:

sdkmanager --list --verbose --no_https --proxy=http --proxy_host= --proxy_port=

sdkmanager "system-images;default;x86_64" sdkmanager "platform-tools" sdkmanager "build-tools" sdkmanager "platforms" sdkmanager "emulator"

利用 sdkmanager --list --verbose > android_sdk_list.txt

查詢各工具的最新版本, 例如:

system-images;android-29;default;x86_64 為最新版本, 以

sdkmanager "system-images;android-29;default;x86_64"

若在 IPv6 環境下, 使用 Proxy 指令:

sdkmanager "system-images;android-29;google_apis_playstore;x86_64" --proxy=http --proxy_host=[2001:288:6004:17::7] --proxy_port=3128

指令下載, 下載過程必須同意各使用授權.

接著以 

sdkmanager "platform-tools"

或使用代理主機下載相關資料

sdkmanager "platform-tools" --proxy=http --proxy_host=140.130.17.7 --proxy_port=3128

下載 platform-tools

接下來利用 

sdkmanager "build-tools;29.0.2" --proxy=http --proxy_host=140.130.17.7 --proxy_port=3128

下載最新的 29.0.2 (可以透過上述 sdkmanager --list --verbose > android_sdk_list.txt 找到最新的可下載版本)

接下來下載 platforms;android-29

sdkmanager "platforms;android-29" --proxy=http --proxy_host=140.130.17.7 --proxy_port=3128

最後, 利用

sdkmanager "emulator" --proxy=http --proxy_host=140.130.17.7 --proxy_port=3128

下載最新的 emulator

mdecourse commented 4 years ago

啟動與關閉 Flutter 隨身系統

start.bat

REM for flutter
set java_home=%Disk%:\java\jdk8u222-b10
set ANDROID_SDK_home=%Disk%:\home_mdecourse
set GRADLE_USER_home=%Disk%:\home_mdecourse
set ANDROID_SDK_ROOT=%Disk%:\android\sdk
set PUB_CACHE=%Disk%:\home_mdecourse\pub

REM set _JAVA_OPTIONS=-Duser.home=%HOME%
set path_flutter=%Disk%:\android\sdk\tools;%Disk%:\android\sdk\tools\bin;%Disk%:\android\sdk\platform-tools;%Disk%:\flutter\bin;%Disk%:\flutter\bin\cache\dart-sdk\bin;
set path_vscode=%Disk%:\vscode;

JAVA_HOME

設定 OpenJDK 所在目錄

ANDROID_SDK_HOME

設定使用者對應的 emulator 設定目錄.

Sets the path to the user-specific emulator configuration directory. The default location is $ANDROID_SDK_HOME/.android/.

ANDROID_SDK_ROOT

設定 Android SDK 所在目錄

If ANDROID_HOME is defined and contains a valid SDK installation, its value is used instead of the value in ANDROID_SDK_ROOT.

If ANDROID_HOME is not defined, the value in ANDROID_SDK_ROOT is used.

If ANDROID_HOME is defined but does not exist or does not contain a valid SDK installation, the value in ANDROID_SDK_ROOT is used instead.

GRADLE_USER_HOME

設定 Gradle cache 目錄, https://gradle.org/ 是 Mobile 的 build 工具.

PUB_CACHE

設定 pub 對應暫存檔案目錄, Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter, AngularDart, and general Dart programs.

Some of pub’s dependencies are downloaded to the pub cache. By default, this directory is located under .pub-cache in your home directory (on Mac and Linux), or in %APPDATA%\Pub\Cache (on Windows). (The precise location of the cache may vary depending on the Windows version.) You can use the PUB_CACHE environment variable to specify another location.

命令搜尋路徑

Y:\Android\Sdk\tools 主要執行 emulator.exe

Y:\Android\Sdk\tools\bin 主要執行 sdkmanager.bat

Y:\Android\Sdk\platform-tools 主要執行 adb.exe

Y:\flutter\bin 主要執行 flutter.bat

Y:\flutter\bin\cache\dart-sdk\bin 主要執行 dart.exe

Y:\vscode 主要執行 code.exe

stop.bat

taskkill /IM adb.exe /F taskkill /IM code.exe /F taskkill /IM java.exe /F

mdecourse commented 4 years ago

VSCODE Ctrl + Shift + P

按下 Ctrl + Shift + P 後輸入 flutter 可以列出與 Flutter 相關的指令選擇, 若在符合啟動虛擬手機的環境中, 可以選擇 create 或 launch emulator, 若是與實體手機直接透過 USB 連線, 則可在 flutter doctor 命令後確定手機已經連線後執行 Debug -> Start Debug

mdecourse commented 4 years ago

KMOL Flutter 手機可攜程式開發環境

除了利用 Android SDK 中的 emulator 建立虛擬手機進行程式測式外, 針對無法使用 emulator 的 AMD 電腦或較舊電腦中, 建議可安裝 https://www.bluestacks.com/ 4.0 版 (最後希望也能將 Bluestacks 製作成可攜), 啟動後只需利用 Android SDK 中的 adb.exe 工具 (Android Debug Bridge), 在命令列中執行:

adb connect localhost:5555

就可以讓 vscode 擷取到 Bluestacks 虛擬手機環境, 並將 Flutter 程式直接送到 Bluestacks 手機中執行, 之後也可以將 .apk 安裝在模擬的 Bluestacks 手機或實體 Android 手機中.

可攜 Flutter Final 版本下載.7z