wms 11628: Updated manifest to include steps for a.o.com

nyc-genai-lab-mike/0-intro/0-intro.md

@@ -0,0 +1,93 @@
+# Introduction
+
+## About this Workshop
+From precisely summarizing intricate data to crafting context-aware responses, Generative AI stands at the forefront of a technological shift, promising to redefine how we navigate and leverage knowledge in our day-to-day interactions. With the introduction of AI assisted development in Oracle APEX, enabling your applications with generative AI capabilities has never been easier.
+
+In this workshop, you learn to bring generative AI capabilities based on large language models (LLMs) to your applications built using Oracle APEX, your favourite low-code platform. The Generative AI service can be accessed through REST APIs, and by using the powerful REST Data Source capabilities of APEX, you can effortlessly incorporate this advanced technology into your applications with a low-code approach.
+
+<!-- ## What is OCI Generative AI service?
+
+[Oracle Cloud Infrastructure Generative AI](https://www.oracle.com/artificial-intelligence/generative-ai/large-language-models/) is a fully managed service that provides a set of state-of-the-art, customizable large language models (LLMs) that cover a wide range of use cases for text generation. Generative AI currently supports the following pre-trained foundational models available from Meta and Cohere:
+
+- Llama 2
+- Command
+- Summarize
+- Embed
+
+You can read more about these models from the [documentation](https://docs.oracle.com/en-us/iaas/Content/generative-ai/pretrained-models.htm). -->
+
+This workshop will guide you through the process of utilizing the generation models within the Generative AI Service to develop an "Ask Questions" feature for the New York High Schools APEX application. This functionality empowers parents to inquire about school facilities, policies, and more, aiding them in making an informed decision about whether a specific school is the ideal fit for their child.
+
+Estimated Time: 60 minutes
+
+### **Objectives**
+
+* Implement Faceted Search for Cards and Map Regions to filter and search for the best school.
+* Build a conversational chatbot using Generative AI to ask questions about a school.
+* Generate Email using Generative AI to apply to a school.
+
+*Note: This workshop assumes you are using Oracle APEX 24.1.2*
+
+## Prerequisites
+- A paid Oracle Cloud Infrastructure (OCI) account or a FREE Oracle Cloud account with $300 credits for 30 days to use on other services. Read more about it at: [oracle.com/cloud/free/](https://www.oracle.com/cloud/free/). The OCI account must be created in one of the regions that supports OCI Generative AI Service. Currently, OCI Generative AI Service is supported in the following regions:
+    - US Midwest (Chicago)
+    - Germany Central (Frankfurt)
+    - UK South (London)
+
+- This workshop makes use of OCI Generative AI Service. OCI Generative AI service is available in limited regions. To see if your cloud region supports OCI Generative AI service, visit the [documentation](https://docs.oracle.com/en-us/iaas/Content/generative-ai/overview.htm#regions).
+
+- An OCI compartment. An Oracle Cloud account comes with two pre-configured compartments - The tenancy (root compartment) and ManagedCompartmentForPaaS (created by Oracle for Oracle Platform services).
+
+- The logged-in user should have the necessary privileges to create and manage Autonomous Database instances in this compartment. You can configure these privileges via an OCI IAM Policy. If you are using a Free Tier account, it is likely that you already have all the necessary privileges.
+
+- An APEX 24.1.2 workspace. We recommend that you sign up for a workspace on [apex.oracle.com](https://apex.oracle.com). Refer to the [Get Started: Option 3](?lab=1-sign-up-apex#Option3:apexoraclecom) lab to sign up for a new workspace.
+
+*Note: This workshop assumes you are using Oracle APEX 24.1.2. Some of the features might not be available in prior releases and the instructions, flow, and screenshots might differ if you use an older version of Oracle APEX.*
+
+## Labs
+
+| Module | Est. Time |
+| --- | --- |
+| [Creating an APEX application](?lab=1-create-app) | 5 minutes |
+| [Visualize Schools on a Map](?lab=2-schools-on-map) | 10 minutes |
+| [Configure the OCI API Keys](?lab=3-configure-oci) | 10 minutes |
+| [Build a Conversational Inquiry using Generative AI](?lab=4-using-genai) | 20 minutes |
+| [Generate Email to Apply to a School](?lab=5-apply-to-school) | 15 minutes |
+| [Run the Application](?lab=6-run-app) | 5 minutes |
+
+Total estimated time: 60 minutes
+
+### **Let's Get Started!**
+
+If the menu is not displayed, you can open by clicking the menu button (![Menu icon](./images/menu-button.png)) at the upper-left corner of the page.
+
+## Downloads
+
+If you are stuck or the app is not working as expected, you can download and install the completed app as follows:
+1. [Click here](https://c4u04.objectstorage.us-ashburn-1.oci.customer-oci.com/p/EcTjWk2IuZPZeNnD_fYMcgUhdNDIDA6rt9gaFj_WZMiL7VvxPBNMY60837hu5hga/n/c4u04/b/livelabsfiles/o/labfiles/nyc-gen-ai-app.zip) to download the completed application zip file.
+2. Import the **labfiles_nyc-gen-ai-app.zip** file into your workspace. To import the app, go to **App Builder > Import**.
+3. Follow the steps in the Install Application wizard to install the app along with the Supporting Objects.
+3. Once the application is installed, navigate to **App Builder > Workspace Utilities > Web Credentials**. 
+4. Edit the **apex\_ai\_cred** details to match with your OCI API Key. Refer to the lab: [Configure the OCI API Keys](?lab=3-configure-oci) to create an OCI API Key. 
+     ![Web Credentials page](images/edit-web-cred.png " ")
+5. Navigate to **App Builder > Workspace Utilities > Generative AI**. Edit the **OCI Gen AI** service. 
+    - Enter the **Compartment ID**. Refer to the [Documentation](https://docs.oracle.com/en-us/iaas/Content/GSG/Tasks/contactingsupport_topic-Locating_Oracle_Cloud_Infrastructure_IDs.htm#:~:text=Finding%20the%20OCID%20of%20a,displayed%20next%20to%20each%20compartment.) to fetch your Compartment ID. If you have only one compartment, then use the OCID from the configuration file you saved while creating your OCI API Key.
+    - For Credential, select **apex\_ai\_cred**.
+    - Click **Apply Changes**.
+    ![Generative AI page](images/edit-oci-genai.png " ")
+6. All set. Now, run the application and see it in action! Follow the lab: [Run the Application](?lab=6-run-app) to run the app.
+
+
+## Learn More - *Useful Links*
+
+- [OCI Generative AI](https://www.oracle.com/artificial-intelligence/generative-ai/large-language-models/)
+- [APEX on Autonomous](https://apex.oracle.com/autonomous)
+- [APEX Collateral](https://www.oracle.com/database/technologies/appdev/apex/collateral.html)
+- [Tutorials](https://apex.oracle.com/en/learn/tutorials)
+- [Community](https://apex.oracle.com/community)
+- [External Site + Slack](http://apex.world)
+
+## Acknowledgements
+
+ - **Authors** - Toufiq Mohammed, Senior Product Manager; Apoorva Srinivas, Senior Product Manager
+ - **Last Updated By/Date** - Apoorva Srinivas, Senior Product Manager, July 2024

nyc-genai-lab-mike/1-create-app/1-create-app.md

@@ -0,0 +1,288 @@
+# Create an APEX Application
+
+## Introduction
+In this lab, you learn to create an APEX application by importing data from a spreadsheet. APEX can build an app directly from a table that is created using a spreadsheet. Later, you learn to modify the pages and the theme of the application.
+
+**Note:** The screenshots in this workshop are taken using Dark Mode in APEX 24.1
+
+Estimated Time: 5 minutes
+
+<!-- Watch the video below for a quick walk-through of the lab.
+[Create an APEX App](videohub:1_a6bi2e62) -->
+
+### Objectives
+
+In this lab, you will:
+- Create a new APEX application
+- Configure a Cards region
+- Customize the application theme using Theme Roller
+
+### Prerequisites
+
+- An Oracle APEX workspace
+
+## Task 1: Load the Highschool Data 
+
+1.  From your APEX workspace home page, click **App Builder**.
+2.  Click **Create a New App**.
+
+    ![Image showing Create a New App option](images/new-app.png " ")
+
+3.  Click **Create App from a File**.
+
+    ![Image showing the various options to create an application](images/from-a-file.png " ")
+
+    When creating an application from a file, APEX allows you to upload CSV, XLSX, XML, or JSON files and then build apps based on their data. Alternatively, you can also copy and paste CSV data or load sample data.
+
+4.  Within the Load Data wizard, click the **Choose File** option or drag and drop the [nyc\_high\_schools.xlsx](files/nyc_high_schools.xlsx) file on to the dialog window.
+
+    ![Image showing a wizard to upload a file](images/drag-and-drop.png " ")
+
+5.  Review the parsed data. Set Table Name to **HIGHSCHOOLS** and click **Load Data**. Note: You can configure what columns to load from the spreadsheet by clicking the **Configure** button.
+
+    ![Image showing the Load Data wizard](images/new-table-name.png " ")
+
+    After clicking **Load Data**, you will see a spinner until the wizard finishes loading the data. Continue to Task 2 at that point.
+
+## Task 2: Create an Application
+
+The Data Load wizard has created a new table and populated that table with the records from the sample data. Now you can create an app based on this new table.
+
+1.  In the Load Data dialog, verify that 427 rows have been loaded into the **HIGHSCHOOLS** table, then click **Create Application**.
+
+    ![Image showing the success message of Load Data and options to View Table or Create Application](images/create-app-table.png " ")
+
+2. On the Create Application page, click the application icon.
+   ![Image showing the Create Application Page](images/app-thumbnail.png " ")
+
+3. In the Choose Application Icon wizard, upload your own icon by selecting or dragging and dropping an image. Download a sample icon from [here](images/ai-highschools.png).
+  ![Image showing the Choose Application Icon wizard](images/upload-icon.png " ")
+
+4. Once you select an image, the wizard allows you to crop or resize the image. Click **Save Icon**.
+    ![Image showing an icon editor in Choose Application Icon wizard](images/crop-and-save.png " ")
+
+5. In the Create Application page, review the pages listed by default.
+
+  Click the **Edit** button for **Highschools Search** and update the following:
+    - Page Name: **Search and Apply** 
+    - For Page Type, choose **Cards** toggle button.
+
+    ![Edit App page](images/app-edit.png " ")
+    ![Edit Page wizard](images/edit-page-name.png " ")
+
+6.  For the Cards properties, select the following:
+    - Title Column: **SCHOOL_NAME**
+    - Body Column: **NEIGHBORHOOD**
+    - Expand Advanced section and check the **Set as Home Page** box
+
+    Click **Save Changes**.
+    ![Edit Page wizard](images/cards-columns.png " ")
+
+
+7. Next, we delete the pages that we no longer need. Click **Edit** next to the Home page.
+    ![Edit Page wizard](images/edit-home.png " ")
+
+8. Click **Delete**. In the dialog 'Would you like to perform this delete action?', select **OK**.
+    ![Delete Page wizard](images/delete-home.png " ")
+
+    ![Confirm Delete dialog](images/confirm-delete.png " ")
+
+9. Repeat Steps 7 and 8 to delete the **Highschools Report** page.
+    ![Delete page wizard](images/delete-report.png " ")
+
+10. Repeat Steps 7 and 8 to delete the **Dashboard** page.
+    ![Delete page wizard](images/delete-dashboard.png " ")
+
+10. In the Create Application wizard, under Features, check the following checkboxes:
+    - **Install Progressive Web App**
+    - **Push Notifications** 
+
+    Click **Create Application**. 
+
+    ![Image showing the Create Application Page](images/create-final-app.png " ")
+
+    When the wizard finishes creating the application, you will be redirected to the application's home page in the App Builder.
+
+## Task 3: Configure the Cards Region
+
+In this task, we configure the Cards region to display the information that we need.
+
+1. Navigate to **Search and Apply** page.
+    ![Application Home Page](images/select-page.png " ")
+
+2. In the Rendering Tree, under Body, select **Search Results** region. 
+
+   In the Property Editor, enter/select the following:
+    - Under Source:
+        - Type: **SQL Query**
+        - SQL Query: Replace the SQL query with the following
+        ```
+        <copy>
+        select ID,
+        BOROUGH,
+        NEIGHBORHOOD ||', '|| BOROUGH as LOCATION,
+        SCHOOL_NAME,
+        NEIGHBORHOOD,
+        INTEREST,
+        METHOD,
+        ATTENDANCE_RATE,
+        GRADUATION_RATE,
+        SCHOOL_SPORTS,
+        TOTAL_STUDENTS,
+        to_char(TOTAL_STUDENTS,'999G999G999G999G999') as total_students_disp,
+        SAFE
+        from HIGHSCHOOLS
+        </copy>
+        ```
+
+        ![Page Designer](images/update-sql1.png " ")
+
+        ![Page Designer](images/update-sql2.png =60%x*)
+
+    - Advanced > Static ID: **S\_SEARCH\_RESULTS**
+        ![Page Designer](images/search-static.png =40%x*)
+
+2. Switch to the **Attributes** tab and select the following:
+    - Title > Column: **SCHOOL_NAME**
+    - Subtitle > Column: **LOCATION**
+    - Body:
+        - Advanced Formatting: Enable the Toggle Button to **ON**.
+        - HTML Expression: 
+        ```
+        <copy>
+
+        <div class="a-CardView-mainContent">
+        <strong>&INTEREST.</strong><br />
+        <small>&TOTAL_STUDENTS_DISP. Students &middot; &ATTENDANCE_RATE.% Attendance &middot; &GRADUATION_RATE.% Grad</small>
+        </div>
+
+        </copy>
+        ```
+
+        ![Page Designer](images/edit-cards.png =40%x*)
+
+
+
+3. Click **Save and Run** page.
+    ![Page Designer](images/run-app.png " ")
+
+    ![App login screen](images/login.png =40%x*)
+
+    ![App is displayed](images/first-app.png " ")
+
+## Task 4: Improve the UI
+
+1. Click **Edit Page 1** from the Develpoer Toolbar. 
+    ![App is displayed](images/edit1.png " ")
+
+2. In the Rendering Tree, select **Search**. 
+
+    In the Property Editor, switch to the **Attributes** tab and enter the following:
+        - Total Row Count Label: **Schools:**
+
+    ![Page Designer](images/row-count-label.png " ")
+
+3. Under Breadcrumb Bar, select **Highschools**. In the Property Editor, enter the following:
+    - Name: **New York City**
+    - Title: **New York City**
+
+    ![Page Designer](images/breadcrumb-title.png " ")
+
+
+4. Under Body > Button Bar, right-click **RESET** and select **Delete**.
+
+    ![Page Designer](images/reset-del.png " ") 
+
+5. Locate **P1\_ORDER\_BY** page item and drag and drop it under Button Bar. 
+    ![Page Designer](images/move-order-by.png " ") 
+
+6. In the Property Editor, enter/select the following: 
+    - Slot: **Next**
+    - Under Appearance:
+        - Template: **Hidden**
+        - Icon: **fa-sort-amount-desc**
+
+    - Advanced > CSS Classes: **no-item-ui**
+
+    ![Page Designer](images/order-by-properties.png " ")
+    - List of Values: 
+
+    |Display Value | Return Value|
+    |---------------|------------|
+    |Total Students| TOTAL\_STUDENTS|
+    |Attendance Rate| ATTENDANCE\_RATE|
+    {: title="List of Values"}
+
+    ![Page Designer](images/lov.png " ")
+
+7. In the Rendering Tree, select **Search Results** region. 
+
+    In the Property Editor, under Source, select **Order by Item** and enter the following:
+    | Clause | Key | Display |
+    |--------|-----|---------|
+    | TOTAL\_STUDENTS desc| TOTAL_STUDENTS | Total Students|
+    | SCHOOL\_NAME| SCHOOL\_NAME | School Name|
+    | NEIGHBORHOOD| NEIGHBORHOOD| Neighborhood|
+    | ATTENDANCE\_RATE desc| ATTENDANCE\_RATE | Attendance Rate|
+    {: title="Order By Clauses"}
+
+    ![Page Designer](images/order-by-item.png " ")
+
+    ![Page Designer](images/clauses.png " ")
+
+8. Click **Save and Run** page.
+
+## Task 5: Customize the Application Theme
+
+1. From the Developer Toolbar, click **Customize** and select **Theme Roller**.
+
+    ![Application page in runtime](images/dev-toolbar.png " ")
+
+
+2. In the Theme Roller dialog, enter/select the following: 
+    - Select Theme: **Redwood Light**
+    - Under Redwood Options:
+        - Pillar: **Rose**
+    - Under Appearance:
+        - Header: **Dark**
+        - Navigation: **Dark**
+        - Body Header: **Dark**
+    - Custom CSS: 
+    ```    
+        <copy>
+        .a-FS-bodyInner .apex-item-checkbox {
+            max-height: 320px;
+            overflow: auto;
+        }
+
+        .no-item-ui {
+            --a-field-input-border-width: 0px;
+            --a-field-input-background-color: transparent;
+        }
+
+    </copy>
+    ```
+
+
+    ![Application page in runtime with Theme roller dialog open](images/theme-roller.png =50%x*)
+
+3. Click **Save As**. In the dialog, for Style Name, enter **Redwood Light Custom**. Finally, click **Save**.
+    ![Theme Roller Save as](images/theme-save.png =50%x*)
+
+    ![App with redwood light theme](images/redwood-light.png " ")
+
+    You have successfully customized the application theme.
+
+
+## Summary
+
+You now know how to create an Oracle APEX application from a spreadsheet. You also learnt to customize the pages and the theme of the application.
+
+You may now **proceed to the next lab**.   
+
+## Acknowledgments
+
+ - **Authors** - Toufiq Mohammed, Senior Product Manager; Apoorva Srinivas, Senior Product Manager
+ - **Last Updated By/Date** - Apoorva Srinivas, Senior Product Manager, July 2024
+
+