15 ideias da aplicação para construir e nivelar as suas competências de codificação

Todos nós sabemos que pode ser difícil às vezes, para encontrar o novo aplicativo de idéias que você pode construir para melhorar ou aprender uma nova linguagem de programação ou quadro.,;

ótimo para ser usado como exemplos de tutoriais, artigos ou vídeos) 📃;

fácil de concluir e também facilmente extensível com novos recursos 👌;

E, ainda por cima, cada uma ideia de aplicativo tem:

1. Um claro e descritivo do objectivo;
2. Uma lista de Histórias de usuários que devem ser implementadas;
3. Uma lista de características de bônus, que são a opção, mas o “bom-para-ter”;
4. Todos os recursos e links para ajudar você a encontrar o que você precisa para concluir o projeto

dividimos esses app idéias em três níveis, com base no conhecimento e experiência necessários para completá-los., Os níveis são: principiante, Intermediário e avançado.neste artigo, encontrará 5 ideias de cada nível.

tente publicar os seus componentes reutilizáveis, de uma aplicação para outra.dev, um centro de componentes de nuvens. Você pode documentá — los e adicionar exemplos em cada página de componentes (no site do Bit) – então, usá-los em aplicativos futuros ou simplesmente compartilhá-los com sua equipe.

Tier: 1-Iniciante

Todos nós temos eventos importantes que esperamos na vida, aniversários, e feriados para nomear alguns. Não seria bom ter um aplicativo que conta os meses, dias, horas, minutos e segundos para um evento? O temporizador de contagem decrescente é só essa aplicação!

O objectivo do cronómetro é fornecer uma visualização decremente contínua dos meses, dias, horas, minutos e segundos de um evento introduzido pelo utilizador.,

restrições

• Use apenas funções de linguagem builtin para os seus cálculos, em vez de depender de uma biblioteca ou pacote como MomentJS. Isso pressupõe, claro, que a linguagem de sua escolha tem funções adequadas de manipulação de data e hora.
• Você não pode usar nenhum gerador de código, como a contagem até o local. Você deve desenvolver sua própria implementação original.

histórias do utilizador

• O Utilizador pode ver uma caixa de entrada de eventos que contém um campo de nome do evento, um campo de data, uma hora opcional e um botão ‘Iniciar’.,
• O usuário pode definir o evento, inserindo seu nome, a data que está agendada para acontecer, e uma hora opcional do evento. Se a hora for omitida, presume-se que seja à meia-noite da data do evento no fuso horário local.
• O Utilizador pode ver uma mensagem de aviso se o nome do evento estiver em branco.
• O Utilizador pode ver uma mensagem de aviso se a data ou hora do evento forem incorrectamente introduzidas.
• O Utilizador pode ver uma mensagem de aviso se o tempo até os dados do evento e o tempo que foi introduzido transbordar a precisão do cronómetro.,
• O Utilizador pode carregar no botão’ Iniciar ‘ para ver o cronómetro a mostrar os dias, horas, minutos e segundos até que o evento ocorra.
• O Utilizador pode ver os elementos na contagem decrescente automaticamente decrement. Por exemplo, quando a contagem dos segundos restantes atingir 0, a contagem dos minutos restantes diminuirá em 1 e os segundos começarão a contagem decrescente a partir de 59. Esta progressão deve ter lugar a partir de segundos até à posição dos dias restantes no visor countdown.,

funcionalidades de bónus

• O Utilizador pode gravar o evento de modo a que persista nas sessões
• O Utilizador pode ver um alerta quando o evento for atingido
• O Utilizador pode indicar mais do que um evento.
• O usuário pode ver um cronómetro para cada evento que foi definido.,

links Úteis e recursos

• Imagens analógicas de tubo temporizadores de contagem decrescente pode ser encontrado aqui
• clearInterval MDN
• setInterval MDN
• Data MDN

Exemplo de projectos

Temporizador construído com a Reagir

Simples Relógio/Temporizador de Contagem regressiva

FlipImage

Nível: 1-Iniciante

É importante para os Desenvolvedores Web a compreender os conceitos básicos de manipulação de imagens, desde aplicações web ricas dependem de imagens para agregar valor para o usuário de interface e experiência do usuário (UI/UX).,

