How to convert Simplified and Traditional Chinese characters with Free API?

Understanding Chinese characters Conversion

Have you read some web pages that use languages you don’t understand? In today’s globalisation, communication and accessibility are the keys to the business environment. When it comes to Chinese, there are differences between the spoken and written forms of the language. There are dozens of dialects in China, but the most widely spoken ones are Mandarin and Cantonese. While spoken languages differ, written Chinese on the other hand has mainly two writing system, Traditional and Simplified. Struggling to choose one between them on your product? You might want to know how to create a custom Simplified and Traditional Chinese characters convertor API to convert between them easily to cater for customers from different regions. Here’s everything you need to know:

The differences between Simplified and Traditional Chinese characters

Traditional Chinese is one of the oldest written languages, dating back centuries. This written language system commonly remains in use in Hong Kong, Taiwan, and Macau, as well as most of the overseas Chinese communities outside Southeast Asia; Simplified Chinese was introduced in 1956 in an effort to promote literacy by reducing the number of strokes in the characters. They are officially used in the People’s Republic of China, Malaysia and Singapore. 

This table summarises the written preferences of each major Chinese territory:

Territory / Region / Country	Written Language
Mainland China (PRC)	Simplified Chinese
Guangzhou Province	Simplified Chinese
Hong Kong	Traditional Chinese
Macau	Simplified Chinese
Singapore	Simplified Chinese
Taiwan	Traditional Chinese

In addition, age is another factor to consider in the script that people use. Generally, the ageing population tends to write in Traditional Script. However, if your target audience is younger, or has more recently immigrated from China, it might be more proper to use Simplified Chinese which are now educated in the majority of Chinese schools.

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.

Advantages of using a Chinese characters Convertor API

1. Boost your business

In a data-driven business nowadays, the Chinese Character Convertor API is integral to connect your applications with customers with different Chinese Character preferences. It allow the line of business users and IT to apply more innovative approaches to customer outreach, taking advantage of APIs can prove dividends within the enterprise.

2. Provides automatic processes

Chinese Character Convertor API makes use of the program to provide you a seamless process to create applications with desired Chinese Characters. Simply make request to the API upon your working application or software products, you are able to enjoy a smooth workflow and a swift experience for you and your end-users.

How do we convert between these two written languages using an API?

An easy way to tackle the problem is to customise yourself an API supported by FabriXAPI. Here we have a step-by-step guide on a Sample Chinese Characters Conversion API that we are going to go through with you. Here are the overview of the API you should know before creating your custom API.

Features

There are two mode of the conversion:

• traditional-char : convert Simplified to Traditional Chinese
  • e.g. 话 //-> output: 話
• simplified-char : convert Traditional to Simplified Chinese
  • e.g. 鐘 //-> output: 钟

Prerequisites

You will need a suitable Chinese Characters Conversion API provider. Using World Clock Lab’s Chinese Characters Conversion 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.

Create a simple User Interface

Let’s get started with creating a simple user interface first. 

Below is a sample UI. 

Follow the below HTML and put it on your IDE.

<div id="app">
  <div class="demo-description">
    <h2>Chinese Characters Conversion</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>Mode</span>
        <select v-model="mode">
          <option value="/traditional-char">Simplified to Traditional</option>
          <option value="/simplified-char">Traditional to Simplified</option>
        </select>
      <br>

      <span>Character</span>
      <input
        type="text"
        placeholder="Character"
        v-model="char"
      >
      <br>
      <button v-on:click="convert">Convert</button>
    </div>

    <div class="output-area">
      <template v-if="error">
        <span v-html="error" />
      </template>
      <template v-else-if="!result">
        Fill in the API Key and Character (remember to select correct mode!), then press "Convert".
      </template>
      <template v-else>
        <div v-html="result" />
      </template>
    </div>
  </div>
</div>

Then, let’s add some dressings. Put the below CSS to decorate 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, select {
  border: 1px solid #999999;
  border-radius: 3px;
  height: 30px;
  width: 150px;
  padding: 0 7px;
}

.input-area select {
  height: 32px;
  width: 166px;
}
 
.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);
}

Implement the Chinese characters Convertor API with Vue.js

This is the full script of the Vue.js. You may take a reference for your API. 

const endpoint = 'https://trial-api-simplified-and-traditional-chinese-conversion-4u7c.gw.openapihub.com/chinese';

new Vue({
	el: '#app',
	data() {
  	return {
    	apikey: '',
      mode: '',
      char: '',
      result: '',
      error: ''
    }
  },
  methods: {
  	convert: function() {
      const axiosConfig = {
        headers: {
          'content-type': 'application/json', 
          'x-openapihub-key': this.apikey
        }
      }
      
      const requestBody = {
        'character': this.char
      }
    
  	axios.post(`${endpoint}${this.mode}`, requestBody, axiosConfig)
    	.then(res => {
        this.error = ''
        this.result = `Converted Character -<br>${res.data}`
      }).catch(err => {
          this.error = `Error occurred -<br>${err.response.data.message}`
          console.log('Error', err.response.data.message)
      })
  	}
  }
})

Try it out on your program now!

Congratulations! Now that we have all the materials prepared. Let’s give a try on our work.

Simply fill in the API Key and Character (remember to select correct mode!), then press “Convert”. Swiftly, you can get your result for the conversion.

And the output is as follows:

Conclusion

Isn’t it fun and easy? By understanding the two types of Chinese Characters and trying to make an API by yourself, you can convert the between two different modes – Simplified to Tradition and vice versa,  with just a few clicks with an easy-to-use method converter API. Be involved with the technologies that help facilitate your projects and work.