15 Idee App per costruire e salire di livello le vostre abilità di codifica

Tutti sappiamo che può essere difficile a volte trovare nuove applicazioni di idee che si potrebbe costruire per migliorare o imparare un nuovo linguaggio di programmazione o quadro.,;

grande per essere utilizzati come esempi esercitazioni (articoli o video) 📃;

facile da completare e anche facilmente espandibile con nuove funzionalità 👌;

E in cima a quello, ogni idea di app è:

1. Un chiaro e descrittivo obiettivo;
2. Un elenco di Storie Utente che deve essere attuato;
3. Un elenco di caratteristiche bonus che sono l’opzione, ma “buona-per-avere”;
4. Tutte le risorse e link per aiutarvi a trovare che cosa avete bisogno per completare il progetto

Abbiamo diviso queste app le idee in tre livelli, sulla base delle conoscenze e dell’esperienza necessarie per il loro completamento., I livelli sono: Principiante, Intermedio e Avanzato.

In questo articolo troverai 5 idee per ogni livello.

Prova a pubblicare i tuoi componenti riutilizzabili, da entrambe le app a Bit.dev, un hub di componenti cloud. Puoi documentarli e aggiungere esempi in ogni pagina componente — sul sito di Bit), quindi utilizzarli nelle app future o semplicemente condividerli con il tuo team.

Tier: 1-Principiante

Tutti noi abbiamo eventi importanti che non vediamo l’ora di nella vita, compleanni, anniversari e feste per citarne alcuni. Non sarebbe bello avere un app che conta i mesi, giorni, ore, minuti e secondi per un evento? Conto alla rovescia è proprio che app!

L’obiettivo di Countdown Timer è quello di fornire una visualizzazione in continuo decremento dei mesi he, giorni, ore, minuti e secondi per un evento immesso dall’utente.,

Vincoli

• Usa solo funzioni di linguaggio integrate per i tuoi calcoli piuttosto che fare affidamento su una libreria o un pacchetto come MomentJS. Ciò presuppone, ovviamente, che la lingua di tua scelta abbia adeguate funzioni di manipolazione di data e ora integrate.
• Non è possibile utilizzare alcun generatore di codice come il conto alla rovescia per il sito. Dovresti sviluppare la tua implementazione originale.

Storie utente

• L’utente può visualizzare una casella di input evento contenente un campo nome evento, un campo data, un’ora opzionale e un pulsante ‘Start’.,
• L’utente può definire l’evento immettendo il suo nome, la data in cui è previsto che si svolga e un’ora facoltativa dell’evento. Se l’ora viene omessa, si presume che sia alla mezzanotte della data dell’evento nel fuso orario locale.
• L’utente può vedere un messaggio di avviso se il nome dell’evento è vuoto.
• L’utente può visualizzare un messaggio di avviso se la data o l’ora dell’evento sono immessi in modo errato.
• L’utente può vedere un messaggio di avviso se il tempo fino a quando i dati dell’evento e il tempo che è stato inserito supererebbe la precisione del conto alla rovescia.,
• L’utente può fare clic sul pulsante ‘Start’ per vedere il conto alla rovescia avviare la visualizzazione dei giorni, ore, minuti e secondi fino a quando l’evento si svolge.
• L’utente può vedere gli elementi nel conto alla rovescia automaticamente decremento. Ad esempio, quando il conteggio dei secondi rimanenti raggiunge 0, il conteggio dei minuti rimanenti diminuirà di 1 e i secondi inizieranno il conto alla rovescia da 59. Questa progressione deve avvenire dai secondi fino alla posizione dei giorni rimanenti nel display del conto alla rovescia.,

Caratteristiche bonus

• L’utente può salvare l’evento in modo che persista tra le sessioni
• L’utente può vedere un avviso quando viene raggiunto l’evento
• L’utente può specificare più di un evento.
• L’utente può vedere un conto alla rovescia timer per ogni evento che è stato definito.,

collegamenti Utili e risorse

• le Immagini di analogica tubo a base di timer conto alla rovescia può essere trovato qui
• clearInterval MDN
• setInterval MDN
• Data MDN

progetti

conteggio alla Rovescia costruito con Reagiscono

Semplice Orologio/Timer con conto alla Rovescia

FlipImage

Livello: 1-Principiante

