Learn full-stack web development using fastn in a week

Content Planning

Script 1

Basics of http and Data modelling

Hi Guys, welcome to the video. In this video I will help you understand how using fastn, REST APIs can seamlessly connect the backend with the frontend.

fastn has its own http processor which we will use to get the data and use the concepts of data modelling to store the data in form of records. Then we will display the data in a tabular form.

Let's start by creating a fastn package.

I like to repeat this line in my videos that a fastn package essentially needs two documents.

One is FASTN.ftd, and remember FASTN here is in upper case.
The second is, index.ftd

In FASTN.ftd document we import fastn.

-- import: fastn

Lang:

ftd

After a line space, we use a package variable of fastn and assign a package name to it.

-- fastn.package: country-details

Lang:

ftd

In this example, we are going to fetch a JSON data from this URL:

https://famous-loincloth-ox.cyclic.app/

This JSON data is in the form of array list, and each data has two fields, one is the name of the country and another is the capital.

We are going to call this data through http processor and save each data as a record. Since this is a list of data so we will use for loop to display the data.

In the index.ftd, let's declare a record. These are also called struct in some languages. record is used to create a custom structured data type with named fields and specified data types for each field.

-- record country-data:
string name:
string capital:

Lang:

ftd

Now, to use the http processor first we will import fastn/processors which is a library provided by fastn and we will give an alias as pr

-- import: fastn/processors as pr

Lang:

ftd

Since the JSON data is a list of records, therefore, we will create a list and use the country-data record as the type.

-- country-data list countries:

Lang:

ftd

Now, we will use http processor to fetch the data from the URL I mentioned earlier. So we will pass the URL.

-- country-data list countries:
$processor$: pr.http
url: https://famous-loincloth-ox.cyclic.app/

Lang:

ftd

Now, we want to display. To do that let's create a component called country-detail.

Create component country-detail

-- component country-detail:


-- end: country-detail

Lang:

ftd

This component will have a property country. We will mark it as caption to make easy for users of this component.

-- component country-detail:
caption country-data country:  

-- end: country-detail

Lang:

ftd

Let's show the country name.

-- component country-detail:
caption country-data country:  

-- ftd.text: $country-detail.country.name  

-- end: country-detail

Lang:

ftd

Now, we can call the component and use a for loop to display the data.

-- country-detail: $country
for: $country in $countries

Lang:

ftd

There you go, we have displayed the list of the names of the countries that are there in the JSON data.

Now wrap the two texts for country name and capital in row container.

-- ftd.row:
width.fixed.percent: 20

-- ftd.text: $country-detail.country.name

-- ftd.text: $country-detail.country.capital

-- end: ftd.row

Lang:

ftd

So you have successfully fetched and displayed the values of JSON data from the external website using the http processor and one of the data modelling type, record.

But I promised that we will display this data in tabular form. So, for that we will use various fastn properties and display the data in a table.

-- ftd.column:
width: fill-container
padding.px: 40
align-content: center

-- ftd.row:
width.fixed.percent: 40
role: $inherited.types.copy-regular
border-bottom-width.px: 1
background.solid: $inherited.colors.background.base

-- ftd.text: Country
style: bold
width.fixed.percent: 50
border-style-horizontal: dashed
padding-left.px: 10
border-width.px: 1

-- ftd.text: Capital
style: bold
width.fixed.percent: 50
border-style-horizontal: dashed
padding-left.px: 10
border-width.px: 1

-- end: ftd.row

-- end: ftd.column

Lang:

ftd

-- ftd.row:
width.fixed.percent: 40
role: $inherited.types.copy-regular

-- ftd.text: $country-detail.country.name
width.fixed.percent: 50
border-width.px: 1
border-style-horizontal: dashed
padding-left.px: 10

-- ftd.text: $country-detail.country.capital
width.fixed.percent: 50
border-width.px: 1
border-style-horizontal: dashed
padding-left.px: 10

-- end: ftd.row

Lang:

ftd

There you go, we have the data in the tabular form.

Closing remarks

I hope you have learnt with me and found this video easy to follow.

Join us on Discord, and share your package which you will create following this video. You can share it on the discord's show-and-tell channel.

Thank you guys, keep watching these videos to learn more about fastn. Checkout the fastn website.

Support us by clicking on this link and give us a star ⭐ on GitHub and join our fastn community on Discord.