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:
- Un objectif clair et descriptif
- 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)
- Une liste de fonctionnalités bonus qui améliorent non seulement le projet de base, mais également vos compétences en même temps
- 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:
- 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.
- 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.
- 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:
- Temps nécessaire pour terminer le quiz
- Combien de réponses correctes a-t-il obtenues
- Un message indiquant si lui
passed
oufailed
le 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
input
champ - 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 (
n
est 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 table
avec 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 table
qui 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 table
dans 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
input
champ 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:
- Destructeur: 2 carrés
- Cruiser: 3 carrés
- 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, O
si elles ont été ciblées mais qu'aucune partie d'un navire ne se trouvait à cet endroit, ou X
si 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 lagameStats()
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 field
endroit où il peut taper un nouveau message - En appuyant sur la
enter
touche ou en cliquant sur lesend
bouton, le texte sera affiché àchat box
côté de son nom d'utilisateur (par exempleJohn 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
channels
sur 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:
- 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;
- 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.