Team:BIT/Software

Click on other areas to close the home directory

Software
1 Abstract
【Objective】
The software module of this project needs to build a smart phone-based real-time detection operation platform which can support biosensor module and sliding SlipChip module, and has various capabilities suitable for end-user experience to meet the needs of even the inspection scene. Due to the high development cost of the traditional platform and the need to meet the needs of instrument miniaturization caused by the inconvenience of carrying large instruments, today's smart phones are popular all over the world and mobile phones have rich and diverse means of data communication and can realize Bluetooth interaction. and taking into account the convenience of the WeChat terminal of today's mobile phone, the convenience of WeChat Mini Programs to provide interface for development and the portability of WeChat Mini Programs. The project team intends to use the design WeChat Mini Programs to achieve the acquisition of fluorescence data, the interaction of the detection process, the presentation of test results and the completion of intelligent human-computer interaction and control.
【Methods】
We plan to use WeChat Mini Programs developer tool to realize interactive control and communication based on WeChat Mini Programs with computer programming language and Bluetooth communication technology. it includes the guidance of the detection process and the realization of Bluetooth control instructions, the acquisition of fluorescence data, the display of temperature control and temperature control curves, and the conversion of test data and the display of test results.
【Results】
By combining the relevant technologies of WeChat Mini Programs, we have completed the system design based on WeChat Mini Programs, the implementation of the system based on WeChat Mini Program and the deployment and test of the system based on WeChat Mini Program. The Mini Program interface is simple and easy to understand, and the layout is reasonable and perfect. The operation has process guidance and integrity, reasonable use of Bluetooth for communication and real-time accurate feedback on temperature changes (accurate to.). The rigorous modeling formula is used to show the final test results, and the interactive control and communication based on WeChat Mini Programs are obtained to meet the needs of the project.
2 Introduction of WeChat mini-program’s related techniques
This module mainly introduces the related technologies involved in the interactive control and communication system based on WeChat Mini Programs, including the development and background development of WeChat Mini Programs, so it mainly involves WeChat Mini Programs related technology and server related technology.
2.1 Brief introduction
WeChat Mini Programs is a new way to connect users and services, it can be easily obtained and spread in WeChat, do not need to download and install, just scan or search with WeChat to use the experience, with an excellent experience. At the same time, WeChat Mini Programs provides a simple and efficient application development framework and rich components and API to help developers develop services with native APP experience in WeChat.
WeChat Mini Programs is composed of five modules, which has the advantages of easy to use, easy to develop, cross-platform operation and rapid distribution and iteration. Its positioning is very clear-to do applications with low frequency and simple business logic, and has a complementary relationship with native APP. WeChat Mini Programs has his own set of development code, which is written through WeChat developer tools.
2.2 Developer Tools
In traditional web browsers, when a html5 page is loaded, the html and CCS of the view layer are loaded first, then the JavaScript of the logical layer is loaded, and then the data is returned and the page is displayed in the browser. The system layer of WeChat developer tools is based on NativeSystem, and the view layer and logic layer are loaded at the same time. WeChat mini-program’s logic greatly optimizes the response speed of the page, reduces the waiting time for page loading, and improves the user experience. WeChat developer tools can achieve a complete set of processes such as synchronizing local files, development and debugging, compilation and preview, upload, release and so on.
2.3 Framework construction
In order to make developers focus on the logical level of the code and data processing, WeChat Mini Programs also provides two solutions, one is events, the other is data transmission. Both schemes are located between the view layer and the logic layer of the Mini Program framework. After the interaction in the view layer, the user passes it to the logic layer to process the data, and returns the data to the view layer to feedback to the user. For the development and design of WeChat Mini Programs view layer, Mini Program officially provides a series of components, these basic components can greatly help developers to complete the development of view layer. At the same time, for the development of the logical layer, Mini Program officially provides a series of API to facilitate developers to request some additional features.
3 Interactive Control and Communication Meter based on WeChat Mini Programs
3.1 Requirement Analysis of Interactive Control and Communication based on WeChat Mini Programs
Taking into account the convenience of the current mobile WeChat terminal and the portability of WeChat Mini Programs, the project team through the design of WeChat Mini Programs to achieve manipulation to obtain fluorescence detection data, Bluetooth interactive control, show the temperature control process curve and achieve the presentation of test results. At the same time, in order to make full use of the convenience and popularity of Mini Program compared with web pages, Mini Program can also add teams and project introductions, so that users can understand the project better, and is beneficial to the promotion and promotion of the project, so that interaction control and communication based on WeChat Mini Programs have multiple functions such as publicity and detection.
3.2 Function Design of Interactive Control and Communication function based on WeChat Mini Programs
This project requires the use of smart phones, users use software to communicate with the hardware to realize Bluetooth connection, Bluetooth control SlipChip sliding and putter expansion, Bluetooth temperature control and real-time temperature change curve measurement, fluorescence detection value acquisition and conversion, test results calculation and display, at the same time, users can also realize the operation process and interface interaction through mobile phone software. This project intends to choose WeChat Mini Programs to achieve the target function, and its functional design is shown in the following figure.
4 Realization of Interactive Control and Communication reality based on WeChat Mini Programs
In the third section of the software module, we design four functional modules in detail: team introduction, project introduction, receiving data and display through Bluetooth control device, and test result presentation interface. These functions will be realized below.
4.1 Implementation steps
4.1.1 System framework
The system framework design is mainly based on the functional design of different main columns in the above functional design, respectively build the corresponding file framework, build the wxss,js,json,wxml file of each page, and do the corresponding initialization. JSON is a data format, not a programming language, and JSON plays a statically configured role in Mini Program. Programming uses a combination of WXML+WXSS+JS, in which WXML is used to describe the structure of the current page, WXSS is used to describe the appearance of the page, JS is usually used to deal with the interaction between the page and the user, respond to user clicks, get the location of the user, and so on. In Mini Program, the user's actions are handled by writing JS script files.
4.1.2 View layer design
View layer design needs to design different columns according to the content to be displayed on each page, taking into account pictures, text and other ways of expression, at the same time, considering that Mini Program is limited by the page size compared with the web page, therefore, a reasonable column design on one side will help users to browse the corresponding content quickly. According to the functional requirements, the main interface of Mini Program is divided into four modules, and four different functional pages are converted through the lower column of Mini Program. The final page of the view layer design is rendered as shown in the pictures corresponding to each function.
▪️ Column1——function:Team Introudtion
Interface: this module is designed to show the main information of IGEM_BIT and Wuhan IGEM_YIYE. The logo and name of the two teams are displayed side by side at the top of the page. At the same time, select buttons are set under the team logo, and users can click the button to browse more information about the corresponding team, including team profile, team background, etc., and its text and picture typesetting will be displayed in the form of normal official account articles. The user can switch the lower introduction content by switching the button below the team sign.
Implementation: the button uses the button component, and the user clicks on the button to generate a click signal, which can be associated with a written JavaScript function that makes Mini Program jump to the appropriate page. When users click different buttons, they can go to different pages。