FlipImage explora um aspecto da manipulação de imagem — rotação de imagem. Este aplicativo exibe uma área quadrada contendo uma única imagem apresentada em uma matriz 2×2. Usando um conjunto de setas para cima, baixo, esquerda e direita adjacentes a cada uma das imagens, o usuário pode virá-las verticalmente ou horizontalmente.

só deverá usar HTML, CSS e Javascript nativos para implementar esta aplicação. Pacotes de imagens e bibliotecas não são permitidos.,o que a imagem

características de Bônus

• o Usuário pode alterar o padrão de imagem inserindo a URL de uma imagem diferente em um campo de entrada
• o Usuário pode exibir a nova imagem clicando em um ‘Display’ botão ao lado do campo de entrada
• o Usuário poderá ver uma mensagem de erro se as novas imagens de URL não encontrada

links Úteis e recursos

• Como Inverter uma Imagem
• Criar um CSS Lançando Animatin

Exemplo de projectos

Efeitos de Imagem por bennettfeely

Aplicação de Notas

Nível: 1-Iniciante

Criar e armazenar suas anotações para posterior propósito!,

Histórias de Usuário

• o Usuário pode criar uma nota
• o Usuário pode editar uma nota
• o Usuário pode excluir uma nota
• Quando fechar a janela do navegador do notes serão armazenados e quando o Usuário retorna, os dados serão recuperados

características de Bônus

• o Usuário pode criar e editar uma nota no formato Markdown., Em salvar, ele irá converter Markdown para HTML
• Usuário pode ver a data de quando ele criou a nota

links Úteis e recursos

• localStorage
• Markdown Guia
• Marcado Um markdown parser

Exemplo de projectos

Markdown Notas construído com Angular em Codepen

Markdown Notas construído com a Reagir

Markdown Notas construído com Angular 7 e bootstrap 4

Receita

Nível: 1-Iniciante

Você pode não ter percebido isso, mas a receita não são nada mais do que a culinária algoritmos., Como os programas, receita é uma série de passos imperativos que, se seguido corretamente, resultam em um prato saboroso.

o objectivo da aplicação receita é ajudar o utilizador a gerir as receitas de uma forma que as torne fáceis de seguir.

restrições

• para a versão inicial deste aplicativo, os dados da receita podem ser codificados como um arquivo JSON. Depois de implementar a versão inicial deste aplicativo, você pode expandir sobre isso para manter receitas em um arquivo ou banco de dados.,

Histórias de Usuário

• o Usuário pode ver uma lista de receita de títulos
• o Usuário pode clicar em uma receita de título para apresentar uma receita cartão contendo a receita título, tipo de refeição (café da manhã, almoço, jantar, ou lanche), o número de pessoas que atende, o seu nível de dificuldade (novato, intermediário, avançado), a lista de ingredientes (incluindo os valores), e as etapas de preparação.
• utilizador carregue num novo título da receita para substituir o cartão actual por uma nova receita.

características de bónus

• O Utilizador pode ver uma fotografia que mostra como o item se parece depois de ter sido preparado.,
• O Utilizador pode procurar por uma receita que não esteja na lista de títulos da receita, introduzindo o nome da refeição numa caixa de pesquisa e carregando num botão ‘Procurar’. Qualquer API de receita de código aberto pode ser usada como fonte para receitas (veja o MealDB em baixo).
• O Utilizador poderá ver uma lista de receitas que correspondam aos Termos de pesquisa
• O Utilizador poderá carregar no nome da receita para mostrar o seu cartão de receita.o Utilizador pode ver uma mensagem de aviso se não for encontrada uma receita correspondente.
• O Utilizador poderá carregar num botão ‘Gravar’ nos cartões para as receitas localizadas através da API para gravar uma cópia para este ficheiro de receitas ou Base de dados do apps.,

links Úteis e recursos

• Usando Fetch
• Axios
• O MealDB API

Exemplo de projectos

Receita de Caixa — um Código Livre Acampamento Projeto (FCC)

Reagir Caixa da Receita

Quiz App

Nível: 1-Iniciante

Prática e teste os seus conhecimentos, respondendo a perguntas em um questionário de aplicação.

Como desenvolvedor você pode criar uma aplicação de quiz para testar habilidades de codificação de outros desenvolvedores., (HTML, CSS, JavaScript, Python, PHP, etc…)

