diff --git a/.github/workflows/CICD.yml b/.github/workflows/CICD.yml new file mode 100644 index 000000000..94cd31045 --- /dev/null +++ b/.github/workflows/CICD.yml @@ -0,0 +1,56 @@ +name: Industrialisation continue sur le serveur Alwaysdata +on: push +jobs: + Connexion: + runs-on: ubuntu-latest + steps: + - name: Connexion SSH avec le serveur + uses: appleboy/ssh-action@master + with: + host: "ssh-${{ secrets.USERNAME }}.alwaysdata.net" + username: ${{ secrets.USERNAME }} + password: ${{ secrets.PASSWORD }} + script: | + cd $HOME/www/ + Copy: + needs: Connexion + runs-on: ubuntu-latest + steps: + - name: Connexion SSH avec le serveur + uses: appleboy/ssh-action@master + with: + host: "ssh-${{ secrets.USERNAME }}.alwaysdata.net" + username: ${{ secrets.USERNAME }} + password: ${{ secrets.PASSWORD }} + script: | + last_directory=$(basename ${{ runner.workspace }}) + cd $HOME/www/ + git clone https://github.com/${{ github.repository }}.git + # Vérifier si le répertoire de destination existe + if [ "$(ls -A ./flask)" ]; then + rsync -r ./$last_directory/ ./flask + rm -rf ./$last_directory + else + echo "Le répertoire flask de destination sur votre serveur n'existe pas" + exit 1 + fi + Restart: + needs: Copy + runs-on: ubuntu-latest + steps: + - name: Restart Alwaysdata site + run: | + response_code=$(curl -s -o /dev/null -w "%{http_code}" -X POST --basic --user "${{ secrets.ALWAYSDATA_TOKEN }}:" https://api.alwaysdata.com/v1/site/${{ secrets.ALWAYSDATA_SITE_ID }}/restart/) + # Vérifier le code de réponse HTTP + if [ "$response_code" -eq 204 ]; then + echo "Relance de votre site réussi" + elif [ "$response_code" -eq 404 ]; then + echo "Vous n'avez pas renseigner correctement votre secret ALWAYSDATA_SITE_ID" + exit 1 # Quitter avec un code d'erreur + elif [ "$response_code" -eq 401 ]; then + echo "Vous n'avez pas renseigner correctement votre secret ALWAYSDATA_TOKEN" + exit 1 # Quitter avec un code d'erreur + else + echo "Échec du redémarrage avec le code de réponse : $response_code" + exit 1 # Quitter avec un code d'erreur + fi diff --git a/.github/workflows/alwaysdata.yml b/.github/workflows/alwaysdata.yml deleted file mode 100644 index 08a99cf31..000000000 --- a/.github/workflows/alwaysdata.yml +++ /dev/null @@ -1,18 +0,0 @@ -name: Industrialisation continue sur le serveur Alwaysdata -on: push -jobs: - deploy: - runs-on: ubuntu-latest - steps: - - name: Deploy Flask app - uses: appleboy/ssh-action@master - with: - host: ${{ secrets.HOST_DNS }} - username: ${{ secrets.USERNAME }} - key: ${{ secrets.EC2_SSH_KEY }} - script: | - cd $HOME/www/ - git clone https://github.com/bstocker/flask_hello_world.git - rsync -r ./flask_hello_world/ ./flask_server - rm -rf ./flask_hello_world - curl -X POST --basic --user "${{ secrets.ALWAYSDATA_TOKEN }}:" https://api.alwaysdata.com/v1/site/${{ secrets.ALWAYSDATA_SITE_ID }}/restart/ diff --git a/README.md b/README.md new file mode 100644 index 000000000..0f4c92879 --- /dev/null +++ b/README.md @@ -0,0 +1,102 @@ +------------------------------------------------------------------------------------------------------ +PROJET FLASK +------------------------------------------------------------------------------------------------------ +Quelles sont les notions qui vont être abordées au cours de cet atelier ? +Cet atelier a pour objectif de vous apprendre à mettre en service le framework Flask qui utilise le language Python et permet la construction d'API. Vous allez èdonc utiliser et mettre en oeuvre au travers de cet atelier, un serveur Python utilisant le Framework Flask. +Vous allez créer des API, découvrir les Actions et les Secrets GitHUB pour au final créer des applications en Python. +Large programme mais tout à fait accessible et ne nécessitant pas de base technique particulière. Juste de l'observation et de la rigueur dans votre travail. + +------------------------------------------------------------------------------------------------------- +Séquence 1 : GitHUB +------------------------------------------------------------------------------------------------------- +Objectif : Création d'un Repository GitHUB pour travailler avec son projet +Difficulté : Très facile (~10 minutes) +------------------------------------------------------------------------------------------------------- +GitHUB est une plateforme en ligne utilisée pour stocker le code de son programme. +GitHUB est organisé en "Repository", c'est à dire en répertoire (contenant lui même des sous répertoires et des fichiers). Chaque Repository sera indépendant les un des autres. Un Repository doit être vu comme un projet unique (1 Repository = 1 Projet). GitHUB est une plateforme très utilisée par les informaticiens. + +**Procedure à suivre :** +1° - Créez vous un compte sur GitHub : https://github.com/ +Si besoin, une vidéo pour vous aider à créer votre propre compte GitHUB : [Créer un compte GitHUB](https://docs.github.com/fr/get-started/onboarding/getting-started-with-your-github-account) +A noter que **si vous possédez déjà un compte GitHUB, vous pouvez le conserver pour réaliser cet atelier**. Pas besion d'en créer un nouveau. +Remarque importante : **Lors de votre inscription, utilisez une adresse mail valide. GitHUB n'accepte pas les adresses mails temporaires** + +2° - Faites un Fork du Repository suivant : [https://github.com/OpenRSI/Flask_Hello_World.git](https://github.com/OpenRSI/Flask_Hello_World.git) +Voici une vidéo d'accompagnement pour vous aider dans les "Forks" : [Forker ce projet](https://youtu.be/p33-7XQ29zQ) + +**Travail demandé :** Créé votre compte GitHUB, faites le fork de ce projet et **copier l'URL de votre Repository GitHUB dans la discussion public**. + +Notion acquise lors de cette séquence : +Vous avez appris lors de cette séquence à créer des Repository pour stocker et travailler avec votre code informatique. Vous pourez par la suite travailler en groupe sur un projet. Vous avez également appris à faire des Forks. C'est à dire, faire des copies de projets déjà existant dans GitHUB que vous pourrez ensuite adapter à vos besoins. + +--------------------------------------------------- +Séquence 2 : Création d'un hébergement en ligne +--------------------------------------------------- +Objectif : Créer un hébergement sur Alawaysdata +Difficulté : Faible (~10 minutes) +--------------------------------------------------- + +Rendez-vous sur **https://www.alwaysdata.com/fr/** + +Remarque : **Attention à bien vous rappeler de vos Login/Password** lors de la création de votre compte site car vous en aurez besoin plus tard pour la création de vos Secrets GitHUB. + +Voici une vidéo d'accompagnement pour vous aider dans cette séquence de création d'un site sur Alwaysdata : [Vidéo Alwaysdata](https://youtu.be/6cuHjy8n968) + +**Procédure :** +1° - Créez votre compte Alwaysdata (gratuit jusqu'à 100Mo, aucune carte nécéssaire). +2° - Depuis la console d'administration (Le panel d'administration de Alwaysdata) : + . 2.1 - Cliquez sur "Sites" (Colonne de gauche) puis **supprimer votre site PHP** (via l'icone de la Poubelle). + . 2.2 - **Installer ensuite une application Flask** (Bouton **+ Installer une application**). + . . 2.2.1 Adresses = utilisez le sous-domaine qui vous appartient que vous trouverez dans l'information " Les sous-domaines suivants vous appartiennent et sont actuellement inutilisés : {Site}.alwaysdata.net + . . 2.2.2 Répertoire d'installation = **/www/flask** + . 2.2.3 N'oubliez pas d'Accepter les conditions. +3° - Autoriser les connexions SSH : + . 3.1 - Cliquez sur SSH (Accès distant). + . 3.2 - Modifier les paramètres de votre utilisateur. + . 3.3 - Définissez si besion un nouveau mot de passe. + . 3.4 - Cliquez sur **Activer la connexion par mot de passe**. + +**Travail demandé :** Mettre en ligne votre application Flask "Hello World !" et **copier l'URL de votre site dans la discussion public**. + +Notions acquises lors de cette séquence : +Vous avez créer un hébergement (gratuit) et découvert également que vous pouvez installer bien d'autres applications (Django, Drupal, Jenkins, Magento, Symphony, etc...). Les perspectives sont nombreuses. + +--------------------------------------------------------------------------------------------- +Séquence 3 : Les Actions GitHUB (Industrialisation Continue) +--------------------------------------------------------------------------------------------- +Objectif : Automatiser la mise à jour de votre hébergement Alwaysdata +Difficulté : Moyenne (~15 minutes) +--------------------------------------------------------------------------------------------- +Dans le Repository GitHUB que vous venez de créer précédemment lors de la séquence 1, vous avez un fichier intitulé CICD.yml et qui est déposé dans le répertoire .github/workflows. Ce fichier a pour objectif d'automatiser le déploiement de votre code sur votre site Alwaysdata. Pour information, c'est ce que l'on appel des Actions GitHUB. Ce sont des scripts qui s'exécutent automatiquement lors de chaque Commit dans votre projet (C'est à dire à chaque modification de votre code). Ces scripts (appelés actions) sont au format yml qui est un format structuré proche de celui d'XML. + +Pour utiliser cette Action (CICD.yml), **vous avez besoin de créer des secrets dans GitHUB** afin de ne pas divulguer des informations sensibles aux internautes de passage dans votre Repository comme vos login et password par exemple. + +Pour ce projet Métriques, **vous avez 4 secrets à créer** dans votre Repository GitHUB : +**USERNAME** = Contiendra le login qui est utilisé pour la connexion SSH (votre compte site). +**PASSWORD** = Contiendra le mot de passe qui est utilisé pour la connexion SSH (le mot de passe de votre site Alwaysdata). +**ALWAYSDATA_TOKEN** = Le token est à créer depuis l'interface d'administration Alwaysdata. Cliquez sur votre profil en haut à droite, puis sur 'Profil' puis sur 'Gérer les tokens'. Laissez le champ "Adresses IP autorisées" vide. Dans le cas contraire vous limiteriez les connexions seulement à une adresse IP. Pour le champ Application* mettez "Metriques" par exemple. +**ALWAYSDATA_SITE_ID** = Vous trouverez l'ID de votre site depuis l'interface d'administration Alwaysdata dans les paramètres de votre site (dans le titre #XXXXX) XXXXX étant l'ID de votre site. Ne prenez pas le # mais juste les chiffres. + +Voici une vidéo pour vous expliquer le processus de création de vos secrets dans GitHUB : [Création des secrets](https://youtu.be/pi80zRdrJyQ) + +Notions acquises de cette séquence : +Vous avez vu dans cette séquence comment créer des secrets GiHUB afin de mettre en place de l'industrialisation continue. +L'utilité des scripts d'actions (C'est à dire des scripts exécutés lors des Commits) est très importante mais sortes malheureusement du cadre de cet atelier faute de temps. Toutefois, je vous invites à découvrir cet outil via les différentes sources du Web (Google, ChatGPT, etc..). + +--------------------------------------------------- +Séquence 4 : Exercices +--------------------------------------------------- +Objectif : Apprendre à créer vos API et applications Python +Difficulté : Moyenne +--------------------------------------------------- +Votre solution est à présent en ligne. Rendez-vous sur la page d'accueil de votre site et suivez les instructions pour réaliser les exercices qui vous sont demandés. Bon courage et bon travail à tous. + +-------------------------------------------------------------------- +Troubleshooting : +--------------------------------------------------- +Objectif : Visualiser ses logs et découvrir ses erreurs +--------------------------------------------------- +Lors de vos développements, vous serez peut-être confronté à des erreurs systèmes car vous avez faits des erreurs de syntaxes dans votre code, faits de mauvaises déclarations de fonctions, appelez des modules inexistants, mal renseigner vos secrets, etc… +Les causes d'erreurs sont quasi illimitées. **Vous devez donc vous tourner vers les logs de votre système pour comprendre d'où vient le problème** : +Voici une vidéo pour accéder aux logs de vos Actions GitHUB : [Vidéo Log GitHUB](https://youtu.be/rhGrDLSFH7Y) +Voici une vidéo pour vous expliquer comment accéder au logs de votre serveur Alwaysdata : [Vidéo Log Alwaysdata](https://youtu.be/URWMWqVMS2U) diff --git a/__init__.py b/__init__.py index e082f9f48..726c03499 100644 --- a/__init__.py +++ b/__init__.py @@ -1,6 +1,8 @@ -from flask import Flask +from flask import Flask, render_template_string, render_template, jsonify from flask import render_template from flask import json +from datetime import datetime +from urllib.request import urlopen import sqlite3 app = Flask(__name__) @@ -8,6 +10,10 @@ @app.route('/') def hello_world(): return render_template('hello.html') - + +@app.route("/contact/") +def MaPremiereAPI(): + return "

