dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #13679 from vvlladd28/improvement/mobile-center/configure-dialog

Browse Source 
Improved mobile configuration dialog: replace manual setup with JSON config file
This commit is contained in:
Igor Kulikov 2025-07-17 15:58:47 +03:00 committed by GitHub
commit 78a374a5ca
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 72 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
application/src/main/data/upgrade/basic/schema_update.sql
View File

@ -42,3 +42,5 @@ DROP INDEX IF EXISTS idx_customer_external_id;
DROP INDEX IF EXISTS idx_widgets_bundle_external_id;
-- DROP INDEXES THAT DUPLICATE UNIQUE CONSTRAINT END
ALTER TABLE mobile_app ADD COLUMN IF NOT EXISTS title varchar(255);

4
common/data/src/main/java/org/thingsboard/server/common/data/mobile/app/MobileApp.java
View File

@ -43,6 +43,9 @@ public class MobileApp extends BaseData<MobileAppId> implements HasTenantId, Has
@NotBlank
@Length(fieldName = "pkgName")
private String pkgName;
@Schema(description = "Application title")
@Length(fieldName = "title")
private String title;
@Schema(description = "Application secret. The length must be at least 16 characters", requiredMode = Schema.RequiredMode.REQUIRED)
@NotEmpty
@Length(fieldName = "appSecret", min = 16, max = 2048, message = "must be at least 16 and max 2048 characters")
@ -72,6 +75,7 @@ public class MobileApp extends BaseData<MobileAppId> implements HasTenantId, Has
super(mobile);
this.tenantId = mobile.tenantId;
this.pkgName = mobile.pkgName;
this.title = mobile.title;
this.appSecret = mobile.appSecret;
this.platformType = mobile.platformType;
this.status = mobile.status;

1
dao/src/main/java/org/thingsboard/server/dao/model/ModelConstants.java
View File