e ‘ importante per gli Sviluppatori Web per comprendere le nozioni di base per la manipolazione di immagini, poiché ricco di applicazioni web si basano sulle immagini per aggiungere valore per l’interfaccia utente e l’esperienza utente (UI/UX).,

FlipImage esplora un aspetto della manipolazione delle immagini: la rotazione delle immagini. Questa applicazione visualizza un riquadro quadrato contenente una singola immagine presentata in una matrice 2×2. Utilizzando un set di frecce su, giù, sinistra e destra adiacenti a ciascuna delle immagini l’utente può capovolgere verticalmente o orizzontalmente.

È necessario utilizzare solo HTML nativo, CSS e Javascript per implementare questa applicazione. I pacchetti di immagini e le librerie non sono consentiti.,o l’immagine

Bonus

• l’Utente può cambiare l’immagine di default inserendo l’URL di un immagine diversa in un campo di input
• Utente può visualizzare la nuova immagine cliccando “Visualizza” accanto al campo di immissione
• Utente può visualizzare un messaggio di errore se le nuove immagini di URL non trovato

link Utili e risorse

• Come per Capovolgere un’Immagine
• Creare un CSS Flipping Animatin

progetti

Effetti di Immagine da bennettfeely

Note App

Livello: 1-Principiante

Creare e memorizzare le note successive scopo!,

User Stories

• è possibile creare una nota
• Utente può modificare una nota
• Utente può eliminare una nota
• Quando si chiude la finestra del browser le note saranno conservati e quando l’Utente torna, i dati verranno recuperati

Bonus

• l’Utente può creare e modificare una nota in formato Markdown., A salvarlo sarà la conversione Markdown HTML
• Utente può vedere la data di quando ha creato la nota

collegamenti Utili e risorse

• localStorage
• Markdown Guida
• Segnato Una riduzione del parser

progetti

Markdown Note costruita con Angolare su Codepen

Markdown Note costruita con Reagiscono

Markdown Note costruita con Angolare 7 e bootstrap 4

Ricetta

Livello: 1-Principiante

Si potrebbe non avere capito questo, ma la ricetta non sono nulla di più di culinaria algoritmi., Come i programmi, le ricette sono una serie di passaggi imperativi che, se seguiti correttamente, si traducono in un piatto gustoso.

L’obiettivo della ricetta app è quello di aiutare l’utente a gestire le ricette in un modo che li renderà facili da seguire.

Vincoli

• Per la versione iniziale di questa applicazione i dati ricetta possono essere codificati come file JSON. Dopo aver implementato la versione iniziale di questa applicazione è possibile espandere su questo per mantenere le ricette in un file o database.,

User Stories

• Utente può vedere un elenco di ricetta titoli
• Utente può fare clic sul titolo della ricetta per visualizzare una ricetta contenente il titolo della ricetta, tipo di pasto (colazione, pranzo, cena o spuntino), numero di persone, il livello di difficoltà (principiante, intermedio, avanzato), l’elenco degli ingredienti (compresi i relativi importi), e la procedura di preparazione.
• L’utente fa clic su un nuovo titolo di ricetta per sostituire la scheda corrente con una nuova ricetta.

Caratteristiche bonus

• L’utente può vedere una foto che mostra come appare l’elemento dopo che è stato preparato.,
• L’utente può cercare una ricetta non nell’elenco dei titoli delle ricette inserendo il nome del pasto in una casella di ricerca e facendo clic su un pulsante ‘Cerca’. Qualsiasi API di ricette open source può essere utilizzata come fonte per le ricette (vedere Il MealDB sotto).
• L’utente può visualizzare un elenco di ricette corrispondenti ai termini di ricerca
• L’utente può fare clic sul nome della ricetta per visualizzare la sua scheda ricetta.
• L’utente può vedere un messaggio di avviso se non è stata trovata alcuna ricetta corrispondente.
• L’utente può fare clic su un pulsante ‘Salva’ sulle schede per le ricette situate attraverso l’API per salvare una copia in questo file di ricette apps o database.,

collegamenti Utili e risorse

• Fetch
• Axios
• Il MealDB API

progetti

Scatola di Ricetta — un Codice Libero Campeggio Progetto (FCC)

Reagire Scatola di Ricetta

Quiz App

Livello: 1-Principiante

Pratica e prova le tue conoscenze rispondendo alle domande di un quiz applicazione.

