Implante seu primeiro aplicativo de lista de tarefas: 8 etapas

2025 Autor: John Day | [email protected]. Última modificação: 2025-01-13 06:58

Se você é completamente novo em programação ou tem alguma experiência de codificação, você pode estar se perguntando por onde começar a aprender. Você precisa aprender como, o quê, onde codificar e então, quando o código estiver pronto, como implantá-lo para que o todo veja.

Bem, a boa notícia é que a codificação não é difícil.

Público Alvo: Este tutorial é direcionado a iniciantes que desejam iniciar uma carreira em desenvolvimento web, possuindo conhecimento de tecnologias web em geral.

Tempo de construção: 90 minutos.

Dificuldade: fácil.

Etapa 1: O que iremos construir?

Ao final deste tutorial, iremos:

• Crie um aplicativo da Web de lista de tarefas simples usando HTML5.
• Integre o Bootstrap com nosso aplicativo para adicionar um estilo rápido e atraente.
• Use a biblioteca JavaScript e JQuery para adicionar algum comportamento dinâmico ao nosso aplicativo.
• Implante nosso aplicativo na nuvem usando Ziet / now.

Em ação:

Etapa 2: Introdução a HTML, Bootstrap, JavaScript e JQuery

O que é HTML?

A linguagem de marcação de hipertexto (HTML) pode ser considerada "a linguagem da Internet". HTML é a linguagem de marcação padrão usada para criar páginas da web. Ele foi originalmente projetado para compartilhar documentos científicos. As adaptações ao HTML ao longo dos anos o tornaram adequado para descrever vários outros tipos de documentos que podem ser exibidos como páginas da web na Internet.

O único requisito necessário para exibir uma página HTML é um navegador da web, como o Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome ou Apple Safari.

O que é Bootstrap?

Bootstrap é a estrutura HTML, CSS e JavaScript mais popular para a construção de primeiros sites móveis responsivos. Bootstrap é um projeto de código aberto desenvolvido pelo Twitter. ele consiste em classes CSS que podem ser aplicadas a elementos para estilizá-los de forma consistente e código JavaScript que executa melhorias adicionais.

O que é JavaScript?

JavaScript é uma linguagem de programação usada para programação do lado do cliente em aplicativos da web. O código JavaScript é executado pelo navegador e permite que os programadores de aplicativos da web construam conteúdo da web dinâmico, como componentes que mostram ou estão ocultos dinamicamente, alteram a aparência e validam a entrada do usuário.

O que é JQuery?

JQuery é uma biblioteca JavaScript rápida, pequena e rica em recursos, que torna as coisas como a passagem de documentos HTML e a manipulação, manipulação de eventos e animação muito mais simples.

Todo o poder do JQuery é acessado via JavaScript, portanto, ter um forte domínio do JavaScript é essencial para compreender, estruturar e depurar seu código.

Para mais detalhes:

HTML

JavaScript

JQuery

Bootstrap

Etapa 3: sua primeira página com HTML

ETAPA1: crie uma nova pasta:

mkdir simple-todolist

PASSO 2: crie um novo arquivo dentro da pasta simple-todolist e nomeie-o index.html.

cd simple-todolist

toque em index.html

ETAPA3: adicione o seguinte código a index.html.

Lista de afazeres

Minha Lista de Tarefas

PASSO 4: Abra o index.html no seu navegador.

Você verá que Minha lista de tarefas pendentes é exibida (veja a foto acima).

Etapa 4: Adicionando Bootstrap

Nesta seção, adicionaremos suporte ao Bootstrap à nossa página index.html, a fim de adicionar um estilo rápido e bom ao aplicativo To-Do List.

Aviso: neste aplicativo, usaremos o Bootstrap 3, você pode usar qualquer outro framework CSS, como a Semantic UI.

ETAPA 1: adicione o arquivo CSS Bootstrap na tag head:

ETAPA 2: adicione os arquivos de scripts Bootstrap e JQuery CDN no final da tag body:

ETAPA 3: Abra index.html em seu navegador.

Parabéns, adicionamos com sucesso o suporte Bootstrap à nossa página em poucos passos.

Etapa 5: Conclua a IU