Histórias de Usuário

• o Usuário pode iniciar o teste pressionando button
• o Usuário pode ver uma pergunta com 4 possíveis respostas
• Depois de selecionar uma resposta, apresentar a seguinte pergunta para o Usuário., Faça isso até que o teste é concluído
• No final, o Usuário pode ver as seguintes estatísticas
• o Tempo que levou para concluir o teste
• quantas respostas corretas que ele se
• Uma mensagem indicando se ele passed ou failed teste

características de Bônus

• O usuário pode compartilhar o resultado de um quiz sobre social media
• Adicionar vários testes para o aplicativo. O usuário pode selecionar qual a tomar
• O usuário pode criar uma conta e ter todas as pontuações gravadas em seu painel., O usuário pode completar um quiz várias vezes

links Úteis e recursos

• Abra Curiosidades de Banco de dados

Exemplo de projectos

Quiz aplicativo criado com a Reagir (esperar por ele para carregar, como é hospedado no Heroku)

Quiz aplicativo de interface

Livro Localizador App

Nível: 2-Intermediário

Criar um aplicativo que vai permitir aos usuários a busca de livros por introduzir uma consulta (Título, Autor, etc.). Exibir os livros resultantes em uma lista na página com todos os dados correspondentes.,

histórias do utilizador

• O Utilizador pode introduzir uma consulta de pesquisa num input campo
• O Utilizador pode enviar a consulta.,ppearing na página

características de Bônus

• Para cada item na lista de adicionar um link que irá enviar o Usuário para um site externo, que tem mais informações sobre o livro
• Implementar um Responsive Design
• Adicione o carregamento de animações

links Úteis e recursos

Você pode usar a pesquisa de Livros do Google API

Exemplo de projectos

Livro Finder

Cartão de Memória-Jogo

Nível: 2-Intermediário

Cartão de memória é um jogo onde você tem que clicar em um cartão para ver qual é a imagem que está por baixo e tentar encontrar a imagem correspondente, sob as outras cartas.,

histórias de utilizador

• O Utilizador pode ver uma grelha com cartões n x n (n é um inteiro). Todas as cartas estão viradas para baixo inicialmente (hidden estado)
• O Utilizador pode carregar num botão para iniciar o jogo. Quando este botão é clicado, um temporizador começará
• o Usuário pode clicar em qualquer cartão para revelar a imagem que está por baixo (altere-o para visible estado)., Usuário clica no 2º cartão:
  • Se houver uma correspondência, a 2 cartões será eliminado do jogo (ocultar/removê-los ou deixá-los no visible estado
  • Se não houver uma correspondência, a 2 cartões de virar de volta para o seu estado original (hidden estado)
  • Quando todos os jogos tiverem sido encontradas, o Usuário poderá ver uma caixa de diálogo mostrando uma mensagem de Parabéns com um contador mostrando o tempo que levou para terminar o jogo

  características de Bônus

  • Uso pode escolher entre vários níveis de dificuldade (Fácil, Médio, Difícil)., Maior dificuldade significa: reduzir o tempo disponível para completar e/ou aumentar o número de cartões
  • o Usuário pode ver as estatísticas de jogo (nr. de vezes que ele ganhou / perdeu, o melhor tempo para cada nível)

  links Úteis e recursos

  • Wikipedia

  Exemplo de projectos

  Flip — cartão de memória de jogo

  Jogo da Memória

  SMB3 Jogo de Cartão de Memória

  App de Desenho

  Camada: 2-Intermediário

  Criar arte digital em uma tela na web para compartilhar on-line e também exportar como imagem.,v>, star, etc.)

• o Usuário pode compartilhar a obra de arte em mídias sociais

links Úteis e recursos

• Saiba como criar um Aplicativo de Desenho usando p5js

Exemplo de projectos

App de Desenho por Florin Pop

App de Desenho por t0mm4rx

Simples Loja Online

Nível: 2-Intermediário

O objetivo da Simples Loja On-line é para dar a seus usuários a capacidade de selecionar um produto para compra, visualizar informações de compra, adicioná-lo ao carrinho de compras online, e, finalmente, na verdade, a compra do produto no carrinho de compras.,

restrições

