What is UUID and How to generate a UUID with Free API

A general view on UUID

Nowadays, running an application on the market has to handle drastically more information from both clients and servers. Receiving the same information, like the same ages and preferences from different users, therefore, becomes normal. Have you ever been concerned about how to distinguish and identify them? Do you need a guaranteed unique identifier to label your information? Here comes A UUID generator API. This blog article will show you the easiest way to create your own UUID generator with a step-by-step guide. Read on!

What exactly is UUID?

A universally unique identifier (UUID) is a 128-bit label generated using certain standard methods. It is represented as 32 hexadecimal (base-16) digits. The 32 digits are divided into five groups separated by hyphens, in the form 8-4-4-4-12. For example: `bad51500-395a-11ed-90e4-a99c4dfc9ff8`. Its purpose is to act as an ID to distinguish users, data, or any information. Due to its large enough bits and the standard generation methods, the probability of a UUID being duplicated is close enough to 0. Therefore UUID can be regarded as unique. With this uniqueness, information with duplicated values can be stored in a single database or namespace without worrying to be misidentified.

What is an API?

We all know that there are some things we just don’t want to do it manually. That’s where APIs come in. An API, or application programming interface, is a set of rules and specifications that allow two software programs to communicate with each other. Developers can build applications that work seamlessly together and make it possible for end-users to complete complex tasks with just a few clicks. By using an API, you can save yourself the time and effort of having to write your own code from scratch. Let’s take a closer look at what an API is and how you can use it in your own development projects. If you want to know more about what an API is, check this link out.

For example, imagine being able to book a flight, hotel, and rental car all in one place by using just a few taps on your smartphone. This would not be possible without APIs! As the world becomes increasingly interconnected, the importance of well-designed APIs will only continue to grow.

What is a UUID Generator API and how does it work?

 A UUID Generator API is a tool that can quickly generate valid, unique UUID for information labeling and software testing purposes. UUID can be generated in different versions. You can choose the version of the UUID by calling different endpoints in UUID Generator API.

Here are the available versions of UUID Generator API:

• NIL UUID — special UUID that is `00000000-0000-0000-0000-000000000000`
• Version 1 — generated from date-time and MAC address
• Version 3 — generated by hashing a namespace identifier and name (using MD5 as the hashing algorithm)
• Version 4 — generated randomly
• Version 5 — generated by hashing a namespace identifier and name (using SHA-1 as the hashing algorithm)

There is no single version of UUID that outweighs the others but is more appropriate in specific use cases. The generated UUID can be used to identify different records in the same database.

Advantages of using a UUID

We can summarise some major benefits of using a UUID.

• It is most likely unique across all databases, servers, and tables.
• It allows a straightforward combination of records from any numbers of different databases.
• It makes it simple to distribute databases among many servers.
• UUID/GUID columns are needed in the majority of replication cases.
• The IDs generated are difficult to guess.
• It can be produced independently of a database. A Ruby example is SecureRandom.uuid

How do I get a 16-digit UUID? Just create your own UUID Generator API

Why should you choose this server?

The UUID Generator API is supported by FabriXAPI, an All-in-one API Platform that supports API Needs and it is certified as “AWS Qualified Software” since 2022. You can register for an API portal for free, share and monetise APIs easily on the trustable platform certified by ISO27001.

Prerequisites

You will need a suitable UUID Generator API provider. Using Dev Geeks’ UUID Generator API, you can proceed easily as follows :

1. Sign up for a Developer Account

You need to sign up to the API Portal in order to subscribe and access this API. For more information, please refer to “Register as a Developer“.

2. Active API Subscription

You need to subscribe to this API before consuming it. Many APIs come with a free trial plan so that you can experience the API functions provided free of charge. For more information, please refer to “Subscribe to APIs“.

3. API Credential

An API Key is required to access the API. It can be obtained in the Developer Admin Portal once you have completed the signup to FabriXAPI. For more information, please refer to “Create API Key“.

You may check out the full API documentation here on the API Portal

Let’s follow these steps to create your custom UUID generator API.

Construct a simple User Interface

In the beginning, let’s give it an appealing outfit by making the UI. Add the below HTML into your IDE. 

<div id="app">
  <div class="demo-description">
    <h2>UUID Generator</h2>
    <span>To protect your credentials.</span>
    <br>
    <span>DO NOT save this API Key in the code sandbox!!</span>
  </div>
  <div class="test-area">
    <div class="input-area">
      <span>API Key</span>
      <input
        type="text"
        placeholder="Input your key here"
        v-model="apikey"
      >
      <br>
      <span>UUID Version</span>
      <select v-model="uuidVersion">
        <option value="nil">nil</option>
        <option value="v1">v1</option>
        <option value="v3">v3</option>
        <option value="v4">v4</option>
        <option value="v5">v5</option>
      </select>
      <br>
      <template v-if="uuidVersion == 'v3' || uuidVersion == 'v5'">
        <span>Name</span>
        <input type="text" placeholder="Input the name" v-model="name">
        <br>
        <span>Namespace</span>
        <input type="text" placeholder="Input the namespace" v-model="namespace">
        <br>
      </template>
      <button v-on:click="generate">Generate UUID</button>
    </div>
  
    <div class="output-area">
      <template v-if="error">
        <span v-html="error" />
      </template>
      <template v-else-if="!result">
        Enter an API Key and select the uuid version, then press "Generate UUID".
      </template>
      <template v-else>
        <div v-html="result"/>
      </template>
    </div>
  </div>
</div>

Then, decorate it with CSS.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
body {
  background: #20262E;
  padding: 20px;
  font-family: 'Open Sans', sans-serif;
}
  
#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  height: 800px;
}
  
