---
title: TB App
tags: App
image: https://i.imgur.com/ARA4eoQ.png
---
# TB App
:::info
ThingsBoard 行動端 App 採用 Flutter，除了 Web， 支持 Android 和 iOS。
對岸實測評價，佳!
:::
[toc]
## 準備工作
:::info
* Host: Windows 10 Pro
* VirtualBox 6.1 Ubuntu Desktop 20.04 VM (4vCPU, 4G Mem)
:::
### Flutter 環境
官方文件: https://flutter.dev/
Setup Guide | [Linux](https://flutter.io/setup-linux) | [macOS](https://flutter.io/setup-macos) | [Windows](https://flutter.io/setup-windows) |
### Install Flutter & Android Studio using snapd
```bash=
star@tb-app:~$ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=20.04
DISTRIB_CODENAME=focal
DISTRIB_DESCRIPTION="Ubuntu 20.04.3 LTS"
star@tb-app:~$ sudo apt install -y snapd
[sudo] password for star:
Reading package lists... Done
Building dependency tree
Reading state information... Done
snapd is already the newest version (2.51.1+20.04ubuntu2).
snapd set to manually installed.
0 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.
star@tb-app:~$ snap version
snap 2.52.1
snapd 2.52.1
series 16
ubuntu 20.04
kernel 5.11.0-38-generic
star@tb-app:~$ sudo snap install flutter --classic
flutter 0+git.8cbec5c from Flutter Team✓ installed
star@tb-app:~$ flutter sdk-path
Initializing Flutter
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 136k 100 136k 0 0 377k 0 --:--:-- --:--:-- --:--:-- 376k
Downloading https://storage.googleapis.com/flutter_infra/releases/stable/linux/flutter_linux_2.2.1-stable.tar.xz
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 573M 100 573M 0 0 9498k 0 0:01:01 0:01:01 --:--:-- 9660k
Flutter initialized
╔════════════════════════════════════════════════════════════════════════════╗
║ A new version of Flutter is available! ║
║ ║
║ To update to the latest version, run "flutter upgrade". ║
╚════════════════════════════════════════════════════════════════════════════╝
Flutter 2.2.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 02c026b03c (5 months ago) • 2021-05-27 12:24:44 -0700
Engine • revision 0fdb562ac8
Tools • Dart 2.13.1
╔════════════════════════════════════════════════════════════════════════════╗
║ Welcome to Flutter! - https://flutter.dev ║
║ ║
║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
║ statistics and basic crash reports. This data is used to help improve ║
║ Flutter tools over time. ║
║ ║
║ Flutter tool analytics are not sent on the very first run. To disable ║
║ reporting, type 'flutter config --no-analytics'. To display the current ║
║ setting, type 'flutter config'. If you opt out of analytics, an opt-out ║
║ event will be sent, and then no further information will be sent by the ║
║ Flutter tool. ║
║ ║
║ By downloading the Flutter SDK, you agree to the Google Terms of Service. ║
║ Note: The Google Privacy Policy describes how data is handled in this ║
║ service. ║
║ ║
║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and ║
║ crash reports to Google. ║
║ ║
║ Read about data we send with crash reports: ║
║ https://flutter.dev/docs/reference/crash-reporting ║
║ ║
║ See Google's privacy policy: ║
║ https://policies.google.com/privacy ║
╚════════════════════════════════════════════════════════════════════════════╝
/home/star/snap/flutter/common/flutter
star@tb-app:~$ flutter doctor
Running "flutter pub get" in flutter_tools... 8.2s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.1, on Linux, locale en_US.UTF-8)
[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
Install Android Studio from:
https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK
components.
(or visit https://flutter.dev/docs/get-started/install/linux#android-setup
for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.
[✗] Chrome - develop for the web (Cannot find Chrome executable at
google-chrome)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[!] Android Studio (not installed)
[!] Connected device
! No devices available
! Doctor found issues in 4 categories.
star@tb-app:~$ sudo snap install android-studio --classic
[sudo] password for star:
android-studio 2020.3.1.24 from Snapcrafters installed
star@tb-app:~$ sudo snap list android-studio
Name Version Rev Tracking Publisher Notes
android-studio 2020.3.1.24 115 latest/stable snapcrafters classic
star@tb-app:~$ android-studio
// run flutter doctor in another terminal tab after initializing android studio (do not need to import config)
star@tb-app:~$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.1, on Linux, locale en_US.UTF-8)
[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/linux#android-setup for
more details.
[✗] Chrome - develop for the web (Cannot find Chrome executable at
google-chrome)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 2020.3)
[!] Connected device
! No devices available
star@tb-app:~$ flutter doctor --android-licenses
Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:73)
at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:48)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:581)
at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178)
at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:522)
... 5 more
star@tb-app:~$ flutter doctor --android-licenses
Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:73)
at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:48)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:581)
at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178)
at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:522)
... 5 more
```
> 打開 Android Studio 的 Tools > SDK Manager > Appearance & Behavior > System Settings > Android SDK > SDK Tools > Android SDK Command-line tools，接著選擇 Apply 按鈕。
> 回到終端機，再次執行 flutter doctor --android licenses，就能成功繼續配置環境。
```bash=
star@tb-app:~$ flutter doctor --android-licenses
5 of 6 SDK package licenses not accepted. 100% Computing updates...
Review licenses that have not been accepted (y/N)? y
...
...
...
Accept? (y/N): y
All SDK package licenses accepted
star@tb-app:~$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.1, on Linux, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✗] Chrome - develop for the web (Cannot find Chrome executable at
google-chrome)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 2020.3)
[!] Connected device
! No devices available
! Doctor found issues in 2 categories.
star@tb-app:~/workspace/download$ wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
star@tb-app:~/workspace/download$ sudo dpkg -i google-chrome-stable_current_amd64.deb
star@tb-app:~/workspace/download$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.1, on Linux, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] Connected device (1 available)
• No issues found!
```
* Download ThingsBoard Flutter App repository
```bash=
sudo apt install git
git clone https://github.com/thingsboard/flutter_thingsboard_app.git
```
### iOS (待驗證)
需要一台等級好一點 macOS 電腦，安裝相關開發軟體。
## Repository
```bash=
flutter_thingsboard_app/
├── android
│ ├── app
│ ├── build.gradle
│ ├── gradle
│ ├── gradle.properties
│ ├── settings_aar.gradle
│ └── settings.gradle
├── assets
│ └── images
├── ios
│ ├── Flutter
│ ├── Podfile
│ ├── Podfile.lock
│ ├── Runner
│ ├── Runner.xcodeproj
│ └── Runner.xcworkspace
├── lib
│ ├── config
│ ├── constants
│ ├── core
│ ├── main.dart
│ ├── modules
│ ├── utils
│ └── widgets
├── LICENSE
├── pubspec.lock
├── pubspec.yaml
├── README.md
└── test
└── widget_test.dart
18 directories, 12 files
```
### 自訂伺服器位置
./lib/constants/app_constants.dart (==請將 thingsBoardApiEndpoint 指向自家 TB==)
```kotlin=
abstract class ThingsboardAppConstants {
static final thingsBoardApiEndpoint = 'http://localhost:8080';
static final thingsboardOAuth2CallbackUrlScheme = 'org.thingsboard.app.auth';
/// Not for production (only for debugging)
static final thingsboardOAuth2AppSecret = 'Your app secret here';
}
```
### 介面中文化
所有 Dart 文件
e.g. 修改密碼頁面，將 string 訊息改成中文即可。
./lib/modules/profile/change_password_page.dart，
### 編譯
```
flutter build apk
```
```
flutter build apk --no-tree-shake-icons
💪 Building with sound null safety 💪
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
Note: /home/star/snap/flutter/common/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_secure_storage-4.2.1/android/src/main/java/com/it_nomads/fluttersecurestorage/FlutterSecureStoragePlugin.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
WARNING: [Processor] Library '/home/star/.gradle/caches/modules-2/files-2.1/org.robolectric/shadows-framework/4.3.1/da048a93951f4d9e46519749c53b0f868dfdf425/shadows-framework-4.3.1.jar' contains references to both AndroidX and old support library. This seems like the library is partially migrated. Jetifier will try to rewrite the library anyway.
Example of androidX reference: 'androidx/test/runner/lifecycle/Stage'
Example of support library reference: 'android/support/annotation/NonNull'
WARNING: [Processor] Library '/home/star/.gradle/caches/modules-2/files-2.1/org.robolectric/shadows-framework/4.3/150103d5732c432906f6130b734e7452855dd67b/shadows-framework-4.3.jar' contains references to both AndroidX and old support library. This seems like the library is partially migrated. Jetifier will try to rewrite the library anyway.
Example of androidX reference: 'androidx/test/runner/lifecycle/Stage'
Example of support library reference: 'android/support/annotation/NonNull'
Running Gradle task 'assembleRelease'...
Running Gradle task 'assembleRelease'... Done 229.6s
✓ Built build/app/outputs/flutter-apk/app-release.apk (22.9MB).
```
* build/app/outputs/flutter-apk/app-release.apk，
編譯後的apk檔，直接安裝於 Android 手機，即可使用。
## Reference(s)
* https://yiqisoft.cn/blog/category/client-side/
Sign in with Wallet
Connect another wallet