Restez sur la bonne voie avec notre changelog

Si vous souhaitez être averti lorsque notre équipe planifie/publie de nouvelles fonctionnalités techniques ou si vous utilisez notre API et que vous voulez vous assurer que notre nouvelle fonctionnalité ne cassera pas votre code, nous vous conseillons de vous abonner au canal changelog.

 

Application Hello

Créer facilement une application Hello.

Tout au long de cet article, nous allons passer en revue la création d'une application Hello de base.

L’application présentera :

  • Une API simple pour installer/configurer/désinstaller l'application
  • Une utilisation simple du SDK javascript

Votre fiche information éditeur

Nous supposons que vous avez rempli votre fiche d'information éditeur. Vous pouvez consulter la section dédiée Compléter les informations éditeur .

Déclarer l'application

Pour déclarer une App, vous aurez besoin d'un accès Administrateur :

  • Connectez-vous en tant qu'administrateur
  • Aller dans Administration > Espace Développeur
  • Cliquez sur le bouton '+'

Nous ne remplirons pas tous les champs :

  • Nom: choisissez un nom
  • Code d'application : choisissez une référence en minuscules sans espaces
  • Url de l'app : l'URL de  votre serveur qui traitera les requêtes entrantes. Nous pouvons mettre une valeur fictive pour l'instant.

Une fois que vous avez enregistré,vous obtenez 2 identifiants uniques qui seront nécessaires pour l'installation de l'application et les appels API ultérieurs :

  • Référence: un code en lecture seule commençant par 'APP' affiché en bas à gauche de la page configuration de l’application.
  • clef: un code en lecture seule qui contient 20 caractères.

 

Code

 Le code de HELLO APP

Vous pouvez trouver un exemple de code d'application ici.

Le code est structuré comme suit :

boondmanager.php Un fichier pour pour gérer la signedRequest avec la "public function signedRequestDecode" et les opérations liés aux appels d'API avec la "public function callApi.
index.php Notre fichier principale de l'App qui traite toutes les requêtes.
init.php Déclaration des constantes nécessaires à notre App :
  • APP_KEY : le code qui contient 21 caractères.
  • APP_REFERENCE: la référence commençant par "APP" en bas à gauche de la page configuration de l’application.
  • APP_CODE: facultatif. Utilisé si vous limitez l'accès à votre application via un code.
README.md Contient habituellement des informations importantes sur le projet

Nous fournissons également un SDK javascript que vous pouvez consulter ici. Il est temporairement hébergé sur Github mais nous le rendrons disponible très prochainement sur https://ui.boondmanager.com/sdk/boondmanager.js). Il reste accessible et utilisable en tant que script externe dans la page de l'application. Cette section décrit ses fonctions plus en détail.

Remarques sur index.php

    • $_REQUEST['script'] est le résultat des règles de réécriture où nous stockons l'Endpoint dans une variable.
    • $_REQUEST['function'] est le résultat des règles de réécriture où nous stockons le paramètre de la fonction .
    • Dans cette application, l'appToken est automatiquement stocké dans un fichier appToken.txt. Nous vous recommandons de stocker le token pour une utilisation en production de manière plus sécurisée. Assurez-vous que vos scripts ont un accès en écriture à leur répertoire. L'installation réussira même si l'écriture dans appToken.txt échoue.
  • Comment l’appel à /install est géré:
define('APP_CODE', your_APP_CODE_here);
// handles the first request with the installationCode
if($data && isset($data['installationCode']) && $data['installationCode'] == APP_CODE) { ... }
         
// handles the second request with the appToken
if($data && isset($data['appToken']) && isset($data['clientToken']) && isset($data['clientName'])) { ... }

Lors de l'installation d'une application, 2 requêtes POST sont envoyées aux Endpoint  d'installation de l'application . Il doit gérer les 2 cas. Seule la première requête contient un installationCode.

Configuration requise pour le serveur Web

L'application devra être hébergée sur l'un de vos serveurs. Pour pouvoir utiliser l'exemple de code, nous aurons besoin de :

  • PHP
  • TLS activé sur un serveur
  • Un serveur HTTP

