Hace algún tiempo creé una aplicación web como un ejercicio para aplicar para un trabajo. Decidí hacerla con Vue.js, Bootstrap y localStorage en conjunto.

Al final resultó en algo como lo de la imagen:

Aplicación de notas con localStorage, JavaScript, Bootstrap y Vue js

Aplicación de notas con localStorage, JavaScript, Bootstrap y Vue js

Es una simple aplicación de notas que puedes crear, eliminar, editar y listar. También se puede cambiar el color de todas las notas (fue un requisito, no cosa mía, así como el idioma).

Código fuente y demo

El código fuente está en mi GitHub y la demostración en mi página web de apps.

Explicación de la aplicación web

Ahora voy a explicar un poco sobre cómo funciona la aplicación.

Persistencia de datos con localStorage

Para guardar las notas utilicé localStorage, una API de los navegadores sobre la que ya he hablado anteriormente. Codifico y decodifico con JSON. Lo que guardo es:

  1. La nota
  2. Un Id
  3. La fecha y hora de creación de la nota

Recordemos que los objetos de tipo Date no son serializables; por eso es que mejor guardo el timestamp que es una variable numérica.

Al recuperar las notas del almacenamiento en el navegador, las ordeno de acuerdo al timestamp; de esa manera las más recientes (ya sea agregadas o editadas) se muestran al inicio.

Ya escribí un post sobre cómo ordenar arreglos en JavaScript.

Uso de Vue.js

Utilicé Vue.JS para dibujar las notas y ocultar o mostrar formularios; además de cambiar el color. Por ejemplo, cada nota tiene el color de fondo de acuerdo a una variable llamada color.

Esa variable está ligada a un input de tipo color, y también escucho sus cambios. Cuando el color cambia, guardo el color en localStorage para que a la próxima se ponga de ese color; es decir, aunque el usuario refresque el color persiste,

Gracias a la reactividad de Vue.js, al cambiar el input también cambia el color de todas las notas.

Finalmente también utilicé Vue.js para ocultar o mostrar distintos formularios; ya que hay un formulario que se muestra al agregar, y otro al editar, el cual se muestra únicamente cuando el usuario hace click en el botón de Editar.

Bootstrap 4

Para el diseño utilicé el framework CSS Bootstrap 4; no es mi favorito, ya que mi favorito es Bulma CSS, pero igual sé manejarlo.

Me gusta mucho que lo único que hay que hacer es incluir el estilo y definir algunas clases de los componentes. Las notas son mostradas como una columna que ocupa el ancho total, para ser mostradas como un rectángulo.

Todo está dentro de un div con clase container y a su vez las columnas están dentro de un div con la clase row.

Conclusión

Gracias a la combinación de frameworks y código JavaScript con CSS es muy fácil centrarse en la lógica de la aplicación, evitando preocupaciones por el diseño o el dibujo de los datos.

¿Encontraste lo que buscabas?

Si es así, suscríbete para que estés enterado de mis nuevos posts sobre programación e informática

Estoy interesado en trabajar contigo de manera remota para llevar tu idea a la realidad, formar parte de tu equipo de desarrolladores, ayudarte con tu tarea, dar asesorías y todo lo relacionado con tecnología y programación. Contáctame para más información
No te vayas sin seguirme en Twitter, Facebook y GitHub
Si tienes dudas déjalas en un comentario, pero asegúrate de seguirme antes como agradecimiento (no te cuesta nada y me ayudas mucho)

Si el contenido es de tu agrado, sígueme

parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB. Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron. Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scripts La plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C. Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Share via
A %d blogueros les gusta esto: