Plus d'idées de projets pour améliorer vos compétences en codage

Il y a deux semaines, j'ai publié un article contenant 15 idées de projets que vous pouvez développer pour améliorer vos compétences en codage, et les gens étaient très enthousiastes à propos de cette ressource.

En outre, le dépôt d'idées d'applications a obtenu près de 3000 étoiles depuis que j'ai publié cet article. C'est dingue! ?

Merci à tous pour ça! ?

Dans cet article, nous allons passer en revue quelques nouveaux projets qui ont été ajoutés au référentiel depuis lors.

Pour rappel, tous les projets sont divisés en trois niveaux en fonction des connaissances et de l'expérience nécessaires pour les mener à bien. Consultez la description des niveaux dans le référentiel.

Vous trouverez ci-dessous 2 idées de projets pour débutants , 4 intermédiaires et 3 avancées .

1. CALCULATEUR

Niveau: 1 - Débutant

Les calculatrices ne sont pas seulement l'un des outils les plus utiles disponibles, mais elles sont également un excellent moyen de comprendre l'interface utilisateur et le traitement des événements dans une application. Dans ce problème, vous allez créer une calculatrice qui prend en charge les calculs arithmétiques de base sur les entiers.

Le style dépend de vous, alors utilisez votre imagination et soyez créatif! Vous pourriez également trouver que cela vaut la peine d'essayer l'application de calculatrice sur votre appareil mobile pour mieux comprendre les fonctionnalités de base et les cas de pointe.

Contraintes

  • Vous ne pouvez pas utiliser la eval()fonction pour exécuter des calculs

Histoires d'utilisateurs

  • L'utilisateur peut voir un affichage indiquant le numéro actuel entré ou le résultat de la dernière opération.
  • L'utilisateur peut voir un pavé de saisie contenant des boutons pour les chiffres 0 à 9, des opérations - '+', '-', '/' et '=', un bouton 'C' (pour effacer) et un bouton 'AC' (pour tout effacer).
  • L'utilisateur peut entrer des nombres sous forme de séquences jusqu'à 8 chiffres en cliquant sur les chiffres dans le pavé de saisie. La saisie de tout chiffre supérieur à 8 sera ignorée.
  • L'utilisateur peut cliquer sur un bouton d'opération pour afficher le résultat de cette opération sur: _ le résultat de l'opération précédente et le dernier chiffre saisi OU _ les deux derniers chiffres saisis OU * le dernier chiffre saisi
  • L'utilisateur peut cliquer sur le bouton «C» pour effacer le dernier numéro ou la dernière opération. Si la dernière entrée de l'utilisateur était une opération, l'affichage sera mis à jour à la valeur qui l'a précédée.
  • L'utilisateur peut cliquer sur le bouton «AC» pour effacer toutes les zones de travail internes et pour régler l'affichage sur 0.
  • L'utilisateur peut voir «ERR» affiché si une opération dépasse le maximum de 8 chiffres.

Fonctionnalités bonus

  • L'utilisateur peut cliquer sur un bouton «+/-» pour changer le signe du nombre actuellement affiché.
  • L'utilisateur peut voir un bouton de virgule décimale (.) Sur le pavé de saisie qui permet de saisir des nombres à virgule flottante jusqu'à 3 positions et d'effectuer des opérations jusqu'au nombre maximum de décimales entrées pour un nombre.

Liens et ressources utiles

  • Calculatrice (Wikipedia)
  • MDN

Exemples de projets

2. APP RECETTE

Niveau: 1 - Débutant

Vous ne l'avez peut-être pas réalisé, mais les recettes ne sont rien de plus que des algorithmes culinaires. Tout comme les programmes, les recettes sont une série d'étapes impératives qui, si elles sont suivies correctement, donnent un plat savoureux.

L'objectif de l'application Recipe est d'aider l'utilisateur à gérer les recettes d'une manière qui les rendra faciles à suivre.

