Comment convertir son site web en apk android

Dans ce post, nous allons faire pas à pas la conversion d’un site web en version mobile android, donc partir d’un site web frontend (fait seulement des pages HTML +CSS +JS pas de code coté serveur comme du php ou laravel ou aspx etc.. juste un site avec du pure frontend cela peut etre aussi un frontend Angular/React/Vuejs).

Tout d’abord, tout par de ma page sur ce post (https://www.facebook.com/permalink.php?story_fbid=1467213370331791&id=100011294258548) ou j’essayes d’expliquer à mes followers les differentes possibilités pour partir d’un site web et produire une apk de android qu’on peut installer sur son telephone et meme deployer sur le playStore.

prerequis :

1. Avoir android studio ou la SDK de android installé dans sa machine (https://developer.android.com/studio)
2. Avoir nodejs installé dans sa machine car on doit utilisé cordova qui est une bibliothèque javascript present dans npm de nodejs qui permet de pouvoir executer un site web frontend dans une composante native des telephones que ça soit android ou Ios qu’on appelle webview (https://nodejs.org/en/download/)
3. J’ai egalement preparé un site web frontend de demo qui ne contient que HTML+CSS+JS uniquement telechargez le ici (https://drive.google.com/file/d/1ipAKMqH2bJOeg_Ts-hpLCkOeXk2tpxB5/view?usp=sharing)

Procedez comme suit:

Ouvrez un terminale de commande (cmd) ou tout simplement ouvrez powershel, sur windows ça ressemble à ceci

Dans powershell, positionnez vous dans le repertoire ou vous voulez crée le projet cordova en tappant cd “cheminDuRepertoire” par exemple chez moi j’ai tappé ceci (CheminDuRepertoire chez moi c’est “C:WorkspaceRepocordova”):

une fois dans ce repertoire, installons globalement une fois dans notre ordinateur, la bibliothèque de cordova en tappant la commande suivante

npm install -g cordova

une fois la bibliothèque de cordova installé globalement dans notre machine, c’est partit pour la creation de notre projet cordova, en tappant la commande suivante:

cordova create democreationapk

cette commande va vous crée un projet nodejs appellé (democreationapk dans le repertoire vous pouvez appeller votre projet comme vous voulez)supportant cordova, il suffit de tapper en suite

cd democreationapk

dir

la premiere comamnde nous permet de naviguer dans le repertoire ou se trouve notre nouveau projet et la seconde c’est juste pour lister ce que contient ce repertoire, on voit bien que la commande de cordova create a bien fait son travail et nous a crée des fichiers.

Comme nous voulons crée une apk android, allons y et tappez maintenant la commande:

cordova platform add android

Comme vous pouvez le immaginez, cette commande ajoute tout ce donc on a besoin pour creer une apk android, justement elle vous ajoute un projet de android studio qu’on peut le manipuler meme directement dans andoid studio. s’il etait question de créer une ipa donc une app iOs et non android il fallait tapper plutot cordova platform add ios mais il faut avoir Xcode le compilateur de ios sur sa machine donc il faut le faire sur MAC pas sur window, si on veut ajouter les deux à la fois on tappe juste cordova platform add android ios

Eh voilà si on retappe

dir

on voit bien que on a beaucoup plus de chose dans notre repertoire.

le repertoire www, c’est la bas qu’on va copier et coller tout notre site web frontend (HTML+CSS+JS), donc si vous avez telechargez mon site de demo ou si vous avez le votre, dezipper le puis copier le contenu de ce site et coller et remplacer par ce qui se trouve dans le repertoire www generer par cordova, chez moi sur mon disque dure j’ai remplacé et j’ai ceci:

ça y est on est maintenant pret pour generer notre fameux apk, rentrer sur powershell et tappez la commande suivante:

cordova build

eh voilà quand le build de cordova finit il nous indique exactement ou il a crée la apk comme en image suivante:

La apk s’appelle “app-debug.apk”, je suis allé dans ce repertoire et je l’ai renomé en “democreationapk.apk” que je partage d’ailleur avec vous ici pour l’installer directement dans votre telephone et voir que mon site web est bel et bien devenu une apk android (https://drive.google.com/file/d/18Yq2gGoXBHt9qMf2YQjUFtOPJVTlVArw/view?usp=sharing)

c’est à vous de rendre le site responsible et de ressembler beaucoup à une vrai app et non seulement un site web, c’est pourquoi, de preference pour faire les app mobile avec les technologies web, on prefere utiliser ionic/angular qui contient des composantes web plus proches des composantes natives des telephones mobiles que ce soit android ou ios et s’adapte à la webview et l’utilisateur ne peut absolument se rendre compte qu’il s’agit plutot d’un site web et non une apk natif, d’ailleur la moitié des app sur les stores sont fait avec ionic, ce sera d’ailleur l’objet de la prochaine demo.

lisez et partagez et surtout commentez.

Bon coding

---

---

Share

Comments (3)

Leave A Comment

Your Name:
Comment: