Voici quelques idées d'applications que vous pouvez créer pour améliorer vos compétences en codage

Avez-vous déjà voulu construire quelque chose mais vous ne saviez pas quoi faire? Tout comme les auteurs ont parfois le «blocage de l'écrivain», cela vaut également pour les développeurs.

Avec mon ami Jim, nous avons créé une collection d'idées d'application qui vise à résoudre ce problème une fois pour toutes!

Ces applications sont:

  • super pour améliorer vos compétences en codage
  • formidable d'expérimenter de nouvelles technologies
  • idéal à ajouter à votre portefeuille pour impressionner votre prochain employeur / client
  • idéal pour être utilisé comme exemples dans des tutoriels (articles ou vidéos)
  • facile à compléter et facilement extensible avec de nouvelles fonctionnalités

Ce n'est pas simplement une simple liste de projets, mais une collection qui décrit chaque projet avec suffisamment de détails pour que vous puissiez le développer de A à Z!

Chaque spécification de projet contient les éléments suivants:

  1. Un objectif clair et descriptif
  2. Une liste des User Stories qui devraient être implémentées (ces histoires servent plus de lignes directrices qu'une liste forcée de choses à faire . N'hésitez pas à ajouter vos propres fonctionnalités si vous le souhaitez)
  3. Une liste de fonctionnalités bonus qui améliorent non seulement le projet de base, mais également vos compétences en même temps
  4. Toutes les ressources et liens pour vous aider à trouver ce dont vous avez besoin pour mener à bien le projet

Projets

Tous les projets sont divisés en trois niveaux en fonction des connaissances et de l'expérience nécessaires pour les mener à bien. Ces niveaux sont:

  1. Débutant - Les développeurs aux premières étapes de leur parcours d'apprentissage. Ceux qui se concentrent généralement sur la création d'applications destinées aux utilisateurs.
  2. Intermédiaire - Développeurs à un stade intermédiaire d'apprentissage et d'expérience. Ils maîtrisent l'UI / UX, utilisent des outils de développement et créent des applications qui utilisent les services d'API.
  3. Avancé - Les développeurs qui possèdent tout ce qui précède et qui apprennent des techniques plus avancées telles que la mise en œuvre d'applications BackEnd et de services de base de données.

Vous trouverez ci-dessous 5 projets pour chacun des niveaux ( 15 au total ), mais il y a plus de 30 projets (pour le moment) dans ce référentiel GitHub. Assurez-vous de le vérifier car nous prévoyons d'ajouter d'autres projets à l'avenir. Vous êtes invités à aider! (Plus d'informations à ce sujet dans la section Contribuer ci-dessous?)

1. Application Notes

Niveau: 1 - Débutant

Description : Créez et stockez vos notes pour un usage ultérieur!

Histoires d'utilisateurs

  • L'utilisateur peut créer une note
  • L'utilisateur peut modifier une note
  • L'utilisateur peut supprimer une note
  • Lors de la fermeture de la fenêtre du navigateur, les notes seront stockées et lorsque l'utilisateur reviendra, les données seront récupérées

Fonctionnalités bonus

  • L'utilisateur peut créer et modifier une note au format Markdown. Lors de l'enregistrement, il convertira Markdown en HTML
  • L'utilisateur peut voir la date à laquelle il a créé la note

Liens et ressources utiles

  • stockage local
  • Guide de démarque
  • Marqué - Un analyseur de démarques

Exemple de projet

2. Lumières de Noël

Niveau: 1 - Débutant

Description : L'application Christmas Lights s'appuie sur vos talents de développement pour créer un affichage lumineux fascinant. Votre tâche consiste à dessiner sept cercles colorés d'affilée et en fonction d'une minuterie, modifier l'intensité de chaque cercle. Lorsqu'un cercle est éclairci, son prédécesseur retrouve son intensité normale.

Cela simule l'effet d'une chaîne de lumières ondulantes, similaires à celles affichées pendant les vacances de Noël.

Histoires d'utilisateurs

  • L'utilisateur peut appuyer sur un bouton pour démarrer et arrêter l'affichage
  • L'utilisateur peut modifier l'intervalle de temps en contrôlant le changement d'intensité

Fonctionnalités bonus

  • L'utilisateur peut sélectionner la couleur utilisée pour remplir chaque cercle
  • L'utilisateur peut spécifier la valeur d'intensité
  • L'utilisateur peut modifier la taille de n'importe quel cercle de la ligne
  • L'utilisateur peut spécifier le nombre de lignes à inclure dans l'affichage. De une à sept lignes peuvent être choisies

Liens et ressources utiles

  • Exemple d'image
  • Matrice LED Adafruit

Exemple de projet

3. FlipImage

Niveau: 1 - Débutant

Description : il est important pour les développeurs Web de comprendre les bases de la manipulation d'images, car les applications Web riches reposent sur des images pour ajouter de la valeur à l'interface utilisateur et à l'expérience utilisateur (UI / UX).

FlipImage explore un aspect de la manipulation d'image - la rotation d'image. Cette application affiche un panneau carré contenant une seule image présentée dans une matrice 2x2. En utilisant un ensemble de flèches haut, bas, gauche et droite adjacentes à chacune des images, l'utilisateur peut les retourner verticalement ou horizontalement.

Vous ne devez utiliser que du HTML, du CSS et du Javascript natifs pour implémenter cette application. Les packages d'images et les bibliothèques ne sont pas autorisés.

Histoires d'utilisateurs

  • L'utilisateur peut voir un volet contenant une seule image répétée dans une matrice 2x2
  • L'utilisateur peut retourner n'importe laquelle des images verticalement ou horizontalement à l'aide d'un ensemble de flèches haut, bas, gauche et droite à côté de l'image

Fonctionnalités bonus

  • L'utilisateur peut modifier l'image par défaut en entrant l'URL d'une autre image dans un champ de saisie
  • L'utilisateur peut afficher la nouvelle image en cliquant sur un bouton `` Afficher '' à côté du champ de saisie
  • L'utilisateur peut voir un message d'erreur si la nouvelle URL d'images n'est pas trouvée

Liens et ressources utiles

  • Comment retourner une image
  • Créer une animation CSS Flipping

Exemple de projet

4. Application Quiz

Niveau: 1 - Débutant

Description : Mettez en pratique et testez vos connaissances en répondant à des questions dans une application de quiz.

En tant que développeur, vous pouvez créer une application de quiz pour tester les compétences de codage d'autres développeurs. (HTML, CSS, JavaScript, Python, PHP, etc…)

Histoires d'utilisateurs

  • L'utilisateur peut démarrer le quiz en appuyant sur button
  • L'utilisateur peut voir une question avec 4 réponses possibles
  • Après avoir sélectionné une réponse, affichez la question suivante à l'utilisateur. Faites ceci jusqu'à ce que le quiz soit terminé
  • En fin de compte, l'utilisateur peut voir les statistiques suivantes:
  1. Temps nécessaire pour terminer le quiz
  2. Combien de réponses correctes a-t-il obtenues
  3. Un message indiquant si lui passedou failedle quiz

Fonctionnalités bonus

  • L'utilisateur peut partager le résultat d'un quiz sur les réseaux sociaux
  • Ajoutez plusieurs quiz à l'application. L'utilisateur peut sélectionner lequel prendre
  • L'utilisateur peut créer un compte et avoir tous les scores enregistrés dans son tableau de bord. L'utilisateur peut répondre à un quiz plusieurs fois

Liens et ressources utiles

  • Ouvrir la base de données Trivia

Exemples de projets

Application de quiz construite avec React (attendez qu'elle se charge car elle est hébergée sur Heroku)

5. Convertisseur de nombres romains en nombres décimaux

Niveau: 1 - Débutant

Description : Le système numérique représenté par des chiffres romains est originaire de la Rome antique et est resté la manière habituelle d'écrire les nombres dans toute l'Europe jusqu'à la fin du Moyen Âge. Les chiffres romains, tels qu'utilisés aujourd'hui, emploient sept symboles, chacun avec une valeur entière fixe.

Voir le tableau ci-dessous les paires Symbole - Valeur :

  • I - 1
  • V - 5
  • X - 10
  • L - 50
  • C - 100
  • D - 500
  • M - 1000

Histoires d'utilisateurs

  • L'utilisateur doit pouvoir entrer un nombre romain dans un champ de saisie
  • L'utilisateur pouvait voir les résultats dans un seul champ de sortie contenant l'équivalent décimal (base 10) du nombre romain entré en appuyant sur un bouton
  • Si un mauvais symbole est entré, l'utilisateur devrait voir une erreur

Fonctionnalités bonus

  • L'utilisateur peut voir la conversion être effectuée automatiquement au fur et à mesure que je tape
  • L'utilisateur doit pouvoir convertir de la décimale en romain (vice-versa)

Liens et ressources utiles

  • Une explication des nombres romains

Exemple de projet

Convertisseur de nombres romains

6. Application Book Finder

Niveau: 2 - Intermédiaire

Description : Créez une application qui permettra aux utilisateurs de rechercher des livres en entrant une requête (titre, auteur, etc.). Affichez les livres résultants dans une liste sur la page avec toutes les données correspondantes.

Histoires d'utilisateurs

  • L'utilisateur peut saisir une requête de recherche dans un inputchamp
  • L'utilisateur peut soumettre la requête. Cela appellera une API qui renverra un tableau de livres avec les données correspondantes ( titre , auteur , date de publication , image , etc.)
  • L'utilisateur peut voir la liste des livres apparaissant sur la page

Fonctionnalités bonus

  • Pour chaque élément de la liste, ajoutez un lien qui enverra l'utilisateur vers un site externe contenant plus d'informations sur le livre
  • Mettre en œuvre un design réactif
  • Ajouter des animations de chargement

Liens et ressources utiles

Vous pouvez utiliser l'API Google Livres

Exemple de projet

LivreRechercher-Réagir

7. Jeu de cartes-mémoire

Niveau: 2 - Intermédiaire

Description : La mémoire de cartes est un jeu dans lequel vous devez cliquer sur une carte pour voir quelle image se trouve en dessous et essayer de trouver l'image correspondante sous les autres cartes.

Histoires d'utilisateurs

  • L'utilisateur peut voir une grille avec des cartes nxn ( nest un entier). Toutes les cartes sont initialement face cachée ( hiddenétat)
  • L'utilisateur peut cliquer sur un bouton pour démarrer le jeu. Lorsque ce bouton est cliqué, une minuterie démarre
  • L'utilisateur peut cliquer sur n'importe quelle carte pour dévoiler l'image qui se trouve en dessous (la changer en visibleétat). L'image sera affichée jusqu'à ce que l'utilisateur clique sur une 2ème carte

Lorsque l'utilisateur clique sur la 2ème carte:

  • S'il y a un match, les 2 cartes seront éliminées du jeu (soit les cacher / les retirer, soit les laisser dans l' visibleétat)
  • S'il n'y a pas de correspondance, les 2 cartes reviendront à leur état d'origine ( hiddenétat)
  • Lorsque toutes les correspondances ont été trouvées, l'utilisateur peut voir une boîte de dialogue affichant un message de félicitations avec un compteur affichant le temps qu'il a fallu pour terminer la partie

Fonctionnalités bonus

  • L'utilisation peut choisir entre plusieurs niveaux de difficulté (facile, moyen, difficile). Une difficulté accrue signifie: réduire le temps disponible pour terminer et / ou augmenter le nombre de cartes
  • L'utilisateur peut voir les statistiques du jeu (nombre de fois qu'il a gagné / perdu, le meilleur temps pour chaque niveau)

Liens et ressources utiles

  • Wikipédia

Exemples de projets

Flip - jeu de mémoire de cartes

Jeu de cartes mémoire SMB3

8. Générateur de table Markdown

Niveau: 2 - Intermédiaire

Description : Créez une application qui convertira une table régulière avec des données fournies par l'utilisateur (facultativement) en une table au format Markdown.