Depois de adicionarmos o suporte Bootstrap ao nosso aplicativo. Agora vamos competir na UI (Interface do Usuário) para permitir que o usuário adicione novas tarefas. A lista de tarefas pendentes poderá adicionar novos itens a uma lista, bem como remover itens existentes.

ETAPA1: adicione o seguinte código a index.html.

Adicionar Nova Tarefa Adicionar Limpar Tudo!

Minha Lista de Tarefas

PASSO 2: abra o arquivo index.html em seu navegador.

Etapa 6: Adicionando a lógica ao aplicativo

Quando você insere o nome de uma tarefa e clica no botão Adicionar, nada acontece no momento. Vamos consertar isso.

Ao final desta etapa, transformaremos nosso index.html em uma página dinâmica, de modo que ele se comportará para a interação do usuário.

PASSO 1: crie uma nova pasta dentro de simple-todolist, nomeie js e um novo nome de arquivo script.js dentro dessa pasta:

mkdir js

cd js touch script.js

ETAPA2: vincule o script.js ao index.html adicionando o seguinte código no final da tag head:

ETAPA3: adicione o seguinte código ao arquivo script.js

$ (documento).ready (() => {

var tasks = 0 $ ("# removeAll"). hide (); / * adicionar novo manipulador de tarefas * / $ ("# add"). on ("click", (evento) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input"). val (); if (val! == "") {tarefas + = 1; var elm = $ ("

• "); $ (" # mylist "). append (elem); $ (" input "). val (" "); / * remove o manipulador de tarefas exclusivo * / $ (". text-right "). on (" clikc ", function (event) {event.preventDefault (); event.stopPropagation (); tasks - = 1; $ (this).parent.remove ();}); / * mostrar o botão removeAll quando tivermos mais de 3 tarefas * / if (tarefas> 2) {$ ("# remveAll"). show ();} / * manipulador removeAll * / $ ("# removeAll"). on ("click", evento => {event.preventDefault (); event.stopPropagation (); $ (". disabled"). siblings (). remove (); tasks = 0; $ ("# removeAll"). hide ();});}});});

  Nota: Você pode obter clone ou baixar o ZIP do código do meu repositório GitHub, isso evita que você toque em.

  git clone github.com/ahmnouira/simple-todolist

  ETAPA4: teste o código

  Abra o seu navegador e digite uma tarefa, em seguida, clique em Adicionar, você verá uma nova tarefa adicionada à lista, se você adicionar 3 tarefas, você notará que um botão limparAll é exibido, este botão nos permite remover todas as tarefas adicionadas, você também pode remover apenas uma compra de tarefa clicando em seu botão.

  Etapa 7: (opcional) implantar o aplicativo

  

  Até agora, construímos um aplicativo de lista de tarefas simples, agora é hora de implantá-lo na nuvem e compartilhar nosso trabalho com outras pessoas ao redor do mundo.

  Para conseguir isso, usaremos a plataforma em nuvem chamada ZEIT Now.

  O que é ZEIT agora?

  ZEIt Now é uma plataforma em nuvem para sites estáticos e funções sem servidor, que permite aos desenvolvedores hospedar sites e serviços web que implantam instantaneamente, tudo isso com configuração zero.

  1. Instale agora CLI

  Para implantar com o ZEIT Now, você precisará instalar o Now CLI.

  importante: certifique-se de que o npm esteja instalado.

  npm -v # verifique se o npm instala

  npm install -g now @ latest # instale a última versão do Now CLI globalmente agora -v # chech se o Now CLI estiver instalado e imprima-a versão

  2. Implantar

  Tudo que você precisa fazer é mover para o diretório e implantar seu aplicativo com um único comando:

  agora --prod # implantar o aplicativo

  Depois de implantado, você obterá uma URL de visualização que é atribuída em cada implantação para compartilhar as alterações mais recentes no endereço.

  meu aplicativo:

  Etapa 8: Conclusão

  Isso é tudo que há para fazer!

  Sinta-se à vontade para explorar o código definindo novos recursos e expandindo o aplicativo, e compartilhe sua experiência e perguntas na área de comentários.

  Para ver mais meus trabalhos, visite meu código aberto no GitHub.

  myYouTube.

  myLinkedIn

  Obrigado por ter um tempo para ler meu instrutível ^^.

  Tenha um bom dia.

  Ahmed Nouira