Ma page de contact

" + if __name__ == "__main__": app.run(debug=True) diff --git a/templates/exercices.html b/templates/exercices.html new file mode 100644 index 000000000..a6958e82a --- /dev/null +++ b/templates/exercices.html @@ -0,0 +1,89 @@ + + +Flask + + +

Bienvenue sur votre Framework Flask

+

Ceci est le projet de : Prénom Nom

+

Si vous avez mis en ligne votre solution et si cette page d'exercices s'affiche dans votre navigateur alors réussi votre mise en service.

+

Notions acquises lors de cette étape : Vous avez lors cette première étape apris à créer votre hébergement en ligne sur Alwaydata, installer une application, Forker un projet GitHUB et créer des Secrets qui seront utilisés lors de vos Commits pour mettre à jour votre site en ligne

+

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

+

Exercice 1 : Personnaliser votre page d'exercices

+

Modifier le fichier exercices.html de votre projet GitHUB afin de préciser votre Prénom et Nom sur cette page d'exercices (Modification de la ligne 7 du fichier exercices.html)

+

Notion acquises lors de cet exercice : Vous avez pris connaissance de votre environnement GitHUB avec ses fichiers, ses répertoires et ses "Commits" pour enregistrer vos modifications

+

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

+

Exercice 2 : Création d'une nouvelle route