Histoires d'utilisateurs

  • L'utilisateur peut créer un HTML tableavec un nombre donné de lignes et de colonnes
  • L'utilisateur peut insérer du texte dans chaque cellule du HTML table
  • L'utilisateur peut générer un Markdown formatted tablequi contiendra les données duHTML table
  • L'utilisateur peut prévisualiser le Markdown formatted table

Fonctionnalités bonus

  • L'utilisateur peut copier le Markdown formatted tabledans le presse-papiers en appuyant sur un bouton
  • L'utilisateur peut insérer une nouvelle ligne ou colonne à un emplacement spécifié
  • L'utilisateur peut supprimer une ligne ou une colonne entièrement
  • L'utilisateur peut aligner (à gauche , à droite ou au centre ) une cellule , une colonne , une ligne ou le tableau entier

Liens et ressources utiles

  • Guide de démarque
  • Marqué - Un analyseur de démarques
  • Comment copier dans le presse-papiers

Exemple de projet

Générateur de tableaux / Tables de démarque

9. Art des cordes

Niveau: 2 - Intermédiaire

Description : Le but de String Art est de fournir au développeur la pratique de créer un graphique animé simple, en utilisant la géométrie dans l'algorithme d'animation, et en créant quelque chose qui est visuellement agréable à regarder.

String Art dessine une seule ligne multicolore qui se déplace doucement jusqu'à ce qu'une extrémité touche un côté de la fenêtre englobante. Au point, il touche un effet de «rebond» est appliqué pour changer sa direction.

Un effet d'entraînement est créé en ne conservant que 10 à 20 images de la ligne lorsqu'elle se déplace. Les images plus anciennes sont progressivement estompées jusqu'à ce qu'elles disparaissent.

Les bibliothèques d'animation ne sont pas autorisées. Utilisez uniquement du HTML / CSS / JavaScript Vanilla.

Histoires d'utilisateurs

  • Commencez par dessiner une ligne multicolore à une position aléatoire dans la limite de sa fenêtre englobante
  • Toutes les 20 ms, dessinez une nouvelle copie de la ligne à une nouvelle position en fonction d'une trajectoire - la distance incrémentielle de la ligne précédente en fonction des points d'extrémité
  • Lorsque l'une des extrémités de la ligne touche la limite de la fenêtre englobante, changez sa direction et modifiez son angle de manière aléatoire
  • Estompez progressivement l'intensité des anciennes lignes de sorte que seules les 10 à 20 lignes les plus récentes soient visibles pour créer une impression de mouvement ou d'ondulation

Fonctionnalités bonus

  • L'utilisateur peut spécifier la longueur de la ligne et sa vitesse
  • L'utilisateur peut spécifier les multiples lignes dans la fenêtre, se déplaçant toutes le long de trajectoires et de vitesses différentes

Liens et ressources utiles

  • Utilisation des animations et transitions en plusieurs étapes
  • Bases de l'animation

Exemple de projet

Ce projet est très proche, mais a une petite fenêtre et est monochromatique. Daniel Cortes

10. Application à faire

Niveau: 2 - Intermédiaire

Description : l'application To-Do classique dans laquelle un utilisateur peut noter tout ce qu'il souhaite accomplir.

Histoires d'utilisateurs

  • L'utilisateur peut voir un inputchamp dans lequel il peut saisir une tâche
  • En appuyant sur Entrée (ou sur un bouton), l'utilisateur peut soumettre la tâche à faire et peut voir qu'elle est ajoutée à une liste de tâches
  • L'utilisateur peut marquer une tâche comme completed
  • L'utilisateur peut supprimer une tâche à faire en appuyant sur un bouton (ou sur la tâche elle-même)

Fonctionnalités bonus

  • L'utilisateur peut modifier une tâche
  • L'utilisateur peut voir une liste avec toutes les tâches terminées
  • L'utilisateur peut voir une liste avec toutes les tâches actives
  • L'utilisateur peut voir la date à laquelle il a créé la tâche
  • Lors de la fermeture de la fenêtre du navigateur, les tâches seront stockées et lorsque l'utilisateur reviendra, les données seront récupérées