@ -457,6 +457,7 @@ public class ModelConstants {
*/
public static final String MOBILE_APP_TABLE_NAME = "mobile_app";
public static final String MOBILE_APP_PKG_NAME_PROPERTY = "pkg_name";
public static final String MOBILE_APP_TITLE_PROPERTY = "title";
public static final String MOBILE_APP_APP_SECRET_PROPERTY = "app_secret";
public static final String MOBILE_APP_PLATFORM_TYPE_PROPERTY = "platform_type";
public static final String MOBILE_APP_STATUS_PROPERTY = "status";

5
dao/src/main/java/org/thingsboard/server/dao/model/sql/MobileAppEntity.java
View File

@ -53,6 +53,9 @@ public class MobileAppEntity extends BaseSqlEntity<MobileApp> {
@Column(name = ModelConstants.MOBILE_APP_PKG_NAME_PROPERTY)
private String pkgName;
@Column(name = ModelConstants.MOBILE_APP_TITLE_PROPERTY)
private String title;
@Column(name = ModelConstants.MOBILE_APP_APP_SECRET_PROPERTY)
private String appSecret;
@ -82,6 +85,7 @@ public class MobileAppEntity extends BaseSqlEntity<MobileApp> {
this.tenantId = mobile.getTenantId().getId();
}
this.pkgName = mobile.getPkgName();
this.title = mobile.getTitle();
this.appSecret = mobile.getAppSecret();
this.platformType = mobile.getPlatformType();
this.status = mobile.getStatus();
@ -98,6 +102,7 @@ public class MobileAppEntity extends BaseSqlEntity<MobileApp> {
}
mobile.setCreatedTime(createdTime);
mobile.setPkgName(pkgName);
mobile.setTitle(title);
mobile.setAppSecret(appSecret);
mobile.setPlatformType(platformType);
mobile.setStatus(status);

1
dao/src/main/resources/sql/schema-entities.sql
View File

@ -626,6 +626,7 @@ CREATE TABLE IF NOT EXISTS mobile_app (
created_time bigint NOT NULL,
tenant_id uuid,
pkg_name varchar(255),
title varchar(255),
app_secret varchar(2048),
platform_type varchar(32),
status varchar(32),

1
ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-table-config.resolver.ts
View File

@ -83,6 +83,7 @@ export class MobileAppTableConfigResolver {
onAction: (_$event, entity) => entity.pkgName,
type: CellActionDescriptorType.COPY_BUTTON
}),
new EntityTableColumn<MobileApp>('title', 'mobile.mobile-package-title', '20%'),
new EntityTableColumn<MobileApp>('appSecret', 'mobile.application-secret', '15%',
(entity) => this.truncatePipe.transform(entity.appSecret, true, 10, '…'), () => ({}),
true, () => ({}), () => undefined, false,

8
ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app.component.html
View File

@ -38,6 +38,14 @@
{{ 'mobile.mobile-package-pattern' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" subscriptSizing="dynamic">
<mat-label translate>mobile.mobile-package-title</mat-label>
<input matInput formControlName="title">
<mat-hint></mat-hint>
<mat-error *ngIf="entityForm.get('title').hasError('maxlength')">
{{ 'mobile.mobile-package-title-max-length' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="flex">
<mat-label translate>mobile.platform-type</mat-label>
<mat-select formControlName="platformType">

5
ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app.component.ts
View File

@ -63,9 +63,10 @@ export class MobileAppComponent extends EntityComponent<MobileApp> {
buildForm(entity: MobileApp): FormGroup {
const form = this.fb.group({
pkgName: [entity?.pkgName ? entity.pkgName : '', [Validators.required, Validators.maxLength(255),
pkgName: [entity?.pkgName ?? '', [Validators.required, Validators.maxLength(255),
Validators.pattern(/^[a-zA-Z][a-zA-Z\d_]*(?:\.[a-zA-Z][a-zA-Z\d_]*)+$/)]],
platformType: [entity?.platformType ? entity.platformType : PlatformType.ANDROID],
title: [entity?.title ?? '', [Validators.maxLength(255)]],
platformType: [entity?.platformType ?? PlatformType.ANDROID],
appSecret: [entity?.appSecret ? entity.appSecret : btoa(randomAlphanumeric(64)), [Validators.required, this.base64Format]],
status: [entity?.status ? entity.status : MobileAppStatus.DRAFT],
versionInfo: this.fb.group({

23
ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-app-configuration-dialog.component.html
View File

@ -43,23 +43,14 @@
[data]=createMarkDownCommand(gitRepositoryLink)></tb-markdown>
</div>
<div class="tb-form-panel stroked">
<div class="tb-form-panel-title" translate>mobile.configuration-step.configure-api-title</div>
<div translate>mobile.configuration-step.configure-api-text</div>
<tb-markdown usePlainMarkdown containerClass="tb-command-code"
[data]=createMarkDownCommand(pathToConstants)></tb-markdown>
<div translate>mobile.configuration-step.configure-api-hint</div>
<tb-markdown usePlainMarkdown containerClass="tb-command-code"
[data]=createMarkDownCommand(configureApi)></tb-markdown>
<div class="tb-form-panel-title" translate>mobile.configuration-step.configure-app-settings-title</div>
<div class="flex gap-4">
<div class="flex-1" translate>mobile.configuration-step.configure-app-settings-text</div>
<button mat-stroked-button color="primary" type="button" (click)="downloadSettings()">
<mat-icon class="tb-mat-24">download</mat-icon>
{{ 'mobile.configuration-step.download-file' | translate }}
</button>
</div>
<div class="tb-form-panel stroked" *ngIf="setApplication">
<div class="tb-form-panel-title" translate>mobile.configuration-step.configure-package-title</div>
<div translate>mobile.configuration-step.configure-package-text</div>
<div translate>mobile.configuration-step.configure-package-text-install</div>
<tb-markdown usePlainMarkdown containerClass="tb-command-code"
[data]=createMarkDownCommand(flutterInstallRenameCommand)></tb-markdown>
<div translate>mobile.configuration-step.configure-package-run-commands</div>
<tb-markdown usePlainMarkdown containerClass="tb-command-code"
[data]=createMarkDownCommand(renameCommands)></tb-markdown>
</div>
<div class="tb-form-panel stroked">
<div class="tb-form-panel-title" translate>mobile.configuration-step.run-app-title</div>

70
ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-app-configuration-dialog.component.ts
View File

@ -21,12 +21,15 @@ import { AppState } from '@core/core.state';
import { Router } from '@angular/router';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { ActionPreferencesPutUserSettings } from '@core/auth/auth.actions';
import { MobileApp } from '@shared/models/mobile-app.models';
import { MobileApp, MobileAppBundleInfo } from '@shared/models/mobile-app.models';
import { ImportExportService } from '@shared/import-export/import-export.service';
import { isNotEmptyStr } from '@core/utils';
export interface MobileAppConfigurationDialogData {
afterAdd: boolean;
androidApp: MobileApp;
iosApp: MobileApp;
bundle: MobileAppBundleInfo;
}
@Component({
@ -36,53 +39,22 @@ export interface MobileAppConfigurationDialogData {
})
export class MobileAppConfigurationDialogComponent extends DialogComponent<MobileAppConfigurationDialogComponent> {
notShowAgain = false;
setApplication = false;
private fileName = 'configs';
notShowAgain = false;
showDontShowAgain: boolean;
gitRepositoryLink = 'git clone -b master https://github.com/thingsboard/flutter_thingsboard_app.git';
pathToConstants = 'lib/constants/app_constants.dart';
flutterRunCommand = 'flutter run';
flutterInstallRenameCommand = 'flutter pub global activate rename';
configureApi: string;
renameCommands: string[] = [];
flutterRunCommand = `flutter run --dart-define-from-file ${this.fileName}.json`;
constructor(protected store: Store<AppState>,
protected router: Router,
@Inject(MAT_DIALOG_DATA) private data: MobileAppConfigurationDialogData,
protected dialogRef: MatDialogRef<MobileAppConfigurationDialogComponent>,
private importExportService: ImportExportService,
) {
super(store, router, dialogRef);
this.showDontShowAgain = this.data.afterAdd;
this.setApplication = !!this.data.androidApp || !!this.data.iosApp;
this.configureApi = `static const thingsBoardApiEndpoint = '${window.location.origin}';`;
if (this.setApplication) {
this.configureApi += '\n';
if (!!this.data.androidApp) {
this.configureApi += `\nstatic const thingsboardAndroidAppSecret = '${this.data.androidApp.appSecret}';`;
}
if (!!this.data.iosApp) {
this.configureApi += `\nstatic const thingsboardIOSAppSecret = '${this.data.iosApp.appSecret}';`;
}
}
if (this.setApplication) {
if (this.data.androidApp?.pkgName === this.data.iosApp?.pkgName) {
this.renameCommands.push(`rename setBundleId --targets android, ios --value "${this.data.androidApp.pkgName}"`);
} else {
if (!!this.data.androidApp) {
this.renameCommands.push(`rename setBundleId --targets android --value "${this.data.androidApp.pkgName}"`);
}
if (!!this.data.iosApp) {
this.renameCommands.push(`rename setBundleId --targets ios --value "${this.data.iosApp.pkgName}"`);
}
}
}
}
close(): void {
@ -94,14 +66,28 @@ export class MobileAppConfigurationDialogComponent extends DialogComponent<Mobil
}
}
createMarkDownCommand(commands: string | string[]): string {
if (Array.isArray(commands)) {
const formatCommands: Array<string> = [];
commands.forEach(command => formatCommands.push(this.createMarkDownSingleCommand(command)));
return formatCommands.join(`\n<br />\n\n`);
} else {
createMarkDownCommand(commands: string): string {
return this.createMarkDownSingleCommand(commands);
}
downloadSettings(): void {
const settings: any = {
thingsboardApiEndpoint: window.location.origin,
appLinksUrlHost: window.location.host,
appLinksUrlScheme: window.location.protocol.slice(0, -1),
};
if (!!this.data.androidApp) {
settings.androidApplicationId = this.data.androidApp.pkgName;
settings.androidApplicationName = isNotEmptyStr(this.data.androidApp.title) ? this.data.androidApp.title : this.data.bundle.title;
settings.thingsboardOAuth2CallbackUrlScheme = this.data.androidApp.pkgName + '.auth';
settings.thingsboardAndroidAppSecret = this.data.androidApp.appSecret;
}
if (!!this.data.iosApp) {
settings.iosApplicationId = this.data.iosApp.pkgName;
settings.iosApplicationName = isNotEmptyStr(this.data.iosApp.title) ? this.data.iosApp.title : this.data.bundle.title;
settings.thingsboardIosAppSecret = this.data.iosApp.appSecret;
}
this.importExportService.exportJson(settings, this.fileName);
}
private createMarkDownSingleCommand(command: string): string {

3
ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-table-config.resolve.ts
View File

@ -182,7 +182,8 @@ export class MobileBundleTableConfigResolver {
data: {
afterAdd,
androidApp: data.androidApp,
iosApp: data.iosApp
iosApp: data.iosApp,
bundle: entity
}
}).afterClosed()
.subscribe();

2
ui-ngx/src/app/shared/import-export/import-export.service.ts
View File

@ -1188,7 +1188,7 @@ export class ImportExportService {
this.exportJson(data, filename);
}
private exportJson(data: any, filename: string) {
public exportJson(data: any, filename: string) {
if (isObject(data)) {
data = JSON.stringify(data, null, 2);
}

1
ui-ngx/src/app/shared/models/mobile-app.models.ts
View File

@ -85,6 +85,7 @@ export interface StoreInfo {
export interface MobileApp extends BaseData<MobileAppId>, HasTenantId {
pkgName: string;
title?: string;
appSecret: string;
platformType: PlatformType;
status: MobileAppStatus;

14
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -3847,6 +3847,8 @@
"mobile-package-max-length": "Application package should be less than 256",
"mobile-package-required": "Application package is required.",
"mobile-package-pattern": "Application package invalid format",
"mobile-package-title": "Application title",
"mobile-package-title-max-length": "Application title should be less than 256",
"no-application": "No applications found",
"no-bundles": "No bundles found",
"platform-type": "Platform type",
@ -3930,17 +3932,13 @@
"prepare-environment-text": "Flutter ThingsBoard Mobile Application requires Flutter SDK. Follow instructions to set up Flutter SDK.",
"get-source-code-title": "Get app source code",
"get-source-code-text": "You can get Flutter ThingsBoard Mobile Application source code by cloning it from the GitHub repository:",
"configure-api-title": "Configure ThingsBoard API endpoint",
"configure-api-text": "Open the flutter_thingsboard_app project in your editor/IDE. Edit:",
"configure-api-hint": "Set the value of the thingsBoardApiEndpoint constant to match the API endpoint of your ThingsBoard server instance. Do not use “localhost” or “127.0.0.1” hostnames.",
"configure-app-settings-title": "Configure app settings",
"configure-app-settings-text": "Download the configuration file and place it into the root directory of the project you cloned in the previous step.",
"download-file": "Download file",
"run-app-title": "Run the app",
"run-app-text": "Run the app as described in your IDE.\nIf using the terminal, run the app with the following command:",
"more-information": "Detailed information may be found in our Getting Started documentation.",
"getting-started": "Getting Started",
"configure-package-title": "Configure application package",
"configure-package-text": "You can manually change the Application Package or use third party CLI tool.",
"configure-package-text-install": "To install the Rename CLI Tool, execute the following command:",
"configure-package-run-commands": "Run these commands in the root directory of your project:"
"getting-started": "Getting Started"
}
},
"notification": {