Come sviluppatore puoi creare un’applicazione quiz per testare le abilità di codifica di altri sviluppatori., (HTML, CSS, JavaScript, Python, PHP, ecc…)

User Stories

• Utente può iniziare il quiz premendo un button
• Utente può vedere una domanda con 4 possibili risposte
• Dopo aver selezionato una risposta, visualizzare la prossima domanda per l’Utente., Fate questo fino a quando il quiz è finito
• Alla fine, l’Utente può visualizzare le seguenti statistiche
• Tempo impiegato per finire il quiz
• quante risposte corrette, ha ottenuto
• Un messaggio che indica se lui passed o failed quiz

Bonus

• Utente può condividere il risultato di un quiz sui social media
• Aggiungere più quiz per l’applicazione. L’utente può selezionare quale prendere
• L’utente può creare un account e avere tutti i punteggi salvati nella sua dashboard., L’utente può completare un quiz più volte

collegamenti Utili e risorse

• Aprire Curiosità Database

progetti

il Quiz app costruito con Reagiscono (attendi il caricamento come è ospitato su Heroku)

il Quiz app interfaccia

Libro App Finder

Livello: 2-Intermedio

Creare un’applicazione che permetterà agli utenti di cercare i libri per l’immissione di una query (Titolo, Autore, ecc). Visualizza i libri risultanti in un elenco sulla pagina con tutti i dati corrispondenti.,

User Stories

• L’utente può inserire una query di ricerca in uninput campo
• L’utente può inviare la query.,ppearing sulla pagina

Bonus

• Per ogni elemento nell’elenco, aggiungere un link che indirizza l’Utente verso un sito esterno che ha ulteriori informazioni sul libro
• Implementare un Design Responsive
• Aggiungere il caricamento di animazioni

collegamenti Utili e risorse

È possibile utilizzare le API di Google Libri

progetti

Prenota il Finder

Scheda-Memoria-Gioco

Livello: 2-Intermedio

Scheda di memoria è un gioco in cui è necessario fare clic su una scheda per vedere qual è l’immagine che è al di sotto di esso e cercare di trovare l’immagine corrispondente sotto le altre carte.,

Storie utente

• L’utente può vedere una griglia con schede n x n (n è un numero intero). Tutte le carte sono rivolte verso il basso inizialmente (hidden stato)
• L’utente può fare clic su un pulsante per avviare il gioco. Quando si fa clic su questo pulsante, verrà avviato un timer
• L’utente può fare clic su qualsiasi scheda per svelare l’immagine che si trova sotto di essa (cambiarla in visible stato)., L’utente fa clic sul 2 ° scheda:
  • Se c’è una corrispondenza, il 2 carte saranno eliminati dal gioco (per nascondere/li rimuove o li lascia nel visible stato)
  • Se non c’è una corrispondenza, il 2 carte di capovolgere di nuovo al loro stato originale (hidden stato)
  • Quando tutte le partite, l’Utente può visualizzare una finestra di dialogo con un messaggio di Congratulazioni con un contatore di visualizzare il tempo impiegato per finire il gioco.

  Bonus

  • Utilizzare possibile scegliere tra diversi livelli di difficoltà (Facile, Medio, Difficile)., Difficoltà aumentata significa: ridurre il tempo a disposizione per completare e/o di aumentare il numero di carte
  • Utente può visualizzare le statistiche di gioco (nr. di volte in cui ha vinto / ha perso il, miglior tempo per ogni livello)

  collegamenti Utili e risorse

  • Wikipedia

  progetti

  Flip — gioco di carte di memoria

  Gioco di Memoria

  SMB3 Gioco di Scheda di Memoria

  Disegno App

  Livello: 2-Intermedio

  Creare opere d’arte digitale su tela sul web per condividere online e anche l’esportazione di immagini.,v>, star, ecc)

• Utente può condividere l’opera sul social media

collegamenti Utili e risorse

• Imparare come creare un’Applicazione di Disegno utilizzando p5js

progetti

Applicazione di Disegno da Aruba Pop

Applicazione di Disegno da t0mm4rx

Semplice Online Store

Livello: 2-Intermedio

L’obiettivo del Semplice Negozio Online è quello di fornire agli utenti tutte le funzionalità di selezione di un prodotto da acquistare, la visualizzazione di informazioni relative all’acquisto di aggiungerlo al carrello e, infine, in realtà l’acquisto di prodotti nel carrello.,

