image

TechnIKO #1 Appeler une méthode Javascript dans une Webview via Kotlin

image
Équipe Android
20 avril 2020

Le TechnIKO, c’est quoi ?

Chez IKOMOBI, nos experts sont tous les jours confrontés à des problématiques nouvelles qui les amènent à concevoir des solutions innovantes pour nos clients. Grâce à TechnIKO nous allons vous faire découvrir les coulisses de ces différentes innovations, au travers notamment la diffusion des techniques et méthodes de développements chères à nos développeurs.

Passons sans attendre à notre premier sujet.

Communiquer avec du Javascript via une WebView au sein d’une application mobile native développée avec Kotlin

Le besoin est simple : l’application native charge une page web, développée par notre client, qui contient des méthodes Javascript, et doit appeler ces méthodes pour effectuer des traitements ou récupérer des données. Par exemple, on peut modifier un style sur la page web via une action dans l’application, ou récupérer une donnée à tracker.

La méthode simple : evaluateJavascript

Cette méthode peut être utilisée si on a besoin d’appeler une méthode javascript de manière isolée, car elle est facile à mettre en place mais peu structurée et très basique, notamment car elle ne permet de recevoir qu’une valeur maximum.

Dans l’exemple suivant, on récupère une Webview de la MainActivity qui appelle une URL, et on utilise un bouton pour récupérer la valeur donnée par une fonction Javascript et l’afficher via un Toast :

val name = "John Doe"
webview.settings.javaScriptEnabled = true
webview.loadUrl(myUrl)
button.setOnClickListener {
    webview.evaluateJavascript("javascript:myJsFunction(\"$name\");") { value ->
        Toast.makeText(this@MainActivity, value, Toast.LENGTH_SHORT).show()
    }
}

Côté web, on a une simple page avec la fonction Javascript demandée :

<script type="text/javascript">
	function myJsFunction(name) {
		return "Hello " + name + "!";
	}
</script>

La méthode musclée : @JavascriptInterface

Cette méthode est légèrement plus complexe à mettre en place et nécessite une version d’Android 16 et supérieure, mais permet de regrouper plusieurs méthodes dans une même classe afin d’avoir un code plus propre et organisé.

Pour l’exemple qui suit, on crée une classe qui agira comme interface Web, afin de tracker un évènement de connexion :

class MyWebInterface(private val context: Context) {
	private lateinit var firebaseAnalytics: FirebaseAnalytics

	init {
	  firebaseAnalytics = FirebaseAnalytics.getInstance(this)
  }

	@JavascriptInterface
  fun userLoggedIn(name: String) {
	  val bundle = bundleFromJson(jsonValue)
	  bundle.putString(FirebaseAnalytics.Param.ITEM_NAME, name)
	  firebaseAnalytics.logEvent(FirebaseAnalytics.Event.LOGIN.name(), bundle)
  }
}

Ce code implique que la page web appellera une méthode Android.userLoggedIn en Javascript, que l’application native interceptera :

<script type="text/javascript">
  // Fonction appelée par la page web
	function onUserLogin(name) {
		// Fonction détectée par Android
		Android.userLoggedIn(name)
	}
</script>

Enfin on lie cette interface à la WebView :

webview.settings.javaScriptEnabled = true
webview.addJavascriptInterface(MyWebInterface(this), "Android")
webview.loadUrl(myUrl)

En conclusion, il est très facile de lier Javascript et le natif Kotlin au sein d’une application mobile Android. Il ne reste plus qu’à choisir la bonne méthode :

  • Une seule fonction simple à appeler ? On utilisera evaluateJavascript
  • Plusieurs fonctions et des retours à traiter ? On préfèrera @JavascriptInterface

N’hésitez pas à nous contacter si vous souhaitez en savoir plus ou mettre à profit tout notre savoir-faire en conception, réalisation et exploitation d’applications mobiles natives.

image
image
Jason Dejaégère
27 novembre 2020
UI design

Tendances et inspirations UI du moment dans le monde digital #1

Bien le bonjour ! 🖖 C’est avec grand plaisir qu’IKOMOBI vous présente sa nouvelle série mensuelle. Vous vous demandez de quoi ça parle ? Et bien, c’est tout simple. Cette série est un condensé des sites ou applications qui ont marqué, interpelé voire impressionné les membres du studio design. Une sélection d’une dizaine d’interfaces innovantes, […]
image
image
Carl-Stephan Parent
26 novembre 2020
Marketing digital

3 avantages marketing incontournables qu’offre une application mobile en 2020.

Traditionnelles, ou bien tout ou partie digitales, aucune organisation n’échappe aujourd’hui à la question de la place qu’il convient d’octroyer au mobile au sein de sa stratégie digitale. Depuis maintenant plus de dix ans, le champ des possibles offert par les applications mobiles n’a eu cesse de s’agrandir, offrant toujours plus d’opportunités de créer un […]
image
image
Carl-Stephan Parent
26 novembre 2020
Développement application mobile