• iniciando você pode implementar o seu inventário de produto como um conjunto de objetos JavaScript se você estiver desenvolvendo em JavaScript. Para outras línguas sinta-se livre para escolher a solução em memória de sua escolha.

histórias de utilizador

• O Utilizador pode carregar num botão “Ver produtos” na página de destino para mostrar a Página de produtos.
• O usuário pode ver um cartão na página de produtos para cada produto mostrando a miniatura do produto, Nome, Preço, uma descrição curta, e um botão ‘Selecionar’.,
• O Utilizador pode ver uma página de detalhes do produto apresentada quando o botão “Seleccionar” é carregado, mostrando a mesma informação do cartão do produto, mas também um id único do produto, Uma descrição longa, o botão “Adicionar ao carrinho” e o botão “Ver Mais produtos”.
• O usuário pode ver uma mensagem de confirmação quando o produto é adicionado ao carrinho de compras.
• O usuário pode clicar na página ‘Veja Mais produtos’ para retornar à página de produtos.o Utilizador pode ver um botão “Carrinho de compras” na página de destino ou na página de produtos. Dica: uma barra superior pode ser um bom local comum para este botão.,
• O Utilizador pode clicar no botão “Carrinho de compras” para mostrar a página do carrinho de compras que contém o id do produto, o nome, o preço e a quantidade de entrada encomendada para cada produto previamente adicionado ao carrinho de compras.
• O usuário pode ver um montante total de compra no cartão de compras que é calculado como a soma das quantidades multiplicadas pelo preço unitário para cada produto encomendado.
• O usuário pode ajustar a quantidade encomendada para qualquer produto para ajustar o valor total de compra.
• O Utilizador pode clicar num botão “Ordem de lugar” na página do carrinho de compras para completar a encomenda., O usuário verá um número de confirmação quando a encomenda for colocada.
• [) O Utilizador pode carregar num botão “Cancelar a encomenda” na página do carrinho de compras para cancelar a encomenda. O usuário verá as quantidades do produto e a quantidade total de compra redefinida para zero.
• O Utilizador pode clicar num botão “Veja Mais produtos” na página do carrinho de compras para voltar à página dos produtos. Se o pedido ainda não foi colocado isso não vai limpar os produtos que já foram adicionados à página de produtos.,

características de bónus

• O Utilizador pode ver uma mensagem de erro se a quantidade encomendada exceder a quantidade “à mão” do produto.
• O Utilizador pode indicar uma factura para e enviar para o endereço quando a encomenda é colocada na página do carrinho de compras
• O Utilizador pode ver as despesas de envio adicionadas ao montante total de compra
• O Utilizador pode ver os impostos de venda adicionados ao montante total de compra
• O Utilizador irá implementar o inventário do produto num ficheiro externo ou numa base de dados.

ligações e recursos úteis

Existem muitas páginas do Site de comércio eletrônico lá fora., Você pode usar Dribbble e Behance para inspiração.

exemplos de projectos

animações de comércio electrónico

itens por-fazer

Nível: 2-intermediário

a aplicação clássica por-fazer onde um utilizador pode escrever todas as coisas que deseja realizar.,i>o Usuário pode ver uma lista com todas as concluída a-o que fazer

o Usuário pode ver uma lista com todos os ativos para-o que fazer

Usuário pode ver a data de quando ele criou a

Quando fechar a janela do navegador a fazer a vontade de ser armazenado e quando o Usuário retorna, os dados serão recuperados

links Úteis e recursos

• localStorage

Exemplo de projectos

Todo Aplicativo criado com a Reagir

Para Fazer a Lista em Codepen

Contador de Calorias

Camada: 3-Advanced

Fazer e manter-se saudável requer uma combinação de equilíbrio mental, exercício e nutrição., O objetivo do aplicativo de contador de calorias é ajudar o usuário a atender às necessidades nutricionais, contando calorias para vários alimentos.

Este aplicativo fornece o número de calorias com base no resultado de uma pesquisa do Usuário para um tipo de alimento. Os dados brutos do Departamento de Agricultura dos EUA MyPyramid Food serão pesquisados para determinar os valores calóricos.