Fig. 7 Team introduction
▪️ Column2——function：Project Introduction
Interface: there are two additional navigation bars on this page for the project introduction of bit team and YIYE team respectively. Users can read the project introduction by flipping the screen after selecting one of them. The subtitle sub-column is mainly consistent with the wiki project introduction, including overview, biology, hardware, HP and so on.
Implementation:the navigation bar can use the tabbar component to set icons, text, clicked icons and text for each page. The main body of the page is designed as a static page, the text is displayed with text tags, and the pictures are displayed with image tags. And use wxss for typesetting optimization.







▪️ Column3——function：Control the device through Bluetooth to achieve specific functions
Interface: on this page, the user can mainly achieve the following three functions, and the instructions are sent by Bluetooth.
（1）Scan and connect Bluetooth: click the button on the page to view the scanned Bluetooth device, including address and device name, etc. You can select the device to connect
（2）Control the slide of the SlipChip and the movement of the micro telescopic rod: there is a button on the page. Pressing the button Mini Program will send an instruction, and you can control the slide of the SlipChip and the movement of the telescopic rod.
（3）Control temperature: there is a button in the operation interface. Press the button, and Mini Program will instruct the temperature control module to start working and get the temperature control curve at the same time.



Fig. 9 Bluetooth control interface
Realization: the user clicks the start detection button, Mini Program prompts to apply for Bluetooth permission, after success, scan the surrounding Bluetooth devices, and display each device information, such as name, address and so on. The user clicks on the corresponding device and tries to connect. After the connection is successful, Mini Program will remind you to manually fix the sliding SlipChip, and then go to the next interface-the control interface. The control interface has many buttons, all of which are button components and are associated with the js function. In the control interface module, the user can operate according to the steps guided by Mini Program. Click the button in the interface, Mini Program will send specific data via Bluetooth.
▪️ Column4——function：Receive data and Test result
Interface:This page shows the collected data and detection results received through Bluetooth. After the completion of the Crispr response, Mini Program automatically receives the data through Bluetooth, converts the data through the curve, and then substitutes it into the modeling comprehensive scoring model to calculate the results. At the same time, the interface jumps from column 3 to column 4, and the specific calculation results and grades are displayed on this page. At the same time, the user can manually switch back to column 3 at the bottom to continue to adjust the detection, and column 4 retains the resultsof the last test.
Realization：After the user has finished the control, you can click the result View button to enter this page, and then Mini Program, as a client, accepts the information. The information presentation page consists of pictures and text. The received information is processed by JavaScript, and the processed data is presented using text and image tags. Users can also click the button button to return to the control interface.
4.1.3 Design of logic layer
JS scripts work at the logical layer. The logic layer uses JsCore threads to run JS scripts. There are multiple interfaces in a Mini Program, so there are multiple WebView threads in the rendering layer. The communication between these two threads will be transferred through the WeChat client, and the network request sent by the logic layer will also be forwarded through the WeChat client.
The WeChat client downloads the entire Mini Program code package locally before opening it. Then you can know all the page paths of the current Mini Program through the pages field of app.json. So WeChat client will load the home page code, through some of the underlying mechanisms of Mini Program, you can render the home page.
The Page in the Js file is a page constructor that generates a page. When the page is generated, the Mini Program framework renders the data with index.wxml to render the final structure, thus getting what Mini Program looks like. After rendering the interface, the page instance will receive an onLoad callback in which Mini Program can handle the logic.
4.1.4 System function realization
To make it easy for developers to call up the capabilities provided by WeChat, Mini Program Development Framework provides rich native API of WeChat, which can easily call up the capabilities provided by WeChat, such as access to user information, local storage, payment functions and so on.
For Bluetooth, Mini Program provides the Bluetooth capabilities of each platform to developers through a unified interface package. Using the Bluetooth interface of Mini Program, you can exchange data with other Bluetooth devices wirelessly.
In Mini Program, to use Bluetooth capability (except Beacon), you must first call wx.openBluetoothAdapter to initialize the Bluetooth adapter module, which takes effect from calling wx.openBluetoothAdapter to calling wx.closeBluetoothAdapter or Mini Program is destroyed. Only when the Mini Program Bluetooth adapter module takes effect can the developer call the Bluetooth-related Mini Program API normally and receive the event callback related to the Bluetooth module (binding monitoring is not subject to this restriction)
Each Bluetooth peripheral is identified by a unique deviceId. Due to the limitations of part of the system implementation, for the same Bluetooth peripheral, the deviceId obtained by scanning on different central devices may change. Therefore, deviceId cannot be hard-coded into the code and can only be chosen by the user. After the connection is successful, call wx.writeBLECharacteristicValue to send data in the effective period
5.The deployment and testing of interactive control and communication department and trial based on WeChat applet based on letter process
5.1 System deployment
When the system is developed and implemented in the locally built development environment, the system background is deployed to the local server to carry out certain debugging work and verification testing. The characteristic of this system is that the WeChat end interacts with the SlipChip through the Bluetooth serial port, and the user controls the operation of the SlipChip through WeChat Mini Programs. At this time, the system will send a data request to WeChat mini-program’s server, and Mini Program uses the Bluetooth control SlipChip. The data will be automatically returned to Mini Program and presented on the WeChat terminal after the SlipChip pictures are collected and processed.
5.2 System test
5.2.1 System function test
Tests can be divided into different classes according to different angles, as shown in the following figure.
Static testing is to check the correctness of the system by analyzing the syntax of the source program, which has been completed in the process of system implementation, and a preliminary self-test has been carried out in the process of developing each functional module. Therefore, the dynamic testing method is mainly used to test the various functions and the overall operation of the system. In the process of dynamic testing of the system, unit testing is used to test all the functional modules of the system one by one to ensure that each module can run independently, and then the system is integrated tested. ensure that all functional modules can work together without any conflicts. After testing, the actual results of all functions are consistent with the expected results.
5.2.2 System performance testing and compatibility testing
As almost all the mobile terminal devices used by users are iOS mobile phones and Android mobile phones, but considering the difficulty of iOS Bluetooth connection operation, this test will use Android mobile phones to verify whether the display effect of the system and the function of the system are normal and smooth. After testing, the system can run well and smoothly on the Android device, and can carry out adaptive layout according to the device resolution and screen size to ensure the user experience. At the same time, various functional modules can also be used normally.
6 A practical example of interactive control and communication based on WeChat Mini Programs
6.1 Video used by the mini program
6.1.1video used by column1 and 2
Video description:
        (1) Click the "team introduction" column, you can see the team logo of IGEM, BIT team and YiYe team. Select the team under the team label to view the detailed introduction of each team.
        (2) Click the "Project introduction" column, you can select BIT team or YiYe team in the interface, and then you can see the project description of each team.
