À la découverte des Widgets avec React Native sur iOS

Et bien bonne année !

Certes je vous la souhaite un peu tardivement mais janvier c’est toujours le mois de la reprise, de la planification de l’année et de la reprise de contact avec un petit peu tout le monde. Sans parler des galettes … bref 😛

Aujourd’hui je voulais vous parler d’un petit outil bien pratique apparu sur iOS 14 : les widgets.

Personnellement j’en utilise beaucoup pour des applications me donnant des infos en un coup d’oeil comme la météo, la liste de tâches du jour, le calendrier, etc …

C’est vraiment pratique et naturellement j’ai eu envie de savoir “mais comment ça fonctionne” ?

On ne se refait pas 😀. J’ai donc mis le nez dans le code et voici ce que je peux vous dire.

Créer un widget natif

Vous vous en doutez React Native peut faire beaucoup de choses pour nous mais il a tout de même ses limites. Ici on parle de créer un widget qui s’exécute sur le téléphone directement et malheureusement on ne pourra pas le développer directement en Javascript/Typescript via RN. Il faut donc ouvrir Xcode et se préparer à faire un peu de Swift/Objective-C.

Rassurez-vous c’est un langage très simple d’accès pour un développeur web et on se fait très vite à la syntaxe.

Mais avant toute chose on va utiliser le template fourni par Xcode directement.

Pour cela il suffit d’aller dans File > New > Target et de sélectionner “Widget Extension”.

Vous obtiendrez directement les fichiers générés ainsi qu’un widget fonctionnel vous affichant un émoji et l’heure actuelle.

Parfait ! C’est déjà la moitié de ce qu’on veut 😛

Maintenant il faut pouvoir connecter notre widget à l’application de base et pour ce faire nous allons les placer dans le même groupe.

Ajouter une capability aux 2 projets de cette façon :

Sélectionnez App Groups puis donnez-lui un nom reconnaissable

Répétez exactement la même manipulation sur la Target correspondant au Widget (ici “CryptoWidgetExtension”).

Votre widget est désormais lié à votre application. 🙂

Rendre dynamique notre widget

Pour afficher une valeur qui change régulièrement j’ai choisi de prendre celle du Bitcoin en Euro (ça fait beaucoup parler en ce moment je crois).

Pour ce faire on a plusieurs solutions :

• On fait un appel à une API depuis le widget qui nous renvoie directement le prix à afficher
• On fait l’appel à l’API depuis notre application React Native qui elle va ensuite transmettre la valeur à notre widget.

Partons du plus simple et faisons la première

On va donc ajouter une méthode en swift dans notre widget permettant de récupérer le prix sur une API :

Maintenant il faut qu’on adapte notre Widget pour qu’il prenne en compte cette valeur :

Ce code est déjà majoritairement fourni dès l’initialisation du widget. Je n’ai fait qu’ajouter la valeur bitcoinPrice dans chaque partie nécessaire à la configuration ainsi que sur la vue finale afin d’avoir un encart affichant “Bitcoin Price” suivi de la valeur.

Vous pouvez maintenant lancer l’application et vous verrez la valeur provenant de l’API s’afficher sur le widget. 😛

“Ok super mais comment j’actualise ça régulièrement pour que ce soit à jour ?”

Et bien je vous répondrai que c’est déjà le cas. Dans iOS il est prévu que les widgets soient réactualisés régulièrement (environ 15 minutes) afin de pouvoir à la fois avoir des données correctes mais aussi préserver la mémoire et la batterie. C’est bien fait non ? 😀

Faire un pont entre React Native et iOS

Bon tout ça est bien joli mais en l’état actuel on a tout fait sous Xcode en Swift/Objective-C. Il serait peut-être temps de faire un peu de React Native vous ne croyez pas ?

Si vous ne le saviez pas il y a une étape intermédiaire à préparer pour faire passer des fonctions entre React Native et iOS (ou Android également). Cela fait l’équivalent d’un pont entre les deux technologies. Pour ce faire nous allons utiliser les Native Modules.

Vous pouvez ici suivre la documentation complète car elle répond parfaitement à ce que nous souhaitons faire : stocker une valeur provenant de React Native et la rendre accessible depuis iOS. 🙂

La partie qui nous intéresse surtout dans notre cas c’est que cette valeur soit transmise à nouveau vers le widget lorsque celui-ci est ré-actualisé par le système.

Pour cela nous allons rajouter une méthode dans le code de notre widget :

Cette méthode consiste à dire au wiget “récupère moi la valeur inscrite dans la clé “myKey” provenant du groupe partagé “group.com.boreales.crypto”. Autrement dit la valeur provenant de l’application et donc par extension de React Native dans notre cas.

N’oubliez pas également de mettre à jour l’appel à la fonction dans la méthode timeline écrite précédemment :

Côté RN justement, on peut imaginer une méthode comme celle-ci. Le but étant surtout de transmettre une valeur via le NativeStorage :

Voilà, vous pouvez clean et rebuild votre application sous Xcode, tout relancer et normalement votre valeur affichée dans le widget provient désormais directement de l’application React Native. C’est elle qui fait l’appel à l’API pour récupérer le prix et le widget se contente d’afficher la valeur.

“Ok c’est cool ça fonctionne. On a fini ?” Et bien presque il manque encore une petite étape 😛

Actualiser la donnée en arrière-plan

Imaginez que vous ayez installé l’application, ajouté le widget à votre écran et puis vous allez boire un café. 15 minutes plus tard, l’heure de votre widget s’est bien actualisée mais … horreur le prix du BTC est resté le même.

Aurait-il décidé d’être moins volatile et de se calmer avec l’âge ? 🤔

Non il s’agit plutôt d’un “bug” dans votre application. Effectivement pour que la valeur s’actualise il faut que … l’application React Native puisse s’actualiser régulièrement elle aussi.

Pour cela on doit passer par une autre fonction d’iOS, à savoir : Background Modes.

Retournons ajouter cette nouvelle capacity dans Xcode. Sélectionnez ensuite les deux cases suivantes :

Grâce à cela nous allons pouvoir utiliser ce package :

Une fois encore suivez la documentation et surtout n’oubliez pas de suivre également celle spécifique à iOS juste ici.

On peut maintenant réadapter notre code React Native pour utiliser les fonctions d’arrière-plan :

Voilà ! Toutes les 15 minutes environ l’application refera un appel à l’API via les fonctions Background d’iOS afin de mettre à jour la valeur stockée. Puis le widget suivra son fonctionnement standard en se mettant à jour automatiquement et en réaffichant la nouvelle valeur, soit le prix du Bitcoin actuel. 🙂

C’était un article plutôt technique avec beaucoup de code pour une fois mais j’ai trouvé intéressant le cheminement d’une donnée à travers un langage cross-platform, une application native et un widget.

Je vous laisse il paraît qu’il faut faire des crêpes bientôt ! 🥞