Contraintes

  • Pour la version initiale de cette application, les données de recette peuvent être codées sous forme de fichier JSON. Après avoir implémenté la version initiale de cette application, vous pouvez développer cela pour conserver les recettes dans un fichier ou une base de données.

Histoires d'utilisateurs

  • L'utilisateur peut voir une liste de titres de recettes
  • L'utilisateur peut cliquer sur le titre d'une recette pour afficher une fiche de recette contenant le titre de la recette, le type de repas (petit-déjeuner, déjeuner, dîner ou collation), le nombre de personnes qu'il sert, son niveau de difficulté (débutant, intermédiaire, avancé), la liste des ingrédients (y compris leurs quantités) et les étapes de préparation.
  • L'utilisateur clique sur un nouveau titre de recette pour remplacer la carte actuelle par une nouvelle recette.

Fonctionnalités bonus

  • L'utilisateur peut voir une photo montrant à quoi ressemble l'article une fois qu'il a été préparé.
  • L'utilisateur peut rechercher une recette qui ne figure pas dans la liste des titres de recettes en entrant le nom du repas dans une zone de recherche et en cliquant sur un bouton «Rechercher». Toute API de recette open source peut être utilisée comme source pour les recettes (voir The MealDB ci-dessous).
  • L'utilisateur peut voir une liste de recettes correspondant aux termes de recherche
  • L'utilisateur peut cliquer sur le nom de la recette pour afficher sa fiche de recette.
  • L'utilisateur peut voir un message d'avertissement si aucune recette correspondante n'a été trouvée.
  • L'utilisateur peut cliquer sur un bouton `` Enregistrer '' sur les cartes des recettes situées via l'API pour enregistrer une copie dans ce fichier de recette ou cette base de données d'applications.

Liens et ressources utiles

  • Utiliser Fetch
  • Axios
  • L'API MealDB

Exemples de projets

3. DESSIN DE L'APPLICATION

Niveau: 2 - Intermédiaire

Créez des illustrations numériques sur une toile sur le Web pour les partager en ligne et également les exporter sous forme d'images.

Histoires d'utilisateurs

  • L'utilisateur peut dessiner en canvasutilisant la souris
  • L'utilisateur peut changer la couleur
  • L'utilisateur peut modifier la taille de l'outil
  • L'utilisateur peut appuyer sur un bouton pour effacer le canvas

Fonctionnalités bonus

  • L' utilisateur peut sauvegarder l'œuvre sous forme d'image ( .png, .jpgformat , etc.)
  • L' utilisateur peut dessiner des formes différentes ( rectangle, circle, star, etc.)
  • L'utilisateur peut partager l'œuvre d'art sur les réseaux sociaux

Liens et ressources utiles

  • Apprenez à créer une application de dessin à l'aide de p5js

Exemples de projets

4. TRADUCTEUR EMOJI

Niveau: 2 - Intermédiaire

Les émojis sont devenus la lingua franca de la société moderne. C'est un moyen amusant et rapide de communiquer, mais aussi un mécanisme extrêmement expressif pour communiquer des émotions et des réactions.

L'objectif de l'application Emoji Translator est de traduire le texte saisi par l'utilisateur en une chaîne équivalente d'emojis, traduite d'un ou plusieurs mots dans le texte d'origine, et des mots pour lesquels il n'y a pas d'emoji correspondant.

Histoires d'utilisateurs

  • L'utilisateur peut entrer une chaîne de mots, de chiffres et de ponctuation dans une zone de texte
  • L'utilisateur peut cliquer sur un bouton «Traduire» pour traduire les mots du texte saisi dans leurs émojis correspondants.
  • L'utilisateur peut voir un message d'avertissement si «Traduire» a été cliqué, mais la zone de texte d'entrée était vide ou inchangée depuis la dernière traduction.
  • L'utilisateur peut voir les éléments de texte dans le texte saisi traduits en leurs émojis équivalents dans une zone de texte de sortie. Les éléments de texte pour lesquels il n'y a pas d'emoji resteront inchangés.
  • L'utilisateur peut cliquer sur un bouton «Effacer» pour effacer les zones de texte d'entrée et de sortie.

