Skip to main content Link Menu Expand (external link) Document Search Copy Copied
Modernize applications to be AI ready

Task 05 - Run the containerized app and add a booking

Introduction

You created a Docker container and pushed the container to ACR in previous tasks. Now, you’ll run the container and view the app in a browser. Since this is the first time you are running the app, you’ll need to run a process to create the database schema and populate the tables with data.

Now, you can view the various pages for the app and try out the features.

Description

In this task, you’ll run the Docker app container and then display the setup page for the app. You’ll create the database schema and populate the tables with data. You’ll review common app pages and add a booking record. Finally, you’ll search for the record you just added to verify that the record was successfully added to the database.

The key steps are as follows:

  1. Run the Docker container on port 8000.
  2. Open the app at http://localhost:8000/setup.
  3. Run the setup process in the app to add records to the database.
  4. Review the app pages.

  5. Add the following booking record:

    Field Value
    Hotel Contoso Suites Athens
    Visitor Emma Davis
    Check-in 12/28/2024
    Check-out 01/05/2025
    Adults 2
    Rooms 1
  6. Verify that the new record is saved and close the browser window.

Success Criteria

  • You can view the app in a web browser.
  • You can add a booking record to the app and verify that the record is saved and is searchable.

Learning Resources

Manage container images in Azure Container Registry

Solution

Expand this section to view the solution

  1. Replace the ENTER_CONNECTION_STRING_FROM_EX02_TASK04 placeholder text in the following command with the connection string you recorded in the previous task. Enter the command at the Visual Studio Code Terminal window prompt and then select Enter. This command starts the containerized app.

     docker run -p 8000:8000 -e POSTGRES_CONNECTION_STRING="ENTER_CONNECTION_STRING_FROM_EX02_TASK04;" pycontosohotel:v1.0.0

    ixlyml4r.png

    You may minimize Visual Studio Code but don’t close the Visual Studio Code Terminal window at this time.

  2. Open a web browser and go to http://localhost:8000/setup. The Contoso Hotel Setup page displays.

    1ri1l25o.png

  3. On the Contoso Hotel Setup page, select Setup database. This launches a script that creates the database schema and populates the tables with data.

    The page updates when the script completes.

    yfke4jk3.png

  4. On the Contoso Hotel Setup page, select Home. The Home page for the app displays.

  5. On the Home page, select the calendar icon to go to the Bookings page.

    bzl5gq1d.png

  6. On the Bookings page, select New Booking.

    cbrvrolp.png

  7. Enter the following information into the page and then select Add Booking. The page will update to show you that the booking is successfully created.

    Field Value
    Hotel Contoso Suites Athens
    Visitor Emma Davis
    Check-in 12/28/2024
    Check-out 01/05/2025
    Adults 2
    Rooms 1

    The Visitor field doesn’t search properly. Type in the letter ‘a’ into the field and select a name from the dropdown list.

    izps11yx.jpg

    1i44bvk4.png

  8. On the Bookings page, select List Bookings.

  9. Enter Emma Davis, or whichever Visitor you selected, in the Search field. The booking that you created should appear in the list of bookings.

    7b7dy1c7.png

  10. Close the browser window.

  11. In Visual Studio Code, select Ctrl+C from the Terminal pane to exit the running worker processes.

  12. Leave Visual Studio Code open. You’ll use the tool again in the next exercise.