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

Improved mobile configuration dialog: replace manual setup with JSON config file
2025-07-17 15:58:47 +03:00 · 2025-07-17 15:58:47 +03:00 · 78a374a5ca
commit 78a374a5ca
parent 4c90561e8d 8b1a25f4d7
14 changed files with 72 additions and 72 deletions
--- a/application/src/main/data/upgrade/basic/schema_update.sql
+++ b/application/src/main/data/upgrade/basic/schema_update.sql
@ -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);
--- a/common/data/src/main/java/org/thingsboard/server/common/data/mobile/app/MobileApp.java
+++ b/common/data/src/main/java/org/thingsboard/server/common/data/mobile/app/MobileApp.java
@ -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;
--- a/dao/src/main/java/org/thingsboard/server/dao/model/ModelConstants.java
+++ b/dao/src/main/java/org/thingsboard/server/dao/model/ModelConstants.java
@ -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";
--- a/dao/src/main/java/org/thingsboard/server/dao/model/sql/MobileAppEntity.java
+++ b/dao/src/main/java/org/thingsboard/server/dao/model/sql/MobileAppEntity.java
@ -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);
--- a/dao/src/main/resources/sql/schema-entities.sql
+++ b/dao/src/main/resources/sql/schema-entities.sql
@ -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),
--- a/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-table-config.resolver.ts
@ -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,
--- a/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app.component.html
+++ b/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app.component.html
@ -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">
--- a/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app.component.ts
@ -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({
--- a/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-app-configuration-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-app-configuration-dialog.component.html
@ -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>
-  <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 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>
  <div class="tb-form-panel stroked">
    <div class="tb-form-panel-title" translate>mobile.configuration-step.run-app-title</div>
--- a/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-app-configuration-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-app-configuration-dialog.component.ts
@ -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 {
-      return this.createMarkDownSingleCommand(commands);
+  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 {
--- a/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-table-config.resolve.ts
+++ b/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-table-config.resolve.ts
@ -182,7 +182,8 @@ export class MobileBundleTableConfigResolver {
        data: {
          afterAdd,
          androidApp: data.androidApp,
-          iosApp: data.iosApp
+          iosApp: data.iosApp,
+          bundle: entity
        }
      }).afterClosed()
        .subscribe();
--- a/ui-ngx/src/app/shared/import-export/import-export.service.ts
+++ b/ui-ngx/src/app/shared/import-export/import-export.service.ts
@ -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);
    }
--- a/ui-ngx/src/app/shared/models/mobile-app.models.ts
+++ b/ui-ngx/src/app/shared/models/mobile-app.models.ts
@ -85,6 +85,7 @@ export interface StoreInfo {

 export interface MobileApp extends BaseData<MobileAppId>, HasTenantId {
  pkgName: string;
+  title?: string;
  appSecret: string;
  platformType: PlatformType;
  status: MobileAppStatus;
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@ -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": {