This roundup is a review of a previous mobile project. The development mode of Hybrid App is adopted, H5 page is developed at the front end, and some methods of native application are called through JSBridge to realize the functions of the project. For example, call native application bluetooth module methods to communicate with other hardware facilities.

Project introduction

Project functions

The network distribution and management of the router can be realized through the mobile phone client, which is also a product trial of the team. The subsequent planning is to build an “intelligent networking” ecosystem based on this router project.

To configure a traditional router, you need to connect to the router through a PC, access the specified IP address, and configure the router network. The function of this project is that we can complete these operations with our usual mobile phones, which is very convenient and fast.

(PS: This method of mobile phone configuration is very popular now. This project was done at the end of 2017. At that time, it should be said that this method of configuration was just emerging.

Roles and contributions

The project involved two to three people in the front end, one in the back end, five in hardware development, and two to three in testing. I am mainly responsible for the front-end development of router network configuration functions, including bluetooth network configuration and local network configuration functions of routers.

The development process

It was the first time to develop this kind of hardware-related mobile terminal project. We had to solve the difficult problems of mobile terminal development while solving the problems in the hardware development process, especially the debugging problems. For example, the debugging depends on the cooperation of hardware engineers, the local development environment cannot debug the Bluetooth function, and it is not convenient to view the Bluetooth debug log. The problem of debugging is equivalent to affecting the efficiency of development, and it is difficult to find the cause of the problem and then solve it.

Problems encountered and solutions

I. Debugging depends on the cooperation of hardware engineers

During front-end development, the router needs to be in a certain state, such as local page environment building, Bluetooth search failure, network successfully configured, network reset. At this time, it is necessary to log in to the console of the router for setting. In the case of not knowing the Settings of the console of the router, hardware development engineers need to cooperate to complete these operations every time. However, when the front-end debugging, they may not have time, and they also have development tasks themselves, so they cannot allocate energy. This leads to front-end debugging is not too smooth, affecting the development schedule.

In order to solve this problem and ensure the development progress of the project, we learned the knowledge of router console configuration from hardware engineers, completed the configuration of the router console by ourselves, and logged in to the router console through SSH to set the routing status required by front-end debugging. This not only liberates the hardware development engineer, the front-end can also be more independent to complete the development work, to ensure the development schedule.

There is no way to debug bluetooth function in the local development environment

There are two main points in this question:

  1. There is no way to debug bluetooth in the local development (web browser) environment. To debug Bluetooth, you need to open a web page in the mobile application.
    • Normally, you can access the test package of the application to access the project page for debugging, but in this way, you need to send the code to the test environment every time to debug the effect, which seriously affects the development efficiency and also affects the testing of the test students.
    • Instead, scan the QR code of the local page through the mobile app to open the web page in the mobile app to debug the Bluetooth function.
  2. During the binding process, the router is bound to the application account, so you need to log in first. The local development environment does not have login, so there are also login problems.
    • How to get the login information, and can normally request data.
    • To log in, you can get a usable Token through the test environment of single sign-on, and then the problem is how to get the Token to the back end, and the interface return has cross-domain problems because it involves different domains.

How to give the Token to the backend first? The solution is as follows: Determine whether it is the local development environment, and then manually pass cookies to the NodeJS service. The NodeJS service determines that it is the interface to request the daily environment, and the Cookie data contains login data, so it uses this login data to log in, and then the interface can request data normally. (Below is the flow chart of the request process)

At this time, when the data is returned to the front end, there is a cross-domain problem. You need to add cross-domain header information in the returned response header to prevent the browser from intercepting the request result because of cross-domain problem.

res.header('Access-Control-Allow-Origin'.'request.origin');
res.header('Access-Control-Allow-Credentials'.'true'); // Allow the server to send Cookie data
res.header('Access-Control-Allow-Methods'.'GET,POST');
Copy the code

This completely solves the problem that the local development environment has no way to debug bluetooth function.

3. It is inconvenient to view bluetooth debug logs

There are three points to this question:

  1. Bluetooth debug log itself is not convenient to view, have to connect the phone to the computer, and then scan a two-dimensional code page to see the Bluetooth connection log.
  2. Compatibility problem, this method only supports iOS terminal, android terminal can not view, you need to print console.log to debug.
  3. It is convenient and real-time. Since the mobile phone can only be connected to the computer and scanned, it is not convenient. After the test student reported a bug during the test, he could not get the log information at that time, which affected the problem investigation.

Solution:

  1. You collect it yourself, you design the display.
  2. Collection process
    • Use a separate MobX store for logging information.
    • Classify log information, such as Success, Warnning, Error, and log.
    • The log list has a maximum number of entries that exceed the number of entries in the shift list header.
  3. The log shows
    • There is a log display component.
    • Judgments are only displayed in the development environment.
    • The initial is a button, placed in the lower right corner (support Settings), does not affect the page operation. Click the button to display the log information in full screen. Supports filtering log types and specific log information.

(The following is the flow chart of log collection and display)

The result of solving the problem

Before, due to debugging problems, the bluetooth debugging process was very painful, and the debugging process was slow and the cause of the problem could not be found. As a result, the success rate of Bluetooth network configuration was not high all the time. After the debugging problem was solved, the success rate of Bluetooth network configuration increased from 4.50% to about 98%, ensuring the user experience.

A small summary

  1. What are the technical details to focus on in this project?
    • After the completion of the project, I successfully demonstrated the network configuration process in the team’s weekly meeting, which was also the first time for the team to do such a hardware-related mobile terminal project, which felt quite meaningful.
    • Debugging is a very important part of the development process, which directly affects the development rhythm and development experience of the project, so we need to focus on solving this problem.

Photo by eberhard grossgasteiger on Unsplash