Creation d’une app mobile de manière native avec android sdk et le language kotlin:la suite de la calculette.

Dans notre dernier article (https://itinnovdesign.com/creation-dune-application-mobile-avec-le-framework-microsoft-xamarinune-calculette-avec-c-et-xamarin-form), on a fait pas à pas la creation de la calculette avec le framework Xamarin de Microsoft qui comme Flutter, se permettait de transformer pour nous notre code c# et son framework xml (Xaml) en app mobile native pour android et pour ios, donc avec un seul code, on etait et on est capable de créer deux app, donc une pierre deux coups. Cependant, il y a parfois des exigences ou, pour probleme de performance et d’utilisation maximale des resources du telephone mobile, il faut faire tout nativement sans passer par des solutions intermediaires comme toutes celles qu’on a vu jusque là, par exemple, si on connait au depart que nos utilisateurs ou notre application sera seulement destinée aux utilisateurs de android, ça vaut le coup d’aller directement avec la SDK que met a disposition Google pour android et donc Flutter, Xamarin ou ionic l’utilise pour créer la app.

Dans cet article, allons à la decouverte de kotlin, nous allons reprendre notre calculette et le refaire en Kotlin, le source code est disponible comme toujours sur mon compte github ici (https://github.com/Defcoq/ITINNovDesignCalculetteKotlin)

Pour cela, si vous ne l’avez pas encore fait, telechargez et installez Android studio ici (https://developer.android.com/studio)

Une fois android studio installer, lancez le, et allez dans le menu “Fichier” et créez un nouveau proget

Dans la fenetre successive, choisissez “Empty project” (proget blanc ou vide mon editeur je le met toujours en anglais), android studio a plusieurs template de depart, donc des modeles de app qui contiennent dejà parfois une base solide pour demarrer tout de suite avec une app qui cadre avec les exigences de votre proget, mais ici on part d’une app vide qui contient juste une “Activity” (une activité) principale. Au fait dans le developement native de android, les pages qu’on voit à l’écran sont appéllées “Activity” donc voyez une application native de android comme étant constituée une suite de page qu’on appelle “Activity” et chaque Activity est constitué d’une partie visible que l’on peut ecrire en XML comme dans le cas de Xamarin et on appelle cela une resource de type layout, puis on peut manipuler ce xml dans du code Kotlin ou Java, mais dans cet exemple on utilisera Kotlin car c’est le langage officiel actuellement pour developper natif en android.

Dans la page successive, Inserrez le nom que vous voulez donnez a votre proget et faite le clique sur “Finish”, attention vous devez choisir Kotlin comme language de programmation comme j’ai dit si haut.

Je vais utiliser certaines librairies dans le proget pour m’aider à faire la calculatrice, chaque environnement de developpement à sa manière de specifier ou on met les librairies donc on a besoin, dans Xamarin on par sur nuget, dans android studio, il faut aller sur maven et autres, du moins il suffit de modifier le fichier “build.gradle”, pour cela faite comme dans l’image suivante:

Dans le menu deroulant en haut à gauche, choisissez android, puis cliquez sur build.gradle(le deuxieme comme en image), les librairies donc j’ai besoin vont etre inserrées au fond comme dans l’image ci dessous:

Si vous ne voulez pas l’ajouter à la main, vous pouvez allez dans le menu Fichier=> structure du projet =>

et ajouter toutes les librairies comme ici en image:

Cependant pour faire rapidement, copier le code suivant et remplacer le par le votre :

Une fois cela fait vous devez sincroniser gradle

On doit utliser certains styles im portant, dans l’image ci dessous, accedez au repertoire values

Remplacer le contenu de votre fichier colors.xml par celui ci

Remplacez le contenu de votre fichier string.xml par celui ci

Créez le fichier styles.xml comme en image ci dessus (touche droit new =>xml => values xml file)

copiez et collez le contenu suivant dans ce nouveau fichier:

Ce sont les styles qui seront appliqué dans l’xml de notre calculette sur les boutons qui vont contenir les nombres, vous pouvez jouer avec les tyles en les changeant, le but ici n’est pas d’apprendre de A-Z android mais de demontrer comment on peut faire la meme chose avec plusieurs framework de manière a faire comprendre le debutant pas à pas comment on approche chaque technologies.

Une fois cela fait, comme dans l’image ci dessous, allez dans le repertoire res=> layout => faite double clique sur activity_main.xml

vous devez actualiser la visualisation sur “code” comme en image, car dans android studio, on peut construire graphiquement son interface utilisateur ou bien écrire du xml à la main, comme l’objectif de cet article n’est pas d’enseigner comment utiliser android studio, copiez et collez l’xml suivant dans votre activity:

Je vous laisse le soin de faire un bon design comme vous voulez, si vous basculer un instant sur “design”, vous observerez ceci

Je ne fais pas du graphisme donc pour moi ça va dejà assez bien comme cela, le but étant de reconstruire ici notre meme calculatrice de maniere native avec kotlin.

Ouvrez ensuite le fichier java MainActivity.java comem en image:

Remplacer son contenu par ceci:

Eh voilà c’est fait, pas besoin d’expliquer le language Kotlin car c’est du pure OOP, l’objectif n’est pas de parler du language,.

Connecter votre smartphone sur l’ordinateur, et vous le verrez apparaitre en haut de la barre de navigation de android studio

Lancez la app en cliquant sur le bouton vert (triangle).. et hop vous obtenez ceci de votre telephone:

Graphiquement ce n’est pas très très beau, mais ça fait son boulot, c’est à vous d’utiliser ce que vous avez appris pour ameliorer ce rendu, pour moi c’est dejà une bonne calculette et un bon exemple pour comprendre comment travailler nativement avec android studio et kotlin.

S’il y a des inquiétudes ou des arguments que l’on voudrait voir en detail, il faut commenter sur cet article et j’entrerai en profondeur.

Lisez et partagez.

---

---

Share

Comments (0)

Leave A Comment

Your Name:
Comment: