DEV Community: Miguel Manjarres

Introducing 'firebaseauth' Spring Boot Library

Miguel Manjarres — Sat, 03 Jun 2023 16:46:27 +0000

Introduction

How many times have you struggled with setting up security in your Spring Boot API? Well those days are over now that you can use the firebaseauth library to take care of that.

By following a simple set of steps you can have an API secured with Firebase in a matter of minutes! You won't have to deal with custom filters, exceptions or the Firebase SDK for that matter.

Why?

When I first started to develop APIs with Firebase I struggled on how to set it up within Spring Boot since the documentation available was a little obfuscted, with this library I hope to help anyone that may have the same problems that I had. The project's README file has all you need to do in order to have a working, secured Spring Boot API.

If you are interested I would gladly appreciate that you leave a star in the project's repo here:

DevTony101 / firebaseauth

Spring-Boot library to abstract API authentication with Firebase

Firebase Auth

If you need to protect your Spring Boot API with the help of Firebase quickly and stress-free then this is the library for you It will provide you with a simple yet powerful implementation to receive and decode a Firebase token and to put that information available in Spring's own security context.

Features

Quick and seamless security setup for your API
CORS configuration and 401 error validations are already taken care of
The information obtained from the decoded firebase token is put directly in the security context with a default role if one hast not been provided by the token (more of that later!)
You won't need to manually read your firebase configuration file

Usage

Getting started

Before starting you need to make…

View on GitHub

Thank you so much for reading! See you next time.

¡Gasteroids! 👾 + ☄️

Miguel Manjarres — Mon, 22 Nov 2021 05:10:16 +0000

Hi there! 👋🏼
This weekend I decided to take a break from coding... by coding a mini-game! Yeah I know that isn't exactly "taking a break", but it was actually pretty fun to make.

I originally wanted to make something similar to Galaga, but the work that would have required would have defeated the purpose of the whole activity, so I made asteroids as the "enemies" instead, hence the name of the game.

Here's the end result:

Both the code and the game itself are uploaded to GitHub so head over there if you want to take a look!

DevTony101 / gasteroids

A simple javascript game inspired by Galaga and Asteroids. Made using p5.js

Gasteroids 👾 + ☄️

Preamble

A mysterious horde of asteroids had been released upon Earth and unleashed terror among its inhabitants. You, an awarded space commander, had been chosen to protect Earth by destroying all the asteroids before they hit the planet!

Play here.

Game mechanics

Your misssion: Destroy as many asteroids as you can! If an asteroid goes past the bottom border of your screen you will lose a heart point! The number of heart points you start the game with are conditioned by the game's difficulty.
Moving: You can move your ship by moving the mouse along the x-axis.
Shooting: You can activate your laser gun by clicking on the screen or pressing the space bar. The number of "bullets" you can fire at a given time is conditioned by the game's difficulty.
Exiting the game: You can press the [ESC] key at…

View on GitHub

Comment down below what your final score was!
Can you beat mine of 6720? 😉

Improvements

The game was made using p5.js, and the code isn't too complex (I hope), so if you are a beginner who is looking for some fun project to work with or you just have some hours to spare, here's a list of improvements you could make to this game:

Make the spaceship explode when an asteroid hit it
Give the spaceship some special super-power based on the score
Give the spaceship an extra-live based on the score
Give the spaceship some powerup by exploding an "special item"
Add a bossfight (A big asteroid that requires a set number of hits maybe?)

You can clone the repo so you can add this features and, if you'd like your changes to be in the main game, you can make a pull request.

Thank you for reading! If you have comments and/or suggestions to make, please leave them down below.

See you next time 👋🏼

Vue Clean Celebrates Its First 10K Downloads

Miguel Manjarres — Mon, 15 Feb 2021 15:45:54 +0000

When I started developing with Vue I often found myself doing the same steps everytime I wanted to set up a new project. As developers we want to automate as much as possible to reduce errors, and so the idea for this plugin came up to my mind.

What if I build a script to delete all the unnecessary files and download the right dependencies to my project? That's nice, but what if there are other developers who are struggling with this same problem?

Immediately after thinking this I went to the Vue documentation about how to build a custom Vue CLI plugin, and deployed the first stable version of Vue Clean back in September, 2020.

Today, Vue Clean has 10K downloads on npm with an average of 2.2K downloads per month, and all I can say is ¡THANK YOU! 🙌🏼. And If you haven't download it yet, please give it a chance, I would love to hear your feedback. (Also don't forget to give it a star ⭐ while you are at it).

DevTony101 / vue-cli-plugin-clean

A plugin that helps you bootstrap your Vue application by doing some common configurations.

Vue CLI Plugin Clean

A Vue 2.x plugin that helps you bootstrap your application by performing some common configurations.

Features

General

The main goal of this plugin is to quickly set up a project by deleting some files and components created by the Vue CLI service. By default this plugin will:

Delete everything in the components folder
Delete everything in the views folder except the Home.vue file
Re-write the router/index.js file to only include the route to the Home.vue file
Re-write the App.vue file to remove all the boilerplate code

Support for base components

This an opt-in feature that you can enable when installing…

View on GitHub

While we are here I want to show two new features Vue Clean has:

Auto-export Vuex Modules: If you work with Vuex, you know the hassle of creating modules and importing them in the Vuex instance for every module you create. As per version v0.5.0 Vue Clean comes shipped with a script that auto-import all modules inside the vuex/ folder, so you can focus on what really matters, the code!
Props for the BaseButton component: If you have been working with the base button template, you'll be glad to know that now the component includes props for controlling the width and height of the button. This feature was introduced in version v0.5.1.

Thank you for reading this far! I'm excited to see what awesome projects you can do with the help of Vue Clean.

See you next time 👋🏼.

Introducing Vue Clean v0.4.1

Miguel Manjarres — Sat, 19 Dec 2020 22:00:53 +0000

A while ago I announced Vue Clean, a tool for Vue developers and today I'm happy to announce that version 0.4.1 is up and ready to use!

But, what is Vue Clean exactly?

About Vue Clean

When I started in Vue, I always had to do the same steps everytime I wanted to create a new project: delete the same components, install the same dependencies, write the same boilerplate code. And I thought to myself "there's got to be some better way to do this" and like every developer, I created my own solution: Vue Clean.

Vue Clean is a Vue CLI plugin that takes care of all the hassle of starting a new project:

It deletes all the components generated by the vue-cli
It deletes all the views generated by the vue-cli except the Home.vue file (for obvious reasons)
It deletes all the boilerplate code inside the App.vue file and replace it with the minimal to function

And that's not all! Vue Clean also helps you with one important part of the Vue development workflow: Base Components, if you want to know how, head to the GitHub repository page (down below).

The main goal of Vue Clean is to be the perfect tool for beginners in Vue and even to be a convenient tool for experts.

What's new in this version?

Drop support for Tailwind

In previous versions Vue Clean had an option to create the configuration files for Tailwind (that was another step I had to do in every project), but it turns out there's already a good, well-document plugin that does exactly that so, why reinvent the wheel? Vue Clean dropped support for Tailwind in version 0.2-alpha.

Introducing the `basec` command

basec is a vue-cli command created by Vue Clean when you install it. With it, you can create base components directly from the command line. Not only that but you can create them using templates for when you need to quickly prototype a view. The basec command was introduced in version 0.3.0.

Creating base components has never been so easy!

New and better documentation

The instructions in the README file now include examples of use with a better and more understandable structure.

Now go and give it a try!

DevTony101 / vue-cli-plugin-clean

A plugin that helps you bootstrap your Vue application by doing some common configurations.

Vue CLI Plugin Clean

A Vue 2.x plugin that helps you bootstrap your application by performing some common configurations.

Features

General

The main goal of this plugin is to quickly set up a project by deleting some files and components created by the Vue CLI service. By default this plugin will:

Delete everything in the components folder
Delete everything in the views folder except the Home.vue file
Re-write the router/index.js file to only include the route to the Home.vue file
Re-write the App.vue file to remove all the boilerplate code

Support for base components

This an opt-in feature that you can enable when installing…

View on GitHub

If you find Vue Clean useful please consider giving it a star ⭐ on GitHub! It's the best way to support and ensure future versions will be released.

P5.JS: Polar Mandalas

Miguel Manjarres — Tue, 08 Dec 2020 19:50:30 +0000

Hi there 👋! In this unplanned series about P5JS projects I had archived I now present to you: Polar Mandalas!

The code uses the concept of polar coordinates to make beautiful and colorful lines across your page. All the magic happens on the Body class, it has the following attributes:

radius: It's the distance between a single body and the center of the page (by convention, the cartesian plane for the canvas has its origin in the top-left corner of the page, here I've translated to the center to reduce the complexity of calculations). The variation of the radius it's what makes the drawings. Its initial value it's given as an argument for the constructor.
velocity: The velocity at which the body moves.
angle: It's the angle at which the body is respect to the x-axis. It increments proportional to the velocity, that is, the more velocity the body has, the more curved the lines will be. The angle grows indefinitely and its initial value it's given as an argument for the constructor.
alpha, beta: Constants values defined randomly at construction. It defines the ratio at which the radius varies according to the following function: alpha + cos(beta * angle).
clr: The color of the body and therefore the color of the trace (the line it draws).
history: An array of previous points that the code uses to draw the trace itself.

You can interact with the code right here (press enter to create a new set of bodies):

This project was based on a coding challenge made by Daniel Shiffman about Mathematical Rose Patterns.

I hope you liked it! If you have questions or suggestions to make please leave them down below. Thanks 👏!

P5.JS: Interactive Clock

Miguel Manjarres — Sat, 28 Nov 2020 21:08:24 +0000

Hi there 👋! In this post I want to share an old project of mine that I have archived on GitHub and decided to re-do it again: Fleeing Points Clock!

An interactive clock made of little squares that are actually steering vehicles, that is, entities that experiment a certain desire to go to a certain place, and as a consequence to that desire the vehicle experiments a force that drags it towards its target. It's a very interesting concept that I learned while watching Daniel Shiffman's Coding Challenge: Steering Behaviors.

This is how the clock looks like, it was built using P5.js:

As you can see, passing your mouse over the numbers produces an opposite force that repels the vehicles but, as soon as the cursor leaves, the squares rearrange themselves.

You can also change the colors of the squares by pressing "ENTER":

If you want to try it yourself, you can visit the page here.

Thanks for reading! And if you are curious about the code, please check out the repo (and leave a star if you wish):

DevTony101 / fleeing-points-clock

A clock made of interactive, colored pieces that move when you hover with your mouse. Made using p5.js.

Hacktoberfest Completion

Miguel Manjarres — Fri, 23 Oct 2020 19:24:22 +0000

Today I got an email saying I completed this year Hacktoberfest 🎉!
In this little blog post I'm gonna talk about my experience.

About My Experience

Even though I'm not completely new to GitHub and that I've already contributed to a few repositories before this event, this was my first Hacktoberst and so I feeled a rush whenever I entered to GitHub to search for an active repository to where I could solve an issue.

It felt nice to compete in the event not only because of the prize but because the feeling of camaraderie, collaborating with other developers and mantainers alike, working towards a common goal.

Also through this event I finally achieved the confidence to make a project of mine open source! I opened two issues and not more than an hour later there were two people interested in solving them! The day after that I did my first issue review.

