Crie seu primeiro aplicativo da Web: notas rápidas e fáceis + contador 📝⚡

Crie seu primeiro aplicativo web: notas + contador fácil e rápido 📝⚡

Começar a programar pode parecer assustador, com tantas linguagens, estruturas e metodologias a serem consideradas. Às vezes pode parecer mais fácil delegar tudo a uma IA. Não se preocupe! Programar para a web pode ser simples, divertido e, o melhor de tudo, totalmente gratuito! 🌐✨

O que você vai construir

Seguindo este tutorial, você criará um aplicativo web simples para armazenar notas de texto e contar caracteres e palavras.

O aplicativo manterá os dados para lembrar do texto quando você recarregar ou reabrir a página. Isso significa que você terá uma maneira conveniente de salvar qualquer texto que queira consultar mais tarde, como endereços, URLs, etc. 📄🔗

Um exemplo de um aplicativo web simples baseado em texto que exibe notas, incluindo uma entrada de calendário e uma lista de URLs.

Ele também conta caracteres e palavras, o que é uma boa introdução ao tratamento de strings (texto). Claro, o aplicativo é muito simples: esse é o propósito! Mas com este tutorial, você aprenderá os conceitos básicos do desenvolvimento de um aplicativo web e, então, o mundo será seu. 🦪💻

Como você vai construir isso?

Embora os aplicativos da web sejam muito diversos, eles normalmente envolvem três tecnologias principais: HTML, CSS e JavaScript. É essencial que você entenda o papel deles antes de começar. 📚

HTML: Hypertext Markup Language permite que você defina a estrutura do seu conteúdo. Com ele, você pode marcar um texto de acordo com seu significado, indicando se é um parágrafo, um título ou um item de uma lista, por exemplo.
CSS: Folhas de Estilo em Cascata permitem que você estilize seu conteúdo. Usando essa linguagem, você pode colorir um parágrafo de verde, deixar todos os seus links em negrito ou posicionar uma barra lateral ao lado do seu artigo principal. 🎨
JavaScript: Com esta linguagem de programação, você pode adicionar funcionalidades ao seu site. Você pode fazer com que botões mostrem ou ocultem partes do seu documento quando clicados, ou implementar um processador de texto ou videogame completo. 🎮

Ele site.dev (escrito por membros da equipe Chrome) e MDN, a Rede de Desenvolvedores da Mozilla, são duas excelentes fontes de informação sobre tecnologias web fundamentais.

A página inicial do site web.dev com recursos de aprendizagem para HTML, CSS e JavaScript.

A estrutura do aplicativo

O aplicativo que você criará consistirá em três arquivos simples: index.html, styles.css e script.js. 🗂️

Não há requisitos especiais para executar o aplicativo, você só precisa de um navegador da web. Não há funcionalidade de backend, então você não precisa de uma linguagem de script como PHP ou de um servidor web local. Quando terminar, você pode abrir o arquivo index.html diretamente no seu navegador e tudo dará certo. 😊

É importante observar que este aplicativo salva seu texto sem gravá-lo em um arquivo específico no disco, já que o JavaScript não consegue acessar o sistema de arquivos. Utiliza a Web Storage API, uma alternativa poderosa aos cookies. 🍪💾

Como construir o anotador

Crie os três arquivos a seguir no mesmo diretório e abra index.html em um navegador da web. Alternativamente, você pode baixar os arquivos de este repositório GitHub. 📥

Construindo a estrutura com HTML

O arquivo index.html define a estrutura do conteúdo do seu aplicativo em HTML. Inclua referências aos outros dois arquivos para que um navegador possa combiná-los para o produto final.

Como todos os documentos HTML, a estrutura de nível superior inclui uma seção de cabeçalho contendo metadados e uma seção de corpo contendo o conteúdo real que aparecerá na página:

HTML>
<HTML>
<cabeça>
    ...
cabeça>

<corpo>
…
corpo>
HTML>

Os metadados no cabeçalho são muito breves, com apenas um título de página (que aparece na barra de título do seu navegador) e uma referência ao arquivo styles.css:

    <título>Textotítulo>
    <link rel="folha de estilo" href="estilos.css" />

O corpo é mais complicado, mas existem apenas algumas partes importantes:

    <divisão eu ia="contador">
        palavras: <extensão eu ia="palavras">0extensão>
        / caracteres: <extensão eu ia="caracteres">0extensão>
    divisão>

<área de texto eu ia="texto" foco automático=«1»>área de texto>

<roteiro src=«script.js»>roteiro>

O elemento div contém a contagem de palavras e caracteres do aplicativo. Ele estará localizado na parte superior do aplicativo web e será atualizado sempre que o texto for alterado.

Observe os atributos id, que são vitais para a operação. O valor de um id deve ser único, para que o aplicativo possa usá-lo para identificar um item específico. Fazer isso pode nos ajudar a estilizar esses elementos e também direcioná-los ao adicionar funcionalidades.

A textarea é um elemento de formulário integrado que permite digitar texto simples em um navegador. Com o atributo de foco automático, você estará pronto para escrever assim que a página carregar. Por fim, a página faz referência ao arquivo javascript, script.js.

Neste ponto, você pode abrir o arquivo index.html em um navegador. Ele não fará nada agora e nem ficará bonito, mas é útil testar seu aplicativo em cada estágio para garantir que o básico funcione conforme o esperado.

Uma visão do aplicativo web de anotações com estilos de navegador padrão, mostrando tudo agrupado no canto superior esquerdo.

Deixando-os bonitos com CSS

O CSS permite que você estilize partes da sua página da web direcionando essas partes e especificando valores para propriedades como font-size e background-color. Este aplicativo de exemplo não precisa de um design muito refinado porque sua interface é muito básica. No entanto, podemos suavizar as arestas com um toque de estilo. 🎨✨