Liens et ressources utiles

  • stockage local

Exemples de projets

Application Todo conçue avec React

11. Moteur de jeu de cuirassé

Niveau: 3 - Avancé

Description : Battleship Game Engine (BGE) implémente le jeu de société classique au tour par tour sous la forme d'un package séparé de toute couche de présentation. Il s'agit d'un type de modèle architectural utile dans de nombreuses applications, car il permet à n'importe quel nombre d'applications d'utiliser le même service.

Le BGE lui-même est appelé par une série d'appels de fonction plutôt que par des actions directement couplées de l'utilisateur final. À cet égard, l'utilisation du BGE est similaire à l'utilisation d'une API ou d'une série de routes exposées par un serveur Web.

Ce défi nécessite que vous développiez le BGE et une couche de présentation très fine basée sur du texte pour les tests, distincte du moteur lui-même. Pour cette raison, les User Stories ci-dessous sont divisées en deux ensembles - un pour le BGE et un pour la couche de présentation textuelle.

BGE est responsable du maintien de l'état du jeu.

Histoires d'utilisateurs

BGE

  • L'appelant peut invoquer une startGame()fonction pour commencer une partie à 1 joueur. Cette fonction générera un plateau de jeu 8x8 composé de 3 navires d'une largeur d'un carré et d'une longueur de:
  1. Destructeur: 2 carrés
  2. Cruiser: 3 carrés
  3. Cuirassé: 4 cases

startGame() placera au hasard ces navires sur le plateau dans n'importe quelle direction et renverra un tableau représentant le placement des navires.

  • L'appelant peut invoquer une shoot()fonction en passant les coordonnées de la ligne et de la colonne cible de la cellule ciblée sur le plateau de jeu. shoot()renverra des indicateurs indiquant si le tir a abouti à un coup ou un échec, le nombre de navires restants (c'est-à-dire pas encore coulés), le tableau de placement des navires et le tableau des hits et des ratés mis à jour.

Les cellules du tableau des coups et des échecs contiendront un espace si elles n'ont pas encore été ciblées, Osi elles ont été ciblées mais qu'aucune partie d'un navire ne se trouvait à cet endroit, ou Xsi la cellule était occupée par une partie d'un navire.

Couche de présentation textuelle

  • L'utilisateur peut voir le tableau des succès et des échecs affichés comme une représentation de personnage en 2 dimensions du plateau de jeu renvoyé par la startGame()fonction.
  • L'utilisateur peut être invité à entrer les coordonnées d'une case cible sur le plateau de jeu.
  • L'utilisateur peut voir une mise à jour des hits et manquer l'affichage du tableau après avoir pris une photo.
  • L'utilisateur peut voir un message après chaque tir indiquant si le tir a abouti à un succès ou à un échec.
  • L'utilisateur peut voir un message de félicitations après le tir qui coule le dernier navire restant.
  • L'utilisateur peut être invité à rejouer à la fin de chaque partie. Refuser de jouer à nouveau arrête le jeu.

Fonctionnalités bonus

BGE

  • L'appelant peut spécifier le nombre de lignes et de colonnes dans le plateau de jeu en tant que paramètre de la startGame()fonction.
  • L'appelant peut appeler une gameStats()fonction qui renvoie un objet Javascript contenant des métriques pour le jeu en cours. Par exemple, le nombre de tours joués, le nombre actuel de coups et échecs, etc.
  • L'appelant peut spécifier le nombre de joueurs (1 ou 2) lors de l'appel, startGame()ce qui générera un tableau pour chaque joueur peuplé au hasard de navires.

shoot()acceptera le numéro du joueur pour lequel le coup est fait ainsi que les coordonnées du coup. Les données qu'il renvoie seront pour ce joueur.

