Plan de cours, Git et projets MVC

Contenu:

• Plan de cours
• Git/GitHub/Fork (théorie)
  • Repository
  • Commit
  • Création d’un Repo GitHub pour les démonstrations
• .NET Core MVC : Projets
  • Création de projet .NET Core MVC (avec liste comme en 2W5)
  • Déclenchement d’action et d’événement au niveau de l’application par l’envoi d’un formulaire ou d’un appel de page.

Ressources et documentation:

• Consignes/standards Repositories et Commits
• Bootswatch
• Bootstrap DropDown Menu

Complémentaire

• Standards C# Microsoft
• Standards C#

Activités de la séance

Théorie:

• 🔗Notes de cours (ci-dessous)
• 🔗420_3W6_cours_01_Git_Révision.pptx (présentation originale)
• 🔗Aide GitHub
• 🔗Aide Fork

Laboratoires:

Utilisation de Fork (Toute la classe ensemble)

• L'exercice est à la fin des notes de cours : Démo GitHub/Git/Fork
• Les deux autres documents de théorie fournissent l'information nécessaire pour faire l'exercice

GitHub FORK le repo suivant

• Révision 🔗S01_Lab1_Révision

Travail personnel:

• Compléter les laboratoires

Notes de cours

Contenu du cours

• Plan de cours
• Présentation de l’enseignant
• Les défis du cours
• Fork
• Révision MVC
• Pourquoi .NET MVC?
• Site Web du cours

Nombre d’heures par semaine

• 2 heures de théorie
• 4 heures de pratique
• 3 heures de travail personnel

Communications

• Site 3W6-Web-Transactionelle

Pourquoi .NET Core MVC?

Est-ce que c’est un bon « framework »?

Mais avant… est-ce qu’un bateau, c’est un bon moyen de transport?

Ce que .NET Core MVC fait bien

• Sites où la logique est exécutée sur le serveur
• Génération de pages CRUD
• Interaction entre le modèle de données et la BD (avec Entity Framework)
• Validations des données sur 3 niveaux en utilisant les annotations (client/serveur/BD)

C’est donc un très bon outil pour faire de la configuration et/ou un grand nombre d’applications plus statiques.

Ce que .NET Core MVC fait MOINS bien

• Client dynamique avec de la logique exécutée sans appel au serveur (utilisation de JavaScript pour le faire)
• Gestion des dépendances (librairies)

Les défis du cours

• Combinaison de BD et de web (plus complexe)
• Travaux pratiques (TPs) plus élaborés
• Apprentissage de JavaScript
• Plusieurs cas où les erreurs sont difficiles à diagnostiquer (conflits de librairies, mauvaises configurations, authentification)

LA solution

Ne prenez pas de retard dans vos TPs. Si vous avez l’habitude de tout faire la veille de la remise, vous risquez d’avoir une mauvaise surprise!

La bonne nouvelle

Après ce cours, vous pourrez créer des applications complètes qui ont de la valeur!

🗄️ BD + 🌐 Web = 💰

Git

• Pas un serveur, ni un client
• Permet de gérer des repositories
• Plusieurs copies du même repository (Clone)
• Commit
• Push et Pull (gestion de conflits)
• Branches

Les commandes Git

Commande	Description
git add	Ajouter un fichier (pour éventuellement faire partie d’un commit)
git commit [-m "commentaire"]	Créer un commit avec l’ensemble des fichiers ajoutés
git pull	Récupérer les changements sur le repository du serveur
git push	Envoyer les changements sur le repository du serveur

Gitignore

• Il est possible d’ajouter UN ou plusieurs fichiers .gitignore à un projet
• Permet d’avoir des fichiers locaux qui ne sont pas « gérés » par Git
• Important pour les répertoires temporaires d’un projet (peuvent devenir très gros!)
• La bonne nouvelle : un fichier .gitignore est généré lors de la création d’un projet .NET Core MVC et il exclut déjà les fichiers temporaires

Voici un exemple d’un fichier qui ignore tous les fichiers d’un répertoire, sauf le fichier .gitignore. Si vous ajoutez un fichier .gitignore avec ce contenu dans un répertoire, son contenu sera ignoré par Git.

.gitignore

*
!.gitignore

Git 🚫 (À éviter!)

• Toute opération qui inclut le mot « Force »
• Rebase