Vincoli

• Partendo puoi implementare il tuo inventario di prodotti come una serie di oggetti JavaScript se stai sviluppando in JavaScript. Per altre lingue sentitevi liberi di scegliere la soluzione in memoria di vostra scelta.

User Stories

• L’utente può fare clic su un pulsante ‘Visualizza prodotti’ sulla pagina di destinazione per visualizzare la pagina dei prodotti.
• L’utente può vedere una scheda sulla pagina Prodotti per ogni prodotto che mostra la miniatura del prodotto, nome, prezzo, una breve descrizione, e un pulsante ‘Select’.,
• L’utente può visualizzare una pagina dei dettagli del prodotto visualizzata quando si fa clic sul pulsante “Seleziona” che mostra le stesse informazioni dalla scheda prodotto, ma anche un ID prodotto univoco, una lunga descrizione, il pulsante “Aggiungi al carrello” e un pulsante “Vedi altri prodotti”.
• L’utente può vedere un messaggio di conferma quando il prodotto viene aggiunto al carrello.
• L’utente può fare clic sulla pagina ‘Vedi altri prodotti’ per tornare alla pagina dei prodotti.
• L’utente può vedere un pulsante ‘Carrello’ sia sulla pagina di destinazione o la pagina dei prodotti. Suggerimento: una barra superiore potrebbe essere una buona posizione comune per questo pulsante.,
• L’utente può fare clic sul pulsante ‘Carrello’ per visualizzare la pagina del carrello contenente l’ID del prodotto, il nome, il prezzo e la quantità ordinata casella di input per ogni prodotto precedentemente aggiunto al carrello.
• L’utente può visualizzare un importo totale di acquisto sulla Shopping Card che viene calcolato come somma delle quantità moltiplicate per il prezzo unitario per ogni prodotto ordinato.
• L’utente può regolare la quantità ordinata per qualsiasi prodotto per regolare l’importo totale dell’acquisto.
• L’utente può fare clic sul pulsante “Ordina” nella pagina del carrello per completare l’ordine., L’utente vedrà un numero di conferma quando l’ordine è stato effettuato.
• [) L’utente può fare clic su un pulsante ‘Annulla ordine’ nella pagina del carrello per annullare l’ordine. L’utente vedrà le quantità del prodotto e l’importo totale dell’acquisto azzerato.
• L’utente può fare clic sul pulsante “Visualizza altri prodotti” nella pagina del carrello per tornare alla pagina dei prodotti. Se l’ordine non è stato ancora effettuato, questo non cancellerà i prodotti che sono già stati aggiunti alla pagina Prodotti.,

Caratteristiche bonus

• L’utente può visualizzare un messaggio di errore se la quantità ordinata supera la quantità “a portata di mano” del prodotto.
• L’utente può specificare una fattura e spedire all’indirizzo quando l’ordine viene effettuato dalla pagina del carrello
• L’utente può vedere le spese di spedizione aggiunte all’importo totale dell’acquisto
• L’utente può vedere le imposte sulle vendite aggiunte all’importo totale dell’acquisto
• Lo sviluppatore implementerà l’inventario del prodotto in un

Link utili e risorse

Ci sono un sacco di pagine del sito di e-commerce là fuori., È possibile utilizzare Dribbble e Behance per l’ispirazione.

Progetti di esempio

Animazioni eCommerce

App To-Do

Livello: 2-Intermedio

La classica applicazione To-Do in cui un utente può scrivere tutte le cose che vuole realizzare.,i>Utente può vedere un elenco con tutti gli completato da fare

Utente può vedere un elenco con tutte le cose da fare

Utente può vedere la data di quando ha creato l’

Quando si chiude la finestra del browser il le cose da fare saranno conservati e quando l’Utente torna, i dati verranno recuperati

collegamenti Utili e risorse

• localStorage

progetti

Todo App costruito con Reagiscono

Per Fare la Lista su Codepen

Contatore di Calorie

Livello: 3-Avanzato

Ottenere e rimanere in salute richiede una combinazione di equilibrio mentale, esercizio fisico e nutrizione., L’obiettivo dell’app Contatore di calorie è quello di aiutare l’utente ad affrontare le esigenze nutrizionali contando le calorie per vari alimenti.

