15 idées D’applications pour développer et améliorer vos compétences en codage

Nous savons tous qu’il peut parfois être difficile de trouver de nouvelles idées d’application que vous pourriez construire en vue de les améliorer ou d’apprendre un nouveau langage de programmation ou de cadre.,;

idéal pour être utilisé comme exemples dans des tutoriels (articles ou vidéos)📃;

facile à compléter et également facilement extensible avec de nouvelles fonctionnalités👌;

et en plus de cela, chaque idée d’application a:

1. Un objectif clair et descriptif;
2. Une liste de User Stories qui devraient être implémentées;
3. Une liste de bonus>
4. toutes les ressources et les liens pour vous aider à trouver ce dont vous avez besoin pour terminer le projet

nous avons divisé ces idées d’applications en trois niveaux en fonction des connaissances et de l’expérience requises pour les compléter., Les niveaux sont: débutant, intermédiaire et avancé.

Dans cet article, vous trouverez 5 idées de chaque niveau.

essayez de publier vos composants réutilisables, de l’une ou l’autre application à Bit.dev, un hub de composants cloud. Vous pouvez les documenter et ajouter des exemples dans chaque page de Composant (sur le site de Bit), puis les utiliser dans de futures applications ou simplement les partager avec votre équipe.

niveau: 1-débutant

nous avons tous des événements importants que nous attendons avec impatience dans la vie, anniversaires, anniversaires et vacances pour n’en nommer que quelques-uns. Ne serait-il pas agréable d’avoir une application qui compte les mois, les jours, les heures, les minutes et les secondes à un événement? Compte à rebours est juste cette application!

L’Objectif du compte à rebours est de fournir un affichage en Décrémentation continue des mois, jours, Heures, minutes et secondes à un événement entré par l’utilisateur.,

contraintes

• utilisez uniquement des fonctions de langage intégrées pour vos calculs plutôt que de vous fier à une bibliothèque ou à un package comme MomentJS. Cela suppose, bien sûr, que la langue de votre choix a des fonctions de manipulation de date et d’heure adéquates intégrées.
• Vous ne pouvez utiliser aucun générateur de code tel que le compte à rebours vers le site. Vous devez développer votre propre implémentation originale.

User Stories

• L’utilisateur peut voir une zone de saisie d’événement contenant un champ de nom d’événement, un champ de date, une heure facultative et un bouton « Démarrer ».,
• l’Utilisateur peut définir l’événement en entrant son nom, la date à laquelle elle est prévue, et une option de temps de l’événement. Si l’heure est omise, elle est supposée être à minuit à la date de l’événement dans le fuseau horaire local.
• l’Utilisateur peut voir un message d’avertissement si le nom de l’événement est vide.
• L’utilisateur peut voir un message d’avertissement si la date ou l’Heure de l’événement sont incorrectement saisies.
• L’utilisateur peut voir un message d’avertissement si l’heure jusqu’à ce que les données d’événement et l’heure qui a été saisie débordent la précision du compte à rebours.,
• l’utilisateur peut cliquer sur le bouton « Démarrer » pour voir le compte à rebours commencer à afficher les jours, les heures, les minutes et les secondes jusqu’à ce que l’événement ait lieu.
• L’utilisateur peut voir les éléments du compte à rebours décrémenter automatiquement. Par exemple, lorsque le nombre de secondes restantes atteint 0, le nombre de minutes restantes diminue de 1 et les secondes commencent à compter à partir de 59. Cette progression doit avoir lieu de secondes tout le chemin jusqu’à la position des jours restants dans l’affichage du compte à rebours.,

Bonus

• l’Utilisateur peut enregistrer l’événement de sorte qu’il persiste à travers des sessions
• l’Utilisateur peut voir une alerte lorsque l’événement est atteint
• l’Utilisateur peut spécifier plus d’un événement.
• l’Utilisateur peut voir un compte à rebours pour chaque événement qui a été défini.,

liens et ressources utiles

• Des Images de Compte à rebours analogiques à base de tubes peuvent être trouvées ici
• clearInterval MDN
• setInterval MDN
• Date MDN

exemple

compte à rebours construit avec React

horloge simple/compte à rebours

flipimage

niveau: 1-débutant

