Construya un registrador de actividad personal: 6 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:40

Mi amigo de Londres, Paul, quería encontrar una manera de rastrear su comida, actividad y ubicación en un solo tablero. Fue entonces cuando se le ocurrió la idea de crear un formulario web simple que enviaría datos a un tablero. Colocaba tanto el formulario web como el panel de control en una página web y registraba sus actividades sobre la marcha. ¡A partir de ahí se creó el registrador de actividad! El código en este tutorial es todo Paul, excepto por algunos cambios leves en el color, personalización del tablero y jerga (traducción del británico al estadounidense hecha por mí).

Para este proyecto vamos a utilizar:

• CodePen
• Estado inicial
• Netlify

Creamos un rastreador de actividad personal, pero siguiendo este tutorial y el código, puede convertirlo en un formulario web y un rastreador para lo que desee. ¡Empecemos!

Paso 1: CodePen

CodePen es un entorno de desarrollo. Le permite escribir su código en el navegador y ver los resultados sobre la marcha. Contamos con código en HTML, CSS y JavaScript para crear un formulario web con menús desplegables, cuadros de texto y geolocalización. Puede registrarse de forma gratuita con la única condición de que no puede hacer que su código sea privado, lo cual abordaremos más adelante.

Primero, regístrese en CodePen. Una vez que lo hagas, puedes bifurcar mi proyecto con todo el código ya creado. Esto creará una copia del código en su propio tablero. Verá HTML a la izquierda, CSS en el centro y JavaScript a la derecha. Si eres un experto en todo esto, ¡olvídate de leer el resto y haz los cambios que quieras! Si no está familiarizado con estos idiomas, a continuación tengo algunas sugerencias sobre los cambios que puede realizar fácilmente.

HTML

Este fragmento de código es el formato de todos los menús desplegables y cuadros. Es aquí donde puede cambiar el tipo de cosas que rastrea y las listas en los menús desplegables. En el menú desplegable Ejercicio, puede cambiar los tipos de actividad (actualmente Pesos, Correr, Yoga y Cardio). Puede agregar algo a la lista siguiendo el formato o agregar más opciones. Lo mismo ocurre con el tipo de carne, el tamaño y tipo de café y el tamaño de la cerveza. En el cuadro de texto Correo no deseado puede cambiar las palabras del marcador de posición (actualmente chips, chocolate, etc.). Lo mismo se puede hacer para Peso (libras), Ejercicio (minutos) y Cerveza (% abv).

También puede utilizar este esquema y cambiar por completo los títulos, las opciones desplegables y los marcadores de posición para que este formulario web sea el tipo de rastreador que desee.

CSS

Este fragmento de código establece el color de fondo, la alineación del texto y la alineación de la columna. Si desea cambiar el fondo de un rosa nauseabundo a algo más agradable, simplemente use un selector de color en línea para encontrar el valor de color correcto. Puede alinear el texto o las columnas a la derecha, a la izquierda o al centro.

JavaScript

Esta pieza de código funciona con el botón de geolocalización y el botón de envío. No hay mucho aquí que recomiendo cambiar.

Exportar

Una vez que tenga todo configurado a su gusto, haga clic en el botón exportar en la parte inferior derecha y seleccione exportar como.zip. Esto descargará el código en un archivo zip y lo verá en su carpeta de descargas.

Paso 2: estado inicial

El estado inicial nos permitirá crear un panel personalizado de la actividad que rastreamos. Puede registrarse para una prueba gratuita de 14 días. Después de eso, es gratis para los estudiantes con una dirección de correo electrónico de educación o $ 9.99 por mes para el plan individual.

Una vez que haya iniciado sesión o se haya registrado, vaya a la estantería de su depósito y cree un nuevo depósito de flujo de datos haciendo clic en el botón Crear depósito de flujo (+ nube). Puede editar el nombre a lo que quiera o cambiarlo más tarde, elegí Rastreador de actividad personal. Si marca la casilla Light Theme, le dará al tablero un fondo blanco. Haga clic en Listo y se creará su depósito de flujo.

Necesitaremos información de la configuración del depósito más adelante para ponerla en el código HTML (API Endpoint e iframe incrustado).

Paso 3: código de Visual Studio

Como estoy usando la versión gratuita de CodePen, todo mi código es público. Por esta razón, no quiero poner mis puntos finales de API e iframe incrustados en el código, ya que necesita mantener privadas sus claves de acceso de estado inicial. Visual Studio Code me permitirá editar mi código localmente desde el archivo zip que descargué de CodePen. Puede descargar la última versión de forma gratuita desde su sitio web.