What I Learned From Hacktoberfest

I think I can summarize my learning experience in these two points:

To be patient. I feeled very stressed out because I couldn't find a project to contribute to, unfortunately I didn't had enough time to spend on coding so I had to set my goals a little lower, that is, contributions that didn't requiered a lot of work, so being patient was key to find repositories that met my expectations.
To be creative. There are tons of other developers who are eager to achieve their 4 pull request too! Some of them way more experienced than I, so if I wanted to make my contribution stand out, I had to be creative! And even so I couldn't keep up with all the awesome stuff other people did.

In general I'm very happy with how things turned out and I hope next year I could participate in this incredible event once again.

Thanks for reading 👏!

Cleaning Your Vue Project With Vue-Clean

Miguel Manjarres — Thu, 17 Sep 2020 16:01:50 +0000

How many times have you created a new Vue project using vue-cli and then sighed when it's done because you have to delete the pre-built files and components?
How many times you had to do the same configuration for base components in all the Vue projects you created?
How many times you had to manually create configuration files for code formatters like prettier or frameworks like tailwind?

Wouldn't be nice if you could do all this with just one command? If the answer is yes, then this vue-cli plugin is for you!

Introducing `vue-cli-plugin-clean`

Just like you, whenever I had to create a new Vue project, I had to repeat the same steps to get the right setup, and that included:

Installing the same base dependencies
Deleting pre-built Vue components and views
Creating and modifying configuration files (.eslintrc.js, .prettierrc.js, etc)
Configuring base components

Soon enough I became tired and decided to automate this process, and that's when I came up with the idea for this plugin!

Features

So what does exactly this plugin does for you?

The primary goal of this plugin is to clean your project, that is, to delete all components and views except Home.vue and App.vue
Even though it does not delete them, the plugin rewrites Home.vue and App.vue to have the minimum amount of functional code

This happens by default but there are a set of functions that are optional (and honestly recommended):

Base Components: If you are building a complete front-end app, chances are you are using at least one component across all your project and is a good practice to group those components under a common umbrella called base components. These base components are supposed to be global (by definition), but in order to make Vue recognize them as such, you need to make some changes, but no need to worry, vue-cli-plugin-clean does it for you!
Prettier: If you chose Prettier as your code formatter, this plugin will also create a configuration file for it with two useful pre-configured options. I included Prettier because it's the tool I used the most, but I know it's not the only one and I wish that, in future versions, this plugin offers support to all those tools.
Tailwind: If for any reason, you want to use Tailwind as your CSS Framework, you may know that you need to install the necessary dependencies and create some configuration files, and while yes there are already some tools that do this thing, this plugin offers its own solution so you don't have to install any additional tools. I included Tailwind because it's the framework I used the most, but it's not the only one (there's Bulma, for example), so I hope that, in future versions, this plugin offers support to all of them.

If you need more information, head up to the plugin's repository here:

DevTony101 / vue-cli-plugin-clean

A plugin that helps you bootstrap your Vue application by doing some common configurations.

Vue CLI Plugin Clean

A Vue 2.x plugin that helps you bootstrap your application by performing some common configurations.

Features

General

The main goal of this plugin is to quickly set up a project by deleting some files and components created by the Vue CLI service. By default this plugin will:

Delete everything in the components folder
Delete everything in the views folder except the Home.vue file
Re-write the router/index.js file to only include the route to the Home.vue file
Re-write the App.vue file to remove all the boilerplate code

Support for base components

This an opt-in feature that you can enable when installing…

View on GitHub

About the development

This plugin's still in development (hence, there's no version 1.0.0 just yet), but a functional version is already released (version 0.1.10) and it's uploaded on npm! (this is also my first npm package 🎉) I would love some feedback about the functionality and usefulness of the plugin, I really think this could help some beginners and even some seniors in Vue!

Thank you so much for reading! I hope for your feedback! See you next time 👋.

JavaScript: Building a To-Do App (Part 4: Final)

Miguel Manjarres — Mon, 03 Aug 2020 22:16:00 +0000

📖 Introduction

Welcome to the last part of the "Introduction to the IndexedDB API" series. In the last post, we added an important feature to our application, the ability to see the tasks on the page; we also did a little bit of refactoring as we needed to perform some actions for when the connection to the database is established. In this last part, we are going to finish our app by adding the ability to delete any given task.

Goals

Create a delete method on the Database class that deletes a task given its id
Complete the removeTask function on the index.js file so that effectively delete a task when needed

Initial Setup

If you want to code along (which is highly recommended), then go to the following GitHub repository:

DevTony101 / js-todo-app-indexed_db

This is a to-do web application that uses the IndexedDB API.

Once there, go to the README.md file and search for the link labeled Starting Code for the third (last) part. It will redirect you to a commit tagged as starting-code-part-three that contains all we have done so far plus the new delete function on the Database class.

🛠 Completing the `delete` Function

This will be pretty straight forward, the process is exactly the same as the one we did back in part two:

Create a transaction object from the database
Get a reference to the objectStore
Create a request based on the action you need to perform, which in this case, is to delete something

In code, it would look something like this:

delete(id) {
  // Skipping validation of the id ...
  // Step 1
  const transaction = this.indexedDB.transaction([this.name], "readwrite");
  // Step 2
  const objectStore = transaction.objectStore(this.name);
  // Step 3
  const request = objectStore.delete(id);
}

The key difference here, in contrast to the persist function, is that we are only going to take care of the complete event emitted by the transaction because, if the task was successfully deleted, we would want to remove it from the DOM but, we will get to that later.

Now we have to ask ourselves an important question, how we should handle see oncomplete callback? There are two ways:

We could return the transaction object and handle it in the index.js file
We could pass a function as a parameter to the delete function

