Scribd Logo
Upload

Welcome to Scribd!

  • 179 views

    Create Your First: Appgyver Project

    Uploaded by

    cvalent

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Create Your First: Appgyver Project

    Uploaded by

    cvalent
    179 views18 pages

    Original Title

    1652150386403

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    179 views18 pages

    Create Your First: Appgyver Project

    Uploaded by

    cvalent

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 18

    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]

    You might also like