Questa applicazione fornisce il numero di calorie in base al risultato di una ricerca utente per un tipo di cibo. I dati grezzi del Dipartimento dell’Agricoltura degli Stati Uniti MyPyramid Food verranno cercati per determinare i valori calorici.

Calorie Counter fornisce anche voi, lo sviluppatore, con esperienza nel trasformare i dati grezzi in un formato che renderà più facile la ricerca., In questo caso, il file di dati Raw MyPyramid Food, che è un foglio di calcolo MS Excel, deve essere scaricato e trasformato in un file JSON che sarà più facile da caricare e cercare in fase di runtime (suggerimento: dai un’occhiata al formato del file CSV).

User Stories

• Developer creerà un file JSON contenente i prodotti alimentari da cercare. Questo verrà caricato quando l’applicazione viene avviata.
• L’utente può vedere un pannello contenente una casella di testo di input descrizione cibo, un pulsante’ Cerca‘, e un pulsante’ Cancella’.
• L’utente può inserire i termini di ricerca nella casella di testo di immissione descrizione cibo.,
• L’utente può fare clic sul pulsante ‘Cerca’ per cercare il cibo corrispondente.
• L’utente può vedere e messaggio di avviso se non sono stati inseriti termini di ricerca.
• L’utente può vedere un messaggio di avviso se non sono state trovate corrispondenze.
• L’utente può visualizzare un elenco degli alimenti corrispondenti, le dimensioni delle porzioni e le calorie in un pannello dei risultati scorrevole che è limitato a 25 voci.
• L’utente può fare clic sul pulsante ‘Cancella’ per cancellare i termini di ricerca e l’elenco dei risultati.

Caratteristiche bonus

• L’utente può vedere il conteggio del numero di prodotti alimentari corrispondenti adiacente alla lista dei risultati.,
• L’utente può utilizzare un carattere jolly nei termini di ricerca.
• L’utente può vedere più di 25 voci da una ricerca facendo clic su un pulsante icona verso il basso per aggiungere altri prodotti alimentari corrispondenti alla lista dei risultati di ricerca.
• Lo sviluppatore implementerà il caricamento dei dati MyPyramid in un database o in una struttura dati diversa da un array per una ricerca più rapida.,

Link e risorse utili

MyPyramid Food Raw Data

Progetti di esempio

Food Calculator

Chat App

Livello: 3-Advanced

Interfaccia di chat in tempo reale in cui più utenti possono interagire tra loro inviando messaggi.

Come MVP(Minimum Viable Product) puoi concentrarti sulla creazione dell’interfaccia di chat. Funzionalità in tempo reale può essere aggiunto in seguito (le caratteristiche bonus).

User Stories

• All’utente viene richiesto di inserire un nome utente quando visita l’app di chat., Il nome utente verrà memorizzato nell’applicazione
• Utente può vedere un input field dove è possibile digitare un nuovo messaggio
• premendo il tasto enter tasto o cliccando su send pulsante il testo verrà visualizzato nel chat box a fianco del suo nome utente (ad es., John Doe: Hello World!)

Bonus

• I messaggi saranno visibili a tutti gli Utenti che sono in chat app (utilizzando i websocket)
• Quando un nuovo Utente entra nella chat, viene visualizzato un messaggio per tutti gli Utenti esistenti
• i Messaggi vengono salvati in un database
• Utente può inviare le immagini, video e link che sarà visualizzato correttamente
• è possibile selezionare e inviare un emoji
• gli Utenti possono chattare in privato
• gli Utenti possono unirsi channels su argomenti specifici

collegamenti Utili e risorse

• Presa.,io
• Come costruire un React.js chat app in 10 minuti — articolo
• Creare un’applicazione di chat come Slack — Reagire / JavaScript Tutorial — Youtube
• Presa.io Chat App, Utilizzando i websocket — Youtube Tutorial

progetti

Chatty2

GitHub Timeline

Livello: 3-Avanzato

API e rappresentazione grafica delle informazioni sono le caratteristiche delle moderne applicazioni web. GitHub Timeline combina i due per creare una cronologia visiva di un’attività GitHub degli utenti.,

L’obiettivo della timeline di GitHub è accettare un nome utente GitHub e produrre una timeline contenente ogni repository e annotato con i nomi dei repository, la data in cui sono stati creati e le loro descrizioni. La timeline dovrebbe essere quella che potrebbe essere condivisa con un potenziale datore di lavoro. Dovrebbe essere facile da leggere e fare un uso efficace del colore e della tipografia.

