DEV Community: Cha Yang

Implementing Clarafai's Image Recognition API to your React application

Cha Yang — Mon, 09 Mar 2020 06:22:30 +0000

Clarafai creates computer vision AI such as image recognition, demographic analysis, aerial surveillance, and so much more. One of my recent project uses the Clarafai image recognition API to detect a face in an image.

So how do we start?

You can head over to Clarafai's website at https://www.clarifai.com/.
You will need to create an account and create your application to get an API key to use their Image Recognition.

After creating your application, you will have access to your API key which is located in the API keys section. Copy that API key and store it somewhere safe.

Now that you have your API key, you can access your terminal and do npm install clarafai --save to install clarafai into your application. After that, you can import clarafai into your react project with
import Clarifai from "clarafai";
Next, you will need to initialize clarafai. You can do that with
const app = new Clarifai.App({
apiKey: "your api key"
});

The last step is the fun stuff. Actually using the image recognition AI.

app.models.predict("your image address").then(
function(response) {
// do something with response
},
function(err) {
// there was an error
}
);

This will locate a face in the image that is provided.

Firebase as authentication

Cha Yang — Fri, 03 Jan 2020 21:02:29 +0000

Ever wonder how web pages these days are able to use Google or Facebook login for their user authentication? The simple answer to that is Firebase. Firebase provides a realtime database and backend as a service. It also handles user authentication and much more.

I will help guide you through the process of making a simple user authentication using google login.

Click on Get Started on https://firebase.google.com/. You will want to sign in with your Google account. After you've signed in, a new page should open up with the option of creating a project. You would want to click on that to get started.

There are going to be three steps to setting up your project with Firebase.

First, you're going to put in your project name. It could be anything you want. Then accept the firebase terms below and click continue. It will be step 2 next. For this step, you just have to click continue to proceed. For step 3, just select all the options and click create project. Once your project has been created, we're ready to move onto the next step.

After creating your project, you will see the page that looks like the above image. This means your project is created. Now open your terminal and navigate to wherever your project is at. Install Firebase in your project with the command npm install --save firebase. After you've installed firebase, open up your code editor and go into your index.html file. In there, you're going to want to reference firebase with a script tag inside the head. For example,

Next, you could do something simple and reference one of your js files below. For this example, lets make one called app.js. Put this in a body tag. For example,

This will make it so that when you click on a button that says Login with Google, it will run the function googleLogin(). Now we just need to make the function in app.js.

We are now going to make the function for a google login. This is the code.

This should now make your button have the functionality of a google login. Onto the next step.

Navigate to https://console.firebase.google.com/. Click on the project that you want to work on. Afterwards, you will see your project screen. On the left side, there will be options to choose from. Click on Develop and then Authentication. It will then take you to this page.

Click on set up sign-in method. Now you will see a list of options. Click on the google. As you can see, the status of it is disabled. You will want to enable it. First, click on it and then it will ask for your email under the Project support email. Put in your email and click save on the bottom right. Now the google login feature is enabled.

In your terminal, type in these commands step by step and follow the instructions. For firebase init, you will want to select the option of authentication.

firebase login

firebase init

firebase serve

This will fire up your firebase server and you will be able to see your app run with firebase. When you want to deploy your web app, instead of doing firebase serve, just do firebase deploy. Hopefully it's working for you if you've followed all the steps. This makes user authentication so much easier to handle and lets you focus on the other important things in your web app.

Set Prettier as your VS Code formatter

Cha Yang — Thu, 19 Dec 2019 19:12:21 +0000

It can get annoying when you're writing code and have to worry about indenting a line and putting semicolons at the end to make your code look cleaner. There's a way around that and it's called a code formatter. A code formatter parses your code and reprints it with its own rules. There are many code formatters out there but the one I'm currently using is called Prettier. It's a code formatter that works for many languages and editors.

Installation:

There are two ways that I know of to install Prettier in VS Code.

First Option -
Open VS Code and type the command Mac(Command + P), Windows(Ctrl + P) and paste the following command, and press enter.

ext install esbenp.prettier-vscode

Second Option -
Open VS Code and on the left side, you should be able to see five options and a settings option at the bottom left. You would want to click on the fifth option and that takes you to the extensions and package place in VS Code. You should then see a search on the top left. Type in Prettier in the search bar. You should see Prettier - Code Formatter as your first option. Click that and install it on the right.

Setting Prettier as your Code Formatter:

After you have Prettier installed, now it's time to set it as your code formatter. There should be a settings tab on the bottom left. Click that choose the settings options. There should be a screen that's popped up to the right. That's the settings page. You would then click on Text Editor on the left. Click that and scroll down until you see an option that says Default Formatter. Click the option right under that and scroll until you see the name, esbenp.prettier-vscode. Select that option.

Now that you've set prettier as your default formatter, you won't notice any changes until you've set prettier to format on save. On the Text Editor area where we found the place to set default formatter. You would want to click Formatting. This takes you the place where you can set prettier to format your code on save. There should be an option under Formatting that says Format On Save. Check that box and that is all.

