Hyper Cloud hyper Data Workshops, 28 Oct 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: hyper connect workshop with NodeJS by Tom Wilson

Description

In this workshop, you will learn about hyper connect and create a update, remove and list endpoints for the Mario Wiki API.

Github Repository:

https://github.com/hyper63/workshops-expressjs

A

Hello welcome to hyper workshops. This workshop is part two of a three-part series on the hyper data service. So in the previous workshop, which will be linked in the description, was a simple hello world workshop just to get you familiar with hyper and hyper connect in this workshop, we're gonna dive a little bit deeper into hyper connect. What is it, how does it work and as well as implement three kind of features to our mario api wiki?

A

We're gonna, implement the update character, endpoint, we'll implement the remove character, endpoint and we'll implement the list character, endpoint, showing you a few more features of the hyper data service. So let's go ahead and launch a workspace and we'll open this in a new tab and we're going to use getpod as our virtual machine.

A

So in order to participate in this workshop, you should have a github account and you should have some knowledge on just javascript json apis and get our github and we'll open the repo up in gitpod, and you know kind of talk through hyperconnect.

A

So the project we're working on in these workshops is a mario wiki and it's just a uh json document store where we're storing um mario characters in json documents and we're just doing some commands in the hello world. We did a create character and we did a get character and this one will do update, remove and list.

A

But before we do that, let's talk about hyper connect, hyper connect is a client module that you can embed in your project either node or arduino.

A

It is esm, so node version 16 is required or above and you know you import it as a dependency, and it basically allows you to take a hyper connect string and create a hyper client and then kind of specify how the calls you want by just doing hyper dot service, dot action.

A

So the connection string is very important. It looks like a url, but it really has all of your kind of configuration parameters. You need for the hyper service in one line, so we can, you know basically add the config url and then make a call and out of those two pieces. We have everything we need to generate an http request.

A

For example, if we call await hyper.data.update, that's going to be a put and it's going to build the path using the params and the action is obviously update to put and the service is data, and then the connect stream gives us the information to build a token which it takes the key and secret and adds the key as the sub claim to the json web token, and the secret is what's used to sign the json web token and that allows a hyper connect to make a secure uh request on your client's response and get the information back.

A

Hyper connect is available in node. It also works in environments like bite with a swelt kit is a popular bite build, and then it also works in environments like dino, and you do not want to run this in the browser again because you're exposing some secrets, you always want to run this on the server side.

A

So now that we've gone through that, what we need to do is create a emv file in our project and run some setups and and and then add the connect string and then run some setups.

A

So with that we're going to go into our hyper dashboard. So we type dashboard.hyper.io.

A

And log in by clicking the github button again, you have to have a github account so.

A

Use our test account and once it initializes you, you may or may not have applications. If you did the hello world you'll have an application, but what um we're going to do is just kind of delete this application and kind of start from a clean slate, just to make sure that everything is good, so we'll add an application and we'll just hit, create and then we'll open that application in our desktop and hover our mouse over this little copy document.

A

Click that you should see copied that basically copied our connection string in our clipboard and now we'll go into our get pod. Let's continue with github here and I was thinking it was already spun up, but it shouldn't take too long. So we are using a node.js environment and I'll be using yarn for my installer. You can use npm install and we're using video studio code I'll update the size of this. So it's a little bit easier to read and then we're going to go into the connect folder.

A

So I'm going to open an integrated terminal in the connect folder and then I'm going to type yarn to kind of pull down all the packages and then I'm just going to type echo hyper equals and I'm going to paste that connection string into that line and use the greater than sign to create a dot emv file.

A

Since this is visual studio code, you could come up to connect and select new file and do dot env etc, but the just as you want a dot emv file here with your hyper connection string and once we have that we are good to go. So um what we want to do next is kind of run a setup and the setup will just pre-populate some documents for us and then we'll run start, which will start our express server.

A

So if we run yarn setup here, it's just calling the setup.js file uh using your hyper token and just creating four docs here for our mario wiki. We've got mario and luigi princess pete and bowser extra credit for anyone who knows what who bowser is and what game that bowser first appeared in.

A

