Tuto : Créer une application de son site WordPress avec ClickTeam Fusion 2.5 en 15 mn

Créer une application Android en 15 minutes

0
138

 

Aujourd’hui je vais vous expliquer comment créer une application Android pour votre site sous WordPress. Il existe plusieurs services qui le feront pour vous mais c’est relativement cher et c’est quand même plus sympa de le faire vous même.

Pour créer l’application, nous allons utiliser le logiciel Clickteam fusion 2.5. Il s’agit d’un logiciel pour la création de jeux et d’applications sans avoir besoin de coder. Si vous avez profité du humble bundle a 15$, votre application vous coûtera quasi rien.

Avant de se lancer dans la réalisation de l’application en elle même, il faut préparer votre site pour optimiser l’affichage, en effet il sera plus agréable de n’avoir ni header, ni footer et éventuellement pas de widget. Le plus simple pour cette étape est de créer un thème enfant au thème que vous utilisez dans lequel vous enlever les affichages superflus (pour la création d’un thème enfant je vous laisse chercher des infos par vous même si vous ne connaissez pas).

creation-application-wordpress-fusion-16Il faudra que votre application utilise le
thème optimisé, il existe un plugin WordPress pour ça, UserAgent Themes Switcher. Une fois ce dernier installé et activé, sélectionnez votre thème modifié et donner un nom au user agent qui y sera associé. notez ce nom, il nous l’utiliserons par la suite.

 

 

 

 

A présent, lancez Clickteam et créez un nouveau projet. Dans les propriétés de l’application sélectionnez application Android comme type de construction (on part du principe que vous avez acquis le module Android bien sur).creation-application-wordpress-fusion-1

On va définir une fenêtre de taille 480×800 et cliquer redimensionner l’affichage pour remplir la fenêtre.creation-application-wordpress-fusion-2

Enfin dans l’onglet Android, on définis l’affichage sur étirer a la taille de l’écran et on coche la permission « internet »
creation-application-wordpress-fusion-3 creation-application-wordpress-fusion-4

Votre application va maintenant s’adapter aux différentes résolutions et avoir un accès a internet.

Pour ce tuto, nous utiliserons une seule page (ou scène). Insérez successivement 3 objets; un décor, un compteur et un web view object.

creation-application-wordpress-fusion-6

Le web view object a pour fonction d’afficher votre site.

Le decor et le compteur seront utilisés pour afficher une animation le temps que votre site se charge dans le web view object. Ce n’est pas obligatoire mais cela va eviter qu’il y ai un ecran blanc au lancement de l’application. Pour ce tuto, je vais prendre une durée de 4 secondes, ce qui est suffisant pour que la page soit completement chargée.

Dans les proprietés du web view object, on entre une position en 0,0 et une taille de 480×0 afin de cacher cet objet au demarrage.creation-application-wordpress-fusion-7

Pour l’objet décor, utilisez une image comme le logo de votre site.

Dans les propriétés de creation-application-wordpress-fusion-13l’objet compteur, entrez les valeurs et l’affiche comme sur l’image ci-contre. Il va se présenter sous la forme d’une barre horizontale qui va se remplir pendant 4 secondes.

Centrez la barre sous votre image ou logo.

 

 

 

L’interface est prête, reste a faire fonctionner tout ça. Le logiciel utilise les événements pour interagir avec votre application. Par exemple, à l’événement « le Timer arrive à 4 secondes » l’objet web view va remplir la fenêtre.

On commence donc par l’événement « En début de scène », et pour l’objet web view, on définie le user-agent préalablement utilisé dans WordPress pour que dans l’action suivante « load URL », l’application charge le thème optimisé.creation-application-wordpress-fusion-10

Ensuite toutes les 1/100 de secondes, on augmente le compteur de 1.

creation-application-wordpress-fusion-15

Et pour finir, 4 secondes après le lancement de l’application, on définie la taille verticale de l’objet web view a 800 et on demande que la page chargée s’adapte a la taille de l’écran.

creation-application-wordpress-fusion-14

Il ne vous reste plus qu’a construire l’apk et installer ce dernier sur votre smartphone.

Pour l’instant l’application est très basique, mais rien ne vous empêche de rajouter des fonctions, des boutons pour naviguer ou un menu.

Vous pouvez télécharger le fichier mfa de ce tuto ici

Vous pouvez également télécharger l’apk de l’application « Mes astuces geek » ici

 

LAISSER UN COMMENTAIRE