il est important pour les développeurs Web de comprendre les bases de la manipulation des images car les applications web riches s’appuient sur les images pour ajouter de la valeur à,

FlipImage explore un aspect de la manipulation d’image: la rotation d’image. Cette application affiche un volet carré contenant une seule image présentée dans une matrice 2×2. À l’aide d’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 HTML natif, CSS et Javascript pour implémenter cette application. Les paquets d’images et les bibliothèques ne sont pas autorisés.,o l’image

Bonus

• l’Utilisateur peut changer l’image par défaut en entrant l’URL de l’image dans un champ de saisie
• l’Utilisateur peut afficher la nouvelle image en cliquant sur un Affichage  » bouton à côté du champ de saisie
• l’Utilisateur peut voir un message d’erreur si la nouvelle URL des images n’est pas trouvé

liens et ressources Utiles

• Comment faire pour retourner une Image
• Créer un CSS Retournement Animatin

Exemple de projets

Effets d’Image par bennettfeely

Notes App

Niveau: 1-Débutant

Créer et de stocker vos notes pour plus tard fin!,

articles de l’Utilisateur

• 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 retourne, les données seront récupérées

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

• localStorage
• Guide Markdown
• marqué — un analyseur markdown

exemples de projets

notes Markdown construites avec Angular sur Codepen

notes Markdown

notes Markdown construit avec Angular 7 et Bootstrap 4

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., Comme les programmes, les recettes sont une série d’étapes impératives qui, si elles sont suivies correctement, aboutissent à un plat savoureux.

L’objectif de l’application de recettes est d’aider l’utilisateur à gérer les recettes de manière à les rendre 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 maintenir des recettes dans un fichier ou une base de données.,

User Stories

• L’utilisateur peut voir une liste de titres de recette
• l’utilisateur peut cliquer sur un titre de recette pour afficher une fiche de recette contenant le titre de la recette, le type de repas (petit-déjeuner, Déjeuner, Souper 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.

Bonus

• l’Utilisateur peut voir une photo montrant ce que l’élément ressemble après qu’il a été préparé.,
• L’utilisateur peut rechercher une recette qui ne figure pas dans la liste des titres de recette en entrant le nom du repas dans un champ de recherche et en cliquant sur le bouton « Rechercher ». Toute API de recette open source peut être utilisée comme source pour les recettes (voir le MealDB ci-dessous).
• l’Utilisateur peut voir une liste de recettes de correspondance des termes de recherche
• l’Utilisateur peut cliquer sur le nom de la recette pour afficher sa carte de recette.
• l’Utilisateur peut voir un message d’avertissement si aucune correspondance n’recette a été trouvée.
• L’utilisateur peut cliquer sur un bouton « Enregistrer » sur les cartes pour les recettes situées via L’API pour enregistrer une copie dans ce fichier de recettes ou cette base de données d’applications.,

liens et ressources utiles

• utilisation de Fetch
• Axios
• L’API MealDB

exemples de projets

Recipe Box — a Free Code Camp Project (FCC)

React Recipe Box

Quiz App

niveau: 1-débutant

pratique et test 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 des autres développeurs., (HTML, CSS, JavaScript, Python, PHP, ETC))

User Stories

• L’utilisateur peut démarrer le quiz en appuyant sur un button
• L’utilisateur peut voir une question avec 4 réponses possibles
• après avoir sélectionné une réponse, afficher la question suivante à l’utilisateur., Faites cela jusqu’à ce que le test est terminé
• À la fin, l’Utilisateur peut voir les statistiques suivantes
• le Temps qu’il a fallu pour terminer le quiz
• Combien de bonnes réponses est-ce qu’il
• Un message indiquant s’il passed ou failed le quiz

Bonus

• L’utilisateur peut partager le résultat d’un questionnaire sur les médias sociaux
• Ajouter plusieurs questionnaires à l’application. L’utilisateur peut choisir de faire
• l’Utilisateur peut créer un compte et de tous les scores enregistrés dans son tableau de bord., L’utilisateur peut compléter un quiz plusieurs fois

liens et ressources utiles

• Ouvrir La base de données Trivia

exemples de projets

application Quiz construite avec React (attendez qu’elle se charge car elle est hébergée sur Heroku)

interface de L’application Quiz

les 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.,

articles de l’Utilisateur