Fonctionnalités bonus

  • Le développeur mettra en œuvre une fonctionnalité de synonyme d'emoji pour permettre à l'application de traduire une plus grande variété de mots en emoji.
  • L'utilisateur peut sélectionner la langue dans laquelle le texte d'entrée est saisi à partir d'une liste déroulante de langues.

Liens et ressources utiles

Liste complète des emojis v12.0

Exemples de projets

Emoji Traduire

5. APPLICATION MEME GENERATOR

Niveau: 2 - Intermédiaire

Permettez aux utilisateurs de générer des mèmes personnalisés en ajoutant du texte sur une image.

Histoires d'utilisateurs

  • L'utilisateur peut télécharger une image qui apparaîtra dans une toile
  • L'utilisateur peut ajouter du texte dans la partie supérieure de l'image
  • L'utilisateur peut ajouter du texte dans la partie inférieure de l'image
  • L'utilisateur peut sélectionner la couleur du texte
  • L'utilisateur peut sélectionner la taille du texte
  • L'utilisateur peut enregistrer le mème résultant

Fonctionnalités bonus

  • L'utilisateur peut sélectionner la famille de polices pour le texte
  • L'utilisateur peut partager le meme sur les réseaux sociaux (twitter, reddit, facebook, etc.)
  • L'utilisateur peut faire glisser le texte et le placer où il le souhaite au-dessus de l'image
  • L'utilisateur peut dessiner des formes au-dessus de l'image (cercles, rectangles ou dessin libre avec la souris)

Liens et ressources utiles

Travailler avec canvas est rendu très facile par la bibliothèque p5js.

Exemples de projets

Générateur de mèmes par imgflip

6. PRATIQUE DE Dactylographie

Niveau: 2 - Intermédiaire

Certaines choses sont si évidentes qu'elles peuvent être facilement négligées. En tant que développeur, votre capacité à taper rapidement et avec précision est un facteur qui influence votre productivité de développement. L'objectif de l'application Typing Practice est de vous fournir une pratique de frappe ainsi que des métriques pour vous permettre de mesurer vos progrès.

La pratique de la frappe affiche un mot que vous devez ensuite taper dans un intervalle de temps spécifique. Si le mot est mal tapé, il reste à l'écran et l'intervalle de temps reste le même. Mais lorsque le mot est correctement tapé, un nouveau mot s'affiche et l'intervalle de temps est légèrement réduit.

Espérons que cette pratique répétitive vous aidera à améliorer à la fois votre vitesse de frappe et votre précision.

Histoires d'utilisateurs

  • L'utilisateur peut voir les mots d'intervalle de temps doivent être saisis affichés dans la fenêtre de l'application.
  • L'utilisateur peut voir le nombre de tentatives réussies et le nombre total de tentatives dans une zone de score.
  • L'utilisateur peut cliquer sur un bouton «Démarrer la pratique» pour démarrer la session de pratique.
  • L'utilisateur peut voir le mot d'invite affiché dans une zone de texte.
  • L'utilisateur peut commencer à taper le mot dans une zone de saisie de texte.
  • L'utilisateur peut voir les lettres tapées clignoter si une lettre incorrecte est saisie et la zone de saisie de texte sera effacée.
  • L'utilisateur peut voir un message adjacent à la zone de saisie de texte indiquant que l'utilisateur doit réessayer si une lettre incorrecte est saisie.
  • L'utilisateur peut voir le nombre total de tentatives incrémentées dans la zone de score.
  • L'utilisateur peut voir un message de félicitations si le mot est correctement saisi.
  • L'utilisateur peut voir que les mots d'intervalle de temps doivent être tapés de façon décrémentée d'une petite quantité si le mot est correctement saisi.
  • L'utilisateur peut voir le nombre de tentatives réussies incrémenté dans la zone de score si le mot a été correctement tapé.
  • L'utilisateur peut cliquer sur un bouton «Arrêter la pratique» pour arrêter la séance d'entraînement.

