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 MAIL@ZAPYARD.COM
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 MAIL@ZAPYARD.COM
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 MAIL@ZAPYARD.COM
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 MAIL@ZAPYARD.COM
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 MAIL@ZAPYARD.COM
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 MAIL@ZAPYARD.COM
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 MAIL@ZAPYARD.COM
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 MAIL@ZAPYARD.COM
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 MAIL@ZAPYARD.COM
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 MAIL@ZAPYARD.COM
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 MAIL@ZAPYARD.COM
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 MAIL@ZAPYARD.COM
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 MAIL@ZAPYARD.COM
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 MAIL@ZAPYARD.COM
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 MAIL@ZAPYARD.COM
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 MAIL@ZAPYARD.COM
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 mail@ZAPYard.com or
mailZAPYard@gmail.com.

ASSIGNMENT 1.2 ©https://zapyard.com/ P A G E | 17

WHATSPP +1-251-727-9273 MAIL@ZAPYARD.COM