Couche de présentation textuelle

  • L'utilisateur peut voir la statique actuelle du jeu à tout moment en entrant la phrase statsà la place des coordonnées de la cible. (Notez que cela nécessite la gameStats()fonction dans le BGE)
  • L'utilisateur peut spécifier qu'une partie à deux joueurs doit être jouée, chaque joueur alternant ses tours dans la même session terminale (notez que cela nécessite des fonctionnalités bonus correspondantes dans le BGE)
  • L'utilisateur peut voir le numéro du joueur dans les invites associées aux entrées à chaque tour.
  • L'utilisateur peut voir le plateau des deux joueurs à la fin de chaque tour.

Liens et ressources utiles

  • Jeu de cuirassé (Wikipedia)
  • Règles du jeu de cuirassé (Hasbro)

Exemples de projets

Cette vidéo YouTube montre comment se joue un jeu de cuirassé textuel.

L'exemple suivant est fourni à titre de démonstration du jeu Battleship s'il ne vous est pas familier. N'oubliez pas que vous devez implémenter une couche de présentation textuelle pour les tests. Jeu de cuirassé par Chris Brody

12. Application de chat

Niveau: 3 - Avancé

Description : interface de chat en temps réel où plusieurs utilisateurs peuvent interagir les uns avec les autres en envoyant des messages.

En tant que MVP (Minimum Viable Product), vous pouvez vous concentrer sur la création de l'interface de chat. Des fonctionnalités en temps réel peuvent être ajoutées plus tard (les fonctionnalités bonus).

Histoires d'utilisateurs

  • L'utilisateur est invité à entrer un nom d'utilisateur lorsqu'il visite l'application de chat. Le nom d'utilisateur sera stocké dans l'application
  • L'utilisateur peut voir un input fieldendroit où il peut taper un nouveau message
  • En appuyant sur la entertouche ou en cliquant sur le sendbouton, le texte sera affiché à chat boxcôté de son nom d'utilisateur (par exemple John Doe: Hello World!)

Fonctionnalités bonus

  • Les messages seront visibles par tous les utilisateurs qui sont dans l'application de chat (en utilisant WebSockets)
  • Lorsqu'un nouvel utilisateur rejoint le chat, un message est affiché à tous les utilisateurs existants
  • Les messages sont enregistrés dans une base de données
  • L'utilisateur peut envoyer des images, des vidéos et des liens qui s'afficheront correctement
  • L'utilisateur peut sélectionner et envoyer un emoji
  • Les utilisateurs peuvent discuter en privé
  • Les utilisateurs peuvent rejoindre channelssur des sujets spécifiques

Liens et ressources utiles

  • Socket.io
  • Comment créer une application de chat React.js en 10 minutes - article

Exemple de projet

Chatty2

13. Chronologie de GitHub

Niveau: 3 - Avancé

Description : Les API et la représentation graphique des informations sont les caractéristiques des applications Web modernes. La chronologie GitHub combine les deux pour créer un historique visuel de l'activité GitHub d'un utilisateur.

L'objectif de la chronologie GitHub est d'accepter un nom d'utilisateur GitHub et de produire une chronologie contenant chaque dépôt et annotée avec les noms des dépôts, la date de leur création et leurs descriptions. Le calendrier devrait être celui qui pourrait être partagé avec un employeur potentiel. Il doit être facile à lire et utiliser efficacement la couleur et la typographie.

Seuls les dépôts GitHub publics doivent être affichés.

Histoires d'utilisateurs

  • L'utilisateur peut entrer un nom d'utilisateur GitHub
  • L'utilisateur peut cliquer sur un bouton «Générer» pour créer et afficher la chronologie du dépôt de l'utilisateur nommé
  • L'utilisateur peut voir un message d'avertissement si le nom d'utilisateur GitHub n'est pas un nom d'utilisateur GitHub valide.

Fonctionnalités bonus

  • L'utilisateur peut voir un résumé du nombre de dépôts comptés par année de création

Liens et ressources utiles

GitHub propose deux API que vous pouvez utiliser pour accéder aux données du dépôt. Vous pouvez également choisir d'utiliser un package NPM pour accéder à l'API GitHub.

