Logbot Setup UI SDK for Flutter

Logbot Setup UI to implement the Logbot First Setup procedure over Bluetooth and WiFi to setup a Logbot IoT easily from a mobile app. This package contains all the widgets necessary to implement the whole setup procedure. An example application is provided to test the setup procedure. To customize the graphics to adapt them to your application, the developers should implement the procedure in their application, extending all the widget classes overriding whats needed (the build method to customize the graphics, and if necessary other methods to customize error messages, logs, translations etc.).

Requirements

Dart 2.17 or later

Installation & Usage

Add the dependencies from pub.dev:

dependencies:
  lb_setup_ui:

import 'package:lb_setup_ui/lb_setup_ui.dart';

class Example {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("BLE Setup Process"),
      ),
      // This starts the default Setup UI
      body: const LbSetupBluetoothPage(),
    );
  }
}

To modify the UI with custom widgets and graphics, all classes must be extended and at least the build method should be overridden:

/// extends LbSetupLanConnectionConfig
class MyCustomLanConfig extends LbSetupLanConnectionConfig {
  const MyCustomLanConfig({
    Key? key,
    required onSuccess,
    required onCancel,
  }) : super(
    key: key,
    onSuccess: onSuccess,
    onCancel: onCancel,
  );

  @override
  State<MyCustomLanConfig> createState() => _MyCustomLanConfigState();
}

/// extends LbSetupLanConnectionConfigState<MyCustomLanConfig>
class _MyCustomLanConfigState extends LbSetupLanConnectionConfigState<MyCustomLanConfig> {


  /// (OPTIONAL) Can also override methods to customize logs, error messages
  /// or add functionalities
  @override
  Future<bool> init() async {
    if (!isInitialized) {
      MyCustomLogger().log(widget: "LbSetupLanConnectionConfigState", method: "init", message: "Init Called");
      isInitialized = true;
      try {
        return initApiCall();
      } catch(e, s) {
        MyCustomLogger().error(widget: "LbSetupLanConnectionConfigState", method: "init", message: e.toString(), stack: s);
        return false;
      }
    }
    return true;
  }

  /// Custom UI for the LAN configuration page
  @override
  Widget build(BuildContext context) {
    return Form(
      key: formKey,
      child: FutureBuilder(
        future: init(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (snapshot.connectionState == ConnectionState.done &&
              snapshot.hasData) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                /// Can customize text with translation etc.
                MyCustomText(
                  text: "first_setup_lan_config".tr(),
                  align: TextAlign.center,
                  fontStyle: FontStyle.italic,
                ),
                SizedBox(height: 4.0.h),
                /// Can customize fields with widgets designed for your app
                MyCustomStringField(
                  value: formData["ipv4"]["address"],
                  label: "ip_address".tr(),
                  placeholder: "192.168.1.100",
                  onSubmit: (value) {
                    var result = UtilsManager.validation.validateIp(value);
                    if (result != null) {
                      return result;
                    }
                    formData["ipv4"]["address"] = value;
                  },
                ),
                SizedBox(height: 2.0.h),
                MyCustomStringField(
                  value: LogbotSetupUiUtils().prefixToSubnet(formData["ipv4"]["prefix"]) ?? "255.255.255.0",
                  label: "subnet_mask".tr(),
                  placeholder: "255.255.255.0",
                  onSubmit: (value) {
                    var result = UtilsManager.validation.validateIp(value);
                    if (result != null) {
                      return result;
                    }
                    formData["ipv4"]["prefix"] = LogbotSetupUiUtils().subnetToPrefix(value) ?? 24;
                  },
                ),
                SizedBox(height: 4.0.h),
                /// Can customize buttons with widget designed for your app
                !isLoading ?
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    FillButton(
                      status: isLoading ? "disabled" : "primary",
                      size: "small",
                      text: "back".tr(),
                      icon: FontAwesomeIcons.arrowUp,
                      onTap: widget.onCancel,
                    ),
                    FillButton(
                      status: isLoading ? "disabled" : "primary",
                      size: "small",
                      text: "next".tr(),
                      icon: FontAwesomeIcons.arrowDown,
                      onTap: submit,
                    ),
                  ],
                ) : const Center(child: CircularProgressIndicator.adaptive()),
              ],
            );
          } else {
            return const Center(
              child: CircularProgressIndicator.adaptive(),
            );
          }
        }
      ),
    );
  }
}

Setup Procedure

The setup procedure can be performed via WiFi or via Bluetooth Low Energy.

1. WiFi Connection: the user must be connected via WiFi to the Access Point that the device generates when is not configured:

SSID: logbot-wifi-ap
Password: password

2. Bluetooth Connection: The unconfigured device shows as a bluetooth device with ID 00000000. The IoT can be discovered direclty in the mobile app within the setup process, but for iOS users, the device must first be paired to the mobile phone from the settings (Settings > Bluetooth). If the IoT is not paired to the phone, an error message will be shown when trying to start the setup procedure.

The setup procedure is a series of 8 steps that start after the connection to the device:

1. License Setup
2. LAN Connection Configuration
3. Main Connection Selection
4. Main Connection Configuration
5. Secondary Connection Selection (Optional)
6. Secondary Connection Configuration (Optional)
7. Access Point Configuration (Optional)
8. Finalization of the Setup and Reboot

The following schema shows the various steps for the configuration of the device, including all the optional steps based on the previously configured connections (es: Access Point cannot be configured if the WiFi is already in use as a connection).

At the end of the configuration of the connection, a Bonjour page is shown and the device is rebooted. After the reboot the device should be configured.

There are some additional steps performed by the Logbot Setup UI to confirm the correct configuration of the device.

1. After the device has rebooted (usually in around a minute), Logbot Discovery is used to scan for devices in the local network. If the device is correcly configured, the device should be visible.
2. If the device is discovered, an healthcheck to the device's Logbot Setup service is performed to confirm that the service is running correctly.
3. If these steps complete successfully, the device has completed the configuration successfully.
4. If these steps do not complete, it doesn't mean the configuration has failed. The device could be still rebooting, or the user is connected to a different network and the device cannot be discovered. If these steps failed but the license activation and rebooting completed, then the configuration completed as a "partial success", meaning that the user will need to manually verify that the device is correctly configured and connecting to Logbot.

If a user was logged in when performing the configuration, and the user has the Editor role, more additional steps are performed:

1. The list of devices owned by the user is downloaded
2. If the device is not present in the list, it means that the device must be registered in the Logbot Platform. The user will be asked to insert the device name and it will be inserted in the device collection of the user.
3. If the device is already registered, the procedure completes.

Tests

To run all tests:

flutter test

Author

Logbot SRL info@logbot.cloud