Crie um registrador de atividades pessoais: 6 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:34

Meu amigo de Londres, Paul, queria encontrar uma maneira de rastrear sua comida, atividade e localização em um único painel. Foi quando ele teve a ideia de criar um formulário web simples que enviaria dados para um painel. Ele colocaria o formulário da web e o painel em uma página da web e registraria suas atividades em trânsito. A partir daí, o registrador de atividades foi criado! O código neste tutorial é todo Paul, exceto por algumas pequenas mudanças na cor, personalização do painel e gíria (tradução britânica para americana feita por mim).

Para este projeto, vamos usar:

• CodePen
• Estado inicial
• Netlify

Nós criamos um rastreador de atividades pessoais, mas seguindo este tutorial e código, você pode transformá-lo em um formulário da web e rastreador para o que quiser! Vamos começar!

Etapa 1: CodePen

CodePen é um ambiente de desenvolvimento. Ele permite que você escreva seu código no navegador e veja os resultados à medida que avança. Temos código em HTML, CSS e JavaScript para criar um formulário da web com menus suspensos, caixas de texto e geolocalização. Você pode se inscrever gratuitamente com a única condição de que não pode tornar seu código privado, o que iremos abordar mais tarde.

Primeiro, inscreva-se no CodePen. Depois de fazer isso, você pode fazer o fork do meu projeto com todo o código já criado. Isso criará uma cópia do código em seu próprio painel. Você verá HTML à esquerda, CSS no centro e JavaScript à direita. Se você é um especialista em tudo isso, esqueça de ler o resto e faça as alterações que desejar! Se você for iniciante nesses idiomas, tenho algumas sugestões a seguir sobre alterações que você pode fazer facilmente.

HTML

Este pedaço de código é o formato de todos os menus suspensos e caixas. É aqui que você pode alterar o tipo de coisas que rastreia e lista nos menus suspensos. No menu suspenso Exercício, você pode alterar os tipos de atividade (atualmente Pesos, Corrida, Ioga e Cardio). Você pode adicionar algo à lista seguindo o formato ou adicionar mais opções. O mesmo vale para o tipo de carne, o tamanho e tipo do café e o tamanho da cerveja. Na caixa de texto Lixo você pode alterar as palavras do espaço reservado (atualmente chips, chocolate, etc.). O mesmo pode ser feito para Peso (lbs), Exercício (minutos) e Cerveja (abv%).

Você também pode usar este esboço e alterar completamente os títulos, opções suspensas e marcadores de posição para tornar este formulário da web qualquer tipo de rastreador que desejar.

CSS

Este trecho de código define a cor de fundo, o alinhamento do texto e o alinhamento da coluna. Se você quiser mudar o fundo de rosa nauseante para algo mais agradável, basta usar um seletor de cores online para encontrar o valor de cor certo. Você pode alinhar o texto ou as colunas à direita, à esquerda ou no centro.

JavaScript

Este código funciona com o botão de geolocalização e botão de envio. Não há muito aqui que eu recomendaria mudar.

Exportar

Assim que tiver tudo configurado de acordo com sua preferência, clique no botão exportar no canto inferior direito e selecione exportar como.zip. Isso fará o download do código em um arquivo zip e você o verá na pasta de downloads.

Etapa 2: estado inicial

O estado inicial nos permitirá criar um painel personalizado da atividade que rastreamos. Você pode se inscrever para um teste gratuito de 14 dias. Depois disso, é gratuito para alunos com um endereço de e-mail educacional ou US $ 9,99 por mês para o plano individual.

Depois de se inscrever ou se inscrever, vá para a prateleira do balde e crie um novo balde de fluxo de dados clicando no botão criar balde de fluxo (+ nuvem). Você pode editar o nome para o que quiser ou alterá-lo mais tarde, eu escolhi Rastreador de atividades pessoais. Se você marcar a caixa Tema claro, dará ao painel um fundo branco. Clique em Concluído e o seu intervalo de fluxo será criado.

Mais tarde, precisaremos de informações das configurações do intervalo para inserir no código HTML (API Endpoint e incorporação de iframe).

Etapa 3: Código do Visual Studio

