IBM Watson API is an AI Cloud Service that allows you to build amazing AI Applications easily. In this tutorial, we will show you how to create an amazing Facial Recognition Application using IBM Watson API. For this we are going to use Node.JS and ReactJS, if you don't know anything about these technologies, we suggest you to read about they before start this tutorial. So, let's go there!!
Creating IBM Account
First, to use Watson Service we need to have an IBM Cloud Account, you can create it without paying, although it's limited to 10.000 requests a month. But don't worry, it's more than enough for our application. Let's create our account following these steps:
- First, you can sign up on this link, on the right up there is a button "Get Started Free" click on it and fill all the information of the form to create your account
- Then, they will ask you to check your email to finish the process. Enter on your email and click on the verification link sent by IBM. Now you are able to sign in your account, do it!
- After logged in your IBM Cloud, on the top menu, click on Catalog.
- Then, filter it by the category AI and select the product Visual Recognition.
- Next, write a name for your service and create it, if you did it right, the Visual Recognition Service Panel must opened.
- After that, we will get the API Key to make the requests, however remember not to share this key with anyone. Click on activate tool, it will open a new tab, when it loaded, you can close it.
- Finally, back to the Service Panel and click on show "credencials", your API Key will appear in "credencials", save it in your notepad.
Creating the NPM Project
After we created our IBM Cloud account, we can start to create our NPM Project, first we have to create a folder for this project. Then, open your console and go to the directory of this folder. Now, write the follow command to create our package.json file:
Now we have the server's package.json, let's create the client's Project, for that we are going to use Create-React-App, but why Create-React-App? This tutorial does not have the focus on how to configure Babel and Webpack, I will create a post about it in the future, but for now is faster and simpler using Create-React-App, because it is already configured. In the console, write the follow command:
npx create-react-app facial-recognition-client
Our client is ready to code, let's focus on the server now. First, we need to install 2 development dependencies, Concurrently to run the server and the client in the same process and DotEnv to setup up our environment variables when our application starts. DotEnv will be very useful, because we do not want to show our API Key to everyone that has access to our source code, and it is not a good practice to leave this information in hardcode. To install these dependencies, use this command:
npm install dotenv concurrently --save-dev
After it is done, open your package.json file and see if these dependencies were added to it, like the JSON below:
Do not worry about the version of the dependencies, they can be different. So, now we need to create a .env file, this file will be read by DotEnv that is in charge of loading the data to the Environment Variables. To create the .env file, you can use the Notepad++ Editor, our file will be something like this:
On IAM_APIKEY put your Watson Facial Recognition API Key that you got before, the variable PORT is the port that our server will listen, we are going to see more about it in the next part of this tutorial, for now, save this file in the server's folder. Do not forget not to share your .env file, if you use Git, you must add this into your gitignore. Now, let's code something, to load the .env file, we will use the method config(), this method will load the .env file in the same directory of our index.js. Our index.js will be like the follow code:
If you run the index.js with the command "node index.js", you must have this result:
Look it is working, magic? Now, our application is able to load our Environment Variables. After that, we have to create a script "start" that will use concurrently, it will open both server and client in the same process, though if one of the commands fail, concurrently will be in charge of killing all the other commands. We already installed it, we only need to add to our server's package.json the script below:
We created a script called "start" that calls Concurrently and says to it, "if one of these commands fail, be in charge of killing all the other commands" using the keyword "--kill-others-on-fail". We can pass how many commands we want to, just writing it inside the "". If we use the command "npm run start" now, it will start our server and client, like the image below:
Perfect! Our project is finally configured, so, the part 1 of this tutorial is done, in the next part we are going to create the integration with the Watson Facial Recognition API. If you want to clone or fork this project, here is the Github Link. If you have any doubt, suggestion or if you see something wrong, please contact us on this email email@example.com.
See you in the next tutorial!