Fonctionnalités bonus

  • L'utilisateur peut entendre une tonalité sonore unique signalant qu'un nouveau mot est affiché, qu'un mot est correctement saisi ou qu'une lettre incorrecte est saisie dans le mot.
  • L'utilisateur peut se connecter à l'application
  • L'utilisateur peut voir les statistiques de performances cumulées sur toutes ses séances d'entraînement.

Liens et ressources utiles

  • touche Bas
  • setInterval

Exemples de projets

Tuteur de frappe Twiddler

7. ASCENSEUR

Niveau: 3 - Avancé

Il est difficile de penser à un monde sans ascenseurs. Surtout si vous devez monter et descendre 20 volées d'escaliers chaque jour. Mais, si vous y réfléchissez, les ascenseurs étaient l'une des implémentations originales d'événements et de gestionnaires d'événements bien avant l'arrivée des applications Web.

L'objectif de l'application Ascenseur est de simuler le fonctionnement d'un ascenseur et surtout, comment gérer les événements générés lorsque les occupants des bâtiments l'utilisent. Cette application simule les occupants appelant à un ascenseur depuis n'importe quel étage et appuyant sur les boutons à l'intérieur de l'ascenseur pour indiquer l'étage qu'ils souhaitent visiter.

Contraintes

  • Vous devez implémenter un seul gestionnaire d'événements pour les boutons haut et bas de chaque étage. Par exemple, s'il y a 4 étages, un seul gestionnaire d'événements doit être implémenté au lieu de 8 (deux boutons par étage).
  • De même, un seul gestionnaire d'événements doit être implémenté pour tous les boutons du panneau de commande dans l'ascenseur plutôt qu'un gestionnaire d'événements unique pour chaque bouton.

Histoires d'utilisateurs

  • L'utilisateur peut voir un diagramme en coupe d'un bâtiment de quatre étages, une cage d'ascenseur, l'ascenseur et un bouton haut au premier étage, des boutons haut et bas aux deuxième et troisième étages et un bouton bas au quatrième étage.
  • L'utilisateur peut voir le panneau de commande de l'ascenseur avec un bouton pour chacun des étages sur le côté du diagramme.
  • L'utilisateur peut cliquer sur le bouton haut et bas de n'importe quel étage pour appeler l'ascenseur.
  • L'utilisateur peut s'attendre à ce que le fait de cliquer sur les boutons haut et bas de n'importe quel étage pour demander l'ascenseur soit mis en file d'attente et entretenu dans l'ordre où ils ont été cliqués.
  • L'utilisateur peut voir l'ascenseur monter et descendre de la gaine jusqu'à l'étage auquel il a été appelé.
  • L'utilisateur peut cliquer sur le panneau de commande de l'ascenseur pour sélectionner l'étage auquel il doit se rendre.
  • L'utilisateur peut s'attendre à ce que l'ascenseur s'arrête pendant 5 secondes en attendant qu'un bouton d'étage sur le panneau de commande soit cliqué. Si un bouton d'étage n'est pas cliqué dans ce délai, l'ascenseur traitera la prochaine demande d'appel.
  • L'utilisateur peut s'attendre à ce que l'ascenseur retourne au premier étage lorsqu'il n'y a aucune demande à traiter.

Fonctionnalités bonus

  • L'utilisateur peut voir une notification d'avertissement si le nombre de demandes d'ascenseur dépasse le nombre maximum autorisé. Cette limite est laissée au développeur.
  • L'utilisateur peut entendre un son lorsque l'ascenseur arrive à un étage.
  • L'utilisateur peut voir un occupant arriver au hasard à un étage pour indiquer quand l'utilisateur doit cliquer sur le bouton d'appel d'ascenseur vers le haut ou vers le bas à cet étage.
  • L'utilisateur peut spécifier l'intervalle de temps entre l'arrivée de nouveaux occupants pour appeler un ascenseur.

