Assignment 1.
Create your first AppGyver
Project – My Weather App
Create Rapid App Development Using AppGyver & Mendix - Training
Steps to create your first Appgyver project
1. Click on the Create New button
2. Enter the project name and click on Create
You would be landed to the development IDE page
ASSIGNMENT 1.2 ©https://zapyard.com/ P A G E |1
WHATSPP +1-251-727-9273
[email protected] Create Rapid App Development Using AppGyver & Mendix - Training
You can see the name of the project on the left top corner and
automatically one default page would be created named an
Empty Page.
You can see different Core UI controls in the left-hand section.
You can drag and drop any UI control to the work area to build
your design.
ASSIGNMENT 1.2 ©https://zapyard.com/ P A G E |2
WHATSPP +1-251-727-9273
[email protected] Create Rapid App Development Using AppGyver & Mendix - Training
In the middle top section, you will find 6 different options to
manage your entire project from build to deployment.
3. We are going to use a Free Weather Forecast API. Go to the
below link and create a Basic Free account.
https://rapidapi.com/community/api/open-weather-map/
ASSIGNMENT 1.2 ©https://zapyard.com/ P A G E |3
WHATSPP +1-251-727-9273
[email protected] Create Rapid App Development Using AppGyver & Mendix - Training
You can find the different APIs to fetch weather forecast data for a
certain location.
4. Now, click on the DATA to connect to a REST API or OData
service.
Click on Add Data Resource
4. Select REST API direct integration
ASSIGNMENT 1.2 ©https://zapyard.com/ P A G E |4
WHATSPP +1-251-727-9273
[email protected] Create Rapid App Development Using AppGyver & Mendix - Training
5. Fill the below information
o Resource Id: Resource1
o Short Description: Display Weather Forecast
o Resource URL: https://weatherapi-
com.p.rapidapi.com
And click on SAVE
Now let’s add an HTTP Header. Click on the + button.
ASSIGNMENT 1.2 ©https://zapyard.com/ P A G E |5
WHATSPP +1-251-727-9273
[email protected] Create Rapid App Development Using AppGyver & Mendix - Training
Add the below two key value.
Key: X-RapidAPI-Key
Value: c72aba9bafmsh537e18e83393e74p188a0ajsnXXXXXXXXX
Key: X-RapidAPI-Host
Value: weatherapi-com.p.rapidapi.com
6. Go the GET collection section
ASSIGNMENT 1.2 ©https://zapyard.com/ P A G E |6
WHATSPP +1-251-727-9273
[email protected] Create Rapid App Development Using AppGyver & Mendix - Training
Enter the Relative Path: /forecast.json
And, Response Key Path: forecast.forecastday
7. Add the below Query parameters
8. Click on the TEST option
Click on RUN TEST
ASSIGNMENT 1.2 ©https://zapyard.com/ P A G E |7
WHATSPP +1-251-727-9273
[email protected] Create Rapid App Development Using AppGyver & Mendix - Training
You can find the status as OK
9. Click on the SET SCHEMA FROM RESPONSE
Your all response data got stored into the schema. Click on
SAVE.
ASSIGNMENT 1.2 ©https://zapyard.com/ P A G E |8
WHATSPP +1-251-727-9273
[email protected] Create Rapid App Development Using AppGyver & Mendix - Training
10. Now go to the Design section; Click on DATA to come back
to the design section.
You can select the “Headline”, you can see on the right-hand
section you can modify the text or you can delete it.
Modify the text to “Weather Report” and remove the below
paragraph.
ASSIGNMENT 1.2 ©https://zapyard.com/ P A G E |9
WHATSPP +1-251-727-9273
[email protected] Create Rapid App Development Using AppGyver & Mendix - Training
12. Add a Large Image List Item from the left-hand side of the
design.
13. Now go to the variables section
ASSIGNMENT 1.2 ©https://zapyard.com/ P A G E | 10
WHATSPP +1-251-727-9273
[email protected] Create Rapid App Development Using AppGyver & Mendix - Training
Go to the Data Variables; Add the Variable
Go back to the View and, select the List item and then on the
right-hand section, scroll down you will find something like
“Repeat with”, Click on the icon.
Select Data & Variables
ASSIGNMENT 1.2 ©https://zapyard.com/ P A G E | 11
WHATSPP +1-251-727-9273
[email protected] Create Rapid App Development Using AppGyver & Mendix - Training
Select Data Variable
ASSIGNMENT 1.2 ©https://zapyard.com/ P A G E | 12
WHATSPP +1-251-727-9273
[email protected] Create Rapid App Development Using AppGyver & Mendix - Training
Select the Data Variable and Save.
You can see the multiple items are appearing on the screen.
Now, let’s bind the Title and subtitle. Click on the Title
ASSIGNMENT 1.2 ©https://zapyard.com/ P A G E | 13
WHATSPP +1-251-727-9273
[email protected] Create Rapid App Development Using AppGyver & Mendix - Training
The select the icon
Then, select Data item in Repeat.
Select the Date field and Save.
ASSIGNMENT 1.2 ©https://zapyard.com/ P A G E | 14
WHATSPP +1-251-727-9273
[email protected] Create Rapid App Development Using AppGyver & Mendix - Training
Then bind the subtitle as below and save.
ASSIGNMENT 1.2 ©https://zapyard.com/ P A G E | 15
WHATSPP +1-251-727-9273
[email protected] Create Rapid App Development Using AppGyver & Mendix - Training
Now you can see the data came to the screen, but all are same
data. No worries. Let’s LAUNCH the app.
Click on the LAUNCH Icon.
Click on Web App Preview
ASSIGNMENT 1.2 ©https://zapyard.com/ P A G E | 16
WHATSPP +1-251-727-9273
[email protected] Create Rapid App Development Using AppGyver & Mendix - Training
Here is your output.
Training Starts on 14th May 2022.
Enrollment Link - https://www.zapyard.com/course-fee-loyalty/
Day Wise Break Up - https://tinyurl.com/3vnf3wak
For more details, WhatsApp us at +1-251-727-9273 or email us at
[email protected] or
[email protected].
ASSIGNMENT 1.2 ©https://zapyard.com/ P A G E | 17
WHATSPP +1-251-727-9273
[email protected]
