How to create a Barcode Generator with Free API

An overview on Barcode

Around 50 years from the first scan, barcodes have been taking main roles in various applications. They have become one of the most ubiquitous methods of product identification and tracking in use today. You can find barcodes on products, packaging, and even advertisements. Have you ever wondered what they actually are, and how do they work? How could you create your own barcode generator with Free API?  So if you’re curious about this fascinating piece of technology, read on!  We’ll explain in step-by-step how to create yourself a barcode generator with Free API, creating barcodes for your products quickly and easily. So, let’s get started!

What is a barcode and how it works?

A Barcode is 2-dimensional. Unlike QR codes, it only contains information horizontally. The meanings of each character in the code are listed in a database. Each character in the code stands for a different aspect of the product. They are read by a barcode reader, from left to right. The reader makes use of a laser beam that can detect variations and reflections from line and space thickness. Then, the reader translates the reflected light into digital data which is then transferred to a computer for instant storage or action.

How are barcodes used?

Barcodes are used as a quick identification method of objects. Nearly every business utilises barcodes to automate and streamline traceability by keeping track of everything from where something was made and when it was transported to which retailer sold the product, when it is produced, and for how much. Barcodes facilitate quicker and more accurate data collection, enhance decision-making, eliminate the chance of human error, shorten employee training periods, and track products over their entire lifecycle. Overall, relying on manually entered data is less accurate, traceable, and sortable than using barcodes.

Use cases of Barcode

1. Advertising

Advertisers are utilising barcodes to reach out to customers in a more interesting, interactive and distinctive way. Simply with a mobile phone, all you need to do is capture a photo of any 2D barcode, more generally known as a QR code. From there, you can disclose the detailed information about the product being advertised. More and more corporations are adopting these barcode use cases as they see the value it can provide to their marketing initiatives.

2. Inventory tracking

Without searching the inventory physically, barcode allows businesses to keep tracking on their number of stocks instantly. All you need to do is scan the products with a scanner when there are check-in/out items.

3. Food Intake Tracking

There are some applications that uses barcodes to help you keep track of the food you consume. The app will track your food consumption using the nutrition information provided on the item by just taking a picture of the barcode on the food you’re consuming. You’d have a more thorough food record, and it’s pretty convenient!

4. Art and pop culture

Barcodes inspires artists and architects on their design. The buildings are a part of the Barcode Project in Oslo, Norway. The grouping of the long, slender, and linear buildings is supposed to resemble a barcode.

What is an API?

We all know that there are somethings we just don’t want 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 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 Barcode generator API ? Why should you use a Barcode generator API?

A barcode generator API is a tool that allows you to create barcodes in various formats for your products. 

If you’re a software developer, you know how important it is to stay organised and efficient. That’s why using a Barcode generator API can be such a valuable tool. So, if you plan to create your own Barcodes for some occasions or a business, we are here to guide you with detailed step.

How can I create a Barcode for Free? Create your own custom Barcode Generator API

Why should you choose this server?

The barcode 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.

Features

The API provides support for the following barcode rendering formats:

CODE128

• CODE128 (automatic mode switching)
• CODE128 A/B/C (force mode)

EAN

• EAN-13
• EAN-8
• EAN-5
• EAN-2
• UPC (A)
• UPC (E)

CODE39

• CODE39

ITF

• ITF
• ITF-14

MSI

• MSI10
• MSI11
• MSI1010
• MSI1110

Pharmacode

• Pharmacode

Codabar

• Codabar

For more information, see the JsBarcode Documentation.

Prerequisites

You will need a suitable QR Code API provider. Using Open Image Lab’s barcode 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 on FabriXAPI User Guide.

Create an easy-to-use User Interface

Below is a preview of the user interface. If you want to make it yourself, you may now setup your IDE and follow the coming guide. 

Let’s get into first part – creating an user interface for users to enter their desired data for the Barcodes. 

Try the below HTML for creating a user interface for your generator

<div id="app">
  <div class="demo-description">
    <h2>Barcode 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>Document URL</span>
      <input
        type="text"
        placeholder="http://example.com"
        v-model="document_url"
      >
      <br>
      <span>Element URL</span>
      <input
        type="text"
        placeholder="http://example.com"
        v-model="element_url"
      >
      <br>
      <span>API Key</span>
      <input
        type="text"
        placeholder="Input your key here"
        v-model="apikey"
      >
      <br>
      <button v-on:click="generate">Generate QR Code</button>
    </div>
 
    <div class="output-area">
      <template v-if="error">
        <span v-html="error" />
      </template>
      <template v-else-if="!result">
        Fill in the Document URL, Element URL and API Key, then press "Generate Barcode".
      </template>
      <template v-else>
        <div v-html="result" />
      </template>
    </div>
  </div>
