[ad_1]

L’application Thingsquare est désormais disponible pour fonctionner dans le navigateur – et vous pouvez faire de même pour vos produits.

Lisez la suite pour obtenir des informations techniques sur la façon de procéder pour votre produit également.

Dans le système Thingsquare, chaque appareil est connecté à un backend. Le backend est un logiciel qui s’exécute soit sur un serveur cloud, soit sur un appareil périphérique local.

Le serveur principal expose un DU REPOS API avec laquelle les applications peuvent interagir. Mais le backend fournit également un ensemble d’interfaces avec lesquelles les utilisateurs peuvent interagir directement.

Les périphériques sans fil se connectent à un serveur principal qui expose un DU REPOS API et un ensemble d’interfaces pour l’interaction de l’utilisateur.

Chaque frontend a un frontend identifiant. Cet identifiant de frontend est accessible via une URL Web, qui affichera tous les fichiers HTML stockés dans le frontend. L’URL est une concaténation de l’ID du frontend et de l’URL du serveur qui héberge le frontend.

Par exemple, le frontend identifiant que nous utilisons pour les exemples d’API REST dans la documentation du développeur Thingsquare sont accessibles via https://0ac48bf3-9fab-4bad-8455-e394808eda6b.developer.thingsquare.com/.

Ce frontend URL peut être intégré soit dans une application pour smartphone, comme les applications de visualisation d’appareils Thingsquare pour Android et iOS, soit dans une page Web. Ci-dessous, nous expliquons comment intégrer dans une page Web.

Développer une nouvelle interface à partir de zéro demande beaucoup de travail. le HTML et le code Javascript qui interagit avec l’utilisateur doit être développé, et le code Javascript qui interagit avec l’API REST doit être développé et testé.

Pour faciliter la vie des développeurs, nous fournissons le code de l’application de visualisation d’appareils Thingsquare comme point de départ. Ce code peut être cloné via la console développeur, récupéré via le référentiel git du produit et modifié manuellement. En règle générale, vous souhaiterez peut-être changer le logo ou changer la couleur de l’application. Le nouveau frontend peut ensuite être intégré dans une application pour smartphone ou sur une page Web.

Pour cloner le frontend de la visionneuse d’appareils Thingsquare, ouvrez la console développeur, accédez à la Frontends vue, créez une nouvelle interface avec le + et appuyez sur le bouton Clone bouton. Cela écrasera tout code frontal existant, mais comme l’historique est stocké dans le référentiel git, il est assez facile de récupérer si cela aurait dû être fait par erreur.

Pour intégrer une interface sur une page Web, il suffit de créer un iframe qui contient le URL du frontend que nous souhaitons montrer.

Dans ce cas, le frontend URL est https://b72af87d-42d7-4f09-bf8c-b9f721a3e6ef.developer.thingsquare.com/. Nous intégrons cela dans une page Web avec le HTML code ci-dessous:

<!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>

Ce code crée un iframe qui couvre toute la fenêtre du navigateur et qui pointe vers notre frontend URL.

Cette HTML fichier, mais avec votre propre URL frontend, peut ensuite être placé sur votre fournisseur d’hébergement Web préféré et vous êtes prêt à partir!

le iframe peut également être intégré directement dans une page Web, comme ci-dessous:

Dans ce cas, le code est simplement:

<iframe src="https://b72af87d-42d7-4f09-bf8c-b9f721a3e6ef.developer.thingsquare.com/"
style="width:100%;height:700px;border:0px;">
</iframe>

Le résultat final peut être vu ici:

Il s’agit de l’interface du visualiseur de périphériques Thingsquare intégrée dans une page Web, exactement de la même manière que celle décrite ci-dessus.

PS: Intégration d’une interface utilisateur dans une application native pour smartphone

L’intégration d’une interface sur une page Web n’est pas la seule façon de procéder. Nous pouvons faire la même chose mais pour une application native aussi. Cela nous permet d’interagir avec les BLE et les périphériques réseau aussi.

Parce qu’un frontend est un HTML/ CSS / JS combo, les interfaces peuvent être intégrées dans une application native Android et iOS via un mécanisme comme une UIWebView iOS ou une WebView Android. Mais les applications natives ont la capacité d’interagir avec les BLE et les périphériques réseau. L’application de visualisation d’appareils Thingsquare est implémentée via un mécanisme WebView, étendu avec des crochets pour les communications BLE et réseau natives. Le SDK Thingsquare contient le code source complet de ces applications, pour faciliter le développement de vos propres applications basées sur l’application de visualisation de l’appareil Thingsquare, mais avec votre propre code frontal.