• l’Utilisateur peut entrer une requête de recherche dans un input domaine
• Utilisateur peut soumettre la requête.,ppearing sur la page

Bonus features

• pour chaque élément de la liste Ajouter un lien qui enverra l’utilisateur vers un site externe qui a plus d’informations sur le livre
• implémenter un Responsive Design
• ajouter des animations de chargement

liens et ressources utiles

Vous pouvez utiliser Finder

card-memory-game

Tier: 2-Intermediate

Card Memory est un jeu où 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.,

articles de l’Utilisateur

• l’Utilisateur peut voir une grille avec n x n cartes (n est un entier). Toutes les cartes sont face vers le bas initialement (hidden état)
• L’utilisateur peut cliquer sur un bouton pour démarrer le jeu. Lorsque ce bouton est cliqué, une minuterie commencera
• l’Utilisateur peut cliquer sur n’importe quelle carte pour dévoiler l’image qui est en dessous (remplacez par visible état)., L’utilisateur clique sur la 2ème carte:
  • S’il y a une correspondance, les 2 cartes seront éliminées du jeu (soit les masquer/supprimer ou les laisser dans l’état visible)
  • S’il n’y a pas de correspondance, les 2 cartes retourneront à leur état d’origine (

  bonus

  • l’utilisation peut choisir entre plusieurs niveaux de difficulté (Facile, Moyen, Difficile)., L’utilisateur peut voir les statistiques du jeu (nombre de fois qu’il a gagné/perdu, meilleur temps pour chaque niveau)

  liens et ressources utiles

  • Wikipedia

  exemples de projets

  Flip — card memory game

  Memory Game

  SMB3 Memory Card Game

  application de dessin

  niveau: 2-intermédiaire

  créez des illustrations numériques sur une toile sur le web pour les partager en ligne et les exporter sous forme d’images. ,v>, star, etc)

• L’utilisateur peut partager l’œuvre sur les réseaux sociaux

liens et ressources utiles

• Apprenez à créer une Application de dessin en utilisant p5js

exemples de projets

application de dessin par Florin Pop

Application/p>

boutique en ligne simple

niveau: 2-intermédiaire

L’objectif de la boutique en ligne simple est de donner à vos utilisateurs la possibilité de sélectionner un produit à acheter, de consulter les informations d’achat, de l’ajouter à un panier D’achat en ligne et, enfin, d’acheter les produits dans le panier.,

contraintes

• En commençant, vous pouvez implémenter votre inventaire de produits sous la forme d’un tableau D’objets JavaScript si vous développez en JavaScript. Pour les autres langues, n’hésitez pas à choisir la solution en mémoire de votre choix.

articles de l’Utilisateur

• l’Utilisateur peut cliquer sur « voir les Produits » bouton sur la Page d’accueil pour afficher la Page des Produits.
• L’utilisateur peut voir une carte sur la page des produits pour chaque produit montrant la vignette du produit, le nom, le prix, une courte description et un bouton « Sélectionner ».,
• l’utilisateur peut voir une page de détails du produit affichée lorsque le bouton « Sélectionner » est cliqué montrant les mêmes informations de la fiche produit, mais aussi un id de produit unique, une longue description, Un bouton « Ajouter au panier » et un bouton « Voir plus de produits ».
• l’Utilisateur peut voir un message de confirmation lorsque le produit est ajouté au panier.
• l’utilisateur peut cliquer sur la page « Voir plus de Produits » pour revenir à la page des produits.
• L’utilisateur peut voir un bouton « Panier » à la fois sur la page de destination ou sur la page des produits. Astuce: une barre supérieure pourrait être un bon emplacement commun pour ce bouton.,
• l’utilisateur peut cliquer sur le bouton « panier » pour afficher la page du panier contenant l’id du produit, le nom, le prix et la quantité commandée pour chaque produit précédemment ajouté au panier.
• l’utilisateur peut voir un montant total d’achat sur la carte D’achat qui est calculé comme la somme des quantités multipliées par le prix unitaire pour chaque produit commandé.
• L’utilisateur peut ajuster la quantité commandée pour n’importe quel produit pour ajuster le montant total d’achat.
• l’utilisateur peut cliquer sur un bouton « Passer commande » sur la page du panier pour terminer la commande., L’utilisateur verra un numéro de confirmation lorsque la commande a été passée.
• [ ) l’utilisateur peut cliquer sur un bouton « Annuler la commande » sur la page du panier pour annuler la commande. L’utilisateur verra les quantités de produits et le montant total de l’achat remis à zéro.
• l’utilisateur peut cliquer sur un bouton « Voir plus de produits » sur la page du panier pour revenir à la page des produits. Si la commande n’a pas encore été passée, cela n’effacera pas les produits qui ont déjà été ajoutés à la page des produits.,

