Développement web ISC3-il

Présentation du cours

Programme

• Frameworks MVC : Laravel, Django, …
• HTML5 : vue d’ensemble
• Javascript : VueJS, Node.js, jQuery, AJAX, JSON, …
• Déploiement et configuration Serveur
• Webservices (API’s) : REST vs SOAP
• Sécurité : Menaces, risques, prévention
• (Responsive) Web Design
• (Syndication : RSS, Atom)
• Vos souhaits ?

Contenu, activités

• Cours théorique
• 2 Projets
  • frameworks : Laravel, Django, Vue.js (ouvert à d’autres propositions)
  • Groupes de 3, 30h par personne et par projet
  • Présentation de 20min
• Workshops intervenants externes
  • Webdesign (A. Keller) ?
  • Flask (M. Amiguet) ?
  • Vos présentations ? Vos propositions ?
• Support : ghpages (source), partage fichiers : teams

Projets

• Faire pour apprendre (⚠️ IAg)
• Les rôles dans une équipe de développement web, workflow
• Ne pas réinventer la roue ou tout faire soi-même
• Critères d’évaluation d’un projet
• En profiter pour apprendre des choses qui vous intéressent
• Avant le 1er octobre :
  • Avoir un compte github avec une clé SSH (indispensable au déploiement)
  • Constitution des équipes de 3 personnes
  • Choix du projet
  • Forge : Créer projet sur github dans l’entité HE-Arc
  • S’inscrire

Choix des projets

• Contrainte : appli basée sur des données
• Choix
  • Besoin réel
  • Données existantes : dbpedia, opendata, …
  • S’inspirer de l’existant :
    • Product Hunt, Make Use Of liste 1 , liste 2, PWA Directory, …
    • Volées précédentes
• Commencer tôt pour se libérer les dernières semaines de l’année

Calendrier

Suivi du calendrier (à jour sur teams)

Jalons pour chacun des 2 projets

• Echéances
  • En début de semaine, pour chacun des projets :
    1. Formation équipe et choix thème
    2. Objectifs et maquettes
    3. Authentification et 1er déploiement
    4. Modèles avec relations (au moins 3, dont 1 n-n)
    6. Rendu intermédiaire (détails dans slides workshop)
    8. Minimal Viable Product
    12. Rendu projet, Présentation
• Il n’est pas interdit d’en ajouter

Conseils

• Le plus simple possible, pas trop de données
• Application crédible (vraies données, cas réalistes)
• Projet à blanc (workshop) pour la prise en main du framework
• Maquettes
• Organisez l’utilisation du dépôt
• Le temps disponible à l’horaire ne suffira pas !
• Essayez de commit avec la même identité
• Signalez dans le commit msg si vous n’êtes pas l’auteur
• Le déploiement est long : commencez tôt !
• Il est moins risqué travailler plus au début du projet qu’à la fin !
• Discutez ! Echangez !

IA Génératives

• Fiche de cours dans Teams
  • Objectif cours : savoir-faire avec les frameworks MVC
    • Ne pas générer ce code, ni livrer qq chose dont vous n’êtes pas garant (Responsabilité)
    • Ok pour le reste, avec déclaration (ou citation)
  • Activité non listée ? Doute ? ➡️ On en parle avec le prof
• Doit favoriser l’apprentissage, pas le péjorer
• Intégrité académique et professionelle, transparence
• Déclarer (Disclose) :
  • Idéalement lien vers la session
  • Outil, modèle, prompts
  • But : identifier VOTRE valeur ajoutée !
• Ressources : SPOC HES-SO, Position MIT, Guide Etudiants UQÀM, Impacts métier probables

Évaluation des projets

• Note intermédiaire (1/5 de la note du module, détails dans slides workshop) :
  • 1 page affichage BDD (autre que user)
    • p.ex. : Liste de tous les films
  • 1 page d’enregistrement BDD (autre que user)
    • p.ex. : Création d’un film
  • Respect des conventions et bonnes pratiques
  • Respect du pattern MVC : Les requêtes doivent passer par toutes les étapes importantes de Laravel
    • route, validation des entrées, contrôleur, vue
  • Application déployée avec tous les éléments cités plus haut testable et fonctionnel

Évaluation des projets - suite

• Note finale (4/5 de la note du module, détails dans slides workshop) :
  • Code : 50%
    • Absence bugs, qualité code, lisibilité, respect conventions et bonnes pratiques
    • Déploiement, configuration
  • User Experience : 30%
    • Design UI, Utilisabilité (Efficacité, efficience, satisfaction)
  • Gestion de projet : 20%
    • Fichiers versionnés, messages de commit, Issues, planification, travail en équipe
    • Documentation (wiki), Investissement, volume de travail
  • Bonus (ceux qui vont plus loin) : 0-20%
    • Tests, WebSockets ou autre API HTML5, webservices, …
    • Contribution, présentation, documentation, …
• Tous les membres d’un groupe n’ont pas forcément la même note

Participation

• Aux projets des autres : Issues, PR
• Participez à la Hacktoberfest
• Pariticipez au cours : contenu, présentation, pages (index, wiki, …)
• Echangez avec github ou un im (discord, teams, …)

Présentation facultative

• Facultatif, ne peut qu’augmenter la moyenne
• DOIT être annoncé au semestre d’automne
• Un thème absent du cours
• 2 à 4 personnes
• Une présentation claire avec démo (printemps)
• Un exercice d’application
• Critiques et discussion
• Au plus tôt :
  • Constitution des équipes
  • Proposer 1 à 3 thèmes
  • Proposer le(s) thème(s) de présentation et l’équipe

Examen oral SA

• Généralités pour la partie dev web de l’examen :
  • Vous n’avez droit à rien : on vous mettra à disposition 1 crayon et du papier pour préparer votre présentation,
  • L’examen porte sur toute la matière vue au en cours (yc workshops),
  • Les questions sont générales, il s’agit de présenter des concepts vus en cours (souvent 1 chapitre), et expliquer certains mécanismes sous-jacents,
  • Il n’agit pas de réciter le contenu des slides par coeur coeur, mais de les présenter avec vos propres mots (compréhension), et vos propres exemples.

Examen oral SA

• Déroulement :
  • Vous tirez un n° de question au hasard pour chaque cours
  • Vous disposez de 15 min pour préparer une présentation de 10 min pour chacun des 2 cours (pendant la présentation de l’étudiant précédent)
  • Idéalement vous faites une présentation d’environ 10 min et les 5 min restantes sont dédiées aux questions (pour chacun des cours)

Mon expérience en développement web

• Questionnaire obligatoire (votre username github vous y sera demandé)

🙏 !

Sources