Un certificat auto-signé est acceptable pour les tests mais pas pour la production. Si vous exposez votre certificat auto-signé à internet, les visiteurs de votre site seront accueillis par des avertissements de sécurité.

À des fins de test, vous pouvez utiliser une instance Amazon AWS. Nous recommandons ces étapes :

Réécriture d'URL

Nous fournissons un fichier .htacess pour Apache2 ou httpd qui présente un ensemble de règles de réécriture. Vous pouvez copier les règles dans votre fichier .htaccess et les adapter à votre structure de répertoire spécifique.

Une fois que le serveur est prêt, vous pouvez placer le code de l'application dans un répertoire servi par le serveur HTTP.

Test de la configuration de votre application

Entrez les constantes déclarées dans le fichier init.php avec les valeurs notées lors de la déclaration de votre App.

Testez l'URL de base de votre application dans un navigateur pour vérifier qu'elle est accessible.

Compléter le profil de votre application

Maintenant que votre application est accessible :

  • Aller sur le Marketplace
  • Ouvrez le profil de votre nouvelle application
  • Cliquez sur Modifier
  • Mettez à jour les champs URL de l'application avec l'URL de base de votre application (Cependant si vous utilisez le fichier ".htaccess" fournit, votre URL devra ce terminer par un "/").

Installation de l'application

  • Aller sur le Marketplace
  • Ouvrez le profil de votre application
  • Cliquez sur Installer

Une fois le processus d'installation terminé, l'application devrait être disponible parmi vos applications. Vous pouvez voir les applications installées en accédant à la page Mes applications (Menu utilisateur > Administration > Apps / Marketplace).

Activation de l'application

L'application doit être activée pour chaque Manager :

  • Aller à Managers/Roles
  • Accéder au profil d'un manager
  • Cliquez sur le rôle du manager. Il affichera la section App.
  • Activer l'App pour le manager

Test de l'application depuis Boondmanager

Maintenant que votre application est installée et activée pour un gestionnaire spécifique, nous pouvons la tester :

  • Connectez-vous en utilisant les informations d'identification de ce gestionnaire
  • Allez dans administration > Apps / Marketplace. Votre application devrait être disponible.
  • Ouvrir l'App pour afficher sa page (cf voir le cas par défaut dans index.php
SDK Javascript

Nous fournissons un SDK javascript que vous pouvez consulter ici. Nous vous recommandons de l'utiliser dans la page de l'application, comme indiqué dans l'application Hello.

Cette section décrit les fonctions qu'elle expose plus en détail.

Fonctions disponibles

Actuellement, notre SDK javascript expose les fonctions suivantes :

Une fonction Courte description
 init

  Initialise l'iframe à l'aide d'un tableau associatif facultatif contenant :

  • mainDivId: la div principale de votre iframe.  Il est utilisé pour traiter la hauteur et la largeur de l'iframe.
  • targetOrigin: URL de votre hébergeur d'applications
 redirect

  Rediriger vers une page dans Boondmanager. Il peut prendre des URLs relatives comme paramètres

 setSize   Définit la hauteur (heigth) de l'iframe.
 setAutoResize   Définit la taille aux dimensions de mainDivId.
 scrollTo   Effectue un défilement dans Boondmanager.
 confirm   Affiche un mode de confirmation et renvoie une Promesse avec le choix de l'utilisateur.
 alert   Displays an information modale
 setSaveButtonEnabled   Active/désactive le bouton Enregistrer dans le formulaire actuel affiché dans Boondmanager.
 onBeforeSave   Hook déclenché avant l'enregistrement. S'il retourne false l'exécution est interrompue.
 onBeforeValidate   Hook déclenché avant validation, par exemple, valider une feuille de temps, si il retourne "false" l'exécution est interrompue.
 onAfterSave   Hook déclenché après l'enregistrement. N'interrompt pas l'exécution.
 onAfterValidate   Hook déclenché après validation. N'interrompt pas l'exécution.
 getModel   Récupérer le modèle de la vue courante.

 