Devono essere visualizzati solo i repository GitHub pubblici.,

Storie utente

• L’utente può inserire un nome utente GitHub
• L’utente può fare clic su un pulsante ‘Genera’ per creare e visualizzare la timeline repo utenti denominati
• L’utente può vedere un messaggio di avviso se il nome utente GitHub non è un nome utente GitHub valido.

Caratteristiche bonus

• L’utente può visualizzare un riepilogo del numero di REPOSITORY conteggiati per l’anno in cui sono stati creati

Link e risorse utili

GitHub offre due API che è possibile utilizzare per accedere ai dati repo. Puoi anche scegliere di utilizzare un pacchetto NPM per accedere all’API GitHub.,>

codice di Esempio che mostra come utilizzare il GitHub API sono:

• GitHub API REST client JavaScript
• GitHub GraphQL API client per browser e il Nodo

È possibile utilizzare questo comando CURL per vedere il JSON restituito dalla V3 API REST per il vostro repository:

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

progetti

CSS Timeline

la Costruzione di una cronologia Verticale Con i CSS e un Tocco di JavaScript

Shuffle Mazzo di Carte

Livello: 3-Avanzato

Come Sviluppatore Web, ti verrà chiesto di venire con applicazioni innovative, che risolvere i problemi del mondo reale per le persone reali., Ma qualcosa che imparerai rapidamente è che non importa quante funzioni meravigliose si impacchettano in un’app, gli utenti non la useranno se non è performante. In altre parole, esiste un collegamento diretto tra il modo in cui un’app si comporta e se gli utenti la percepiscono come utilizzabile.

L’obiettivo dell’app Shuffle Card Deck è trovare la tecnica più veloce per mescolare un mazzo di carte che puoi usare nelle app di gioco che crei. Ma, più importante che vi fornirà esperienza a misurare e valutare le prestazioni app.,

Il vostro compito è quello di implementare l’algoritmo di valutazione delle prestazioni, il generatore di numeri pseudorandom Xorshift, così come l’algoritmo WELL512a.c se si sceglie di tentare la funzione bonus.

User Stories

• L’utente può vedere un pannello contenente una casella di testo l’utente può inserire il numero di giri in, tre caselle di testo di output per contenere l’ora di inizio, ora di fine, e il tempo totale del test, e due pulsanti — ‘JS casuale’, ‘Xorshift’.
• L’utente può inserire un numero da 1 a 10.000 per specificare il numero di volte (o round) che il numero casuale selezionato deve essere eseguito.,
• L’utente può fare clic su uno dei tre pulsanti per avviare la valutazione dell’algoritmo numero casuale selezionato. L’algoritmo del numero casuale verrà eseguito per il numero di round inseriti dall’utente sopra.
• L’utente può vedere un messaggio di avviso se il numero di giri non è stato inserito, se non è compreso tra 1 e 10.000 o se non è un numero intero valido.
• L’utente può vedere un’area di output tabellare in cui vengono visualizzati i risultati di ciascun algoritmo: nome dell’algoritmo, ora iniziata, ora terminata e tempo totale.,
• L’utente può vedere una finestra di avviso con un pulsante ‘Annulla’ e un pulsante’ OK ‘ se il numero di giri viene modificato prima che tutti e tre i test siano stati eseguiti.
• L’utente può fare clic sul pulsante ‘Annulla’ nella finestra di avviso per chiudere la finestra di dialogo senza modifiche.
• L’utente può fare clic sul pulsante ‘ OK ‘ nella finestra di avviso per cancellare l’area di uscita e chiudere la finestra di avviso.

Caratteristiche bonus

• L’utente può vedere un terzo pulsante algoritmo – ‘WELL512a. c’.
• Lo sviluppatore dovrebbe rivedere l’output e determinare perché l’algoritmo più veloce è più veloce dell’algoritmo più lento.,

Link utili e risorse

• Generazione di numeri casuali (Wikipedia)
• Matematica.a causa di questo problema, non è possibile accedere a questo sito web.tempo (MDN)
• Uso Chrome DevTools Funzione di Controllo per Misurare e Ottimizzare le Prestazioni (Parte 1)
• Uso Chrome DevTools Funzione di Controllo per Misurare e Ottimizzare le Prestazioni (Parte 2)

Sondaggio App

Livello: 3-Avanzato