+

Objectif : Savoir créer des routes (c'est à dire la création d'une nouvelle API)

+L'exercice consiste à créer une nouvelle route accèssible depuis le chemin "/contact/" de votre site et qui affichera "Ma page de contact" dans le navigateur de l'internaute. +L'internaute saisira l'adresse suivante dans son navigateur : https://{Votre URL}/contact/ et obtiendra donc le résultat "Ma page de contact". Vous allez pour cela, depuis GitHUB, ajouter le code suivant dans votre fichier __init__.py qui est à la racine de votre Repository précédemment créé : +

+@app.route("/contact/")
+def MaPremiereAPI():
+    return "<h2>Ma page de contact</h2>"
+
+Remarque importante : Ce code est à ajouter après la ligne "app = Flask(__name__)" qui est le début de votre programme et avant le bloc "if __name__ == "__main__" à la fin du fichier. +Attention l'indentation est très importante en Python. +

+

Notion acquises lors de cet exercice : Vous avez appris lors de cet exercice à créer des API (c'est à dire des routes) dans une application Python. Vous pouvez créer autant d'API (de routes) que vous le souhaitez dans votre application Python.

+

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

+

Exercice 3 : Création d'un fichier contact.html

+

Objectif : Savoir créer et placer ses fichiers HTML (&CSS)

+L'exercice consiste à créer un fichier contact.html toujours accèssible depuis la route "/contact/" de votre site et qui n'affichera plus "Ma page de contact" mais une page html beaucoup plus élaborée. +2 étapes sont nécéssaires pour réaliser cet exercice. Etape 1 : Créer et déposer votre fichier contact.html dans le répertoire templates. Etape 2 : Modifier votre route /contact/ comme suit : +

+@app.route("/contact/")
+def MaPremiereAPI():
+    return render_template("contact.html")
+
+Remarque importante : Si vous souhaitez utiliser du CSS dans votre fichier.html, les fichiers CSS sont à déposer dans le répertoire /static/css/ . Les "links" CSS dans votre fichier html passe par l'ajout du code suivant dans votre fichier html : 
<link rel="stylesheet" href="../static/css/style.css">
+

+

Notion acquises lors de cet exercice : Les Framework imposent un cadre de travail. Ici, le Framwork Flask vous impose de déposer vos fichiers html dans le répertoire "templates" et les fichiers CSS dans le répertoire /static/css/

+

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

+

Exercice 4 : Création d'une fonction de calcul

+

Objectif : Savoir créer des fonctions de calcul en Python

+L'exercice consiste à créer une fonction qui calculera le carré d'une valeur saisi par l'internaute. Cette fonction sera accessible depuis la route "/calcul_carre/" de votre site et nécessitera de saisir une valeur. Exemple : https://{Votre_URL}/calcul_carre/2. +Voici la route à créer dans votre application Python (__init__.py) : +

+@app.route('/calcul_carre/<int:val_user>')
+def carre(val_user):
+    return "<h2>Le carré de votre valeur est : </h2>" + str(val_user * val_user)
+
+Travail demandé : Sachant que la construction d'une route pour 2 valeurs est la suivante : +
    
+/somme/<int:valeur1>/<int:valeur2>
+
+Ecrivez la fonction permettant de faire la somme de 2 valeurs saisie par l'internaute. +

+

Notion acquises lors de cet exercice : Vous avez appris à créer vos fonctions Python

+

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

+

Exercice 5 : Pair ou Impaire ?

+

Objectif : Savoir créer des conditions

+Reprenez votre précédent exercice sur les sommes et précisez à l'internaute si la somme de ces deux valeurs est pair ou impaire. +

+

Notion acquises lors de cet exercice : Vous avez appris à faire des conditions

+

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

+

Exercice 6 : Somme de toutes les valeurs

+

Objectif : Savoir créer des boucles

+Faites la somme de toutes les valeurs qui seront saisi par l'internaute. Le problème est que vous ne connaissez pas la quantité de valeur saisi par l'internaute. A vous de trouver la solution qui fonctionne. +

+

Notion acquises lors de cet exercice : Vous avez appris à faire des boucles

+

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

+

Exercice 7 : La valeur la plus importantes

+

Objectif : Mélanger boucles, conditions et variables

+Trouver la valeur maximale saisie par l'Internaute. +

+

Notion acquises lors de cet exercice : Vous savez à présent programmer en Flask

+

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

+

Exercice 8 : Mettre un CV en ligne

+

Objectif : Créer vos pages HTML et CSS dans Flask
+Votre CV sera accéssible via l'adresse suivante : https://{Votre_Compte_Alwaysdata}-alwaysdata.com/cv
+Celui-ci doit contenir au minimum les sections suivantes :
+- Présentation personnelle (CV anonyme) : photo, nom, prénom, profession, et une courte description.
+- Expériences professionnelles : un tableau ou une liste des expériences professionnelles passées et actuelles.
+- Formations : un tableau ou une liste de vos études et certifications.
+- Compétences : une liste de vos compétences techniques et personnelles.
+Votre CV doit contenir du style et à minima une image (la photo).
+

+

Notion acquises lors de cet exercice : Vous savez à présent créer une application en Flask

+ + diff --git a/templates/hello.html b/templates/hello.html deleted file mode 100644 index 18bfd3678..000000000 --- a/templates/hello.html +++ /dev/null @@ -1,3 +0,0 @@ - -Flask Server -

Hello from Flask Server !