Usage

Charger le SDK dans votre application

Utilisation des balises de script :

<script type="text/javascript" src="https://ui.boondmanager.com/sdk/boondmanager.js"></script>

Si par hasard cette URL renvoie un 404, veuillez nous en informer. Vous pouvez toujours importer le fichier directement après avoir téléchargé la dernière version disponible sur Github

<script type="text/javascript" src="boondmanager.js"></script>


Gestion des spécificités d'IE : placez cet extrait dans le corps de votre page

<div id="div_mask"></div>
<div id="div_modalmessage"></div>
<script type="text/javascript">
    if (navigator.appName=='Microsoft Internet Explorer')
        document.write('<iframe id="frame_mask" frameborder="0" scrolling="no" src="about:blank" style="filter:alpha(opacity=0);"></iframe>');
</script> <div id="frame_output"> <!-- Your own HTML Code --> </div>

 

Initialisation :

Votre page sera affichée dans un iFrame. Mettez le code suivant dans le corps de votre page.

<script type="text/javascript">
BoondManager.init({
targetOrigin : '*'
}).then(() => {
BoondManager.setAutoResize();
});
</script>

 

 

Initialisation  de l'application

L'initialisation de l'application doit être le premier appel effectué à une fonction SDK. La fonction init() a les paramètres suivants :

Paramètre Description Type
payload

Un objet JSON avec les attributs facultatifs suivants :

  • mainDivId: identifiant de la div principale dans votre iframe. Il est utilisé pour traiter la hauteur et la largeur de l'iframe.
  • targetOrigin: URL de votre hôte d'applications, l'origine de la fenêtre parente de votre application.
Objet

 

BoondManager.init(payload);

 

Affichage d'un modal d'alerte

La fonction alert() a les paramètres suivants :

Paramètre Description Type
  alert_message

  Un message HTML

String
  title

  Le titre du modal

String
  bOK

 Javascript à exécuter lorsque l'utilisateur cliquera sur le bouton [OK]  

String

 

BoondManager.alert(alert_message, title, bOK)

 

Affichage d'un modal de confirmation

La fonction confirm() a les paramètres suivants :

Paramètre Description Type
  confirm_message

  Un message HTML

String
  title

  Le titre du modal

String
  bYES

 Javascript à exécuter lorsque l'utilisateur cliquera sur le bouton [OK] 

String
  bNO

 Javascript à exécuter lorsque l'utilisateur cliquera sur le bouton [Non] 

String 

 

BoondManager.confirm(confirm_message, title, bYES, bNO)

 

Redirection vers une autre page

La fonction redirect() a les paramètres suivants :

Paramètre Description Type
  url

  l'URL

String

 

BoondManager.redirect(url)

 

Redimensionner l'iFrame du parent à la bonne hauteur

La fonction setAutoResize() ne peut pas être utilisée lorsque l'application dispose d'un bouton d'accès à partir d'un iFrame

Il n'a pas de paramètres :

BoondManager.setAutoResize();

 

Redimensionner l'iFrame du parent à une hauteur spécifique

La fonction setSize() ne peut pas être utilisée lorsque l'application dispose d'un bouton d'accès à partir d'un iFrame

Il a les paramètres suivants :

Paramètre Description Type
  height

 Hauteur spécifique en pixels

Integer

 

BoondManager.setSize(height);

 

Faire défiler l'iFrame du parent vers une position spécifique

 La fonction scrollTo() a les paramètres suivants :

Paramètre Description Type
  height

  Hauteur spécifique en pixels

Integer

 

BoondManager.scrollTo(height)

 

 

Nous espérons que cet article vous a été utile et nous vous invitons grandement à nous l'indiquer en votant juste en dessous.

S'il vous reste des questions sans réponse alors n'hésitez surtout pas à contacter notre service Support qui reste à votre écoute :

Contacter le support

Tel : (+33) 03 62 27 61 05

Boondmanager-Mascot-Desk-lg.png

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 1

Commentaires

0 commentaire

Vous devez vous connecter pour laisser un commentaire.