Tutorial: Integrate your App with APIs
Download and Import the Weather App
Direct link to topic in this publication:
Download the Base App
The Weather app is used to display the weather data for a city based on user inputs.
Download the base app from here. You will be updating this app to create a Neutrinos Modelr flow and integrate with the API provider.
Import the App to Studio
- Open Neutrinos Studio.
- Click
on the Studio home page, and select the downloaded base app (weather app) from your local machine. - The app gets imported to the Studio.
|
This app is built on Neutrinos Studio version 6.0.3. If you are using a later version of Neutrinos Studio, migrate the app to the latest version by clicking on the app card. After migrating the app, follow manual migration steps (if any) mentioned in the Migration guide.
|
Explore the App
Click the app to open its Application page and explore the existing elements.
Pages
Click the Pages option on the Studio Application page to see the app pages.

The app will display the following pages:
- weathercard: This page is used to create a weather card that shows the weather information returned from the Openmapweather API provider.

- weathersearch: This page provides the UI for the user to input the city name for which the weather details have to be fetched. Also, notice that the weathercard view is added to the weathersearch page. See Reuse Pages using Views for more details.

- log: This page is used to log the success and failure of the API call while fetching the weather data.

Styles
Click the Styles option on the Studio Application page to view the app styling. The following CSS styling is set for the app pages and its components:
|
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css"; @import "nDefaults.scss"; body { padding: 5px; } * { box-sizing: border-box; font-family: Roboto,"Helvetica Neue",sans-serif; }
mat-grid-tile { background: #b9c6d8; border-radius: 4px; }
.weathers { padding: 0 5px; }
.weather-card { border: 2px solid rgba(0, 0, 0, 0.12); border-radius: 15px; width: 500px; }
mat-card-title { font-weight: bold; }
.get-weather-button { color: white !important; background: #343438 !important; }
|
Data Model
Click the Models option on the Studio Application page to view the data models.
The logobject data model is created as follows. This data model determines the logical structure of the logged data.

Routes
Click the Routes tab to view the app navigation. On deployment, routes enable navigation from one page to another as a user performs various tasks using the application.