le Indagini sono una parte preziosa di qualsiasi sviluppatori di strumenti., Sono utili per ottenere feedback dai tuoi utenti su una varietà di argomenti, tra cui soddisfazione delle applicazioni, requisiti, esigenze imminenti, problemi, priorità e semplici aggravamenti per citarne alcuni.

L’app Survey ti dà l’opportunità di imparare sviluppando un’app completa che puoi aggiungere alla tua casella degli strumenti. Esso fornisce la possibilità di definire un sondaggio, consentire agli utenti di rispondere entro un lasso di tempo predefinito, e tabulare e presentare i risultati.,

Gli utenti di questa applicazione sono divisi in due ruoli distinti, ognuno con requisiti diversi:

• Coordinatori di indagine definire e condurre indagini. Questa è una funzione amministrativa non disponibile per gli utenti normali.
• Gli intervistati completano i sondaggi e visualizzano i risultati. Non hanno privilegi amministrativi all’interno dell’app.

Strumenti di indagine commerciale includono funzionalità di distribuzione che le email di massa sondaggi ai rispondenti del sondaggio. Per semplicità, questa applicazione presuppone che i sondaggi aperti per le risposte saranno accessibili dalla pagina web dell’applicazione.,

User Stories — General

• I coordinatori di sondaggi e gli intervistati possono definire, condurre e visualizzare sondaggi e risultati di sondaggi da un sito Web comune
• I coordinatori di sondaggi possono accedere all’app per accedere a funzioni amministrative, come la definizione di un sondaggio.

Definizione di un sondaggio

• Il Coordinatore del sondaggio può definire un sondaggio contenente 1-10 domande a scelta multipla.
• Il coordinatore del sondaggio può definire 1-5 selezioni mutuamente esclusive per ogni domanda.
• Il Coordinatore del sondaggio può inserire un titolo per il sondaggio.,
• Coordinatore sondaggio può fare clic su un pulsante ‘Annulla’ per tornare alla home page senza salvare il sondaggio.
• Coordinatore sondaggio può fare clic su un pulsante ‘Salva’ salvare un sondaggio.,

di Condurre un’Indagine

• Sondaggio Coordinatore può aprire un sondaggio selezionando un sondaggio da un elenco di questionari definiti in precedenza
• Sondaggio Coordinatori sono in grado di chiudere un sondaggio selezionando da un elenco di aprire sondaggi
• Intervistato in grado di completare un sondaggio selezionando da un elenco di aprire sondaggi
• Intervistato possibile selezionare le risposte alle domande del sondaggio cliccando su una casella di controllo
• Intervistati può vedere che precedentemente selezionato risposta verrà automaticamente disattivata se una risposta diversa è cliccato.,
• Gli intervistati possono fare clic su un pulsante ‘Annulla’ per tornare alla home page senza inviare il sondaggio.
• Gli intervistati possono fare clic su un pulsante ‘Invia’ inviare le loro risposte al sondaggio.
• Gli intervistati possono visualizzare un messaggio di errore se si fa clic su “Invia”, ma non tutte le domande hanno ricevuto risposta.,

Visualizzazione dei risultati dell’indagine

• I coordinatori e i rispondenti dell’indagine possono selezionare l’indagine da visualizzare da un elenco di indagini chiuse
• I coordinatori e i rispondenti dell’indagine possono visualizzare i risultati dell’indagine come in formato tabellare che mostra il numero di risposte per ciascuna delle possibili selezioni alle domande.,

Caratteristiche bonus

• Gli intervistati possono creare un account unico nell’app
• Gli intervistati possono accedere all’app
• Gli intervistati non possono completare lo stesso sondaggio più di una volta
• I coordinatori di sondaggi e gli intervistati possono visualizzare rappresentazioni grafiche dei risultati del sondaggio (ad esempio torta, barra, colonna, ecc., i grafici)

collegamenti Utili e risorse

le Librerie per la costruzione di sondaggi:

• SurveyJS

commerciale (servizi di indagine sono:

• Survey Monkey
• Traversy
• Typeform

progetti

Javascript Questionario

Conclusione

Ora si dispone di una base di 15 applicazioni che si può giocare con. Abbiamo creato un repository GitHub dove puoi trovare ancora più idee se sei interessato e sei il benvenuto a contribuire, condividere e dargli una stella!

Codifica felice! ^_^