Découverte du langage Elm

Description

Ce projet vise à manipuler un langage, Elm, pour découvrir sa syntaxe, ses contraintes et plus globalement la programmation fonctionnelle. Pour cela, il vous est proposé de créer une interface graphique simple pour afficher les résultats d’un ou plusieurs programmes que vous allez exécuter.

Conseil: Lisez en premier la fiche projet, pour savoir vers quelle partie du projet vous souhaitez vous rediriger. et voir toutes les ressources qui ont été partagées. Vous pouvez tout à fait choisir une partie sans faire les autres, en fonction de vos besoins de progression et de vos envies de découvertes de nouvelles notions. Si aucune des étapes ne vous inspire, n’hésitez pas à innover en trouvant une idée de programme de votre choix à afficher, codé en ELM.

Contraintes

En binômes ou trinômes
Langage : Elm
Durée : 1 semaine

Notions abordées

Se préparer

Plénières possibles

  • Lecture de code en ELM
  • Recherche tous ensemble sur comment fonctionne ELM
  • Tous d’horizon des particularités de ELM (immutabilité, fonctions pures, expressions let, organisation du code, typage statique, modules, etc )

Cibler ses objectifs

Avant de vous lancer sur le projet, nous vous proposons un temps de prise de recul, individuellement, en remplissant la fiche d’auto-engagement projet.

Orientation du projet

Quelque soit l’étape sur laquelle vous souhaitez commencer, nous vous proposons de créer en premier lieu une page web en ELM qui va permettre de visualiser les différents programmes que vous pourriez écrire.

Nous vous invitons aussi à réfléchir aux tests à ajouter à votre application pour vérifier que votre code fait ce que vous attendez de lui, avec des inspirations ici ou ici.

Je débute

1. Customisation de la page Web qui va servir à la visualisation

Prenez le temps de mettre en place la premiere page de votre application. Puis, modifiez la à votre guise pour la customiser comme vous souhaitez.

Ressources
  • Quelques librairies CSS possibles à utiliser avec ELM, comme bootstrap, Pure ou encore Bulma.

2. C’est plus joyeux avec des smileys !

Ecrivez un programme qui prend en paramètre une chaine de caractères et qui la renvoie formatée avec des smileys, au début et à la fin.

Exemple: J'aime les pates ! deviendra ¯\_(ツ)_/¯ J'aime les pates ! ¯\_(ツ)_/¯

Faites en sorte que la chaine de caractère soit demandée sur votre page web, et que le résultat de votre programme soit affiché ensuite.

3. S’inspirer n’est pas tricher

Cherchez une solution de kata dans un langage que vous appréciez, sur le net (Evidemment, évitez une solution en ELM :woozy_face:).
Puis essayez de suivre le raisonnement du programme trouvé, en l’écrivant en ELM.

Faites en sorte que les paramètres de votre programme soient à rentrer sur votre page web, et que le résultat de votre programme y soit affiché ensuite.

Idées possibles de solutions à suivre, si vous manquez d’inspiration:

Se préparer

N’hésitez pas à jouer un peu avec la console ELM (en local ou en ligne) pour voir comment fonctionnent les chaines de caractères et les fonctions et tester plus rapidement votre programme.

Objectifs pédagogiques

  • S’initier au langage ELM
  • Découvrir un langage qui se compile
  • Voir une nouvelle manière de créer du javascript
  • Manipuler des chaines de caractère en ELM

Je suis à l’aise avec certains langages

1. Tous les chemins mènent à Rome

Les Romains avaient une singulière manière de compter. Le programme proposé ici permet de transformer un chiffre en écriture romaine. Ainsi, il prend un entier en paramètre et renvoie une chaine de caractères.

Faites en sorte que le chiffre à transposer en Romain soit demandé sur votre page web, et que le résultat de votre programme soit affiché ensuite.

2. Des chiffres et des lettres

Ici, le but est d’écrire un programme qui prend en paramètre un chiffre entre 0 et 999 999 999 999 et qui renvoie sa version écrite en français.

Exemple: 564 856 457 donnera cinq cent soixante quatre millions huit cent cinquante six mille quatre cent cinquante sept

Faites en sorte que ce programme soit accessible de votre page web générée avec Elm pour rendre ça plus sympa !

Objectifs pédagogies

  • Voir une nouvelle manière de créer du javascript
  • Manipuler ELM de manière un peu poussée
  • S’entrainer à de nouvelles problématiques d’algorithmique

Je veux aller plus loin

1. Jacky le robot qui kiffe la vie

Jacky est un robot qui suit des instructions pour avancer. Par exemple, A lui dit d’aller vers l’avant, R lui dit de reculer, G lui conseille d’aller à gauche et D lui informe d’aller à droite toute.

Ecrivez un programme qui prend en paramètre une chaine de caractères (par exemple AAADAADRGAAAA) et qui permet de visualiser les déplacements de Jacky sur la page Web générée en ELM.

N’hésitez pas à customiser les instructions et à en ajouter à votre guise !

2. Ajouter un autre programme à l’application

Maintenant que vous avez créé votre premier programme et qu’il est accessible sur votre petite application graphique, pourquoi ne pas y ajouter une nouvelle page dans laquelle afficher l’un des autres programmes proposés dans les étapes précédentes ? (ça sera quand meme plus chouette que tout sur la meme page)

Ressource

3. API culture :honeybee:

Maintenant que vous savez ajouter de nouvelles pages à votre application, complexifions un peu le tout. Manipulez une API qui renvoie du JSON pour faire de la visualisation de données sur les donnés qu’elle renvoie.

Pour cela, vous pouvez par exemple vous aider de librairies de manipulation d’API en JSON comme json-rest-api.

Si vous avez besoin d’idées, voici une liste d’APIs publiques dans laquelle piocher.

Enfin, pour la partie visualisation, il existe des librairies comme elm-visualisation qui pourraient vous etre tres utiles !

Objectifs pédagogies

  • Voir une nouvelle manière de créer du javascript
  • Manipulation d’un nouveau langage, ELM
  • Manipulation d’outils graphiques
  • Découverte de l’intégration d’une API dans une application

Ressources