Hey, nous voilà dans un nouveau tutorial. Il s’agit ici de décrire comment utiliser le modèle que je vous ai concocté pour mettre en place rapidement un projet avec une partie Frontend et Backend. Ce tutoriel est plutôt destiné aux développeurs FullStack.

Petite histoire pour commencer :

Cela fait plus d’un an que je fais des sides-projects (la plupart pour me permettre de renouer avec la technique :)), et à chaque fois c’est toujours le même besoin. Connecter une application web à un serveur avec au minimum une authentification. Sur l’ensemble des sides-projects, le but est de coder plutôt rapidement sans réinventer la roue afin d’arriver sur un prototype pour exposer l’idée. Et là, tu vas me dire, il suffit d’utiliser des outils No-Code. Oui, certes. Mais avant tout, je suis un dev qui n’a pas envie d’être limité et qui ne veut pas faire que du clickodrome.

Il y a deux technologies que j’apprécie bien :

• D’abord, c’est le Python avec le Framework Django qui dispose notamment d’API REST et d’une interface d’admin utlra-complète et customisable.
• Ensuite, c’est VueJs: je le pratique depuis un an et c’est un vrai régal. Pour un développeur qui n’aime pas trop s’embêter avec le design, c’est royal.

J’ai cherché à plusieurs reprises un modèle pouvant lier les deux, j’ai donc pris des informations de différentes sources (projet git, stackoverflow, ..) et BOOOOOOM! Je suis arrivé sur ce modèle. Certes pas parfait mais qui est utilisable !

Organisation de l’article :

L’article sera divisé en plusieurs parties, combien ? Je ne sais pas .

Mais pourquoi ?

Au fur et à mesure de mes avancées, je vais essayer de faire évoluer ce modèle pour qu’il puisse :

• être utilisé directement sur l’OS voulu (cette première partie avec npm et python)
• être utilisé dans un environnement dockerisé pour le debug mais aussi pour la production
• être toujours de plus en plus sécuritaire
• être évolutif pour répondre à plusieurs besoins
• être inclus dans une VM prête à être utilisée pour le dev ou la prod
• … pour répondre à vos demandes :)

Dans ce tutorial, tu ne vas pas apprendre:

• à coder en python
• à comprendre tous les fondements du Framework Django
• à coder en VueJs
• à comprendre toutes les subtilités des Framework utilisés

Par contre, tu vas apprendre :

• A utiliser le Framework Django en créant des API REST, tout en étant authentifié ou non
• A utiliser et mettre en place l’interface d’admin Django de façon simple
• A coder un frontend qui communiquera avec Django REST

Descriptif des fonctionnalités du modèle

Un petit descriptif des fonctions importantes du modèle Frontend s’impose:

• Tu as le nécessaire pour faire de l’internalisation de façon dynamique
• Tu as déjà une page de sign-up, sign-in, forgot password, token (JWT)
• Tu as un découpage du projet par bloc (views, components, helpers, plugins,…)
• Tu as un bus d’évènements global au projet pour que tes composants puissent échanger des informations
• Tu as des exemples avec un appel API REST authentifié et non authentifié
• Le reste, c’est à toi de le coder :)

Un petit descriptif des fonctions importantes du modèle Backend s’impose:

• Tu as le nécessaire des API REST pour créer un compte, te logguer, te délogguer, de faire un reset du password tout en associant un service type MailJet pour l’envoi des emails aux utilisateurs
• Tu as une documentation de ton API REST avec swagger, tu peux donc imaginer relier d’autres services pour se connecter sur ton backend.
• Tu as un un blocage de ton API si un user anonyme ou authentifié te spam de requête REST ainsi que la gestion des corsheaders, de la configuration de ton Token JWT (expiration,…)
• Une Fake Login page pour les bots qui crawlent ton backend
• Une interface d’admin plutôt simple à utiliser. On peut utiliser une librairie d’export/import des tables sous Django via du CSV, Excel (du moment que tes tables ne sont pas trop imbriquées).
• Le reste c’est à toi de le coder :)

Allez, arrête de parler et montre-moi :

Jazys/TempplateVueJsDjangoSaas
_Template for making project with backend and frontend - Jazys/TempplateVueJsDjangoSaas_github.com

Clone le projet sur ton environnement via Git (tu connais j’espère ! :)) et rends toi dans le dossier cloné.

Suis les instructions suivantes :

Là tu as normalement tes deux services qui tournent, un sur le port 8080 pour la page web, et l’autre sur le port 8000 pour l’API REST.

Explication de l’exécution du service Web.

Pour la partie Front, tu arrives sur une page web, qui te permet de faire une requête liée à la Table CustomRole (modèle Django si authentifié) ou d’appeler une requête REST qui te retourne une donnée simple sans interaction avec un modèle.

Je souhaite ajouter de nouveaux Modèles dans mon Backend, comment faire ?

Une bonne image vaut des fois mieux qu’un grand discours. L’image n’est pas de moi mais je la trouve très explicite.

Ce site explique très bien comment faire fonctionner l’API REST avec le Framework Django. Il y a beaucoup de littérature sur le sujet, donc je ne vais pas m’attarder là dessus.

En résumé :

• Tu crées ton modèle de données dans models.py. En résumé c’est la définition de ta table en base de données, quel champ, quel type ….
• Tu crées le serializer de ton modèle dans serializers.py. En gros, ça te permet d’indiquer la structure de données que tu souhaites retourner quand tu fais un appel à une URL
• Tu crées ta view dans views.py par rapport à ton modèle et ton serializer. Là, tu définis la ou les fonctions auxquelles tu auras le droit: du GET, POST, PATCH ,….. Quand tu fais un appel à une API REST, le retour t’est donné par ce que tu as écrit. I.e c’est le code métier que tu vas écrire…
• Tu crées dans Django la route qui te permet d’appeler cette API dans urls.py
• tu crées les tests qui vont bien … Oui ça c’est quand tu as le temps !!! Enfin non, il faut toujours le faire.

Et pour la partie WEB ?

C’est assez simple aussi, tu as besoin de :

• Crées tes views ou tes components
• Crées tes routes pour pouvoir afficher tes vues
• Crées des requêtes pour te connecter aux API REST (répertoire api)

Cette première partie est terminée. Elle t’a permis de prendre le modèle en main avec les exemples de base. C’est ensuite à toi de créer le cheminement qui te convient. En y passant quelques heures (je l’espère :)), tu pourras réaliser un petit prototype pour tes projets.

La seconde partie sera en lien avec la mise en place de l’environnement de dev façon Docker. Tu auras donc un container réutilisable et isolé de ton OS.

N'hésite pas à laisser tes remarques ou commentaires.

Happy Coding !!