0:00 Introduction

0:00 Hello and welcome back to the Rawkode Academy. I'm your host David Flanagan and today we are continuing with the complete guide to Spin. Continuing on with the real world examples, today we're gonna take a look at how we can use Spin the back end service to speak to a remote API. We have to deal with cars, authentication, key values and even the key value explorer. Something we haven't seen before in this course. Our mission is to integrate with the Blue Sky API. What we wanna do is grab a post from Blue Sky, fetch it over the API

0:12 Project Goal: Blue Sky Embed

0:35 and display it on our website. For that, we're going to use a web component. Before we dive into how we make this happen, let's take a look at the code in action. So we can pop over here to the browser where we have my first class UI skills as always. Black text on a white background. Here it says the skies are blue. We can hit refresh, the page reloads and everything is as we expect. So let's drop in a blue sky URL. We have paced. We can see this is staging.bsky.app with a post ID, which is a post

0:42 Live Demonstration

1:08 from myself. We click embed and we can see all the details that we need. Now the UI is not great, of course, but we do get my name, my handle, my profile photo and the contents of the post itself. So how do we make this happen? Well, this is a lit web component. We can open bluesky.ts and I'm not gonna spend too much time on this web component because it's just a vehicle to show the post all the cool stuff happens on the back end. But this web component has some properties with the fields that we've seen on the UI. The link,

1:25 Frontend Web Component Explained

1:43 whether it's been fetched or not, my display name, the avatar, the handle, and the post. If we pop down, we can see we have an input box and a button. You've seen these too. We have the ability to render it as beautifully as I did and then the embed itself. The embed link is a remote call to Fermion Cloud with my back end app ID. We send a push request, the fact that we're sending JSON and we send the link. That's all. Once the information is provided to the browser, it can be rendered with the

2:15 web component. So let's see how we made this work with Fermion Spin. Here, I have a back end directory which contains all of the code using the Spin framework. If we pop open index, you'll see that I'm using Fermion's TypeScript SDK for this project, but of course, it's WebAssembly. I could have used Rust. I could have used c sharp. I could have used whatever I want. We specify the input which is just an interface where we get a link. We're just using this so that we can deserialize the input as it comes to our handle request function.

2:47 Handling CORS Requests

2:47 Now something that we haven't seen a lot of with our spend project so far is handling cars. This is really important when you're providing a remote API that can be specifically called from a browser because the minute the browser is involved, cross origin request policies become mandatory. So we're just making sure that if we do receive an options request on our Spin application that we say, hey. We allow you to call this from anywhere. We are a public API. We're gonna allow you to request a content type, which could be application JSON, and we're gonna allow you to send an

3:21 options request, which we are responding to as well as a post request. Next, we're using the Fermion Cloud key value store. Here we use the Spin SDK, we get the key v namespace and then we open the default store. We're doing this because we actually have variables that we need to persist over time. The blue sky API gives us back an access token and a refresh token when we authenticate. We don't want to do this every single time. That access token may be valid for an hour, six hours, or even a week. So store it in a cache and refresh

3:25 Using Key-Value Store for Auth

3:56 it as required. What we do here is we say that if the off token k v key does not exist, we're going to go through the create first session flow and we'll take a look at that in a moment. If anything goes wrong, we return an error. Assuming that the authentication token was successful, then we can decode and grab that value from the key value store and start to build our blue sky request. Now this code is not particularly fancy. We're just splitting the link to grab out the correct portions to get the handle and the

4:11 Fetching Blue Sky Post Details

4:28 post ID. As you can see, I'm lettering all of my code with console dot log debugging statements. I can fetch this from Fermion Cloud's UI to understand what's going wrong when something goes wrong. It's nice being able to hook into all the standard print line debugging tools that we've got experience with over the last one year, five years, or even twenty years. From here, we do a whole bunch of nested awaits to grab the blue sky profile so that we can get the distributed identifier for this ID. Don't worry if you're not familiar with the lexicon of blue sky, but

4:59 a dead or a distributed identifier is how we're able to then make further requests to the API. Then we'd nest up our awaits again, this time using the XRPC endpoint getPostThread where we pass the DID and the post ID. From here, we have everything that we need. We can see got the post, return it to a hundred and dump it straight back to the user. From there, it can be displayed. Now there's something else that we have to go through here and that is that create first session flow. If we do not have an access token,

5:35 then we need to do the authentication dance. Again, we pull out a k v store to make sure that we can get and set values. Now we're looking for values to exist here or else this is never gonna work. Notably, we need a username and a password for blue sky. If those don't exist, we can never log in. If they do exist, we grab them and we hit the create session endpoint on the blue sky API. If this is successful, we store the off token as off token and k v. Neat. So how do we get that username

6:09 Managing Key-Value Data

6:09 and password in to our key value store? Well, let's take a look at our spend dot toml. Currently, we're deploying our Blue Sky API like we do everything else. We specify the source, we enable the default key value store and we make sure that we are allowed to make HTTP request to the blue sky dot social API. However, we've added one additional component to this deployment and that is the KV explorer, which is available on the root internal slash k v dash explorer. This is an awesome component provided by Radu from the Fermion team and it gives you

6:33 Introducing the KV Explorer Tool

6:46 a UI to browse and set and interact with your key value store. In fact, if we come over here, we can browse to our Fermion cloud URL and add internal KV explorer and we get this UI. It uses basic authentication which is set in the KV itself and I'll go over how to set that for the first time in just a moment. But from here, I can take a look at my username and I see that it is Rawkode dot dev. I could show you the password, but let's not do that. The credentials for the

6:52 KV Explorer Live Demo

7:19 KV itself are stored in KV credentials. Now I don't mention them. They're Rawkode Rawkode because I'll delete this application before I publish the video. And if I don't, have fun. We then have our off token, which again, I'm not going to show you as it will allow you to authenticate and speak to the Blue Sky API as myself. But this is very cool. From here, I can set new keys. I could say the ABCDEF equals to 123456 and click add. We can view the value and delete it if we wish. This is a really neat component to add

7:54 just to make your lives a little bit easier when you're getting things set up. But how do we set that initial key value credential? Let's go back to the CLI where we could do a spend deploy. However, before we do the spin deploy, we're gonna modify it where we're gonna say key value k v credentials equals and I will set this to Rawkode password. Now if you recall when I showed you my credentials, they were Rawkode Rawkode. Now when we do the deploy, this will override the value and this is the best way and the easiest way to set it

7:58 Setting Initial KV Data During Deploy

8:28 on that first deploy. So let's click the link And now we have to log in again and we'll say Rawkode password, like so. We can view the credentials and even delete them. Perfect. So there you have it. A real world component to integrate with the Blue Sky API. We take a look at handling course request with Fermion endpoints, leveraging the key value store even at runtime to store our authentication token and a wonderful component to browse and explore the key value store making your debugging life that little bit easier. So go forth, have some fun.

8:43 Summary and Next Steps

9:06 Spin is evolving at a crazy pace and these videos will continue to come showing you everything that you need to know to be successful with Vermillion Spin. Have a great day.