danger

Dans les deux cas, vous pouvez perdre des données de façon définitive! En utilisant uniquement des merges, on pourra toujours récupérer les différentes versions qui ont existé.

GitHub

• Serveur qui contient la copie principale des repositories
• Offre de nombreuses fonctionnalités pour améliorer la collaboration
  • Contrôle d’accès
  • Pull Requests
  • Revues de code

Utilisation de Git

Fork

• Interface graphique pour utiliser Git
• Il y a plusieurs autres options, mais Fork est un bon outil qui va être utilisé dans tous les cours de la technique. Il remplace GitKraken avec lequel on avait fréquemment des problèmes de licence.

GitKraken

• Une autre interface graphique pour utiliser Git
• Les exemples du cours vont utiliser Fork, mais si vous préférez utiliser GitKraken, vous êtes libres de le faire!

🚫 Ne pas cloner dans OneDrive!!! 🚫

Pourquoi?

Pour la même raison que l’on ne va pas mettre des projets de programmation en général sur OneDrive (oui, je pense à toi npm install).

• Ces projets génèrent un grand volume de données, souvent plusieurs centaines de Mo. Et ces données sont fréquemment contenues dans des milliers de petits fichiers qui rendent OneDrive vraiment très lent.
• Au fond, c’est essentiellement le même problème qu’avec Git si on n’utilise pas de fichier .gitignore.
• Et comme les fichiers sont déjà sauvegardés sur GitHub, ce n’est pas utile de les conserver sur OneDrive en plus!

Démo GitHub/Git/Fork

Nous allons faire une série d’exercices pour apprendre à utiliser GitHub et Fork.

ATTENTION

À la fin des exercices, vous allez me partager votre travail pour que je puisse vérifier que vous êtes tous capables de bien utiliser ces outils!

Exemple de base

1. Création d’un repository sur GitHub : « ForkThat »
2. Ajouter notre compte GitHub dans Fork
3. Cloner dans un répertoire (le bureau, c’est parfait)
4. Ajouter un fichier test.txt avec un peu de texte : « Texte que je partage avec le prof »
5. Faire un commit qui inclut le fichier
6. Regarder sur GitHub dans Code (on espère qu’il n’y a pas encore le fichier test.txt)
   • Question : le commit est où?
7. Faire un push
8. Regarder dans GitHub encore (on espère que le fichier est là!)
9. Modifier le fichier en ajoutant le texte « plus de texte » au fichier test.txt
10. Faire un commit ET un push
11. Regarder l’historique sur GitHub

Tester le .gitignore

1. Créer un répertoire /bin
2. Ajouter un fichier fichierInvisiblePourGit.txt
3. Vérifier que le fichier n’apparaît PAS dans les « local changes »

Création de branches

1. Création de la branche « test » (avec checkout)
2. Modification au fichier test.txt, ajout du texte « changement dans une branche »
3. Commit
4. Push
5. Regarder sur GitHub
6. Retour dans la branche main
7. Merge de la branche test dans la branche main
8. Commit
9. Regarder sur GitHub

Exemple de travail à la maison (clone)

1. Cloner ForkThat dans un répertoire qui se nomme ForkThatTwo (ça représente le travail à la maison)
2. Faire un changement
3. Faire un commit
4. Faire un push
5. Vérifier que le repository ForkThat n’a pas encore le changement
6. Faire un « Pull » pour obtenir les changements et avoir les bonnes données

En résumé

La bonne façon de faire quand on a déjà cloné le repository? Il faut faire un « Pull » avant de commencer à travailler pour obtenir la dernière version avant de faire nos nouveaux changements!

Création d’un projet .NET Core MVC

Les éléments importants d’un projet .NET Core MVC

Élément	Rôle
Program.cs	Configuration de l’application, entre autres d’Entity et d’Identity Enregistrement des services Démarrage
wwwroot	Fichiers statiques du site : CSS, JS, images
_Layout.cshtml	Mise en page de base partagée par toutes les pages Ajout de certaines librairies comme Bootstrap et jQuery
DbContext.cs	Contexte de la BD qui contient les DbSets des classes qui vont être gérées par Entity
appsettings.json	Information de connexion pour la BD Clés d’API Information sur les niveaux de logging

Librairie Bootswatch

• Bootswatch