This document mainly walks you through how to use the Gizwits App Framework for iOS (hereinafter referred as Framework) for rapid App development and testing. Before reading this document, please go through Get started with App development.
The Framework development environment: XCode
The Framework code repository:
The downloaded Framework is shown in the figure below. Double click on the red box to open.
The Framework directory is as follows:
The overall directory structure of the Framework is shown in the following figure. The code is stored under the path “GOpenSourceModules”. According to the functional decomposition of the Framework, it is divided into five major modules with loose coupling between modules. All modules can be removed arbitrarily according to your own needs except the common module “CommonModule”. For example, if push notification is not required, you can delete “PushModule” straightway and comment out related properties and methods used in other classes.
As shown in the above figure, the UIConfig.json file is a global configuration file. Here you can set the configuration information of the project.
Find the Product Key (for example, the figure in “1. Create Product and Define Data Points”), App ID (for example, the second figure in “2. Create Android and iOS App for the product”) and App Secret on Gizwits IoT Cloud Console, and fill in the corresponding fields in the json file, as shown below:
If you want to change the App UI page to a user-defined UI page instead of the page provided by the Framework, you can replace “GosDeviceController” in the following figure to a custom UI page through removing the red box on the right side of the figure and complete the following two steps:
1) Initialize the custom UI page
2) Navigate from deviceListController (device list page) to your custom UI page
After typing the Product Key, App ID, and App Secret correctly, the project can be deployed and executed.
After the successful registration, the use will automatically log in and navigate to My Devices page.
Choose the “Virtual Device” of the corresponding product in left navigation pane of the Developer Center.
Virtual Device: The Gizwits IoT Cloud automatically generates a simulation device that simulates the behavior of reporting data by real devices. Developers can use the virtual device provided by Gizwits for App development when the development of physical devices has not been completed yet.
Choose the menu in the upper right corner and click Scan QR code to bind device.
After scanning successfully, it will navigate to the “My Devices” page. At this time, the “virtual device” that was just scanned will appear on the page.
After navigating to the control page, you will find that it is a blank page. In order to develop App quickly, the Gizwits App Framework has encapsulated user login, device discovery, device connection, and other functions into various standard modules, leaving only control pages for you to build on your own demand, which saves your time. The next section will illustrate how to develop a simple and attractive control page quickly.
Open ControlModule -> GosDeviceControlActivity.java. You can see that the entire control page is very simple, in which only one TextView displays the device MAC address.
According to the created product “Smart Lamp”, the expected UI effect is as follows:
Click the lamp icon on the left page, then the App issues an command to control the light switch. The two icons are swapped for each other when tapped.
Copy the switch pictures that swap the states of the smart lamp to the drawable directory, as shown in the following figure:
1) Open the controller’s xib file - GosDeviceController.xib, delete the Label control, and remove all related code from the GosDeviceController.m file
2) Add a Button control
As shown, drag a Button control to the center of the xib, set the Button’s State Config property to Default, the Image property to light_off.png. When the Button’s State Config property value is selected, the Image property value will be light_on.png.
3) Reference the xib Button in GosDeviceController.m file
At this point the entire page layout is ready.
Define the macro according to the name of the Data Point: DataPointSwitch
Implementing the control logic requires the following three steps:
1) Specify the device delegate
2) Implement the device agreement
3) Issue commands
// Control logic of the button
As shown in the figure, the callback logic is implemented in the device delegate method to swap the switch pictures of the Button.
// Received a device status callback
When going back from the control page to the device list page, you need to take an unsubscribe action. Otherwise, unforeseen errors will occur.
- (void) dealloc
After completing the above code, you can deploy to a mobile phone to test.
1) Issue a command
As shown in the figure, after the App is installed into the mobile phone, it goes to the control page.
Click the icon of the lamp in the App and it will issue a command. At this time, the icon of the App will change to the on-state.
At this point, you can see the App command in the virtual device communication log in Gizwits IoT Cloud, as shown in the following figure:
2) The device actively reports data
As shown in the figure, in the virtual device, change the value of the switch to “0” and click on the push button below. At this point, you can see that there is a record “The virtual device reporting data” in the communication log, indicating that the device reported the data successfully. .
At this time, the button of the lamp on the control page of the App change immediately to the off-state, indicating that the App successfully received the reported data from the device.
See Gizwits App Code Auto-Generator to learn about the functionality of the automatically generated App code.
See “Gizwits App Framework” to grasp
See “App Development SDK” to develop your IoT App
More application development guides