La documentation de l'API GitHub est disponible à l'adresse:

  • API REST GitHub V3
  • API GitHub GraphQL V4

Un exemple de code montrant comment utiliser les API GitHub sont:

Vous pouvez utiliser cette commande CURL pour voir le JSON renvoyé par l'API REST V3 pour vos dépôts:

curl -u "user-id" //api.github.com/users/user-id/repos

Exemples de projets

14. Épeler

Niveau: 3 - Avancé

Description : Savoir épeler est un élément fondamental pour parler couramment n'importe quelle langue. Que vous soyez un jeune apprenant à épeler ou un individu apprenant une nouvelle langue, le fait de pouvoir pratiquer contribue à solidifier vos compétences linguistiques.

L'application Spell-It aide les utilisateurs à pratiquer leur orthographe en jouant l'enregistrement audio d'un mot que l'utilisateur doit ensuite épeler à l'aide du clavier de l'ordinateur.

Histoires d'utilisateurs

  • L'utilisateur peut cliquer sur le bouton "Lecture" pour entendre le mot à saisir
  • L'utilisateur peut voir les lettres affichées dans la zone de texte de saisie de mot lorsqu'elles sont entrées sur le clavier
  • L'utilisateur peut cliquer sur le bouton «Entrée» pour soumettre le mot qui a été tapé dans la zone de texte d'entrée de mot
  • L'utilisateur peut voir un message de confirmation lorsque le mot correct est saisi
  • L'utilisateur peut voir un message demandant que le mot soit à nouveau saisi lorsqu'il est mal orthographié
  • L'utilisateur peut voir un décompte du nombre d'orthographes correctes, le nombre total de mots tentés et un pourcentage d'entrées réussies.

Fonctionnalités bonus

  • L'utilisateur peut entendre un son de confirmation lorsque le mot est correctement orthographié
  • L'utilisateur peut entendre un son d'avertissement lorsque le mot est mal orthographié
  • L'utilisateur peut cliquer sur le bouton `` Indice '' pour mettre en évidence les lettres incorrectes dans la zone de texte de saisie de mot
  • L'utilisateur peut appuyer sur la touche «Entrée» du clavier pour soumettre un mot saisi ou cliquer sur le bouton «Entrée» dans la fenêtre de l'application

Liens et ressources utiles

  • Texas Instruments Speak and Spell
  • API Web Audio
  • Cliquez et parlez

Exemples de projets

Assistant Word pour iOS

Speak N Spell sur Google Play

15. Application d'enquête

Niveau: 3 - Avancé

Description : les sondages constituent un élément précieux de toute boîte à outils pour les développeurs. Ils sont utiles pour obtenir des commentaires de vos utilisateurs sur une variété de sujets, y compris la satisfaction des applications, les exigences, les besoins à venir, les problèmes, les priorités et simplement des aggravations pour n'en nommer que quelques-uns.

L'application Survey vous donne la possibilité d'apprendre en développant une application complète que vous pourrez ajouter à votre boîte à outils. Il permet de définir une enquête, de permettre aux utilisateurs de répondre dans un délai prédéfini et de tabuler et de présenter les résultats.

Les utilisateurs de cette application sont divisés en deux rôles distincts, chacun ayant des exigences différentes:

  • Les coordinateurs d'enquête définissent et conduisent des enquêtes. Il s'agit d'une fonction administrative non disponible pour les utilisateurs normaux.
  • Répondants au sondage Remplissez les sondages et consultez les résultats. Ils n'ont aucun privilège administratif au sein de l'application.

Les outils de sondage commerciaux incluent une fonctionnalité de distribution qui envoie des sondages par e-mail en masse aux répondants. Pour plus de simplicité, cette application suppose que les enquêtes ouvertes aux réponses seront accessibles à partir de la page Web de l'application.

Histoires d'utilisateurs

Général

  • Les coordinateurs et les répondants aux sondages peuvent définir, mener et afficher les sondages et les résultats des sondages à partir d'un site Web commun
  • Les coordinateurs d'enquête peuvent se connecter à l'application pour accéder aux fonctions administratives, comme la définition d'une enquête.