Liens et ressources utiles

File d'attente premier entré, premier sorti (Wikipedia)

Exemples de projets

8. APPLICATION FAST FOOD SIMULATOR

Niveau: 3 - Avancé

L'application Fast Food simule le fonctionnement d'un simple restaurant à emporter et est conçue pour aider le développeur à mettre en œuvre ses connaissances des principes de conception Promises et SOLID.

Cette application simule les clients d'un restaurant à emporter passant des commandes et en attendant qu'ils soient préparés et livrés à un comptoir de ramassage. Après avoir passé la commande, le client attend que la commande soit annoncée avant de la récupérer et de se rendre dans la salle à manger.

Les user stories qui composent cette application s'articulent autour de quatre rôles distincts:

  • Utilisateur - l'utilisateur final utilisant l'application
  • Client - le client simulé
  • Order Taker - le preneur de commande simulé
  • Cook - le cuisinier simulé
  • Serveur - le serveur simulé

Cette application a pas mal d'histoires d'utilisateurs. Ne soyez pas submergé cependant. Prenez le temps d'esquisser non seulement l'interface utilisateur, mais aussi comment les différents acteurs (rôles) interagissent et construisent progressivement l'application en suivant les principes Agile.

Contraintes

  • Les tickets de commande peuvent être représentés comme deux types de promesses différents - l'un que le serveur attend pendant que le cuisinier prépare la commande et l'autre que le client attend pendant qu'il est dans la file d'attente.
  • Utilisez l'équivalent natif de JS Promises dans la langue dans laquelle vous choisissez de développer. Les développeurs JS doivent utiliser des Promises natives et non async/await.
  • Créez cette application en utilisant les fonctionnalités de la langue maternelle. Vous ne pouvez PAS utiliser un package ou une bibliothèque de simulation.
  • Les nouveaux clients arrivent dans la ligne de commande à un intervalle de temps fixe. En d'autres termes, les nouveaux clients arrivent à un rythme constant.
  • Les tickets de commande sont également traités à un intervalle de temps fixe. Ils sont réalisés à un rythme constant.

Histoires d'utilisateurs

Fonctionnement de l'application

  • L'utilisateur peut voir une zone de saisie qui permet la saisie de l'intervalle de temps pour l'arrivée du client et d'un intervalle de temps pour l'exécution d'un ticket de commande par le cuisinier.
  • L'utilisateur peut voir un message d'avertissement personnalisé si l'intervalle d'arrivée du client ou l'intervalle de traitement des commandes n'est pas correctement saisi.
  • L'utilisateur peut démarrer la simulation en cliquant sur un bouton Démarrer.
  • L'utilisateur peut voir une zone de ligne de commande contenant une zone de texte indiquant le nombre de clients en attente de passer des commandes.
  • L'utilisateur peut voir une zone de commande contenant des zones de texte indiquant le numéro de commande en cours de prise.
  • L'utilisateur peut voir un espace cuisine contenant une zone de texte indiquant le numéro de commande en cours de préparation et une zone de texte répertoriant les commandes en attente dans l'ordre, ainsi qu'un décompte du nombre de commandes en attente.
  • L'utilisateur peut voir une zone de retrait contenant une zone de texte indiquant le numéro de commande actuellement disponible pour le retrait par le client et une zone de texte indiquant le nombre de clients en attente dans la ligne de service.
  • L'utilisateur peut arrêter la simulation à tout moment en cliquant sur un bouton Arrêter.

Fonctionnalités bonus

  • L'utilisateur peut spécifier le temps nécessaire à un preneur de commande pour créer un ticket de commande .
  • L'utilisateur peut spécifier le temps nécessaire au serveur pour livrer une commande au client.
  • L'utilisateur peut spécifier la durée totale pendant laquelle la simulation doit s'exécuter une fois que le bouton Démarrer a été cliqué.
  • L'utilisateur peut voir une vue animée des clients et des commandes à mesure qu'ils se déplacent dans le flux de travail.

