http
processor and data modelling
🚧In this part, we will delve into concepts like http
processor and data modelling
using a simple example.
[
{
"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é"
}
]
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.
fastn package
.fastn
package?fastn
package is a folder that requires atleast two files
http
processor does the network communication using REST API and fetches data
from the external site in a different domain.
http
processor is as follows:-- import: fastn/processors as pr
-- record r:
$processor$: pr.http
record
For this example, we will use record
feature of fastn
's. record
can be
used to create a user defined data type.
country-data
.country-record
-- record country-data:
string name:
string capital:
fastn/processors
index.ftd
document-- import: fastn/processors as pr
record
country-data
record-- record country-data:
string name:
string capital:
country-data
record as the type.countries
is a list
of country-data
-- country-data list countries:
$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/
url
and stored it in countries
,
we want to show it to user. To do that let's create a component called
country-detail
.country-detail
-- component country-detail:
-- end: country-detail
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
-- component country-detail:
caption country-data country:
-- ftd.text: $country-detail.country.name
-- end: country-detail
for
loop.-- country-detail: $country
for: $country in $countries
row
container-- ftd.row:
width.fixed.percent: 20
-- ftd.text: $country-detail.country.name
-- ftd.text: $country-detail.country.capital
-- end: ftd.row
http
processor and one of the data modelling type,
record
.fastn
properties to improve the UI to display the data,
let's say in the form of a table.-- 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