This guide provides step-by-step instructions to deploy the
project. The deployment will be on Heroku using
the fastn buildpack.
We are going to create a project in
fastn that will create a Dynamic UI to
display the countries along with their Population, Region and Capital among
VIDEO 0: Walkthrough, showcasing final UI;; Walkthrough video will come after we have created the entire project.
Before that, let's take another example where the json data will only have country-name and capital.VIDEO 1: Basics of http and Data modelling though an example
-- import: fastn/processors as pr -- country-detail: $country for: $country in $countries -- 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: 20 -- ftd.text: $country-detail.country.name role: $inherited.types.copy-regular style: bold width.fixed.percent: 50 -- ftd.text: $country-detail.country.capital role: $inherited.types.copy-regular -- end: ftd.row -- end: country-detail
VIDEO 2: explanation of nested model system and fetching and displaying the data that is needed for the index page that will have country list
models.ftd to do all the data modelling
card.ftd document that will have the UI component that will display
the countries and its data in form of a card.
index.ftdwe will do
http-processorand call the UI component and apply
VIDEO 3: focuses on country details page
Firstly, we will move the header part in a separate document
details.ftd document that will define 2 string variables
cca2string will store the value through the request-data processor
urlstring will use the function that appends value of
cca2to the base url.
utility.ftd to write the functions
country-detailsdocument under the
componentsfolder that will have all the components required to display the data in the country details page