Avec MAUI, Microsoft achève l’intégration de son framework de développement d’applications mobiles à la plateforme .NET

Xamarin.Forms évolue en .NET Multi-platform App User Interface (MAUI). Cet article nous donne tout d’abord l’opportunité de revenir sur l’histoire de Xamarin et les principaux points forts du framework mobile de Microsoft. Nous vous présentons les changements prévus prochainement et les raisons de cette évolution stratégique pour l’éditeur de Redmond. De Xamarin à Xamarin.Forms : […]
image
image
Bérengère Noël
20 octobre 2020
UX design

Comment le design UX permet de transformer le parcours client pour répondre aux nouvelles attentes des consommateurs dans le secteur du m-commerce alimentaire ?

Concevoir des parcours clients percutants pour répondre aux nouvelles attentes des consommateurs Un grand groupe européen dans le domaine du retail alimentaire a fait appel au Studio UX Design d’IKOMOBI afin d’être accompagné dans la conception d’une nouvelle application mobile m-commerce. À l’heure du tout digital, les enseignes redoublent d’efforts pour répondre aux nouvelles attentes […]
image
image
Carl-Stephan Parent
24 septembre 2020
UX design

Transformation digitale, amélioration continue et application mobile

Le précédent numéro d’Ikonnect, la newsletter mensuelle d’Ikomobi, vous a donné l’opportunité de découvrir une nouvelle application mobile conçue et réalisée par les pôles Design UX et Android. Le succès rencontré par cette app, dont la vocation principale est de faciliter la gestion des rayons de magasins, a encouragé la direction de Cora à poursuivre […]
image
image
Carl-Stephan Parent
27 août 2020
IKOMOBI

Une app pour donner un vrai coup de pouce aux collaborateurs et mieux gérer les rayons du magasin. Vous êtes un retailer et vous en rêvez ? Cora et Ikomobi l’ont fait !

Pour faire face aux services popularisés par les géants du e-commerce (on pense à Amazon notamment avec Amazon Fresh ou Prime Now) ou les nouvelles enseignes spécialisées, le magasin traditionnel n’a pas d’autres choix que de se réinventer pour proposer une expérience fortement teintée de digital en phase avec les attentes des consommateurs d’aujourd’hui. Un […]
image
image
Équipe Android
16 juillet 2020
Développement application mobile

Faut-il migrer vers Jetpack / Android X ?

Pour assurer la rétrocompatibilité des applications mobiles avec le système Android, Google s’appuyait sur une bibliothèque de composants intitulée Android Support. La firme de Mountain View invite désormais à migrer les applications mobiles Android vers Jetpack et ses bibliothèques Android X.  Pourquoi faut-il procéder à cette migration dans les meilleurs délais ? À compter de […]
image
image
Équipe iOS
16 juillet 2020
Développement application mobile

TechnIKO #3 : Comment tester les push iOS simplement ?

Tester les notifications push sur iOS peut être un exercice très fastidieux : Configurer l’application pour qu’elle accepte les push Créer les certificats de push en conséquence Les uploader sur la plateforme utilisée pour gérer l’envoi des push (par exemple Accengage) Trouver le token de son device et créer un segment avec Configurer la push […]
image
image
Carl-Stephan Parent
16 juillet 2020
UX design

Le pôle Design UX d’Ikomobi imagine les nouveaux parcours de souscription online pour une enseigne spécialiste du crédit à la consommation

Proposer des parcours clients efficaces pour se distinguer au sein d’un marché très concurrentiel  Le crédit à la consommation est un marché fortement concurrentiel en France et à l’international. Il est constitué des banques de détail traditionnelles, de leurs filiales spécialisées (BNP Paribas Personal Finance, BPCE financement, Franfinance…) et des banques en ligne qui se […]
image
image
IKOMOBI
25 juin 2020
Développement application mobile

Click and collect : Ikomobi conçoit et réalise en un temps record, une application mobile pour l’enseigne de restauration Fée maison

Comme vous le savez, le click and collect (ou retrait sur point de vente) c’est ce nouveau parcours malin qui permet de passer commande depuis un site e-commerce, un e-shop dédié ou bien depuis une application mobile, puis de récupérer ses achats à un créneau horaire donné. L’intérêt suscité par ce nouveau service a été […]
image
image
Jason Dejaégère
25 juin 2020
Développement site web

L’intégration, une phase clé à ne pas négliger pour la bonne réalisation d’un site web RWD

Le processus de réalisation d’un site Internet RWD (Responsive Web Design) obéit à un enchaînement précis de procédures bien connu des professionnels du web. En synthèse, tout commence par la conception des écrans et se termine par la mise en ligne du projet. La procédure d’intégration est une étape moins connue. Elle assure pourtant la […]
Message bien envoyé !