Définition d'une enquête

  • Le coordinateur de l'enquête peut définir une enquête contenant de 1 à 10 questions à choix multiples.
  • Le coordinateur de l'enquête peut définir 1 à 5 sélections mutuellement exclusives pour chaque question.
  • Le coordinateur de l'enquête peut saisir un titre pour l'enquête.
  • Le coordinateur de l'enquête peut cliquer sur un bouton «Annuler» pour revenir à la page d'accueil sans enregistrer l'enquête.
  • Le coordinateur de l'enquête peut cliquer sur un bouton «Enregistrer» pour enregistrer une enquête.

Mener une enquête

  • Le coordinateur d'enquête peut ouvrir une enquête en sélectionnant une enquête dans une liste d'enquêtes préalablement définies
  • Les coordinateurs d'enquête peuvent fermer une enquête en la sélectionnant dans une liste d'enquêtes ouvertes
  • Le répondant au sondage peut répondre à un sondage en le sélectionnant dans une liste d'enquêtes ouvertes
  • Le répondant à l'enquête peut sélectionner les réponses aux questions de l'enquête en cliquant sur une case à cocher
  • Les répondants à l'enquête peuvent voir qu'une réponse précédemment sélectionnée sera automatiquement décochée si une réponse différente est cliquée.
  • Les répondants à l'enquête peuvent cliquer sur un bouton «Annuler» pour revenir à la page d'accueil sans soumettre l'enquête.
  • Les répondants à l'enquête peuvent cliquer sur un bouton «Soumettre» pour soumettre leurs réponses à l'enquête.
  • Les répondants au sondage peuvent voir un message d'erreur si «Soumettre» est cliqué, mais toutes les questions n'ont pas reçu de réponse.

Affichage des résultats de l'enquête

  • Les coordinateurs de l'enquête et les répondants à l'enquête peuvent sélectionner l'enquête à afficher dans une liste d'enquêtes fermées
  • Les coordinateurs de l'enquête et les répondants à l'enquête peuvent afficher les résultats de l'enquête sous forme de tableau indiquant le nombre de réponses pour chacune des sélections possibles aux questions.

Fonctionnalités bonus

  • Les répondants au sondage peuvent créer un compte unique dans l'application
  • Les répondants au sondage peuvent se connecter à l'application
  • Les répondants au sondage ne peuvent pas répondre au même sondage plus d'une fois
  • Les coordinateurs de l'enquête et les répondants à l'enquête peuvent afficher des représentations graphiques des résultats de l'enquête (par exemple, des graphiques à secteurs, à barres, à colonnes, etc.)

Liens et ressources utiles

Bibliothèques pour la construction d'enquêtes: SurveyJS

Certains services d'enquête commerciale comprennent: Survey Monkey et Typeform

Exemple de projet

Contribuant

Vous êtes invités à contribuer au projet dans le référentiel GitHub! Toute contribution est très appréciée.

Vous pouvez contribuer de deux manières:

  1. créez un problème et dites-nous votre idée. Assurez-vous que vous utilisez la nouvelle étiquette d' idée dans ce cas;
  2. fourchez le projet et soumettez un PR. Avant de faire cela, assurez-vous de lire et de suivre le Guide de contribution (vous pouvez le trouver dans le référentiel);

Ajoutez vos propres exemples

Vous pouvez également ajouter vos propres exemples aux projets après les avoir terminés. Je vous encourage vivement à le faire car cela montrera aux autres les choses incroyables que vous avez construites! ?

Faire connaitre!

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 les trouver et en profiter aussi! Ensemble, nous pouvons grandir et rendre notre communauté meilleure!

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!

Principaux contributeurs ??

Florin Pop : Twitter et site Web.

Jim Medlock : Twitter et Medium

Défi de codage hebdomadaire?

En prime, il y a un défi de codage hebdomadaire où vous pouvez en apprendre plus en pratiquant vos compétences sur des projets du monde réel. Lisez le guide complet pour découvrir comment vous pouvez participer! ?

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