Calorie Counter também fornece a você, o desenvolvedor, com experiência na transformação de dados brutos em um formato que tornará mais fácil a pesquisa., Neste caso, o arquivo de dados Raw do MyPyramid Food, que é uma planilha do MS Excel, deve ser baixado e transformado em um arquivo JSON que será mais fácil de carregar e procurar no tempo de execução (dica: dê uma olhada no formato de arquivo CSV).

as histórias do utilizador

• O programador irá criar um ficheiro JSON que contém os itens alimentares a procurar. Isto será carregado quando o aplicativo for iniciado.
• O Utilizador pode ver um painel que contém um campo de texto com uma descrição dos alimentos, um botão de “procura” e um botão de “limpar”.
• O Utilizador pode introduzir os Termos de pesquisa no campo de texto da descrição dos alimentos.,
• O Utilizador pode carregar no botão’ Procurar ‘ para procurar os alimentos correspondentes.
• O Utilizador pode ver e avisar a mensagem se não tiverem sido introduzidos Termos de pesquisa.
• O Utilizador pode ver uma mensagem de aviso se não forem encontradas correspondências.
• O usuário pode ver uma lista dos itens de alimentos correspondentes, tamanhos de porção e calorias em um painel de resultados que é limitado a 25 entradas.
• O Utilizador pode carregar no botão’ Limpar ‘ para limpar os Termos de pesquisa e a lista de resultados.

funcionalidades de bónus

• O Utilizador pode ver a contagem do número de itens alimentares correspondentes adjacentes à lista de resultados.,
• O Utilizador pode usar um carácter de caracteres especiais em termos de pesquisa.
• O Utilizador pode ver mais de 25 itens de uma pesquisa, carregando num botão para baixo para adicionar mais itens alimentares correspondentes à lista de resultados da pesquisa.
• desenvolvedor irá implementar carregar os dados do MyPyramid em uma base de dados ou uma estrutura de dados diferente de um array para uma pesquisa mais rápida.,

ligações e recursos úteis

MyPyramid alimento dados brutos

exemplo projectos

Calculadora alimentar

Chat App

Nível: 3-Avançado

interface de conversa em tempo Real onde vários utilizadores podem interagir uns com os outros através do envio de mensagens.

como MVP (produto mínimo viável) você pode se concentrar em construir a interface de Chat. A funcionalidade em tempo Real pode ser adicionada mais tarde (os bônus).

histórias do utilizador