That would be kind of cool to know anyway, so we've got everything kind of set up: let's go ahead and start our server.

A

And what we'll do is go over here to our remote explorer and make our server public, and then we can kind of launch it here on the tab and see that we have a server and also if we do a uh api characters, character dash one, let's see, characters a misspelled character right: okay, there we go, you can see that we are getting our characters on the api endpoints that we implemented in the previous workshop.

A

So all that's working great now we do have a couple of other api methods to implement. We want to implement, update, remove and list we'll start with update and with update, we'll do just like we did in preview. In the previous workshop, we'll import connect from hyper connect and then we'll set up hyper by calling connect passing in the environment variable hyper, which is our connection string and then instantiating that and now we will get the result from an await and call hyper.data dot. Update now update takes two parameters.

A

It takes a um request.params.id which will be part of the url and then a request.body, which is the document that we're updating and then we'll just return. The response.

A

Like that, okay, pretty cool um now in order to test this, what we want to do is use a tool called hopscotch, just because it's easier to um view here in the in this workshop, but you could use curl as well. um What hopscotch want to do is go ahead and grab this url and make sure that works cool so to do an update. We need to do a put, and we need a json body and we're going to add a description.

A

Mario's brother right and if we do a put to api characters and the id passing the body, that's a type of application json with the code we added, we should get an okay true and we do yay. We have updated um the character if we want to do a get, we should see that we've added the description of mario's brother, very cool.

A

Now, if we wanted to remove a character, so we can go to remove character and do the same thing. Import connect from hyper connect.

A

Hyper equals connect, process, dot, environment hyper and we instantiate that and then we'll say, result await and you guessed it hyper.data.remove and then request.params.id.

A

Right pretty straightforward and we'll provide result here and now. If we wanted to test that we've got api characters dash two, we will just call delete, we don't need to send a body and with that we hit send and we get ok. True, we successfully deleted character, 2.

A

pretty cool. So that's two of the three, the the um third one we want to implement is list. um So if we go list characters again, it's kind of the same process now, um there's other ways you can manage this, but for right now we're just trying to be very explicit so we'll import, hyperconnect and then we'll get our connection string.

A

And we're going to just uh get the result equals hyper. We need to wait hyper.data.list like that and then we'll return the result, and this is going to list all the documents in our database right.

A

So if we go to api characters and do a get and we remove character, 2 and hit send all right, we get three documents in our database because we deleted one. We can actually go ahead and post a character or put a character. So if we wanted to put that character back here luigi, we can just do put characters character. Two send okay true. Now, if we go to our get characters, let's do get characters thin and we've got all four of them back. Okay, pretty cool!

A

Now, there's some um parameters that we can add to the list: characters because we may not want to return all of them back. We could just say you know, give us a limit of 2 and if we run that we'll only get 2.

A

now we're getting okay, we could also just return docs, um which will just give us the array be a little bit easier to read.

A

Now we can also say give us specific keys, so let's say we wanted to get specific keys from the data store, so we could say keys and then just an array of key strings, so character, dash, 2 and character, dash 4..

A

So so, with that, if we run now, we should get 2 and 4. pretty cool.

A

We can also do ranges because uh list is a range query, so we could say start key equals character, 2 and n key equals character, 3., and that should just give us characters. 2 and 3.

A

2 and 3., since we did a range um and and there's a bunch of other things we can do with list. um One of the things we may want to do is uh filter on type character, so we may have other types of documents in there. So again, you can just uh on small data, sets leverage the filter command of an array and you get the the doc and then you could say um to filter it with the true or false.

A

So if doc, dot type equals character, then we'll return it true and then that'll keep it in the filter. So if we do that- and we do a list with a limit 25 right, then when we run we should you know, get our four character documents back cool.

A

So that's really the um workshop today uh there's a couple of other examples on there to try and some other code and again um with this workshop now you should have walked through kind of the basic crud features of hyper data service and in the next workshop, we'll actually go into more advanced features, because, obviously you want to do some custom queries. You may want to upload some data in a batch things like that and we'll discuss that in the other workshop. So thanks hope you had a good day and talk to you soon.