6.1.2 video used by column3 and 4
Video description:
        (1) After selecting to start detection, Mini Program prompts the operator for Bluetooth connection.
        (2) After completing the previous step, Mini Program reminds the operator to fix the sliding SlipChip manually and prompts the operator to click the button to realize Bluetooth dragging the sliding SlipChip to let the freeze-dried beads fall.
        (3) After completing the previous step, Mini Program reminds the operator to add the sample and the reagent needed for the LAMP reaction, and prompts the operator to click the button to realize the sliding sealing reagent of the Bluetooth control SlipChip, then raise the temperature to 67 ℃ for the LAMP reaction, and lower the temperature to 30 ℃ after 20 minutes to carry out the LAMP reaction.
        (4) After the reaction is completed, Mini Program reminds the operator to click the button and slide with the Bluetooth control SlipChip to align the injection port with the main reaction chamber to add the reagent.
        (5) After completing the previous step, Mini Program reminds the operator to add the reagent needed for the crisper reaction and click the button, slide the SlipChip again, let the main reaction chamber be sealed, carry out the crisper reaction, and then automatically control the telescopic rod to scan.
(6) After completing the above steps, Mini Program automatically collects the data and calculates it for display. The interface displays the comprehensive scoring model of modeling, and gives the comprehensive scoring and grading.














Creat BY Beijing Institute of Technology

Contact us

Follow us

E-mail:igem_bit@outlook.com