Descomprima sus archivos de código y abra esa carpeta en Visual Studio Code. Desde aquí puede editar el código HTML. Hacia la parte superior del archivo verá "INTRODUZCA LOS PUNTOS FINALES DE LA API AQUÍ". Puede encontrar el punto final de la API yendo al depósito que creó en Estado inicial, haga clic en configuración y en la pestaña Datos verá el punto final de la API. Copie y pegue esto en el código HTML. En la parte inferior del código HTML verá "INTRODUZCA COMPARTIR AQUÍ". Vaya nuevamente a su depósito en Estado inicial, vaya a la configuración y a la pestaña Compartir. Haga clic en el cuadro Compartir públicamente y verá Compartir por incrustación. Copie solo la URL en el cuadro para compartir incrustado (se verá algo así como "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx"). Pégalo entre comillas. Guarde el archivo y estamos listos para crear nuestra página web.

Paso 4: Netlify

Netlify es una plataforma todo en uno que le permite crear, implementar y administrar un proyecto web. Puedes registrarte gratis, así que hazlo. Una vez que se haya registrado, en su página principal verá un cuadro que dice: "¿Desea implementar un nuevo sitio sin conectarse a Git? Arrastre y suelte su carpeta de sitio aquí". Así que arrastre su carpeta de archivos CodePen actualizada allí y suéltela. Desde allí, implementará su código y creará un enlace a su nueva página web. Haga clic en el enlace y verá su formulario web y su panel de control.

Debe enviar algunos datos para que aparezcan sus mosaicos. Así que complete su formulario web y presione enviar. Una vez que lo hagas, ve a tu panel de estado inicial. Desde aquí podemos cambiar los tipos de mosaicos, cambiar el tamaño de los mosaicos, mover el diseño, ajustar los colores de los datos para que sean más agradables a la vista y agregar algunas expresiones en tiempo real para asignar a emojis. Tiene dos opciones para hacer que su tablero se ajuste al tamaño de inserción: ajuste sus Tiles para que se ajusten o ajuste el tamaño de inserción en el código.

Paso 5: personalice su panel de control

Gráficos de calibre

Usé dos tipos de medidores en mi tablero: arco y líquido. Para cambiar el tipo de mosaico, haga clic con el botón derecho en el mosaico y seleccione Editar mosaico. Esto abrirá el configurador de mosaicos. Para el tamaño de la cerveza, seleccioné Tabla de calibres como tipo de mosaico y Líquido como estilo de calibre. También cambié el título, el color de la clave de señal y los valores mínimo / máximo. Para el Weight & Beer ABV utilicé el estilo de calibre de arco.

Mapa de emojis

Asigné el tipo de ejercicio y el tipo de carne a emojis usando Expresiones en tiempo real, por lo que, según el elemento que seleccioné de la lista desplegable, aparecería un emoji específico. Puedes ver el código que utilicé en las fotos. Puede agregar emojis en una Mac presionando control + comando + barra espaciadora o en Windows desde este sitio web.

Enviar emojis en formulario web

Para cosas como basura, me gusta enviar emojis directamente a mi tablero. Copio y pego el emoji en el cuadro de texto del formulario web y hago clic en enviar, ¡y el emoji aparece en mi panel de control!

Se necesita jugar mucho para personalizar el tablero perfecto y las opciones son infinitas.

Imagen de fondo

Puede agregar una imagen de fondo a su tablero para darle a los datos más personalidad o contexto.

Paso 6: Conclusión

Si bien Paul construyó esto como un rastreador de actividad, ofreció otras ideas de cómo podría usarse con algunos cambios menores:

• Mejor café / cerveza / restaurante en Town Tracker
• ¿Dónde están mis amigos o mis hijos ahora mismo y qué están haciendo? Rastreador
• Tarjeta de puntuación de golf interactiva: rastreador de puntuaciones y campos
• Parapente Flight Logger - (Paul tiene pasatiempos mucho más geniales que yo)

Ahora puedes rastrear cualquier cosa y todo. Este código proporciona el shell para cualquier tipo de formulario web que desee crear. ¡Así que juega y sé creativo y muéstrame lo que tienes! Y obviamente, ¡felicitaciones a Paul por ayudar a crear esto!