Now that you've set Prettier as your default formatter and also make it format on save, you can now let Prettier handle the rest. For example,

This is your text editor before saving.

This is the result after saving.

See? Isn't this much better? It even adds a semicolon to the end of a line and all you have to do is save your editor. Now you can go and write code without worrying about formatting your text to look nice. Instead, Prettier will do it for you!

Implementing Google Maps to your projects

Cha Yang — Tue, 12 Nov 2019 21:40:48 +0000

Google map is very useful because if you have an application that needs some sort of location finder, you can just use google maps api. The first step is to first get your API key from developers.google.com. There you can click on overview and click get started.

From there, just finish the process to get your API key. You'll want to save it somewhere private just in case. Now all you'll need to do is reference google maps in your HTML file and give it your API key in order to be able to customize a map of your own.

Next, you can start creating the actual map itself and give it a size of whatever you want.

You can even give it a position that you want the map to be in. Like this.

After you've done all those steps, you should have a working map. It also comes with a marker!

Now you can start using your google map for projects like Geo Guesser and such.

An attempt at making a chatbox

Cha Yang — Tue, 05 Nov 2019 00:24:35 +0000

Over the weekend, I wanted to work with forms a bit more and so I decided to make a little chatbox.

You're able to ask a question on the form and get an answer printed below the form. It just takes the user input and sees if that input includes a question that our chatbox can answer. If it exists, then it prints out the answer below the form.

Right now, it's only able to answer two questions but it can answer many more if I work on it more. In conclusion, I learned more about how 'submit' and 'forms' work now.

An attempt at generating dungeons with Ruby

Cha Yang — Wed, 30 Oct 2019 00:09:49 +0000

I wanted to make a random world generation and dungeons are a great way to start. This is an attempt at generating dungeons so right now it's only able to generate the number of rooms, monsters, and percentage of treasures there are in that generated dungeon. There is a dungeon size you could choose between small, medium, and large. The larger the dungeon, the higher the chances of getting treasures but you're also at risk of getting a dungeon spawned with legendary monsters. The screenshot below is the monsters and legendary monsters array that I created. Right now it's not a lot, but it's a good start.

I haven't implemented a legendary monsters percentage yet but I am going to implement it later to spawn in a room with a certain percentage. The smaller the dungeon size, the less chance it'll spawn. The code is still really repetitive at this point, but I just want to see how it would feel like if it was working so that I could start doing the right things to get to that goal.

It's going to run in the terminal and the user input guides the world generation. Things such as would you want your dungeon to be small, medium, large, or custom in size. The dungeons are randomly generated so a small dungeon could be different from another small dungeon. It would still have the same percentage of treasure drops though which is the main attraction.

Overall, this is just the beginning of the project and the first attempt at random world generation. I plan to make it generate a lot more things for the dungeon but for now, just three is fine.

Turn your Macbook into a gaming pc

Cha Yang — Mon, 21 Oct 2019 08:15:23 +0000

Everyone who's tried playing games on their Macbook will notice that it's probably not a good idea. The graphics in a Macbook are very weak and therefore, can't handle most of the games today. They're generally used for basic computer browsing and school because of its simple design. Most people would just build a gaming pc and separate gaming from work. Now, what if we're interested in doing both? Lucky for us, when there is a will, there is a way. The newer Macbooks these days support Thunderbolt 3. What that means is, your Macbook can handle the fastest port available on computers today. This Thunderbolt 3 is a USB-C port and can be connected to one of the Macbook ports. A gaming pc would usually have a case that stores everything a computer needs in order to work. A Macbook already has the essentials except for a GPU. A Thunderbolt 3 can be connected to an external GPU and be used as a graphics card for a Macbook. That's basically how a Macbook can be used for games. For the setup, you're going to need a power supply that's 600W or more and a graphics card with a USB-C port. Connect the power supply to the graphics card and the Thunderbolt 3 port to the graphics card. The last step is to just connect the other end of the port to your Macbook. Your computer will be able see the connection and use the external GPU as your graphics instead of the Intel graphics. Your Macbook that isn't so great at gaming is now ready for some games.

Ruby as a game

Cha Yang — Mon, 14 Oct 2019 06:49:03 +0000

https://www.bloc.io/ruby-warrior#/

Ruby warrior is a game created by Bloc.io with the programming language, Ruby, and is a game that you, the user, has to code out the instructions for your character. It's a very interesting program that teaches people how to learn to code in a fun and interactive way. After creating your character, your hero is sent into the battlefield with all the appropriate gear but your hero can't think for himself. It is up to you to tell him what to do. In order for that to happen, you have to type out the commands in the text box below. Your hero will do as commanded but his life is in danger if you can't tell him the right things to do. You have to code out the instructions using the Ruby language and learn how to guide your hero past the waves of monsters. This is something that I find unique because coding isn't all fun when you first start. It can be very stressful to take in all this new information and train your brain to think in a different way. A person that's new to programming would find this game very enjoyable while learning how to code at the same time. You will get a sense of what programming is and at the same time, enjoy the process.