Como estou usando a versão gratuita do CodePen, todo o meu código é público. Por esse motivo, não quero inserir meus endpoints de API e iframe no código, pois você precisa manter suas chaves de acesso de estado inicial privadas. O Visual Studio Code me permite editar meu código localmente a partir do arquivo zip que baixei do CodePen. Você pode baixar a versão mais recente gratuitamente em seu site.

Descompacte seus arquivos de código e abra essa pasta no Visual Studio Code. A partir daqui, você pode editar o código HTML. No início do arquivo, você verá “ENTER API ENDPOINTS HERE”. Você pode encontrar o endpoint da API acessando o bucket que você criou no estado inicial, clique em configurações e, na guia Dados, você verá o endpoint da API. Copie e cole no código HTML. Na parte inferior do código HTML, você verá "ENTER EMBED SHARE HERE". Mais uma vez, vá para o seu balde no estado inicial, vá para as configurações e a guia Compartilhamento. Clique na caixa Compartilhar publicamente e você verá Compartilhar por incorporação. Copie apenas o URL na caixa de compartilhamento incorporado (será semelhante a "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx"). Cole isso entre aspas. Salve o arquivo e estaremos prontos para criar nossa página.

Etapa 4: Netlify

Netlify é uma plataforma tudo-em-um que permite construir, implantar e gerenciar um projeto da web. Você pode se inscrever gratuitamente, então faça isso. Depois de se inscrever, na página principal, você verá uma caixa que diz: "Quer implantar um novo site sem se conectar ao Git? Arraste e solte sua pasta do site aqui." Portanto, arraste a pasta de arquivo CodePen atualizada para lá e solte-a. A partir daí, ele implantará seu código e criará um link para sua nova página da Web. Clique no link e você verá seu formulário da Web e painel.

Você precisa enviar alguns dados para que seus blocos apareçam. Portanto, preencha seu formulário da web e clique em enviar. Depois de fazer isso, vá para o painel de estado inicial. A partir daqui, podemos alterar os tipos de blocos, redimensionar os blocos, mover o layout, ajustar as cores dos dados para serem mais agradáveis aos olhos e adicionar algumas expressões em tempo real para mapear para emojis. Você tem duas opções para ajustar o seu painel ao tamanho incorporado: ajustar seus blocos para caber ou ajustar o tamanho incorporado no código.

Etapa 5: personalize seu painel

Gráficos de medidor

Usei dois tipos de medidores em meu painel: arco e líquido. Para alterar o tipo de bloco, clique com o botão direito do mouse no bloco e selecione Editar bloco. Isso abrirá o configurador de blocos. Para Beer Size, selecionei Gauge Chart como Tile type e Liquid como Gauge Style. Alterei o título, a cor da chave do sinal e os valores mínimo / máximo também. Para o ABV de peso e cerveja, usei o estilo de medida em arco.

Mapa para Emojis

Mapeei o tipo de exercício e o tipo de carne para emojis usando expressões em tempo real, portanto, dependendo de qual item eu selecionei na lista suspensa, um emoji específico apareceria. Você pode ver o código que usei nas fotos. Você pode adicionar emojis em um Mac digitando control + command + barra de espaço ou no Windows a partir deste site.

Enviar Emojis em Formulário da Web

Para coisas como lixo, eu gosto de enviar emojis direto para o meu painel. Eu copio e colo o emoji na caixa de texto do formulário da web e clico em enviar, em seguida, o emoji aparece no meu painel!

É preciso brincar muito para personalizar o painel perfeito e as opções são infinitas.

Imagem de fundo

Você pode adicionar uma imagem de plano de fundo ao seu painel para dar mais personalidade ou contexto aos dados.

Etapa 6: Conclusão

Embora Paul tenha construído isso como um rastreador de atividades, ele ofereceu outras idéias de como isso poderia ser usado com algumas pequenas alterações:

• Melhor Café / Cerveja / Restaurante na Cidade Rastreador
• Onde estão meus amigos ou filhos agora e o que eles estão fazendo? Tracker
• Cartão de pontuação interativo do golfe - Rastreador de pontuação e campos
• Paragliding Flight Logger - (Paul tem hobbies muito mais legais do que eu)

Agora você pode rastrear tudo e qualquer coisa. Este código fornece o shell para qualquer tipo de formulário da web que você deseja criar. Então brinque e seja criativo e me mostre o que você tem! E, obviamente, felicidades ao Paul por ajudar a criar isso!