Bonus

• l’Utilisateur peut voir un message d’erreur si la quantité commandée dépasse le « à la main” la quantité de produit.
• L’utilisateur peut spécifier une facture et une adresse d’expédition lorsque la commande est passée à partir de la page du panier
• l’utilisateur peut voir les frais d’expédition ajoutés au montant total de l’achat
• L’utilisateur peut voir les taxes de vente ajoutées au montant total de l’achat

liens et ressources utiles

Il existe de nombreuses Pages de site de commerce électronique., Vous pouvez utiliser Dribbble et Behance pour l’inspiration.

Exemple de projets

eCommerce Animations

À Faire Application

Niveau: 2-Intermédiaire

La classique to-Do application où l’utilisateur peut écrire toutes les choses qu’il veut accomplir.,i>l’Utilisateur peut voir une liste de toutes les choses

l’Utilisateur peut voir une liste de tous les actifs à faire

l’Utilisateur peut voir la date à laquelle il a créé le « à faire »

Lors de la fermeture de la fenêtre du navigateur, les choses seront stockées et lorsque l’Utilisateur retourne, les données seront récupérées

liens et ressources Utiles

• localStorage

Exemple de projets

Todo Application construite avec Réagissent

Pour Faire la Liste sur Codepen

Compteur de Calories

Niveau: 3-Avancé

Obtenir et rester en bonne santé nécessite une combinaison de l’équilibre mental, l’exercice et la nutrition., L’objectif de L’application Calorie Counter est d’aider l’utilisateur à répondre aux besoins nutritionnels en comptant les calories pour divers aliments.

Cette application fournit le nombre de calories sur la base du résultat d’une recherche d’utilisateur pour un type de nourriture. Les données brutes du Département AMÉRICAIN de l’Agriculture MyPyramid Food seront recherchées pour déterminer les valeurs caloriques.

Calorie Counter vous fournit également, le développeur, une expérience dans la transformation de données brutes dans un format qui facilitera la recherche., Dans ce cas, le fichier de données brutes MyPyramid Food, qui est une feuille de calcul MS Excel, doit être téléchargé et transformé en un fichier JSON qui sera plus facile à charger et à rechercher lors de l’exécution (conseil: jetez un œil au format de fichier CSV).

User Stories

• Le développeur va créer un fichier JSON contenant les aliments à rechercher. Cela sera chargé lorsque l’application est démarrée.
• L’utilisateur peut voir un panneau contenant une zone de texte de saisie de description d’aliment, un bouton « Rechercher » et un bouton « Effacer ».
• l’utilisateur peut saisir des termes de recherche dans la zone de texte de saisie description de l’aliment.,
• l’Utilisateur peut cliquer sur le bouton « Rechercher » pour rechercher l’adéquation de la nourriture.
• L’utilisateur peut voir et un message d’avertissement si aucun terme de recherche n’a été entré.
• l’Utilisateur peut voir un message d’avertissement si aucune correspondance n’a été trouvé.
• L’utilisateur peut voir une liste des aliments, des portions et des calories correspondants dans un panneau de résultats défilable limité à 25 entrées.
• l’utilisateur peut cliquer sur le bouton « Effacer » pour effacer les termes de recherche et la liste des résultats.

Bonus

• l’Utilisateur peut voir le nombre de  » correspondance de produits alimentaires adjacente à la liste des résultats.,
• l’Utilisateur peut utiliser un caractère générique dans les termes de recherche.
• L’utilisateur peut voir plus de 25 entrées d’une recherche en cliquant sur un bouton d’icône vers le bas pour ajouter plus d’aliments correspondants à la liste des résultats de recherche.
• Le Développeur implémentera charger les données MyPyramid dans une base de données ou une structure de données Autre qu’un tableau pour une recherche plus rapide.,

liens et ressources utiles

