Basics of `http` processor and `data modelling` 🚧
In this part, we will delve into concepts like `http` processor and `data
modelling` using a simple example.
We have created an array of records for group of countries. Each record has two
key attributes: **name** and **capital**, in the form of JSON data.
The JSON data looks like this:
[
{
"name": "India",
"capital": "New Delhi"
},
{
"name": "Sri Lanka",
"capital": "Sri Jayawardenepura Kotte"
},
{
"name": "Nepal",
"capital": "Kathmandu"
},
{
"name": "Bangladesh",
"capital": "Dhaka"
},
{
"name": "Indonesia",
"capital": "Jakarta"
},
{
"name": "Maldives",
"capital": "Malé"
}
]
Lang:
json
We will call this data through `http processor`, save the data as a `record` by
using `for loop` and display it in a tabular form.
By the end of this part, you will have gained insights into how using `fastn`,
REST APIs can seemlessly connect the backend with the frontend.
The first step is to create a `fastn package`.
ℹ️
What is `fastn` package?
`fastn` package is a folder that requires atleast two files
- FASTN.ftd
- index.ftd
http processor
`http` processor does the network communication using REST API and fetches data
from the external site in a different domain.
The syntax of using `http` processor is as follows:
-- import: fastn/processors as pr
-- record r:
$processor$: pr.http
Lang:
ftd
Data modelling: `record`
For this example, we will use `record` feature of `fastn`'s. `record` can be
used to create a user defined data type.
Here we are creating a new record called `country-data`.
Declaring the `country-record`
-- record country-data:
string name:
string capital:
Lang:
ftd
Start building
Let's implement the theory and build the project.
**Step 1:** Import `fastn/processors`
Copy the import line and paste it at the top of the `index.ftd` document
Import Processors
-- import: fastn/processors as pr
Lang:
ftd
**Step 2:** Declare a `record`
Before a record can be used it must be declared.
Declaring `country-data` record
-- record country-data:
string name:
string capital:
Lang:
ftd
**Step 3:** Create a list
Since the JSON data has a list of countries and their respective capitals,
therefore, we will create a list and use the `country-data` record as the type.
`countries` is a `list` of `country-data`
-- country-data list countries:
Lang:
ftd
`$processor$: pr.http` will initialise `countries` with the data returned
by the `url`.
-- country-data list countries:
$processor$: pr.http
url: https://famous-loincloth-ox.cyclic.app/
Lang:
ftd
**Step 4:** Data is ready, lets show it in the UI
Now that we have download the data from the `url` and stored it in `countries`,
we want to show it to user. 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
Till now, we have just defined the component but to display the list of country
names we need call the component. Therefore, after closing the component we
can call the component and use a `for` loop.
-- country-detail: $country
for: $country in $countries
Lang:
ftd
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`.
Improved UI
You can use various `fastn` properties to improve the UI to display the data,
let's say in the form of a table.
properties added
-- import: fastn/processors as pr
-- ftd.column:
width: fill-container
padding.px: 40
align-content: center
-- ftd.row:
width.fixed.percent: 30
-- ftd.text: Country
role: $inherited.types.copy-regular
style: bold
border-bottom-width.px: 1
width.fixed.percent: 40
border-width.px: 1
border-style-horizontal: dashed
padding-left.px: 10
background.solid: $inherited.colors.background.base
-- ftd.text: Capital
role: $inherited.types.copy-regular
style: bold
padding-left.px: 10
border-bottom-width.px: 1
width.fixed.percent: 40
border-width.px: 1
border-style-horizontal: dashed
background.solid: $inherited.colors.background.base
-- end: ftd.row
-- country-detail: $country
for: $country in $countries
-- end: ftd.column
-- record country-data:
string name:
string capital:
-- country-data list countries:
$processor$: pr.http
url: https://famous-loincloth-ox.cyclic.app/
-- component country-detail:
caption country-data country:
-- ftd.row:
width.fixed.percent: 30
-- ftd.text: $country-detail.country.name
role: $inherited.types.copy-regular
width.fixed.percent: 40
border-width.px: 1
border-style-horizontal: dashed
padding-left.px: 10
-- ftd.text: $country-detail.country.capital
role: $inherited.types.copy-regular
padding-left.px: 10
width.fixed.percent: 40
border-width.px: 1
border-style-horizontal: dashed
-- end: ftd.row
-- end: country-detail
Lang:
ftd
