Installer Ionic

1. Installer NodeJs

2. Installer Ionic depuis une ligne de commandes

      npm install -g @ionic/cli
   

Installer Django

1. Installer Python

2. Installer Django depuis une ligne de commandes

      py -m pip install Django
   

Installer VirtualEnv pour utiliser des environnements virtuels Python

1. Installer virutalenv si ce n’est pas déjà le cas

      pip install virtualenv
   

2. Rentrer dans le dossier du projet et créer un environnement virtuel si ça n’a pas été fait précédemment. Ex

      virtualenv venv
   

Après cette ligne de commandes nous devrons avoir un nouveau dossier venv à la racine de notre projet

3. Activer l’environnement virtuel depuis une ligne de commandes

      .\venv\Scripts\activate
   

4. Maintenant nous pouvons lancer la ligne de commande ci-dessous pour s’assurer que tous les packages Pÿthon sont installés pour notre projet dans notre environnement virtuel:

       pip install -r requirements
   

Création d’un projet Django

(Vidéo référence du tutoriel)

On commence par créer une application avec le nom souhaité. Par exemple: api_app.

       django-admin startproject api_app

Ensuite nous rentrons dans le dossier de notre application Django, en l’occurence api_app et on crée une nouvelle application principale, par exemple mainapp

       python manage.py startapp mainapp

Afin de pouvoir "brancher" notre app principale mainapp à l’app Django nous devons éditer le fichier settings.py et dans INSTALLED_APPS nous ajoutons à la dernière ligne notre app et nous en profitons aussi pour ajouter les corsheaders. Comme dans l’exemple ci-dessous:

       INSTALLED_APPS = [ ..,  'mainapp', 'corsheaders',]

Si on veut pouvoir accéder à l’api depuis le frontend il faut aussi ajouter dans le même fichiers les champs suivants:

       MIDDLEWARE = [ .., 'corsheaders.middleware.CorsMiddleware',]
       CORS_ORIGIN_ALLOW_ALL = False
       CORS_ORIGIN_WHITELIST = ('http://localhost:8100',)

Maintenant nous pouvons lancer l’api en exécutant la ligne de commandes ci-dessous:

      python manage.py runserver

Egalement on peut lui indiquer le port sur lequel on veut la lancer. Ex:

      python manager.py runserver 3000

Un petit exemple de comment faire une migration de la base de donnée:

     python manage.py makemigrations mainapp
     python manage.py migrate mainapp

Création d’un projet Ionic

On revient dans le dossier racine de notre projet et nous créons un projet Ionic (ex: web_app) comme dans l’exemple ci-dessous:

      ionic start --no-git web_app

Nous choisissons ensuite le framework sur lequel nous souhaitons travailler: Angular, ReactJS, Vue. Dans notre cas: Angular

(Attention: On est pas obligés de créer un compte Ionic)

Si on fait attention le plugin Capacitor s’installera aussi en même temps que le reste. Ce plugin sert à générer le code source natif de n’import quelle plateforme mobile(android, ios). Ex:

       ionic capacitor add android

ou

       ionic capacitor add ios

Après avoir fait tout ça il nous reste la dernière étape: lancer l’app Ionic:

       ionic serve