codeBoot / CEGEP

En développement depuis 2013, l'environnement de programmation codeBoot a été conçu pour l'enseignement de la programmation aux personnes qui débutent. Il met l'emphase sur l'apprentissage des concepts de programmation afin que les étudiants et étudiantes puissent être efficaces quels que soient les langages de programmation utilisés par la suite.

codeBoot est présentement utilisé avec succès au département d'informatique et de recherche opérationnelle (DIRO) de l'Université de Montréal pour le cours Programmation 1, le cours d'introduction à la programmation du programme de Baccalauréat en informatique. Grâce à son orientation vers ceux et celles qui commencent leur apprentissage de la programmation, nous croyons que codeBoot est parfaitement adapté pour les cours d'informatique offerts par les cégeps et tout particulièrement le nouveau cours 420‐SN1‐RE du programme Sciences de la nature 200.B1 du Ministère de l'Enseignement supérieur, visant la compétence «Développer des programmes informatiques en vue d’automatiser la résolution de problèmes dans un contexte scientifique.»

Plusieurs des développements récents de codeBoot facilitent son utilisation dans le contexte d'enseignement collégial, notamment :

Tableur intégré à codeBoot pour visionner et éditer des données en format CSV.
Module d'affichage permettant de créer facilement des graphiques à partir de matrices ou de données CSV.
Interface à des senseurs sans-fils « BLINX » pour recueillir des données expérimentales pour des programmes de nature scientifique et des projets intégrateurs.
Création d'interface utilisateur et d'application Web par les étudiant-e-s et qui sont utilisables sur ordinateurs de bureau, tablettes et téléphones intelligents sans installation requise.
Fonctionnalités pour aider le personnel enseignant à créer des documents pédagogiques et notes de cours qui permettent d'exécuter en un clic les exemples de codage, comme c'est le cas sur la page Web présente. Pour plus d'information sur cette fonctionnalité veuillez consulter la page codeBoot : un outil pour l'enseignement.

L'environnement codeBoot est accessible en ligne gratuitement à l'adresse https://codeboot.org/. Aucune installation ou équipement particulier n'est requis. L'environnement est utilisable sur ordinateur de bureau, ordinateur portable et tablette.

Une interface utilisateur puissante et épurée permet d'éviter la complexité des outils de développement professionnels et permet de privilégier l'apprentissage des concepts de programmation. D'autre part, la langue est configurable pour que les menus, messages d'erreur et la documentation intégrée soient en anglais ou en français selon le choix de l'étudiant ou étudiante.

Pour mieux comprendre les attraits de codeBoot nous avons préparé des exemples d'utilisation qui couvrent plusieurs situations rencontrées dans des cours de programmation.

Chaque exemple ci-dessous vient avec une image illustrative. Veuillez simplement cliquer sur l'image pour exécuter l'exemple et voir son code source.

1. Expliquer la séquence des opérations effectuées par la machine

Utiliser la console pour afficher un décompte pour illustrer le fonctionnement des boucles while.

Dans codeBoot cliquez sur le bouton «Exécuter le prochain pas» (ou Shift-Enter) pour avancer l'exécution d'un pas et indiquer le résultat des calculs.

L'exécution pas-à-pas peut aussi débuter à un numéro de pas spécifique.

L'exécution pas-à-pas peut aussi être animée automatiquement et optionnellement s'arrêter à un numéro de pas spécifique.

L'utilisation de la fonction sleep(délai) et breakpoint() permettent d'expliquer les programmes plus complexes, par exemple un «tri bulle».

Dans codeBoot tapez la touche «Enter» pour continuer l'exécution après un appel à breakpoint() ou le bouton «Exécuter le prochain pas» pour avancer d'un seul pas d'exécution.

Comme l'exemple précédent mais en tant qu'application Web et sans appel à breakpoint().

Animation du «tri rapide» (quicksort), similairement à l'exemple précédent.

Comme l'exemple précédent mais en tant qu'application Web.

2. Interaction textuelle simple avec l'utilisateur

Programme qui demande le nom de l'utilisateur puis le salue.

Comme l'exemple précédent mais en tant qu'application Web.

3. Interface utilisateur qui réagit aux clics de souris

Programme qui simule le lancé de 2 dés à jouer lorsqu'un bouton est cliqué.

Cet exemple illustre l'accès au DOM du navigateur et aussi le mode «flottant» de codeBoot qui facilite le déboggage d'interface utilisateur.

Comme l'exemple précédent mais en tant qu'application Web.

Programme de tic-tac-toe avec des boutons et une grille de cases cliquables. Le jeu se joue dans le «terrain de jeu» accessible par la variable playground.

Comme l'exemple précédent mais en tant qu'application Web.

4. Afficher des fonctions et données sous forme graphique

Programme qui calcule des racines avec la méthode de Newton et qui affiche les fonctions x**(1/2), x**(1/3) et x**(1/4).

Le programme précédent sous forme d'application Web.

Lecture et affichage graphique des températures quotidiennes moyennes à Montréal entre 1995 et 2010 en format CSV provenant d'un dépot github.

Cet exemple illustre les fonctions read_file(source) et chart(données_CSV).

Le programme précédent sous forme d'application Web.

Approximation d'une onde carrée par la somme de plusieurs ondes sinusoïdales. L'approximation s'améliore plus on ajoute des termes à la série de Fourier.

Le programme précédent sous forme d'application Web.

5. Dessiner une image sous la forme d'une grille de pixels

Programme qui dessine une image à l'écran dans codeBoot.

Application Web qui dessine une image à l'écran.

Programme qui dessine une image stockée dans un fichier.

Le fichier a été créé par un glisser-déposer d'un fichier .png de l'ordinateur vers codeBoot.

Programme qui simule le jeu de la vie dans codeBoot.

Ce programme illustre l'utilisation de la fonction sleep(délai) pour faire l'animation d'un dessin.

Le programme précédent sous forme d'application Web.

Programme qui montre une animation typique des jeux vidéo simples.

Le programme précédent sous forme d'application Web.

Jeu de breakout.

Le programme précédent sous forme d'application Web.

6. Dessiner une image à l'aide de la métaphore de la tortue

Programme qui dessine des polygones réguliers.

Programme qui dessine une rosace.

Animation de l'aiguille des secondes d'une horloge.

Animation de moulins à vent.

7. Accès à des données CSV sur le Web

Programme qui affiche sous la forme d'un tableur un fichier CSV de notes d'une classe d'étudiants.

Programme qui affiche sous forme graphique un fichier CSV de la population de la France depuis l'an 0.

Programme qui utilise la géolocalisation et une base de données des villes importantes pour afficher la position approximative sur la terre et déterminer la ville la plus proche.

Programme qui permet de consulter les propriétés des éléments dans le tableau périodique des éléments en cliquant des boutons.

8. Recueillir et afficher des données d'un senseur « BLINX »

Programme qui affiche la température en temps-réel obtenue avec un senseur sans-fil « BLINX ». Les températures et humidités relatives des dernières 5 minutes sont affichées sous forme de tableur et aussi sous forme de graphique.

Le programme précédent sous forme d'application Web.