WMS ID: #8641 - Build a Movies Watchlist Application updates for APEX…

… 23.2 (#116)

* Movies HOL 22.1 updates

Move Movies HOL 21.2 to 21.2 folder and update movies-lab folder to contain lab for APEX 22.1

* Update Movies HOL after feedback

Remove unused images and lab exports, removed Try It Out steps in Lab 1, added note in Lab 2 about Web Credential Name, removed index.html and manifest.json files from main folder.

* Updated index files and catalog file name

Replaced old index.html files in apex-212/movies-lab to have the new, correct content. Changed the TMDB_Catalog.sql name to all lowercase.

* Rename TMDB_Catalog.sql to tmdb_catalog.sql

* Updated OCW lab titles and added freetier

* Cleanup a couple of bugs in movies HOL

Removed line from Lab 1 that got left behind in last change. Fixed incorrect static value in Runtime facet.

* Fixes in Movies and Shopping Cart

Fix incorrect page number in Movies HOL and spelling mistake in Shopping Cart HOL.

* Quarterly QA Updates

Move 22.1 lab version to new folder, update lab to 22.2

* Movies Workshop 23.1 Updates

Updated movies-lab: changed version # to 23.1 and updated some screenshots and text. Added apex-222 folder and moved old workshop version there. Changed 22.2 version to use PAR links for .sql files.

* Update Movies SQL files

Remove files folder from each lab under movies-lab and replace file URLs with PAR link to download each application export

* Update Movies TMDB Catalog

Fix download URLs for TMDB Catalog to use PAR links

* Movies HOL 23.2 updates

Created new 23.1 folder for Movies HOL and updated movies-lab screenshots and labs for APEX 23.2

apex-231/movies-lab/1-create-app/create-app.md

@@ -0,0 +1,153 @@
+# Create the Application
+
+## Introduction
+
+You will get started by creating a skeleton application and you will add to it in each lab until you have built a full application that allows you to create and manage a personal list of movies you have watched or want to watch.
+
+You will also need to sign up for an account on The Movie Database and obtain an API Key. A TMDB API Key is required for this tutorial, as authentication is needed to get data from The Movie Database API.
+
+Estimated Lab Time: 10 minutes
+
+Watch the video below for a quick walk-through of the lab.
+[Create the Application](videohub:1_w4o026xl)
+
+### Objectives
+In this lab, you will:  
+- Create a new application.  
+- Edit the appearance and theme of your application.  
+- Run your application.  
+- Sign up for a TMDB API key.
+
+### Prerequisites
+- An Oracle APEX workspace
+
+## Task 1: Create the App
+
+1. If you have not already logged into your Oracle APEX workspace, sign in using the workspace name, email, and password you signed up with.
+
+    ![Oracle APEX workspace login page](images/apex-sign-in.png " ")
+
+2. At the top left of your workspace, click **App Builder**.
+
+    ![APEX workspace home page with highlighted App Builder button](images/workspace-home-edit.png " ")
+
+3. On the App Builder page, click the **Create** button.
+
+    ![App Builder page with highlighted Create button](images/app-builder-create.png " ")
+
+4. Click **New Application**.
+
+    ![Create an Application page with highlighted New Application button](images/new-application-edit.png " ")
+
+5. In the Create an Application wizard, set Name to **Movies Watchlist**.
+
+6. Open the Choose Application Icon dialog by clicking on the icon to the left of the Name field.
+
+    * Select the red color swatch (fifth from the left) and the smiley face icon.
+
+    * Click **Save Icon**.
+
+    ![Choose Application Icon dialog with the fifth color swatch and Smiley icon selected](images/choose-icon.png " ")
+
+7. In the Pages section of the Create Application wizard, click the **Edit** button next to Home.
+
+    ![Close-up of the Pages section of the Create an Application wizard](images/edit-home-page.png " ")
+
+    * In the dialog, set Page Name: **My Watchlist**
+
+    * Click the **Set Icon** button.
+
+        - In the Select Icon dialog, search for **film**.
+
+        - Click the film icon that has the play button in the middle.
+
+    * Click **Save Changes**.
+
+    ![Select icon dialog over top Add Blank Page dialog, with film icon selected](images/home-page-changes.png " ")
+
+8. Click **Create Application** to create your app and go to the application home page.
+
+    ![Highlighted Create Application button on Create an Application page](images/create-app.png " ")
+
+## Task 2: Run the App
+
+1. On your application home page, click **Run Application**.
+
+    ![Movies Watchlist app home with Run Application button highlighted](images/run-app.png " ")
+
+2. On the sign in page that opens in a new tab in your browser, enter your username and password that you used to sign in to your workspace.
+
+3. Click **Sign In**.
+
+    ![Movies Watchlist runtime application sign-in page](images/app-sign-in.png " ")
+
+## Task 3: Update the Theme of the App
+
+1. In the tab that your app is running in, there will be a grey toolbar at the bottom of the page. This is your development toolbar that allows you to edit regions in your application user interface (UI) directly in the tab it's running in.  
+*Note: If you do not see the grey developer toolbar, mouse over the bottom of your browser window to make it display. End users who log directly into the app will not see this toolbar.*
+
+2. In the dev toolbar, click on **Customize** and then click **Theme Roller**.
+
+    ![Close-up of developer toolbar in runtime application with the Customize menu open](images/dev-toolbar.png " ")
+
+3. Within the Theme Roller, you can modify many different aspects of the application UI. You will use it right now to update the color scheme.
+
+4. Under the **Theme** section, click on the Select Theme select box and choose **Vita - Dark**.
+
+4. Click on **Global Colors** to expand the section.
+
+    * Copy the HEX color code: **C74634**
+
+    * Click on the color swatch next to **Primary Accent** and paste the HEX code in the Hex text box.
+
+    ![Theme Roller dialog open with the Theme and Global Colors sections expanded and the color picker open](images/theme-roller.png " ")
+
+    * Click on the color swatch next to **Body Accent** and paste the HEX code **312D2A** in the Hex text box.
+
+    * The other color swatches automatically updated to variations of the Header Accent color.
+
+    * Click **Save As**.
+
+    * Style Name: **Movies - Dark**
+
+    * Click **Save**.
+
+    * Close the Theme Roller window.
+
+    ![Theme Roller Save As popup](images/save-theme.png " ")
+
+5. You have now updated the color scheme of your app.
+
+## Task 4: Sign up for a TMDB API Key
+
+1. Go to [The Movie Database (TMDB)](https://www.themoviedb.org/signup) to sign up for a free account.
+
+2. Once registered, follow the [Getting Started](https://developers.themoviedb.org/3/getting-started/introduction) instructions on TMDB Developer site. You will need to enter some of your app and contact information:
+
+    ![The Movie Database API key sign-up page](images/api-key-signup-edit.png " ")
+
+3. After you have received your API Key, copy it and store it somewhere where you will be able to easily access it.
+
+You now know how to create, run, and update the theme of an application. You may now **proceed to the next lab**.
+
+## Resources
+
+- [App Builder Concepts](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/application-builder-concepts.html)
+
+- [Universal Theme](https://apex.oracle.com/pls/apex/apex_pm/r/ut/getting-started)
+
+- [The Movie Database](https://www.themoviedb.org/)
+
+- [The Movie Database API](https://developers.themoviedb.org/3/getting-started/introduction)
+
+## Stuck? Download the Application Here
+Stuck on a step or struggling with the lab? You can download a copy of the Movies Watchlist application through Lab 1 and follow the instructions below to import it into your Oracle APEX workspace.  
+
+- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-1-231.sql) to download a copy of the app at the end of Lab 1.
+
+- You can import the app to your APEX workspace by clicking **Import** in the App Builder home page and following the wizard steps.
+
+## Acknowledgements
+
+- **Author** - Paige Hanssen
+- **Last Updated By/Date** - Paige Hanssen, May 2023

apex-231/movies-lab/2-creating-rest-sources/creating-rest-sources.md

@@ -0,0 +1,166 @@
+# Create REST Data Sources
+
+## Introduction
+This lab will walk you through how to create REST Data Sources that you will use to get movie data from The Movie Database API. You will use these REST sources in later labs to build out the movie search functionality. Make sure you have access to your API key that you signed up for at the end of the previous lab.
+
+Estimated Lab Time: 10 minutes
+
+Watch the video below for a quick walk-through of the lab.
+[Create REST Data Sources](videohub:1_czyj8k85)
+
+### Objectives
+In this lab, you will:  
+- Create REST data sources using a REST Catalog.  
+- Update the Web Credential needed for the REST sources.  
+
+### Prerequisites
+- Completion of workshop through Lab 1  
+- A TMDB API key  
+- The <a href="https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/tmdb_catalog.sql" download>TMDB REST Source Catalog</a>
+
+
+## Task 1: Import the REST Catalog
+You will use a REST Source Catalog that contains predefined services to create REST data sources. Using a REST Catalog will greatly simplify the process of creating REST sources to get data from TMDB API because all you will need to do is import the catalog, select the sources you want to use, and update the web credential associated with the sources.
+
+1. Download the TMDB REST Source Catalog by clicking <a href="https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/tmdb_catalog.sql" download>here</a>.
+
+2. In the App Builder tab in your browser, click **Export/Import** on the Movies Watchlist application home page.
+
+    ![Movies Watchlist application home with the Export/Import button highlighted](images/export-import.png " ")
+
+3. Click **Import**.
+
+    ![Export/Import page with the Import button highlighted](images/import.png " ")
+
+4. On the Import page:
+
+    * Drag and drop the **tmdb_catalog.sql** file you downloaded or click on the Drag and Drop region to open the file finder and select the catalog.
+
+    * Set File Type to **REST Source Catalog**.
+
+    * Click **Next**.
+
+    ![Import page showing step 4](images/import-file.png " ")
+
+5. When the file has been imported successfully, click **Next**.
+
+6. Enter **Movies** for the Catalog Group the catalog will be in.
+
+7. Click **Import REST Catalog**.
+
+    ![Import REST Catalog page showing steps 6 and 7](images/import-catalog.png " ")
+
+8. On the REST Source Catalogs page, you can see your new TMDB catalog that contains 4 Services in the Movies group.
+
+    ![REST Source Catalogs page showing one Catalog that contains four Services](images/rest-catalog-page.png " ")
+
+## Task 2: Create REST Data Sources
+Now that you have imported your REST Source Catalog, it will be very simple to create REST Data Sources using the services within the catalog.
+
+1. Return to the App Builder home by clicking **App Builder** in the APEX navigation bar.
+
+    ![REST Source Catalogs page header with the App Builder button highlighted](images/app-builder-button.png " ")
+
+2. Click on the **Movies Watchlist** application.
+
+3. Click **Shared Components** in the middle of your Movies Watchlist application home.
+
+    ![Movies Watchlist application home with the Shared Components button highlighted](images/shared-components.png " ")
+
+4. In the Data Sources section at the bottom of the page, click on **REST Data Sources**.
+
+    ![Shared Components page with the REST Data Sources item highlighted](images/sc-rest-sources.png " ")
+
+5. On the REST Data Sources page, click the **Create** button.
+
+    ![REST Data Sources page with Create button outlined](images/create-rds.png " ")
+
+    * Select **From a REST Source Catalog**.
+
+    * Click **Next**.
+
+    ![Create REST Data Source wizard Method step with From a REST Source Catalog selected](images/rds-method.png " ")
+
+6. On the Create REST Data Source - Catalog Services page, you can view the different services in the TMDB REST Catalog and choose which ones you want to create REST data sources from.
+
+    * From the list of services, click on **Popular Movies** to add it to the list of Selected Catalog Services.
+
+    * Select **Search Movies**, **Movie Details**, and **Movie Cast** to add each to the selected catalog services as well.
+
+    * Click **Next**.
+
+    ![Create REST Data Source wizard Catalog Services step with all services selected](images/rds-catalog-services.png " ")
+
+7. On the Create REST Data Source - Catalog Details page, click **Create REST Data Sources** to create your four sources and return to the REST Data Sources page.
+
+## Task 3: Update the Web Credential
+When you created the REST data sources from the REST Catalog, a new Web Credential was created in your workspace. This credential will allow you to make requests to the TMDB API. The final task to get your REST Data Sources to work will be updating your Web Credential to use your TMDB API key.
+
+1. In the APEX navigation bar, click the down arrow next to App Builder, select **Workspace Utilities** from the menu, and then choose **All Workspace Utilities** from the sub-menu.
+
+    ![REST Data Sources page with the App Builder APEX navigation item menu and Workspace Utilities submenu expanded](images/app-builder-menu.png " ")
+
+2. From the list of Workspace Utilities, select **Web Credentials**.
+
+    ![Workspace Utilities page with Web Credentials item highlighted](images/workspace-utilities.png " ")
+
+3. Click on **Credentials for Movie Cast**.  
+*Note: The Web Credentials name may instead match one of the other REST Data Sources you set up in Task 2.*
+
+4. On the Web Credentials edit page, set the following:
+
+    * Name: **Credentials for Movies**
+
+    * Static Identifier: **Credentials\_for\_Movies**
+
+    * Credential Name: **api\_key**
+
+    * Credential Secret: *Insert your unique API key here.*
+
+    * Valid for URLs: **https://api.themoviedb.org/3/**
+
+5. Click **Apply Changes** to save your Web Credential.
+
+    ![Edit Web Credentials page with attributes filled out with step 4 details](images/movies-credentials.png " ")
+
+6. Return to your Application home by clicking **App Builder** in the APEX navigation bar and selecting the **Movies Watchlist** application.
+
+You now know how to create REST data sources from a REST Catalog in Oracle APEX and will be able to get data from The Movie Database to use for your application. You may now **proceed to the next lab**.
+
+## Resources
+
+- [REST Data Sources Documentation](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/managing-REST-data-sources.html)  
+
+- [REST Data Sources Video](https://www.youtube.com/watch?v=ctCwvD1qavs)  
+
+## Stuck? Download the Application Here
+Stuck on a step or struggling with the lab? You can download a copy of the Movies Watchlist application through Lab 2 and follow the instructions below to import it into your Oracle APEX workspace.
+
+- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-2-231.sql) to download a copy of the app at the end of Lab 2.
+
+- You can import the app to your APEX workspace by clicking **Import** in the App Builder home page and following the wizard steps.
+
+- You will be prompted for the Credentials for Movies web credential that was set up in this lab. You can see in the screenshot below that Credentials for Movies does not already exist in your workspace.  
+
+    ![APEX Install Application page with Web Credentials table without any Client ID or Client Secret values for Credentials for Movies](images/blank-credentials.png " ")  
+
+- Within the Credentials for Movies row:
+
+    - In the Client ID or Username column, enter **api\_key**.
+
+    - In the Client Secret or Password column, paste your unique API key that you got from The Movie Database.
+
+    - In the Verify Client Secret/Password column, past your API key again.
+
+        ![APEX Install Application page with Web Credentials table containing Client ID and Client Secret for Credentials for Movies](images/complete-credentials.png " ")
+
+- Click **Next**.
+
+- Make sure Install Supporting Objects is **on** and click **Next** again.
+
+- Click **Install** to install the supporting objects and finish importing the application.
+
+## Acknowledgements
+
+- **Author** - Paige Hanssen
+- **Last Updated By/Date** - Paige Hanssen, May 2023