By Fredrik Rosendal, Thingsquare CTOThe Thingsquare app is now available for running in the browser – and you can do the same for your products.
Read on for technical information on how to do this for your product too.
Background: Backends and Frontends
In the Thingsquare system, every device is connected to a backend. The backend is a piece of software that runs either on a cloud server or on a local edge device.
The backend server exposes a REST API that applications can interact with. But the backend also provides a set of frontends that users can interact with directly.
The wireless devices connect to a backend server that exposes a REST API and a set of frontends for user interaction.
Each frontend has a frontend ID. This frontend ID can be accessed through a web URL, which will show any HTML files stored in the frontend. The URL is a concatenation of the frontend ID and the server URL that hosts the frontend.
For example, the frontend ID that we use for the REST API examples in the Thingsquare developer documentation can be accessed via https://0ac48bf3-9fab-4bad-8455-e394808eda6b.developer.thingsquare.com/.
This frontend URL can be embedded either in a smartphone app, such as the Thingsquare device viewer apps for Android and iOS, or in a web page. Below we discuss how to embed in a web page.
Using the Thingsquare Frontend as a Starting Point
Developing a new frontend from scratch is a lot of work. The HTML and Javascript code that interacts with the user must be developed, and the Javascript code that interacts with the REST API has to be developed and tested.
To make life easier for developers, we provide the code for the Thingsquare device viewer app as a starting point. This code can be cloned through the developer console, retrieved via the product’s git repository, and edited manually. Typically, you may want to switch the logo or change the color of the app. The new frontend can then be embedded in a smartphone app or on a web page.
To clone the Thingsquare device viewer frontend, open the developer console, go to the Frontends view, create a new frontend with the + button, and tap the Clone button. This will overwrite any existing frontend code, but because the history is stored in the git repository, it is easy enough to recover if this should have been done in error.
Embedding a User Frontend as a Web Page
To embed a frontend on a web page, we simply need to create an iframe that contains the URL of the frontend we wish to show.
In this case, the frontend URL is https://b72af87d-42d7-4f09-bf8c-b9f721a3e6ef.developer.thingsquare.com/. We embed this in a web page with the HTML code below:
<!DOCTYPE html>
<html>
<head>
<title>Thingsquare Web App</title>
<body style="margin:0px;">
<div style="position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;">
<iframe src="https://b72af87d-42d7-4f09-bf8c-b9f721a3e6ef.developer.thingsquare.com/"
style="width:100%;height:100%;border:0px;">
</iframe>
</div>
</body>
</html>This code creates an iframe that covers the entire browser window and that points to our frontend URL.
This HTML file, but with your own frontend URL, can then be placed on your favorite web hosting provider and you are ready to go!
The iframe can also be embedded directly inside a web page, as below:
In this case, the code is simply:
<iframe src="https://b72af87d-42d7-4f09-bf8c-b9f721a3e6ef.developer.thingsquare.com/"
style="width:100%;height:700px;border:0px;">
</iframe>The End Result
The final result can be seen here:
This is the Thingsquare device viewer frontend embedded in a web page, in the exact same way as discussed above.
PS: Embedding a User Frontend in a Native Smartphone App
Embedding a frontend on a web page is not the only way to go. We can do the same but for a native app too. This allows us to interact with local BLE and network devices too.
Because a frontend is an HTML/CSS/JS combo, frontends can be embedded in a native Android and iOS app through a mechanism as an iOS UIWebView or an Android WebView. But native apps have the ability to interact with local BLE and network devices. The Thingsquare device viewer app is implemented through a WebView mechanism, extended with hooks for native BLE and network communication. The Thingsquare SDK contains the full source code to these apps, to make it easy to develop your own apps based on the Thingsquare device viewer app, but with your own frontend code.
