13.07. FramerX - Designing with API Data

13.07. FramerX - Designing with API Data

(electronic upbeat music)

Hi, my name is Meng,
and welcome back to another session of FramerX. Today we're gonna learn how to make an API call, because designing with data in mind is crucial in order to get the right feedback from our users. So, the components that we've been using so far, such as the profile one, the Dribbble one, are all making API calls, and today we're going to learn exactly how to make that. Let's take a look at a typical API. If you go to uinames.com, you'll find that in the menu they have an API, and it's very, very simple. It's just a link here that gets back to us with a JSON format data. Let's copy and paste this link. Open a new tab and so this is the JSON data that we're getting back. So if you look more closely you can set the data based on the amount, the gender, the region. So you can basically customize what kind of data that you should be getting back. Now because we're going to create a photo component we're going to need to add the ext at the end so that we can get more data. Now let's head back and create a code component. Click on new and then we're going to name it avatar from code, create and edit. I'm going to place this right next to my FrameX window.

So now I'm going to drag and drop the avatar component right here. I'm going to set it to say 44 by 44. (light music)

And place it right here for now.
Now let me set the indentation correctly.

And then let's go straight to the API call.
So basically we can put that right inside render but before the return. So right here. We're going to start by setting up the URL. So const url is equal to double quotes, and then let's get the API URL right here.

Then we're going to use a function called fetch.
So fetch parentheses URL. And then press enter. Using that fetch we can do a then and then get response back. Arrow, the response is gonna be in JSON, parentheses. Right after those parentheses we're going to set another then. So then make sure to use the escape key if you have too many order completion that may not be necessary. So we're gonna do that again using then response, arrow, and then curly braces enter.

So the first then allows us
to transform the response into JSON. And then afterwards we're taking that response and then we're doing something with it. When you're doing development like this, one thing you can do is to log every single response that you get. Like that, you can see if you're getting the right response from an API call, for example. You can send a message, put that into a log, and your users are not gonna see it. So only you as developer will be able to see this. So let's do console.log and then we're gonna get the response. The response is an object, has multiple values. So I'm going to add a dot. And then looking at the API I can get any of these values such as a name, the surname, the photo for example. In this case, we're going to use the photo. And save. So once we have this we can go to preview and remove from full screen. And then here we can do inspect.

The inspect is going to allow us to inspect
the CSS element as well as the console like here. And you can see that I am getting some values from the API. So that's how I know that I'm going to get the photo URL. And all I need to do is using this photo URL and apply that to my styling so that I can see the photo appear right here. So let's do that. So normally you would do something like this.props.photo is equal to response.photo. But the thing is props cannot be changed. They are read only. In order to change the value in the lifetime of our component, we will need to use dates. So let's do that. First of all we need to set the interface for type script. So interface State curly braces. We're going to use the value call photo, and it's going to be of type string. Then we're going to use that in our component. So comma and then State. And after that we're gonna set the initial state. So the same way that we're setting default props we're going to also set default state. So state is equal to curly braces photo, and by default we can have some default value. Let's get one of the default value. Of course you can get to your responses, get one of them, or you can go to one of these and get this one right here. I'm gonna use the one from the console and voila. Now using the photo state we can apply that right here. So this.state.photo is equal to response.photo. Using that state, we're going to apply that to the styling. First of all, let's remove this style here. Which is this default style. We also don't need the props. And instead of using a div we're going to use a style component to make things easier. So let's name it container then close itself using forward slash. And then let's import the library, import styled from double quotes styled component. You can use the autocompletion like this. And then we're going to need to create this component otherwise it's gonna give us an answer. So const Container is equal to styled.div, and then back ticks two times. Inside this we're going to set height is equal to 100%. Then back to our return here, we're going to pass an image prop. So image is equal to curly braces, and then using the state called photo, so this.state.photo we're going to pass that as an image prop to our styled component. Let's apply the background. So background: url

get autocompletion, press enter.
And then semicolon and inside this this is where we're going to put the prop called image. So dollar sign and then curly braces, props arrow props.image. And then boom you see the image applying right away as soon as you save this. But the problem is the image is way too big now. We need to set it to background-size to cover.

And now we have a perfect image.
Now this is our default image. If you move the avatar you're gonna see that it's going to change to different avatars from the API, cool. So in order to replicate this avatar right here we need to be able to customize the radius of the avatar. So let's add that to our props. So instead of text we're gonna set to radius. And instead of a string we're gonna set it to number. The text here, which is a default prop, is going to be set to radius. And the radius is going to be a number not a string. So we're gonna set it to five by default. And for the property controls we're gonna set to radius. The type is going to be number. And the title is going to say radius. And I need to save this. Now the override here has been changed to a radius and now you can change the number like this. Obviously it's not applying to our style yet. First of all, let me just set option z to word wrap everything so that I don't scroll anymore. And now I'm going to apply to my styling. So here I'm going to pass a new prop to my styled component called radius. And then curly braces as this.props.radius.