</div>

Then, add the below CSS to beautify your UI. 

@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: 400px;
}
 
.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 {
  border: 1px solid #999999;
  border-radius: 3px;
  height: 30px;
  width: 150px;
  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;
  width: calc(100% - 350px);
}
 
@media screen and (max-width: 616px) {
  .input-area {
    text-align: center;
  }

  .input-area span {
    text-align: left;
  }
   
  .output-area {
    width: calc(100% - 150px);
  }
   
  .input-area button {
    width: 140px;
    padding: 10px 7px;
  }
}
 
.output-area svg {
  transform: scale(0.7) translateX(-30px) translateY(-95px);
}

Make the API call with Vue.js

Before writing the scripts, lets take a quick looks on the parameters available in the API:

Endpoint

• POST /v2/academic-api/jsbarcode/

Parameters

These are the parameters available in the API:

name	required	type	description	default
input_text	true	string	The text to be converted to a barcode.	(none)
format	true	string	The barcode rendering standard to be used.	“CODE128”
width		integer	The width of the barcode.	2
height		integer	The height of the barcode.	100
display_text		string	Override the text that is displayed.	(none)
font_options		string	Add bold, italic or both to the display text.	(none)
font		string	Define the font used for the text in the generated barcode.	“monospace”
text_align		string	Set the horizontal alignment of the text.	“center”
text_position		string	Set the vertical position of the text.	“bottom
text_margin		integer	Set the space between the barcode and the text.	2
font_size		integer	Set the size of the display text.	20
background_color		string	Set the background color of the barcode.	“#ffffff”
line_color		string	Set the color of the bars and the text.	“#000000”
margin		integer	Set the margins around the barcode.	10
margin_top		integer	Set the top margin of the barcode.	(none)
margin_bottom		integer	Set the bottom margin of the barcode.	(none)
margin_left		integer	Set the left margin of the barcode.	(none)
margin_right		integer	Set the right margin of the barcode.	(none)
flat		boolean	EAN-13, EAN-8 and UPC barcodes can be rendered with (not flat) our without (flat) guard bars.	false
last_char		string	EAN-13 is sometimes printed with with a character after the barcode, most common is the > character.	(none)
ean128		boolean	Enable encoding CODE128 as GS1-128/EAN-128.	false
mod43		boolean	CODE39 is sometimes used with an optional modulo 43 check digit. Enable by setting this to true.	false

Now, you can add the following Vue.js script to generate the Barcode.

const endpoint = 'https://trial-api-barcode-2kqm.gw.openapihub.com/academicapi/jsbarcode';

new Vue({
  el: '#app',
  data() {
    return {
      document_url: '',
      element_url: '',
      apikey: '',
      result: '',
      error: ''
    }
  },
  methods: {
    generate: function() {
      const param = `?document_url=${this.document_url}&element_url=${this.element_url}`
      const axiosConfig = {
        headers: {
          'content-type': 'application/json',
          'x-openapihub-key': this.apikey
        }
      }

      axios.get(`${endpoint}${param}`, axiosConfig)
        .then(res => {
          this.error = ''
          this.result = unescape(res.data)
        }).catch(err => {
          this.error = `Error occurred -<br>${err.response.data.message}`
          console.log('Error', err.response.data.message)
        })
    }
  }
})

Generate your first barcode now!

Now that we have all the materials prepared. Let’s take a look at creating our first barcode with our generator. 

Simply fill in the form with a Document URL, Element URL and an API Key, then press “Generate Barcode”. Once you enter all the required data, it will instantly create a barcode that’s ready for download.

The output will be shown as follows:

Error Responses

Example response with status 401 – Unauthorized

{"message":"Invalid authentication credentials"}

Example response with status 502 – Internal Server Error

{"message": "Internal server error"}

Supported response codes

• 200 – OK
• 401 – Unauthorized
• 502 – Internal Server Error

Conclusion

As Barcodes would still keep being used extensively throughout industries for years, it is never too late to understand its features and usage. Now, why don’t just start making your own barcode with the generator we just made to drive traffic and sales to your website or product?  Take your step!

Featured resource: Get your Barcode API on FabriXAPI.