.demo-description {
  text-align: center;
  margin-bottom: 20px;
}
  
.demo-description h2 {
  font-weight: semibold;
  margin-bottom: 5px;
}
  
.demo-description span {
  color: #999999;
}
  
.test-area {
  display: flex;
}
  
.input-area {
  text-align: right;
}
  
.input-area span {
  display: inline-block;
  line-height: 48px;
  margin-right: 8px;
  text-align: right;
  width: 150px;
}
  
.input-area input[type="text"] {
  border: 1px solid #999999;
  border-radius: 3px;
  height: 30px;
  width: 150px;
  padding: 0 7px;
}
 
.input-area select {
  border: 1px solid #999999;
  border-radius: 3px;
  height: 30px;
  width: 166px;
  padding: 0 7px;
}
 
  
.input-area input::placeholder {
  color: #d0d0d0;
}
  
.input-area button {
  background-color: #57abf0;
  border: 0;
  border-radius: 4px;
  color: #ffffff;
  font-weight: 600;
  margin-top: 15px;
  width: 166px;
  padding: 15px 10px;
}
  
.output-area {
  color: #505050;
  font-size: 14px;
  margin: 20px;
  margin-right: 0px;
  padding-top: 50px;
  width: calc(100% - 350px);
}
  
@media screen and (max-width: 616px) {
  .input-area {
    text-align: center;
  }
 
  .input-area span {
    text-align: left;
  }
    
  .input-area button {
    width: 140px;
    padding: 10px 7px;
  }
   
  .output-area {
    width: calc(100% - 150px);
  }
}

Interact your Generator UI with Vue.js

Vue.js is a progressive framework for Javascript. Use it to interact your frontend and backend, and implement the API.

Prerequisites

• Node.js installed on your computer
• Vue.js installed on your computer. Refer to its documentation if you haven’t installed it yet. 
• Axios installed by npm. Refer to its documentation if you haven’t installed it yet.
  • or simply paste this on your command line / terminal

npm i axios

Follow the below script. We make an API POST request using Axios.  

const basepath = 'http://127.0.0.1:3000/uuid-generator';
 
new Vue({
  el: '#app',
  data() {
    return {
      apikey: '',
      uuidVersion: '',
      name: '',
      namespace: '',
      result: '',
      error: ''
    }
  },
  methods: {
    generate: function() {
        this.error = ''
        this.result = 'Loading...'
      const axiosConfig = {
        headers: {
          'content-type': 'application/json',
          'x-openapihub-key': this.apikey
        }
      };
        let reqBody = {};
      switch(this.uuidVersion){
        case 'nil':
            axios.get(basepath+'/nil', axiosConfig)
            .then(res => {
              this.error = ''
              this.result = 'Generated uuid: '+res.data
            }).catch(err => {
              this.error = `Error occurred -<br>${err?.response?.data?.message ? err?.response?.data?.message : err}`
              console.log('Error', err?.response?.data?.message ? err?.response?.data?.message : err)
            })
            break;
        case 'v1':
            axios.get(basepath+'/uuidv1', axiosConfig)
            .then(res => {
              this.error = ''
              this.result = 'Generated uuid: '+res.data
            }).catch(err => {
              this.error = `Error occurred -<br>${err?.response?.data?.message ? err?.response?.data?.message : err}`
              console.log('Error', err?.response?.data?.message ? err?.response?.data?.message : err)
            })
            break;
        case 'v3':
            if(!this.name || !this.namespace){
            this.error = 'Name and namespace must not be empty for UUID version 3 or 5';
            break;
          }
            reqBody = {
            "name": this.name,
            "namespace": this.namespace
          }
            axios.post(basepath+'/uuidv3', reqBody, axiosConfig)
            .then(res => {
              this.error = ''
              this.result = 'Generated uuid: '+res.data
            }).catch(err => {
              this.error = `Error occurred -<br>${err?.response?.data?.message ? err?.response?.data?.message : err}`
              console.log('Error', err?.response?.data?.message ? err?.response?.data?.message : err)
            })
            break;
        case 'v4':
            axios.get(basepath+'/uuidv4', axiosConfig)
            .then(res => {
              this.error = ''
              this.result = 'Generated uuid: '+res.data
            }).catch(err => {
              this.error = `Error occurred -<br>${err?.response?.data?.message ? err?.response?.data?.message : err}`
              console.log('Error', err?.response?.data?.message ? err?.response?.data?.message : err)
            })
            break;
        case 'v5':
            if(!this.name || !this.namespace){
            this.error = 'Name and namespace must not be empty for UUID version 3 or 5';
            break;
          }
            reqBody = {
            "name": this.name,
            "namespace": this.namespace
          }
            axios.post(basepath+'/uuidv5', reqBody, axiosConfig)
            .then(res => {
              this.error = ''
              this.result = 'Generated uuid: '+res.data
            }).catch(err => {
              this.error = `Error occurred -<br>${err?.response?.data?.message ? err?.response?.data?.message : err}`
              console.log('Error', err?.response?.data?.message ? err?.response?.data?.message : err)
            })
            break;
        default:
            this.error = 'Please select a UUID version';
      }
       
    }
  }
})

Generate your first UUID now

Now that we have all the materials prepared. Give it a try to generate your first UUID.

Simply fill in the form with your API key and pick a UUID version (if you choose “v3” or “v5”, you must also enter the name and the namespace). Press “Generate UUID”. Swiftly, you can get your set of valid and useful UUID for your work. 

The output will be normally shown as follows:

Conclusion

In this tutorial, we have looked in-depth of what UUID is and the method of creating a custom UUID generator on your own. The method makes use of posting an API request and interacts with your frontend and backend to get the job done. So, what are you waiting for? Hands on and build it to boost up your business.

---