Using this prop here I'm going to apply to my CSS.
So border-radius to dollar sign curly braces props arrow props

and then the radius and then add px at the end.
And then save. And voila, as you can see it's applying the corner radius and I can customize it. Like this. So let's say 30 and I have a perfect circle. So this can be connected to any API that you want. It can be your internal API. It can be on Splash. It can be UI Faces or Dribble. The other thing that it's allowing us to do is to separate these three elements so that we can align the avatar against a text in a very custom way without having to rely on these controls. The next thing we want to do is to be able to generate these custom names as well as the region. So let's go and create a new component. Call it name. And drag and drop to here.

Let me change the height.

And let's customize the component.
If we go back to the API we can see that we can customize the call so that we only get data from people, let's say in Germany or in the United States. So let's copy and paste this code right here, this URL. And then put it the same way that we did for the API call const url is equal to then Germany. And then option z so we can actually customize the region using property controls. So let's do that. First of all, let's set up the props. Instead of text it's going to be region. Which is going to be a string. And then here as well, so region. By default we can set it to any country that you want. So let's say United States and for the property control the same thing. It's going to be region of type string. And then region. Then for the URL for the API call we can remove Germany and make this custom. Add a plus sign and then this.props.region.

Okay, so using this custom URL
we can fetch. So fetch parentheses url enter .then parentheses response arrow response.json parentheses. Enter again. Then response arrow curly braces enter.

Now if we look at the API
we can see that we can get the name and a surname. So let's do that. I'm going to skip the console log, but the response that I'm gonna get is going to be response.name. And then I'm going to add a space. So plus double quotes space and another plus response .surname.

So this is going to be the full name of the person.
I just need to store it in a state. To do that we're going to go right after interface props. Put it interface State curly braces, and it's going to be name which is going to be a string. Let's set the default state so state is equal to curly braces name by default it's going to be Jane Doe. Which we will then apply instead of text put name, and instead of props it's a state. If you save this you'll find Jane Doe right here. Now Jane Doe is a default name. We will need to make it dynamic from the API call. So we're going to do this.state.name = response.name. Save and then if you move this a little bit you'll see that it's autogenerating these names for us. So let's apply the styling. First of all we're going to remove this and create a style component called Container.

And in here at the top we can remove this part.
Import styled from double quotes styled-components and then create the container styled component. So const Container is equal to styled.div double back tick

and then set to height 100%.
Set the color to white and then the font-weight to bold.

If you want the text to be aligned vertically
we're going to use flex. So enter display flex. And I'm using align-items to center.

Now with this we can replace this whole component here with these two components. So let's move this right here and then here.

We can remove the profile component.

Align this let's say 30 from the left.
(light music) Align the name. (light music)

maybe 16 from the avatar.
(light music) Finally, let's do a quick component for the country. Let's go here, name it Country. Let's drag and drop the new code component right here. I'm going to resize this. (light music)

Like this.
For the country component it's gonna be very simple. I'm just going to copy and paste the content of the name component. So command A to select everything. Command C to copy. Go back to country and then command A to select everything, delete, command V to paste. It's not gonna work. We're going to rename this to Country. And now it should work. We only need to change a few things. So for the response we're going to get back the region instead of the name. And here we don't need to be specific to the region. So we can remove this part. Put this.props.region, just remove it. And then remove the question mark region is equal. Having the basic URL is going to randomize all the regions available to us. So if you save this and you resize you should be able to see a list of random region names. Let's just customize the text. We're going to set color to rgba 255, 255, 255, 0.5.

The font-weight we're gonna remove it,
replace it with font-size and let's say to 12. (light music) Finally we can remove the code that we don't need or change the default props and states. For the default name we're gonna set it to United States. And default props we don't really need that anymore. So we can just remove this. The interface as well. Instead of using props we're gonna use state. And we also don't need the property controls. So we can delete this part as well. So now we're just down to a simple state. Do an API call and then apply that to our style component. Awesome. So we managed to create three very simple code components all making super simple API calls, and now you can basically customize the alignment and the layout the way you wish. You can use this technique to apply for any external API out there. It doesn't have to be using UI names. It can be using UI faces, Dropbox, Unsplash, and so on. I hope you enjoyed this session. I'll see you in the next one. Thank you. (light music)


We're not around right now. But you can send us an email and we'll get back to you, asap.


©2021 RussellCoder

Log in with your credentials

Forgot your details?