MyPyramid Food Raw Data

exemples de projets

Food Calculator

Chat App

Niveau: 3-Advanced

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(produit Minimum Viable), vous pouvez vous concentrer sur la construction de l’interface de Chat. La fonctionnalité en temps réel peut être ajoutée plus tard (les fonctionnalités bonus).

articles de l’Utilisateur

• 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 où il peut taper un nouveau message
• en appuyant sur la touche enter ou en cliquant sur le bouton send le texte sera c5723283e3″> à côté de son nom d’utilisateur (par exemple, John Doe: Hello World!

Bonus

• Les messages seront visibles par tous les Utilisateurs qui sont dans l’application de chat (utiliser les WebSockets)
• Lorsqu’un nouvel Utilisateur se joint à la conversation, un message est affiché pour tous les Utilisateurs
• les Messages sont enregistrés dans une base de données
• l’Utilisateur peut envoyer des images, des des vidéos et des liens qui seront affichées correctement
• l’Utilisateur peut sélectionner et envoyer un émoticône
• les Utilisateurs peuvent chatter en privé
• les Utilisateurs peuvent joindre channels sur des sujets précis

liens et ressources Utiles

• Socket.,io
• Comment construire une Réagir.js chat app en 10 minutes-article
• créer une application de chat comme Slack-React / JavaScript Tutorial-Youtube
• Socket.io application de Chat utilisant Websockets-tutoriel Youtube

exemples de projets

Chatty2

chronologie GitHub

Niveau: 3-avancé

les API et la représentation graphique des informations sont les caractéristiques des applications web modernes. Github Timeline combine les deux pour créer un historique visuel d’une activité GitHub des utilisateurs.,

L’objectif de Github Timeline 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 devrait être facile à lire et utiliser efficacement la couleur et la typographie.

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

articles de l’Utilisateur

• l’Utilisateur peut entrer un GitHub nom d’utilisateur
• l’Utilisateur peut cliquer sur un « Générer » bouton pour créer et afficher les utilisateurs nommés pensions de montage
• l’Utilisateur peut voir un message d’avertissement si le GitHub nom d’utilisateur n’est pas valide GitHub nom d’utilisateur.

fonctionnalités Bonus

• L’utilisateur peut voir un résumé du nombre de dépôts comptabilisé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 de dépôt. Vous pouvez également choisir d’utiliser un package NPM pour accéder à L’API GitHub.,>

exemple de code montrant comment utiliser les API GitHub sont:

• GitHub REST API client pour JavaScript
• GitHub GraphQL API client pour les navigateurs et le nœud

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" https://api.github.com/users/user-id/repos

chronologie CSS

construire une chronologie verticale avec CSS et une touche de javascript

shuffle card deck

niveau: 3-avancé

en tant que développeur web, vous serez invité à trouver des applications innovantes qui résolvent des problèmes du monde réel pour de vraies personnes., Mais quelque chose que vous apprendrez rapidement, c’est que peu importe le nombre de fonctionnalités merveilleuses que vous intégrez dans une application, les utilisateurs ne l’utiliseront pas si elle n’est pas performante. En d’autres termes, il existe un lien direct entre les performances d’une application et le fait que les utilisateurs la perçoivent comme utilisable.

l’objectif de L’application Shuffle Card Deck est de trouver la technique la plus rapide pour mélanger un jeu de cartes que vous pouvez utiliser dans les applications de jeu que vous créez. Mais, plus important encore, il vous fournira une expérience dans la mesure et l’évaluation des performances des applications.,

Votre tâche consiste à implémenter l’algorithme d’évaluation des performances, le générateur de nombres pseudo-aléatoires Xorshift, ainsi que L’algorithme WELL512a.c si vous choisissez d’essayer la fonctionnalité bonus.

User Stories

• L’utilisateur peut voir un panneau contenant une zone de texte dans laquelle l’utilisateur peut entrer le nombre de tours, trois zones de texte de sortie pour contenir l’Heure de début, l’Heure de fin et la durée totale du test, et deux boutons — ‘js Random’, ‘Xorshift’.
• l’Utilisateur peut entrer un numéro de 1 à 10 000 pour spécifier le nombre de fois (ou tours) le nombre aléatoire est exécutée.,
• l’utilisateur peut cliquer sur l’un des trois boutons pour lancer l’évaluation de l’algorithme de nombres aléatoires sélectionné. L’algorithme de nombre aléatoire sera exécuté pour le nombre de tours saisis par l’utilisateur ci-dessus.
• l’utilisateur peut voir un message d’avertissement si le nombre de tours n’a pas été saisi, s’il n’est pas compris entre 1 et 10 000 ou s’il ne s’agit pas d’un entier valide.
• L’utilisateur peut voir une zone de sortie tabulaire où les résultats de chaque algorithme sont affichés — nom de l’algorithme, Heure de début, Heure de fin et durée totale.,
• L’utilisateur peut voir une boîte de dialogue d’avertissement avec un bouton « Annuler » et un bouton  » OK  » si le nombre de Tours est modifié avant que les trois tests aient été exécutés.
• l’Utilisateur peut cliquer sur le bouton « Annuler » dans la boîte de dialogue d’avertissement pour fermer la boîte de dialogue sans aucune modification.
• l’Utilisateur peut cliquer sur le bouton  » OK  » dans la boîte de dialogue d’avertissement pour effacer la zone de sortie et fermer la boîte de dialogue d’avertissement.

Bonus

• l’Utilisateur peut voir une troisième algorithme bouton ‘WELL512a.c’.
• Le développeur doit examiner la sortie et déterminer pourquoi l’algorithme le plus rapide est plus rapide que l’algorithme le plus lent.,

liens et ressources Utiles

• Génération de Nombre Aléatoire (Wikipedia)
• Mathématiques.aléatoire (MDN)
• Xorshift (Wikipedia)
• WELL512a.c
• la console.temps (MDN)
• utilisation de la fonction D’Audit Chrome DevTools pour mesurer et optimiser les performances (Partie 1)
• utilisation de la fonction D’Audit Chrome DevTools pour mesurer et optimiser les performances (partie 2)

App Survey

Niveau: 3-Advanced

Les enquêtes sont une partie précieuse de toute boîte à outils, 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 les aggravations simples 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 pouvez 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 mènent des enquêtes. C’est une fonction administrative non disponible pour les utilisateurs normaux.
• Les répondants au sondage remplissent les sondages et affichent les résultats. Ils n’ont aucun privilège administratif dans l’application.

Les outils D’enquête commerciale incluent une fonctionnalité de distribution qui envoie en masse des enquêtes par e-mail aux répondants. Pour plus de simplicité, cette application suppose que les enquêtes ouvertes pour les réponses seront accessibles à partir de la page web de l’application.,

User Stories — General

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

définition d’une enquête

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

la Réalisation d’un Sondage

• Enquête Coordonnateur peut ouvrir une enquête réalisée par la sélection d’une enquête à partir d’une liste de sondages précédemment définis
• les Coordinateurs de l’Enquête peut fermer une enquête en la sélectionnant à partir d’une liste d’ouvrir des enquêtes
• Répondant à l’Enquête peuvent remplir un sondage en le sélectionnant à partir d’une liste d’ouvrir des enquêtes
• 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 de l’Enquête peut voir qu’une réponse sélectionnée sera automatiquement désactivée si une réponse différente est cliqué.,
• Les répondants au sondage peuvent cliquer sur un bouton « Annuler » pour revenir à la page d’accueil sans soumettre le sondage.
• Les répondants au sondage peuvent cliquer sur un bouton « Soumettre » pour soumettre leurs réponses au sondage.
• Les répondants au sondage peuvent voir un message d’erreur si vous cliquez sur « Soumettre », mais toutes les questions n’ont pas été répondues.,

affichage des résultats de L’enquête

• les coordonnateurs 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 coordonnateurs 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,

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 remplir le même sondage plus d’une fois
• les coordonnateurs du sondage et les répondants au sondage peuvent,
  • SurveyJS

  certains services d’enquête commerciale comprennent:

  • Survey Monkey
  • Traversy
  • Typeform

  exemples de projets

  questionnaire Javascript

  Conclusion

  maintenant, vous avez une base de 15 applications avec lesquelles vous pouvez jouer. Nous avons créé un dépôt GitHub où vous pouvez trouver encore plus d’idées si vous êtes intéressé et vous êtes invités à contribuer, partager et lui donner une étoile!

  bon codage! ^_^