Both are equally valid but, just because it looks fancier, let's choose to do the second one, in which case, we need to change the signature of the delete function so that accepts a second named argument. The rest is pretty much the same as in the persist function:

delete(id, success) {
  // ...
  if (typeof success === "function") transaction.oncomplete = success;
}

That's all! Our delete function is complete, a piece of cake 🍰, right?

👨‍🔧 Assigning an `ID` to our Tasks

In order to use the delete function, we need to have the id of the task we want to delete but, because we don't know in advance which task the user is going to remove, the id needs to be dynamically retrieved.

A great way to accomplish this is by storing the id of the task in a data-* attribute inside the message component. To do it, we just need to use the setAttribute() method on the message object in the showTasks function, like this:

function showTasks() {
  // ...
  const request = database.getOpenCursor();
  request.onsuccess = event => {
    const cursor = event.target.result;
    if (cursor) {
      // The 'id' is the key, it's stored in the value property of the cursor object alongside the other fields
      const {key, title, description} = cursor.value;
      const message = document.createElement("article");
      message.classList.add("message", "is-primary");
      // Here we store the key in a data attribute called data-id
      message.setAttribute("data-id", key);
      // ...
      cursor.continue();
    } else {
      // ...
    }
  }
}

That's it! Now we are all set to start deleting stuff.

👨‍💻 Using the `delete` Function

On the index.js file, let's create a new function called removeTask with the following signature:

function removeTask(event) {
  // The event will be the message component representing the task
}

This function will be called from within a button element that will be placed inside the header of the message component (according to Bulma´s official documentation)¹.

Inside there, let's first retrieve the article block itself from the event object (remember that the event only carries the node that fired up the action, in this case, the button element) and then, get the actual id from the data-id attribute. Next, pass the id to the delete function we created earlier, like this:

function removeTask(event) {
  const header = event.target.parentElement;
  const task = header.parentElement;
  const id = Number(task.getAttribute("data-id"));
  database.delete(id, () => {
    // Success callback
  });
}

Now all that's left is to figure out what to put inside the callback function.

If the task is successfully deleted, then we must remove it from the DOM, else the user is going to be very confused. On top of that, if there was only one task, we need to let the user know that there are no more tasks left, this is exactly what we did in the showTasks function for when the cursor object is not defined.

So, putting it together:

Remove the task from the DOM, that is, remove the message component (the article block) from the tasksContainer div
If there are no more tasks inside the div i.e. the are no more tasks left to show, we need to add a message to let the user know

In code, we would have something like this:

function removeTask(event) {
  // ...
  database.delete(id, () => {
    // Step 1
    tasksContainer.removeChild(task);

    // Step 2
    if (!tasksContainer.firstChild) {
      const text = document.createElement("p");
      text.textContent = "There are no tasks to be shown.";
      tasksContainer.appendChild(text);
    }

    // Optional Step 3: Console log for debugging purposes
    console.log(`Task with id ${id} deleted successfully.`);
  });
}

Last but not least, let's put the actual delete button element inside the message component in the showTasks function, like this:

function showTasks() {
  // ...
  const request = database.getOpenCursor();
  request.onsuccess = event => {
    const cursor = event.target.result;
    if (cursor) {
      const {key, title, description} = cursor.value;
      const message = document.createElement("article");
      // ...
      // Creating the delete button element
      const deleteButton = document.createElement("button");
      deleteButton.classList.add("delete");
      deleteButton.setAttribute("aria-label", "delete");
      deleteButton.onclick = removeTask;

      // Adding it to the div message header
      message.firstChild.nextSibling.appendChild(deleteButton);
      tasksContainer.appendChild(message);
      cursor.continue();
    } else {
      // ..
    }
  }
}

And... we are done 👏! Now let's test it out, start your local development server and go the index page of our application. If there are no tasks there, create some and when they render on the page you will see that a little X button appears on top on the task description, like so:

If everything went right, when you click on the X button, the task should disappear. We can confirm this by looking up in the console:

Awesome 🎉! Everything works as expected.

🕵️‍♂️ Let's Recap

Whew! What a journey, we sure learned a lot since part one, so let's do a quick review of all:

We learned what IndexedDB API is and how we can create our own database in the browser
We learned how to perform CRUD operations using transactions and request
We learned how we can create a Database class with custom methods that let us seamlessly use the ones exposed by the API, effectively enclosing the business logic we could need
And finally, we learned how we can use the Database class in a real-world project by creating our own to-do application.

The complete code of the project can be found at GitHub on the master branch. The specific changes we made for this part are under the commit tagged as finished-code-part-three. I invite you to fork the project so you can experiment with it.

Also, the project is up and running on Netlify at the following URL:

https://indexed-todo-app.netlify.app/

Thank you so much for reading, I hope all of this is useful to you if you have comments, questions or suggestions please leave them down below.

See you next time 👋.

1: This is relevant because the project uses Bulma as a CSS framework but it does not mean you can't call the function in another way. What's important is that the element that calls the function is inside the article block, otherwise, you won't have access to its id

JavaScript: Building a To-Do App (Part 3)

Miguel Manjarres — Fri, 24 Jul 2020 18:54:03 +0000

📖 Introduction

Welcome to part three of the "Introduction to the IndexedDB API" series. In the last post, we started the construction of our application by creating a Database class that contains the instance of the indexed database and we also managed to save some data by creating a persist method. In this part, we are going to focus on how to retrieve the data stored in the database.

Goals