Primeiro, estilize o corpo para definir o design geral:

corpo {
    margem: 0;
    preenchimento: 0;
    mostrar: grade;
    altura mínima: 100vh;
    linhas de modelo de grade: conteúdo mínimo 1fr;
}

Este CSS utiliza a disposição em grade para posicionar as contagens de palavras e caracteres em uma linha estreita sobre o textarea. A propriedade grid-template-rows especifica que a linha de contagem deve ser o mais curta possível (min-content) e o textarea deve preencher o espaço restante (1fr).

A linha do contador tem um estilo básico para diferenciá-la do restante do texto, principalmente pelo seu fundo:

Contador # {
    família de fontes: sem serifa;
    cor de fundo: #f7f7f7;
    alinhamento de texto: centro;
    largura: 100%;
    preenchimento: 0.5em 0;
}

Por fim, a textarea é estilizada para exibir texto legível com espaço suficiente para respirar. A linha que separa as contagens do texto é, na verdade, a borda superior desta área de texto.

área de texto {
    largura: 100%;
    altura: 100%;
    tamanho da fonte: 16pt;
    preenchimento: 1em;
    dimensionamento de caixa: caixa de borda;
    contorno: 0;
    fronteira: nenhum;
    topo da borda: 1px sólido #999;
}

O aplicativo de anotações com estilos personalizados exibe a barra de contagem na parte superior com uma área de texto em tamanho real abaixo.

Adicionando funcionalidade com JavaScript

Com a estrutura e o estilo definidos, você está pronto para adicionar funcionalidade: o código que faz esse aplicativo simples realmente fazer alguma coisa. 🛠️

Antes de começar a escrever até mesmo o código mais simples, é uma boa ideia entender o que você quer que ele faça. Neste caso, há apenas alguns requisitos gerais:

Salve o texto inserido e recarregue-o quando necessário.
Atualize a contagem de caracteres e palavras para fornecer estatísticas em tempo real. 📊

Ambos os requisitos envolvem a atualização de elementos no documento. Então o script começa obtendo referências a esses nós usando o método getElementById:

constante palavras = documento.obterElementoPorId("palavras");
constante caracteres = documento.obterElementoPorId("caracteres");
constante área de texto = documento.obterElementoPorId("texto");

Observe que palavras, caracteres e texto são os IDs de seus respectivos elementos no documento, atribuídos no arquivo HTML com o atributo id.

Em seguida, precisamos que o aplicativo reaja quando o texto for alterado:

textarea.addEventListener("entrada", função(ev) { localStorage.setItem("texto", ev.target.value); update_counts(ev.target.value); });

Um ouvinte de eventos é uma função que o JavaScript executará automaticamente quando um determinado evento ocorrer. Neste caso, anexamos um ouvinte ao nó textarea, que é executado quando o evento "input" ocorre. Ou seja, quando alguém interage com a textarea.

Em seguida, usamos a API de armazenamento da Web para salvar o conteúdo atual da textarea, que vem de ev.target.value. Nessa estrutura, ev é um objeto que representa o evento que disparou o ouvinte, ev.target é o nó que recebeu o evento e ev.target.value é o texto dessa textarea.

O método setItem usa dois parâmetros: um nome de chave para associar aos dados e os dados reais a serem armazenados.

Em seguida, chamamos update_counts(), passando o mesmo texto. Explicaremos esse recurso em breve.

Agora que estamos salvando o texto, você vai querer carregá-lo novamente quando o aplicativo for aberto ou recarregado. Podemos cuidar disso usando outro ouvinte:

janela.addEventListener("carregar", função(ev) {
    var texto = localStorage.getItem("texto"); textarea.value = texto; update_counts(texto); });

Este ouvinte manipula o evento de carregamento que ocorre no objeto de janela, uma representação de nível superior da janela do navegador. Quando a janela é carregada, uma chamada para getItem() retorna o valor de texto armazenado no armazenamento local. Este código então define o valor da textarea para o texto carregado e, como o listener acima, chama update_counts() com este texto.

O trabalho restante é feito na função update_counts() que se parece com isto:

função contagens_de_atualização(texto) { chars.innerHTML = texto.comprimento; palavras.innerHTML = texto.split(' ').comprimento; }

Diferentemente de uma textarea, o texto normal não tem uma propriedade value, então definimos a propriedade innerHTML. A propriedade length de uma string é uma propriedade simples somente leitura que nos fornece o número de caracteres.

text.split(' ') divide a string nos caracteres de espaço, retornando o resultado como uma matriz de strings. Assim como as strings, os arrays têm uma propriedade de comprimento que nos fornece o número de elementos em um array.

No entanto, se você testar esse código, poderá notar alguns erros:

Ele não contará corretamente uma palavra sozinha em uma linha, pois não há caracteres de espaço ao redor dela.
Sem nenhum texto, ele reportará uma única palavra devido ao funcionamento da divisão.

Para resolver o primeiro problema, você pode dividir em uma expressão regular (\s significa "um caractere em branco") em vez de um espaço. Para resolver o segundo, filtre as strings vazias do resultado:

    palavras.innerHTML = texto.split(/\s/).filtro(função(n) { retornar n != ''; }).comprimento;

Se você não entende completamente essa linha, verifique as páginas do MDN para dividir e filtro.

O aplicativo web com texto de exemplo, mostrando contagens precisas de caracteres e palavras.

Você pode criar muitos aplicativos web úteis com apenas alguns arquivos. Você também pode estender este aplicativo de notas simples para adicionar mais funcionalidades. Por exemplo, você pode usar o propriedade window.location para recuperar a URL atual e oferecer suporte a várias notas variando o nome que você passa para localStorage.setItem. 🗒️🌍