background
Visualization burial point is an essential part of burial point (circle selection burial point), shenze, GrowingIO and other realized the commercialization of visualization burial point. Some big companies expect to use their own resources to achieve a set of their own visualization of all buried points, and then go!
Technology selection
The data collection part of the visualization buried point is basically open source, including the magic strategy, so we use the magic strategy SDK for data collection part, and the Web console part is charged, so what we need to do is to develop a set of Web side
Implementation details
First, let’s tease out the SDK logic
1. We need to configure Scheme first in the project, and open the switch of visualization full buried point when initializing shence SDK, run the project to mobile phone 2, scan the qr code at the entrance of the Web console to open a webpage with a button, click the button to call a Scheme link 3, which will directly open our APP. After receiving it, APP parses the URL part in this scheme, which is the data upload address
If cancel is selected, the process terminates. If continue is selected, the preset class structure JSON will be read. Then timer 5 will be started, and the timer will obtain page information, screenshots and element data every second, including hash encoding
6, if the same hash, explain the page elements have no any change, the most basic information page needs to be sent to the server to 7, if the hash, notes page elements have update, the need to parse the page information, reset the hash, 8 pages of information will be sent via post request to the server, can carry out encrypted page information
Above, the process of the client SDK is sorted out
Secondly, we sort out the logic on the Web side
1. When the APP scans the code, it will access a URL (QR code is URL). After the Web is accessed, the timer will be started and a request will be sent to the server every second. The element enableAppClick=True will be translated to div. Ignore 4 for other elements, and click on the div element to circle. What the user actually sees is a whole image, manipulating transparent divs; When the circle is turned on, the timer is paused and the buried point 5 can be set. If the circle is turned on, the timer is restarted and data 6 continues to be synchronized. The buried point contains a filter by position that is calculated according to the element_position property
conclusion
The overall logic of god policy is sorted out, but after thinking, I found that this implementation is not good. Why a central server? SDK to save data, Web to request data? Why not have the SDK interact directly with the Web? Probably because shence charge service fees to control ah, so it can not be decentralized. Everyone in the research, can be SDK collection, and then through websocket and the Web side directly contact, no need to save through the server side.