• O Utilizador é convidado a indicar um nome de utilizador quando visita a aplicação de chat., O nome de usuário será armazenado no aplicativo
• o Usuário pode ver um input field onde ele pode escrever uma nova mensagem.
• pressionando a tecla enter chave ou clicando no send botão, o texto será apresentado no chat box ao lado de seu nome de usuário (por exemplo,, John Doe: Hello World!

características de Bônus

• As mensagens serão visíveis para todos os Utilizadores que estão no aplicativo de bate-papo (usando WebSockets)
• Quando um novo Usuário entra no bate-papo, uma mensagem é exibida para todos os Usuários existentes
• Mensagens são guardadas em um banco de dados
• o Usuário pode enviar imagens, vídeos e links que serão exibidos corretamente
• o Usuário pode selecionar e enviar um emoji
• os Usuários podem conversar em privado
• os Usuários podem se juntar channels sobre temas específicos

links Úteis e recursos

• Socket.,io
• Como criar uma reacção.js aplicativo de bate-papo em 10 minutos — artigo
• Criar um aplicativo de bate-papo como Folga Reagir: / / Ow.ly / Tutorial — de- Youtube
• Socket.io Aplicativo de bate-Papo Usando Websockets — Youtube Tutorial

Exemplo de projectos

Chatty2

GitHub linha do tempo

Nível: 3-Advanced

API e representação gráfica de informação são características das aplicações web modernas. A linha do tempo do GitHub combina os dois para criar uma história visual de uma atividade do GitHub.,

O objetivo da linha do tempo do GitHub é aceitar um nome de usuário do GitHub e produzir uma linha do tempo contendo cada repo e anotado com os nomes do repo, a data em que eles foram criados, e suas descrições. O cronograma deve ser um que possa ser compartilhado com um potencial empregador. Deve ser fácil de ler e fazer uso eficaz da cor e tipografia.

apenas os repos GitHub públicos devem ser exibidos.,

histórias de utilizador

• O Utilizador pode introduzir um nome de utilizador do GitHub
• O Utilizador pode carregar num botão ‘Gerar’ para criar e mostrar a linha temporal do repo dos utilizadores nomeados

O Utilizador pode ver uma mensagem de aviso se o nome de utilizador do GitHub não for um nome de utilizador válido do GitHub.

funcionalidades de bónus

• O Utilizador pode ver um resumo do número de acordos de recompra apresentados no ano em que foram criados

ligações e recursos úteis

o GitHub oferece duas API que pode usar para aceder aos dados dos acordos de recompra. Você também pode optar por usar um pacote NPM para acessar a API GitHub.,>

Exemplo de código que mostra como usar o GitHub da API são:

• GitHub RESTO cliente de API para JavaScript
• GitHub GraphQL API cliente para navegadores e o Nó

Você pode usar este comando CURL para ver o JSON retornado pelo V3 API REST para o seu acordos de recompra:

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

Exemplo de projectos

CSS linha do tempo

a Construção de uma linha do tempo Vertical Com CSS e um Toque de JavaScript

Embaralhar o Baralho de cartas

Nível: 3-Advanced

Como um Desenvolvedor Web, você será convidado a vir para cima com aplicações inovadoras que resolvem problemas do mundo real para pessoas reais., Mas algo que você vai aprender rapidamente é que não importa quantas características maravilhosas você empacota em um aplicativo usuários não vai usá-lo se ele não é performant. Em outras palavras, há uma ligação direta entre como um aplicativo funciona e se os usuários percebem que ele é utilizável.

O objetivo da aplicação baralhar cartas é encontrar a técnica mais rápida para baralhar um baralho de cartas que você pode usar em aplicativos de jogos que você criar. Mas, mais importante, ele irá fornecer-lhe com experiência em medir e avaliar o desempenho do aplicativo.,

Sua tarefa é implementar o algoritmo de avaliação de desempenho, o gerador de números pseudorandom xorshift, bem como o algoritmo WELL512a.c Se você optar por tentar a funcionalidade de bônus.

as histórias do utilizador

• O Utilizador pode ver um painel que contém um campo de texto em que o utilizador pode introduzir o número de rodadas, três caixas de texto de saída para conter a hora inicial, a hora final e o tempo total do teste, e dois botões — ‘JS Random’, ‘Xorshift’.
• O Utilizador pode indicar um número de 1 a 10 000 para indicar o número de vezes (ou rodadas) que o número aleatório seleccionado deve ser executado.,
• O Utilizador pode carregar num dos três botões para iniciar a avaliação do algoritmo de número aleatório seleccionado. O algoritmo de número aleatório será executado para o número de rodadas introduzidas pelo utilizador acima.
• O Utilizador pode ver uma mensagem de aviso se o número de Rodadas não tiver sido introduzido, se não estiver dentro do intervalo 1 a 10 000, ou se não for um inteiro válido.
• O usuário pode ver uma área tabular de saída onde os resultados de cada algoritmo são exibidos — nome do algoritmo, tempo iniciado, tempo terminado e tempo total.,
• O Utilizador pode ver uma janela de aviso com um botão “Cancelar” e um botão ” OK ” se o número de rodadas for alterado antes de todos os três testes terem sido executados.
• O Utilizador poderá carregar no botão’ Cancelar ‘ na janela de aviso para desligar a janela sem alterações.
• O Utilizador pode carregar no botão’ OK ‘ na janela de aviso para limpar a área de saída e fechar a janela de aviso.

características de bónus

• O Utilizador pode ver um terceiro algoritmo botão – ‘WELL512a. c’.
• desenvolvedor deve rever a saída e determinar por que o algoritmo mais rápido é mais rápido do que o algoritmo mais lento.,

ligações e recursos úteis

• geração aleatória de Números (Wikipedia)
• Matemática.random (MDN)
• Xorshift (Wikipedia)
• WELL512a.C
• console.tempo (MDN)
• Usando o google Chrome DevTools Recurso de Auditoria para Medir e Otimizar o Desempenho (Parte 1)
• Usando o google Chrome DevTools Recurso de Auditoria para Medir e Otimizar o Desempenho (Parte 2)

Pesquisa App

Nível: 3-Advanced

as Pesquisas são uma parte valiosa de todos os desenvolvedores de ferramentas., Eles são úteis para obter feedback de seus usuários sobre uma variedade de tópicos, incluindo satisfação de aplicativos, requisitos, necessidades futuras, problemas, prioridades, e apenas simples agravações para citar alguns.

A aplicação de pesquisa dá-lhe a oportunidade de aprender através do desenvolvimento de uma aplicação completa que pode adicionar à sua caixa de ferramentas. Ele fornece a capacidade de definir uma pesquisa, permitir que os usuários respondam dentro de um prazo predefinido, e tabular e apresentar resultados.,os utilizadores deste aplicativo estão divididos em duas funções distintas, cada uma com diferentes requisitos:

• coordenadores de inquéritos definem e realizam inquéritos. Trata-se de uma função administrativa que não está à disposição dos utilizadores normais.os inquiridos completam os inquéritos e os resultados da visualização. Eles não têm privilégios administrativos dentro do aplicativo.

As ferramentas de pesquisa Comercial incluem a funcionalidade de distribuição que os e-mails em massa pesquisam para os entrevistados. Por uma questão de simplicidade, este aplicativo assume que pesquisas abertas para respostas serão acessadas a partir da página web do aplicativo.,

histórias de Utilizador — Geral

• coordenadores de inquéritos e inquiridos podem definir, realizar e visualizar os inquéritos e resultados de inquéritos a partir de um sítio Web comum
• coordenadores de inquéritos podem aceder ao aplicativo para aceder a funções administrativas, como a definição de um inquérito.

definir um inquérito

• Coordenador do inquérito pode definir um inquérito contendo 1-10 perguntas de escolha múltipla.
• Coordenador do inquérito pode definir 1-5 selecções mutuamente exclusivas para cada questão.o coordenador do inquérito pode indicar um título para o inquérito.,
• Coordenador da pesquisa pode clicar num botão “Cancelar” para voltar à página inicial sem gravar a pesquisa.
• Coordenador da pesquisa pode clicar num botão ‘Salvar’ salvar uma pesquisa.,

a Realização de um Inquérito

• Coordenador do Inquérito pode abrir um inquérito selecionando uma pesquisa a partir de uma lista previamente definida de pesquisas
• Pesquisa os Coordenadores podem fechar uma pesquisa selecionando-o a partir de uma lista de abrir inquéritos
• Pesquisa Respondente pode concluir uma pesquisa selecionando-o a partir de uma lista de abrir inquéritos
• Pesquisa participante pode escolher as suas respostas a perguntas do inquérito clicando em uma caixa de seleção
• os Entrevistados, pode-se ver que um selecionado anteriormente resposta será automaticamente desmarcada se uma resposta diferente é clicado.,
• os inquiridos podem carregar num botão “Cancelar” para voltar à página inicial sem enviar a pesquisa.
• os inquiridos podem clicar num botão “Submeter” enviar as suas respostas ao inquérito.os inquiridos podem ver uma mensagem de erro se “submeter” for clicado, mas nem todas as perguntas foram respondidas.,os coordenadores dos Inquéritos e os respondentes dos inquéritos podem seleccionar o inquérito a apresentar a partir de uma lista de inquéritos fechados e os coordenadores dos Inquéritos e os respondentes dos inquéritos podem ver os resultados dos inquéritos de acordo com o formato tabular, mostrando o número de respostas para cada uma das possíveis selecções às perguntas.,

as funcionalidades de bónus

• os inquiridos podem criar uma conta única na aplicação
• os inquiridos podem ligar-se à aplicação
• os inquiridos não podem completar a mesma pesquisa mais do que uma vez os coordenadores de inquérito e os inquiridos podem ver as representações gráficas dos resultados dos inquéritos (por exemplo, pie, bar, coluna, etc.)., gráficos)

links Úteis e recursos

Bibliotecas para a criação de inquéritos:

• SurveyJS

Alguns comerciais de serviços de pesquisa incluem:

• Survey Monkey
• Traversy
• Typeform

Exemplo de projectos

Javascript Questionário

Conclusão

Agora você tem uma base de 15 aplicativos que você pode jogar com. Nós criamos um repositório GitHub onde você pode encontrar ainda mais idéias se você estiver interessado e você é bem-vindo a contribuir, compartilhar e dar-lhe uma estrela!Happy Coding! ^_^