Liens et ressources utiles

  • Fast Food Simulator - Flux de travail logique
  • Manifeste Agile et 12 principes du logiciel Agile
  • Principes SOLID que tout développeur doit connaître
  • Utiliser les promesses
  • Promettre

9. JEU SHELL

Niveau: 3 - Avancé

Un jeu Shell est un jeu de hasard classique qui remonte à la Grèce antique. Le jouer nécessite trois coquilles, un pois, la dextérité de la main de l'opérateur et de vives capacités d'observation de la part du joueur. C'est aussi un jeu d'arnaque classique car il est facile pour l'opérateur d'escroquer le joueur. Dieu merci, ce dernier n'est pas notre intention avec cette application.

Ce jeu Shell est destiné à fournir une interface graphique au jeu shell classique et à fournir au joueur un jeu honnête à jouer. Notre jeu dessine trois coquilles sur la toile avec le pois, déplace le pois sous une, des coquilles, et mélange les coquilles pendant un intervalle de temps spécifique. L'utilisateur doit alors cliquer sur la coquille sous laquelle il pense que le pois est caché. L'utilisateur est autorisé à continuer à deviner jusqu'à ce que le pois soit localisé.

Histoires d'utilisateurs

  • L'utilisateur peut voir la toile avec trois coquilles et le pois.
  • L'utilisateur peut cliquer sur la coquille sous laquelle le pois doit être caché.
  • L'utilisateur peut voir le petit pois se déplacer sous la coque sur laquelle l'utilisateur a cliqué.
  • L'utilisateur peut cliquer sur un bouton «Shuffle» pour lancer un mélange animé des coquilles pendant 5 secondes.
  • L'utilisateur peut cliquer sur la coquille sous laquelle il pense que le pois est caché lorsque l'animation s'arrête.
  • L'utilisateur peut voir la coquille sur laquelle il a été cliqué se lever pour révéler si le pois est caché en dessous.
  • L'utilisateur peut continuer à cliquer sur les coquilles jusqu'à ce que le pois soit trouvé.
  • L'utilisateur peut voir un message de félicitations lorsque le pois est localisé
  • L'utilisateur peut démarrer un nouveau jeu en cliquant sur une coquille sous laquelle le pois doit être caché (étape n ° 2 ci-dessus). Les étapes ci-dessus sont ensuite répétées.

Fonctionnalités bonus

  • L'utilisateur peut voir un panneau de score contenant le nombre de victoires et le nombre de parties jouées.
  • L'utilisateur peut voir le nombre de parties jouées augmenter lorsque le pois est caché sous une coquille
  • L'utilisateur peut voir le nombre de victoires incrémenté lorsque le pois est trouvé lors de la première estimation.
  • L'utilisateur peut voir la coquille cachant le pois à animer (couleur, taille ou autre effet) lorsqu'il est cliqué (une estimation correcte).

Liens et ressources utiles

  • Jeu de Shell (Wikipédia)
  • Animation Javascript HTML DOM
  • Bibliothèque d'animation p5js

Exemples de projets

Conclusion

N'oubliez pas de consulter l'article précédent et le référentiel si vous souhaitez trouver plus d'idées d'application / de projet.

De plus, si les informations de cet article et du repo vous ont été utiles de quelque manière que ce soit, assurez-vous de lui donner une étoile?; de cette façon, d'autres peuvent le trouver et en profiter aussi! Merci!

Avez-vous des suggestions sur la façon dont nous pourrions améliorer ce projet dans son ensemble? Faites le nous savoir! Nous serions ravis d'entendre vos commentaires!

Vous êtes invités à contribuer avec vos propres idées! Nous pouvons faire de ce référentiel la ressource incontournable en matière d'idées d'applications.

Publié à l'origine sur www.florin-pop.com.