Create a method on the Database class called getOpenCursor that returns the cursor from the objectStore (if you don't know what a cursor is, or need a little refresher, refer back to part one 😉)
Complete the showTasks function on the index.js file (present on the starting code) so that it renders out the tasks in the page

Initial Setup

If you want to code along (which is highly recommended), then go to the following GitHub repository:

DevTony101 / js-todo-app-indexed_db

This is a to-do web application that uses the IndexedDB API.

Once there, go to the README.md file and search for the link labeled Starting Code for the second part. It will redirect you to a commit tagged as starting-code-part-two that contains all we have done so far plus the new showTasks function.

Creating the `getOpenCursor` Function 🛠

Once we have downloaded the source code, let's go to the Database class and create a method called getOpenCursor, inside, similar to the persist function, we are going to get an instance of the object store and use the openCursor() method to send a request for the cursor to open. The key difference here, in contrast to the persist function, is that we are going to return the request so it becomes easier to handle the onsuccess callback.

export default class Database {
  constructor(name, version, fields) {
    // ...
  }

  persist(task, success) {
    // ...
  }

  getOpenCursor() {
    const transaction = this.indexedDB.transaction([this.name], "readonly");
    const objectStore = transaction.objectStore(this.name);
    return objectStore.openCursor();
  }
}

This onsuccess callback is special because it will be emitted for every¹ record on the table but only if we explicitly tell it to do so by calling the continue() method.
The resultant code in the showTasks function would look something like this:

function showTasks() {
  // Leave the div empty
  while (tasksContainer.firstChild) tasksContainer.removeChild(tasksContainer.firstChild);
  const request = database.getOpenCursor();
  request.onsuccess = event => {
    const cursor = event.target.result;
    if (cursor) {
      // Advance to the next record
      cursor.continue();
    } else {
      // There is no data or we have come to the end of the table
    }
  }
}

Remember, if the cursor is not undefined then the data exist and is stored within the value property of the cursor object, that means we can recover the information as follows:

function showTasks() {
  // ...
  request.onsuccess = event => {
    const cursor = event.target.result;
    if (cursor) {
      const {title, description} = cursor.value;
      // Advance to the next record
      cursor.continue();
    } else {
      // There is no data or we have come to the end of the table
    }
  }
}

Great 👏! To display this information on the page, we'll be using Bulma's message component.

First, let's create an article element with the class of message and is-primary
Using the InnerHTML property, we are going to create two divs, one for the title and one for the description
Append the new task to the taskContainer div
Repeat

Feel free to visit Bulma's official documentation here if you want to know a little more.

The resulting code would look something like this:

function showTasks() {
  // ...
  const request = database.getOpenCursor();
  request.onsuccess = event => {
    const cursor = event.target.result;
    if (cursor) {
      const {title, description} = cursor.value;
      // Step 1
      const message = document.createElement("article");
      message.classList.add("message", "is-primary");
      // Step 2
      message.innerHTML = `
        <div class="message-header">
          <p>${title}</p>
        </div>
        <div class="message-body">
          <p>${description}</p>
        </div>
      `;
       // Step 3
       tasksContainer.appendChild(message);
       // Step 4
       cursor.continue();
    } else {
      // There is no data or we have come to the end of the table
    }
  }
}

Good 👏! Now, what should happen if the cursor is undefined? We need to consider two edge cases:

There were at least one record saved and now the cursor has reached the end of the table
The table was empty

An easy way to know if the table is indeed empty is by checking if the taskContainer div is empty (that is, it has no children), in that case, we can simply create a paragraph element with the text "There are no tasks to be shown." to let the user know that there are no tasks created yet, like this:

function showTasks() {
  // ...
  const request = database.getOpenCursor();
  request.onsuccess = event => {
    const cursor = event.target.result;
    if (cursor) {
      // ...
    } else {
      if (!tasksContainer.firstChild) {
        const text = document.createElement("p");
        text.textContent = "There are no tasks to be shown.";
        tasksContainer.appendChild(text);
      }
    }
  }
}

And that's it! Our showTasks function is complete. Now we have to figure out where we should call it.

Using the `showTasks` Function 👨‍💻

Remember the oncomplete event of the transaction object in the saveTasks function? We said that if the event is emitted, we could assure the task was created, what better place to call our showTasks function than within this callback? That way we can update the list of created tasks on the page every time a new one is saved.

function saveTask(event) {
  // ...
  const transaction = database.persist(task, () => form.reset());
  transaction.oncomplete = () => {
    console.log("Task added successfully!");
    showTasks();
  }
}

Now let's test it out! Start your local development server, go to the index page of the application, and create a new task:

Immediately after you press on the Create button, you will see a new panel appears at the bottom, effectively replacing the "There are no tasks to be shown" message.

Awesome 🎉! Everything works as expected! But... what's this? When you reload the page, the panel disappears and the text saying that there are no tasks returns once again but, we know this is not true, in fact, if we check the Application tab in the Chrome DevTools we will see our task there:

So what's wrong? Well, nothing. The problem is that we are only calling the showTasks function when we add a new task but we also have to call it when the page is loaded because we don't know if the user has already created some [tasks]. We could just call the function inside the listener of the DOMContentLoaded event but is better to play it safe and call the function inside the onsuccess event emitted when the connection with the database is established.

We could pass a callback function to the constructor but, is better if we do a little refactoring here because the constructor is not supposed to take care of that. Let's create a new function called init(), inside let's move out the code where we handle the onsuccess and the onupgradeneeded events. Of course, the function will receive two arguments, the fields of the table and the callback function.

export default class Database {
  constructor(name, version) {
    this.name = name;
    this.version = version;
    this.indexedDB = {};
    this.database = window.indexedDB.open(name, version);
  }

  init(fields, successCallback) {
    this.database.onsuccess = () => {
      console.log(`Database ${this.name}: created successfully`);
      this.indexedDB = this.database.result;
      if (typeof successCallback === "function") successCallback();
    }

    this.database.onupgradeneeded = event => {
      const instance = event.target.result;
      const objectStore = instance.createObjectStore(this.name, {
        keyPath: "key",
        autoIncrement: true,
      });

      if (typeof fields === "string") fields = fields.split(",").map(s => s.trim());
      for (let field of fields) objectStore.createIndex(field, field);
    }
  }

  persist(task, success) {
    // ...
  }

  getOpenCursor() {
   // ...
  }
}

Now in the index.js file, we create the instance of the Database class and call the init() method right after, like this:

document.addEventListener("DOMContentLoaded", () => {
  const database = new Database("DBTasks", 1);
  database.init("title, description", () => showTasks());
  // ...

  function saveTask(event) {
    // ...
  }

  function showTasks() {
    // ...
  }
});

And voilá! No matter how many times we refresh the page, if there any tasks saved in the database, the app will render them right away.

Let's Recap 🕵️‍♂️

In this third part, we:

Learned how to use the IDBCursorWithValue interface
Learned how to properly retrieve the information saved in the database through the cursor object
Learned how to render the data on the page
Organized the responsibilities in the Database class by creating a new function init()

Remember, the complete code for this section is available in the project's repository under the tag finished-code-part-two.

That's all 👏! In the next part, we will finish the application by adding the ability to effectively delete any given task from the database.

Thank you so much for reading! If you have questions or suggestions please leave them down below. See you next time 👋.

JavaScript: Building a To-Do App (Part 2)

Miguel Manjarres — Sun, 19 Jul 2020 21:14:46 +0000

Introduction

Welcome to part two of the Introduction to the IndexedDB API series, last time we learned about the basics of the API and how we could perform some of the most common operations. In this part, we will begin the construction of our To-Do web application by applying that knowledge. Specifically, we will:

Get familiar with the boilerplate code of the application
Create a class that encapsulates the IndexedDB instance
Set the logic to create and save a new task

Getting Started

To start, make sure you have a recent version of NPM, then go to the following GitHub repo here and, in the README, find the Want to Code Along? section and download the code tagged as starting code for part one. The project uses webpack and webpack-dev-server to create a local development server as well as Bulma (a modern CSS framework) for the front-end. Once you got it, execute the following commands:

npm install
npm run start

The first one will download all the dependencies, the second one will run the start script defined in the package.json file and start the local server. If everything goes well, the server will start listening in the port 8080 at the following URL:

http://localhost:8080/dist/

Project Structure

Letting the node_modules/ folder aside, the project has the following file structure:

│   .babelrc
│   .gitignore
│   package-lock.json
│   package.json
│   webpack.config.js
│
├───dist
│   │   index.html
│   │   main.js
│   │
│   └───assets
│       └───css
│               index.css
│
└───src
    │   index.js
    │
    └───database
            database.js

The dist/ folder contains the public files. We won't necessary edit these files but I encourage you to personalize the index.html file and create your layout
The src/ folder contains the javascript code, including the index.js file (the entry point of our application) and the database.js file that will export the Database class
The rest of the files are configuration files and should not be changed

(Note: It is not necessary to run the start script every time we make a change as the webpack-dev-server dependency will automatically compile the code and reload the page.)

The index.js file already has a saveTask function that will be called when a submit event on the form is fired.

Creating the Database

As said earlier, the database.js file contains a class. This class will encapsulate the IndexedDB instance and manage the methods for the CRUD operations. Let's start by creating the instance, remember that we need two things, the name and the version of the database, we can easily pass these information as variables to the constructor, like this:

export default class Database {
  constructor(name, version) {
    this.name = name;
    this.version = version;
    this.indexedDB = {};
    this.database = window.indexedDB.open(name, version);
    this.database.onsuccess = () => {
      console.log(`Database ${name}: created successfully`);
      this.indexedDB = this.database.result;
    }
  }
}

Now, back in the index.js file, let's create a new instance of our Database class by passing in the name and version we want, like this:

Now if we run the start script once again (remember, it's not necessary if it was already running) we will see the message Database DBTasks: created successfully but, if we really want to make sure our database was created, we can go to the Application tab on the Chrome DevTools and check under Storage > IndexedDB:

As you can see, the database indeed exists but is empty.

Creating the `persist` Function

Before we can attempt to save something remember, we first need to create the schema. We could create the fields directly in the constructor, but we want the Database class to be capable of building different databases with different fields. For that purpose, let's pass another variable to the constructor called fields that can be either a string or an array and create the model from it, like this:

export default class Database {
  constructor(name, version, fields) {
    // ...
    this.database.onupgradeneeded = event => {
      const instance = event.target.result;
      const objectStore = instance.createObjectStore(name, {
        keyPath: "key",
        autoIncrement: true,
      });

      if (typeof fields === "string") fields = fields.split(",").map(s => s.trim());
      for (let field of fields) objectStore.createIndex(field, field);
    }
  }
}

Now we can easily pass the various fields we could need for our database. The following code snippets are equivalent:

const database = new Database("DBTasks", 1, "title, description");

const database = new Database("DBTasks", 1, ["title", "description"]);

Now when the database is created, it will have an object store attached to it:

Bravo 🎉🎉 !! Our database is up and running, now the only thing left to do is to create a new class method that receives an object (a task) and save it. Let's go to our Database class and create a method called persist, next let's create an IDBTransaction object from the instance of the database and then get access to the object store, like this:

export default class Database {
  constructor(name, version, fields) {
   // ...
  }

  persist(task) {
    if (typeof task === "object") {
      const transaction = this.indexedDB.transaction([this.name], "readwrite");
      const objectStore = transaction.objectStore(this.name);
    } else {
      throw new Error("An object was expected.");
    }
  }
}

Now, in the previous part, we also talked about a request that we have to make through the objectStore object, that's because, to save a new record, we need to call the add() method on the objectStore object, said method will return an IDBRequest object with information about the status of our petition. This is useful because we can then pass a callback function to execute when the request is complete. The whole process would look something like this:

export default class Database {
  constructor(name, version, fields) {
   // ...
  }

  persist(task, success) {
    if (typeof task === "object") {
      const transaction = this.indexedDB.transaction([this.name], "readwrite");
      const objectStore = transaction.objectStore(this.name);
      const request = objectStore.add(task);
      if (typeof success === "function") request.onsuccess = success;
    } else {
      throw new Error("An object was expected.");
    }
  }
}

Great 👏! We are almost done as we still need to supply a callback for when the transaction is complete, we could pass more callbacks to the persist function, but it is more practical if we just return the transaction object, that way we can handle it in the index.js file.

Using the `persist` Function

Before moving out to the index.js file, let's think for a moment what kind of operations we could execute as callbacks for the request and the transaction.

If a request is fulfilled, it does not necessarily mean that everything went fine, it just tells us that our request was accepted, therefore, we can not assure that the object was successfully saved but, we sure can say that the data recollected from the form were stored in the task object and if that's the case, we can then reset the form.

On the other hand, if a transaction is completed successfully, then there were no errors during the process that was requested and if that's the case, then we can be sure the object was successfully saved.

Now that we have that figured out, we can code it! The implementation would look something like this:

function saveTask(event) {
    // ...
  const task = {title, description};
  const transaction = database.persist(task, () => form.reset());
  transaction.oncomplete = () => {
    console.log("Task added successfully!");
  }
}

Now to the fun part, let's test it! Go to your browser and create a task you would like to do, in my case, I want to finish all my series on Netflix.

Press on the Create button and you will see that the form resets itself (as intended), and after a few seconds (or less) you should see the following message on your console:

And if we check again the Application tab, we now will see our newly saved data:

Excellent! The task has been successfully saved.

Let's Recap

In this second part, we:

Created the Database class to encapsulate the IndexedDB instance
Learned how we can create fields dynamically in the constructor of the Database class
Learned how we can see the status of our database by checking in the Application tab on the Chrome DevTools
Learned how we can save new objects by using the add() method on the objectStore
Learned what to expect when the request emits the onsuccess event
Learned what to expect when the transaction emits the oncomplete event

The complete code is available in the project repo tagged as finished code for part one, go check it out.

DevTony101 / js-todo-app-indexed_db

This is a to-do web application that uses the IndexedDB API.

That's all! In the next part, we will begin with the implementation of a function that allows us to retrieve the objects stored in the database and then display them on the page.

Thank you so much for reading! If you have questions or suggestions please leave them down below. See you next time 👋.

JavaScript: Building a To-Do App (Part 1)

Miguel Manjarres — Thu, 16 Jul 2020 20:29:49 +0000

If you have already developed dynamic web applications, you are probably familiar with the concepts of window.localStorage and window.sessionStorage, they are great tools that let us save information directly into the browser, but there is a problem, you can only save data in the form of a string, sure, there are some workarounds to this, like using the JSON.stringify() method but, wouldn't it be nice if we could just save the data as an object and retrieve it the same way?

Introduction

This is part one of a four part series where we will build a (yet another) To-Do web application using the IndexedDB API. In this first part however we fill focus on the theory. Specifically we will:

Have a brief introduction about what the IndexedDB API is
See how can we get an instance of a newly created database
Learn about the most relevant objects and functions to perform the CRUD operations

What is the IndexedDB API?

IndexedDB is a low level API that let us save structured-like data, like files and binary-large-objects (blobs). It provides us with methods for both synchronous and asynchronous operations, the latter being the one that web browsers implement.

In order create a brand new database we need to use the open(name, version) method on the indexedDB property of the window object. The open() method receives two parameters:

name: The name of the database
version: The version to open the database with. It defaults to 1

This returns a IDBOpenDBRequest object on which we can supply a callback for when the request is successfully resolved, and if that's the case, we can store the reference to our database.

The whole process looks something like this:

let indexedDB, dbName, dbVersion;
const dbRequest = window.indexedDB.open(dbName, dbVersion);
dbRequest.onsuccess = () => {
  indexedDB = dbRequest.result;
  console.log("Database created successfully!");
}
// You can also supply a callback for when (and if) something goes wrong
dbRequest.onerror = () => console.error("Something went wrong...");

Great 👏! We now have access to a brand new database, but right now its empty with no model whatsoever, before we can attempt to save something we need to specify a schema and for that we need to create an IDBObjectStore.

Introduction to IDBOjectStore

According to the official documentation:

Is an interface of the IndexedDB API and represents an object store in a database

Think of it as the model in a Relational DataBase, with a major exception, there is no id field. Whenever we want to save a new record, a key must be provided, then the object store will use this key to access the object (like indexes in an array) but, if we truly want to mimic the behavior of a real RDB, we can tell the object store to automatically generate this value for every new object we save by passing an optional optionalParameters object when we first create the object store.

When the object store is successfully created, we can use the instance to create the fields of our model using the createIndex(name, keyPath, parameters) method, each parameter being:

name: The name of the field
keyPath: The keyPath (name of the key field)
parameters: An optional object where we can specify additional properties to our field

Beware: You can only perform changes on the schema in the context of a versionChange transaction. More on transactions later.

When we first open up a request to create a database, we assign a version to it, and because that database didn't exist before, it upgraded its version from 0¹ to whatever number we pass (1 being the default), a onupgradeneeded event is fired² and most importantly, a versionChange transaction is created.

The code to create the object store, given an IDBOpenRequest object is as follows:

dbRequest.onupgradeneeded = event => {
  // We retrieve the instance of the database
  const db = event.target.result;
  const objectStore = db.createObjectStore(dbName, {
    keyPath: "key", // Assign a key field to every record
    autoIncrement: true // The key is given by a key generator in a ordered sequence
  }

  // We then create the fields
  objectStore.createIndex("name", "name");
  // ...
}

Wonderful 👏! We now have our database populated with fields (columns), but how do we save (or update, or delete) any record on it?

Introduction to IDBTransaction

According to the official documentation:

Is an interface of the IndexedDB API. It provides a static, asynchronous transaction on a database using event handler attributes. All reading and writing of data is done within transactions

I think no further explanation is needed. To start (and use) a transaction we can follow this five steps:

Create a transaction through the transaction() method on our database
Set the mode of the transaction to either readonly or readwrite
Access the IDBObjectStore through the transaction and store it
Use the IDBObjectStore to make an asynchronous request (to delete or create something, for example)
Define a behaviour for when the request is fulfilled
Define a behaviour for when the transaction is completed

In code, it would look something like this:

let mode = ""; // readonly or readwrite
// Step 1-2
const transaction = indexedDB.transaction([dbName], mode);
// Step 3
const objectStore = transaction.objectStore(dbName);
// Step 4
// We open up the request through the objectStore object, we will see more on this in the next part
let request;
// Step 5
request.onsuccess = () => console.log("Success!")
// Step 6
transaction.onsuccess = () => console.log("Operation was successful");

Excellent 👏! Up to this point, we can do pretty much anything we want with our data, but we have yet to see how can we actually retrieve the information and use it.

Introduction to IDBCursorWithValue

According to the official documentation:

Is an interface of the IndexedDB API. It represents a cursor for traversing or iterating over multiple records in a database

Think of it as a literal cursor that can go in any direction (up and down) across the records.

To get an instance of a cursor, we can follow this steps:

Grab the objectStore instance from the database
Use the openCursor() on the objectStore, it will perform a request and return a new IDBCursorWithValue object
Define a behaviour for when the request is fulfilled successfully
Get the cursor from the event passed to this callback, if it's undefined then there is no data to retrieve

In code, it would look like this:

// Steps 1-2
const objectStore = indexedDB.transaction(dbName).objectStore(dbName);
// Step 3
objectStore.openCursor().onsuccess = event => {
  // Step 4
  const cursor = event.target.result;
  if (cursor) {
    // There is at least one record
  else {
    // There is no data or is the end of the table
  }
}

The onsuccess callback will be fired up for every record on the table.

That's it! Now we have everything we need to start developing our application, we will begin right away in the next chapter.

Thank you so much for reading! If you have questions or suggestions please leave them down below. See you next time 👋.

1: This is not accurate, but rather an example to make it easier to understand why the onupgradeneeded event is fired up
2: The onupgradeneeded event is fired up whenever an attempt to open a database with a version higher than its current version is made and not only when the database it's first created

DEV Community: Miguel Manjarres

Introducing 'firebaseauth' Spring Boot Library

Introduction

Why?

DevTony101 / firebaseauth

Spring-Boot library to abstract API authentication with Firebase

Firebase Auth

Table of Contents

Features

Usage

Getting started

¡Gasteroids! 👾 + ☄️

DevTony101 / gasteroids

A simple javascript game inspired by Galaga and Asteroids. Made using p5.js

Gasteroids 👾 + ☄️

Preamble

Game mechanics

Improvements

Vue Clean Celebrates Its First 10K Downloads

DevTony101 / vue-cli-plugin-clean

A plugin that helps you bootstrap your Vue application by doing some common configurations.

Vue CLI Plugin Clean

Table of Contents

Features

General

Support for base components

Introducing Vue Clean v0.4.1

About Vue Clean

What's new in this version?

Drop support for Tailwind

Introducing the basec command

New and better documentation

DevTony101 / vue-cli-plugin-clean

A plugin that helps you bootstrap your Vue application by doing some common configurations.

Vue CLI Plugin Clean

Table of Contents

Features

General

Support for base components

P5.JS: Polar Mandalas

P5.JS: Interactive Clock

DevTony101 / fleeing-points-clock

A clock made of interactive, colored pieces that move when you hover with your mouse. Made using p5.js.

Hacktoberfest Completion

About My Experience

What I Learned From Hacktoberfest

Cleaning Your Vue Project With Vue-Clean

Introducing vue-cli-plugin-clean

Features

DevTony101 / vue-cli-plugin-clean

A plugin that helps you bootstrap your Vue application by doing some common configurations.

Vue CLI Plugin Clean

Table of Contents

Features

General

Support for base components

About the development

JavaScript: Building a To-Do App (Part 4: Final)

📖 Introduction

Goals

Initial Setup

DevTony101 / js-todo-app-indexed_db

This is a to-do web application that uses the IndexedDB API.

🛠 Completing the delete Function

👨‍🔧 Assigning an ID to our Tasks

👨‍💻 Using the delete Function

🕵️‍♂️ Let's Recap

JavaScript: Building a To-Do App (Part 3)

📖 Introduction

Goals

Initial Setup

DevTony101 / js-todo-app-indexed_db

This is a to-do web application that uses the IndexedDB API.

Creating the getOpenCursor Function 🛠

Using the showTasks Function 👨‍💻

Let's Recap 🕵️‍♂️

JavaScript: Building a To-Do App (Part 2)

Introduction

Getting Started

Project Structure

Introducing the `basec` command

Introducing `vue-cli-plugin-clean`

🛠 Completing the `delete` Function

👨‍🔧 Assigning an `ID` to our Tasks

👨‍💻 Using the `delete` Function

Creating the `getOpenCursor` Function 🛠

Using the `showTasks` Function 👨‍💻

Creating the `persist` Function

Using the `persist` Function