Skip to content

Commit

Permalink
WMS: 11481 - Improve text and screenshots (#133)
Browse files Browse the repository at this point in the history
* ocw manifest files

* Added Movies-Lab workshop files

* ocw manifest files

* 22.1 updates to Spreadsheet Lab

* 22.1 updates

* Update 1-sign-up-apex.md

* Updated absolute urls

* updated the common urls

* updated the urls

* Added a NOTE to indicate version difference

* updated path for Lab 4

* Updated the paths

* Updated the Workshop Title

* Update screenshot in Task 2 Step 7

* Added alt text to images

* URLS updated in index.html

* Updated the steps for Option 2: Sign up for APEX using ADB

* alt text for images

* Shopping App 22.1 updates

* 22.1 updates

* archiving Shopping Cart 21.2

* Updated manifest files for OCW

* Feedback updated for 22.1

* Updated the PL/SQL code for checkout

* Update process-properties.png

* Feedback update 22.1

* Hid the old walkthrough videos

* Alt text for all images

* Delete clothing-images.zip

* Updated steps for Livelabs Green Button

* Changes to steps for Livelabs Green button

* Fixed the comments wrt PR

* Updated screenshots in Common

* OCW updates to optional labs

* Updated filename in manifest for optional lab

* OCI console Redwood theme screenshots

Replacement of screenshots as per the new Redwood theme for OCI console

* Resolved issue in APEX 22.2 for Task 5

Added an additional step to set the source for Region in Task 5.

* Update manifest.json

Lab 4 was pointing to an invalid lab. I have updated it to the correct folder path.

* First Draft for New Workshop

All the files related to the Social Media Workshop

* Issue fix

* Issue fixes

* Issue Fix

* issue-fix

* removed lab 10

* screenshot fix

* Replaced Screenshots

* Updated screenshots

* Replaced Screenshots

* Updated Screenshots

* Create menu-button.png

* Issue fixes and time saver step

* Lab 10 steps added

* Fixed issues

* Renamed Lab titles

* Added Task 3 and 4 in Lab 8

* Updated screenshots

* uploaded the catch up app

* Update 0-introduction.md

* Completed app zip files

* Added download links from Object Storage

* ocw23 folders

* 23.1 changes

* updated acknowledgements

* Archive of 22.1

* Updated Movies and common

* Updated APEX version in Intro

* Feedback fixes

* Grammar edits

* Sign up for APEX using Quickstart

* Updated Lab 10

Added missing steps to get device location

* Added the support lab

Added CloudWorld support labs for Movies Watchlist and Social Media Workshop

* Updated Getting Started Common Lab

Changed the steps to sign up for an APEX Service

* Updated missing steps

* Changed the title of Spreadsheet workshop

* Embedded walkthrough videos

Social Media Workshop

* Grammar edits

* Updated Need Help for OCW

* Update 4-Update-table.md

* Rename 4-Update-table.md to 4-update-table.md

* Delete task-definition.md

* Update 4-update-table.md

* Fixing bugs

* Added video walkthrough files

* Update intro.md

* Update manifest.json

* Updated screenshots in Common

* APEX 23.2 updates to Spreadsheet

Updates to Spreadsheet and Common Lab

* Naming issues fixed

* Update 1-sign-up-apex.md

* Fixed naming, prereq, obj

* Naming issues fixed

* Issue fixes in common lab

* Changes in common and delete unwanted files

* Removed duplicate folders

* Updated all labs to 23.2

* Fixed the Manifest file errors

* Updated steps and text related to a bug

* New Lab added

* Update 5-improve-ux.md

* Update manifest.json

* Update 5-improve-ux.md

* fixed issues for new lab

* Update introduction.md

* Updated to latest files

* renamed the images

* Fixed issues and feedback

* Title and text changes

* Improve text and screenshots

---------

Co-authored-by: Michelle Malcher <[email protected]>
Co-authored-by: Anoosha Pilli <[email protected]>
  • Loading branch information
3 people authored Jan 19, 2024
1 parent 9413fbb commit 808c5f0
Show file tree
Hide file tree
Showing 8 changed files with 40 additions and 39 deletions.
22 changes: 11 additions & 11 deletions ai-vision-lab/1-configure-oci/1-configure-oci.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# Configure OCI API keys
# Configure the OCI API keys

## Introduction

In this lab, you learn how to configure OCI API keys. In Oracle Cloud Infrastructure (OCI), API keys are used for secure authentication when accessing OCI resources through REST APIs.
In this lab, you learn how to configure the OCI API keys. In Oracle Cloud Infrastructure (OCI), API keys are used for secure authentication when accessing OCI resources through REST APIs.

OCI API keys consist of two parts: a **Public key** and a **Private key**. You use the Console to generate the Private/Public key pair.
OCI API keys consist of two parts: a **Public key** and a **Private key**. You use the OCI console to generate the Private/Public key pair.


Estimated Time: 10 Minutes
Expand All @@ -17,31 +17,31 @@ In this lab, you:

## Task 1: Generate API Keys using OCI Console

To Generate API Keys using OCI Console:
To Generate the API Keys using OCI Console:

1. Login into your OCI Account.

![Add API Key](images/oci-login.png " ")

2. Open the Profile menu and click Profile hyperlink.
2. Click on the Profile icon at the top-right corner and select your Profile hyperlink.

![Profile Menu](images/profile.png " ")

3. In the Resources section at the bottom left, click **API Keys** and then click **Add API Key**.
3. Under Resources section at the bottom-left, select **API Keys** and then click **Add API Key**.

![Add API Key](images/api-keys.png " ")

4. The Add API Key dialog displays. Select **Generate API Key Pair** to create a new key pair.
4. The Add API Key dialog is displayed. Select **Generate API Key Pair** to create a new key pair.

5. Click **Download Private Key** and save it to your local device. You do not need to download the public key.

*Note: You will use this private key while configuring web credentials in Oracle APEX later in this workshop.*
*Note: You will use this private key while configuring the web credentials in Oracle APEX in the upcoming lab.*

6. Click **Add**.

![Profile Menu](images/add-api-key.png " ")

7. The key is added, and the Configuration File Preview is displayed. Copy and paste the configuration file snippet from the text box. You will use this information in Oracle APEX Web Credentials.
7. The key is added, and the Configuration File Preview is displayed. Copy and save the configuration file snippet from the text box. You will use this information in Oracle APEX Web Credentials.

![Profile Menu](images/configuration-preview.png " ")

Expand All @@ -57,7 +57,7 @@ To create web credentials in Oracle APEX:

![Login into your APEX account](images/apex-login.png " ")

2. On the Workspace home page, click App Builder.
2. On the Workspace home page, click **App Builder**.

![Click App Builder](images/app-builder1.png " ")

Expand Down Expand Up @@ -94,7 +94,7 @@ To create web credentials in Oracle APEX:

## Summary

You now know how to generate API Keys using OCI console. Also, you know how to create web credentials in Oracle APEX.
You now know how to generate API Keys using OCI console. Furthermore, you know how to create web credentials in Oracle APEX.

You may now **proceed to the next lab**.

Expand Down
Binary file modified ai-vision-lab/1-configure-oci/images/profile.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 7 additions & 7 deletions ai-vision-lab/2-import-app/2-import-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ In this lab, you:

The Social Media application is configured with a custom Security Authentication scheme. In this lab, you change the Authentication Type to Oracle APEX Accounts.

1. On the Workspace home page, click the **App Builder** icon. Select the Social Media application. On the Application home page, click **Shared Components**. The Shared Components page appears.
1. On the Workspace home page, click **App Builder**. Select the Social Media application. On the Application home page, click **Shared Components**. The Shared Components page appears.

![Click Import](images/shared-comp1.png " ")

Expand All @@ -63,11 +63,11 @@ The Social Media application is configured with a custom Security Authentication

![Click Import](images/create-button5.png " ")

4. Specify how the scheme should be created. In this case, select **Based on a pre-configured scheme from the gallery** and Click **Next**.
4. Specify how the scheme should be created. In this case, select **Based on a pre-configured scheme from the gallery** and click **Next**.

![Click Import](images/create-authentication-scheme.png " ")

5. Specify a **Name** for Authentication Scheme. For Scheme Type, select **Oracle APEX Accounts**.
5. Specify a **Name** for Authentication Scheme. For Scheme Type, select **Oracle APEX Accounts**.

![Click Import](images/oracle-apex-accounts1.png " ")

Expand All @@ -76,20 +76,20 @@ The Social Media application is configured with a custom Security Authentication

## Task 3: Add a Column to the Table using Object Browser

To collect the output generated by OCI AI Vision, you add a new column in SM\_POSTS Table. This addition enables you to store and retrieve the relevant information seamlessly.
To collect the output generated by OCI AI Vision, you add a new column in the *SM\_POSTS* Table. This addition enables you to store and retrieve the relevant information seamlessly.

To Add a new column to the SM\_POSTS Table:

1. Click **SQL Workshop** and Navigate to **Object Browser**. In the Object Tree, expand Tables and select **SM_POSTS** table.
1. Click **SQL Workshop** and navigate to **Object Browser**. In the object tree, expand Tables and select **SM\_POSTS** table.

![Click Import](images/sql-work.png " ")

![Click Import](images/add-column.png " ")

2. On the columns tab, Click **Add Column** under SM\_POSTS Table.
2. On the columns tab, click **Add Column**.


3. Configure the Add Column attributes. At a minimum, enter a column name and select a type. Depending upon the column type, specify whether the column requires precision, scale, a default value, or is nullable. For more details on an attribute, see field-level Help.
3. The Add Column wizard is displayed. Configure the Add Column attributes. At a minimum, enter a column name and select a type. Depending upon the column type, specify whether the column requires precision, scale, a default value, or is nullable. For more details on an attribute, see field-level Help.

Enter the following and click **Apply**.
- **Column**: AI_OUTPUT
Expand Down
26 changes: 13 additions & 13 deletions ai-vision-lab/3-integrate-oci-vision/3-integrate-oci-vision.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ In this lab, you:

In this task, you create a REST Data Source with OCI vision REST API as the endpoint.

1. Navigate to the application home page and Click **Shared Components**.
1. Navigate to the application home page and click **Shared Components**.

![Click Timeline](images/sm-shared-comp1.png " ")

Expand All @@ -31,18 +31,18 @@ In this task, you create a REST Data Source with OCI vision REST API as the endp

![Click Timeline](images/rest-data-source-create1.png " ")

4. Select **From scratch** and Click **Next**.
4. Select **From scratch** and click **Next**.

![Click Timeline](images/rest-method.png " ")

5. Under Create REST Data Source, enter the following attributes and Click **Next**.
5. Under Create REST Data Source, enter the following attributes and click **Next**.
- **Rest Data Source Type**: Select **Oracle Cloud Infrastructure (OCI)**

- **Name**: Enter **OCI Vision**

- **URL Endpoint**: https://vision.aiservice.us-ashburn-1.oci.oraclecloud.com/20220125/actions/analyzeImage

*Note: URL Endpoint may differ based on your OCI tenancy. Refer to the below link for more details*- https://docs.oracle.com/en-us/iaas/api/#/en/vision/20220125
*Note: URL Endpoint may differ based on your OCI tenancy. Refer to the following link for more details*- https://docs.oracle.com/en-us/iaas/api/#/en/vision/20220125

![Click Timeline](images/create-rest-data.png " ")

Expand All @@ -69,7 +69,7 @@ In this task, you create a REST Data Source with OCI vision REST API as the endp
10. Select Operations Tab and click **Edit icon** for the POST operation and enter the following:
- **Database Operation**: -Not Mapped-

- **Request Body Template**: Copy and paste below JSON
- **Request Body Template**: Copy and paste JSON given below.

```
<copy>
Expand Down Expand Up @@ -165,19 +165,19 @@ In this task, you create a REST Data Source with OCI vision REST API as the endp
In this task, you create a page process to invoke the OCI Vision REST Data Source implemented in the previous task.
1. Navigate to Application Homepage by clicking on the Application ID.
1. Navigate to the application homepage by clicking on the Application ID.
![Click Timeline](images/click-app-id11.png " ")
2. Click **1-Timeline** page.
![Click Timeline](images/select-timeline1.png " ")
3. Right click **Timeline** region under Rendering Pane and click **Create Page Item**.
3. Right-click **Timeline** region under Rendering Pane and click **Create Page Item**.
![Click Timeline](images/create-page-item2.png " ")
4. In the Property Editor, Enter the following:
4. In the Property Editor, enter the following:
Under Identification:
Expand All @@ -187,7 +187,7 @@ In this task, you create a page process to invoke the OCI Vision REST Data Sourc
![Click Timeline](images/response-page-item1.png " ")
5. Navigate to Processing Tab (left pane) and right click on Processing Tab or Processes and click **Create Process**.
5. Navigate to the Processing Tab (left pane) and right click on Processing Tab or Processes and click **Create Process**.
![Click Timeline](images/processing.png " ")
Expand Down Expand Up @@ -279,11 +279,11 @@ In this task, you create a page process to invoke the OCI Vision REST Data Sourc
![Click Timeline](images/response-param.png " ")
13. Right click on the **Analyze Image** Process and Select **Add Child Process**.
13. Right click on the **Analyze Image** process and select **Add Child Process**.
![Click Timeline](images/add-child-process12.png " ")
14. In the Property Editor,Enter the following:
14. In the Property Editor, enter the following:
Under Identification :
Expand Down Expand Up @@ -316,12 +316,12 @@ In this task, you create a page process to invoke the OCI Vision REST Data Sourc
![Click Timeline](images/parse-response1.png " ")
15. Click **Save**
15. Click **Save**.
## Task 3: Enhance Timeline Region to include AI Search
In this task, you create a page item P1\_AI\_SEARCH using which the end user can enter the search terms and search through the images.
1. Go to the Rendering tab, right click on the **After Logo** section and select **Create Page Item**.
1. Go to the Rendering tab, right-click **After Logo** and select **Create Page Item**.
![Click Timeline](images/after-logo-page-item1.png " ")
Expand Down
9 changes: 5 additions & 4 deletions ai-vision-lab/4-run-app/4-run-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,16 @@ In this lab, you:

![Click Timeline](images/social-media-login.png " ")

2. Click **Add Post** Button available on the Navigation Bar.
2. Click **Add Post** on the Navigation Bar.

3. Drag and Drop the image from your local system or use the Choose File button to upload image from your local system. Then, Click **Post**.
3. Drag and Drop the image from your local system or use the Choose File button to upload image from your local system. Then, click **Post**.

![Click Timeline](images/add-post.png " ")

You can now see that the image is posted.
The image is posted on your timeline.

4. Now, type your Search Term in the AI Search Field available in the Navigation Bar and then click **Enter**. The app searches and displays all the images that contain the corresponding search term. In the following example, the app displays all the images containing a 'Sky'.
4. Now, type your Search Term in the AI Search Field available in the Navigation Bar and then click **Enter**. The app searches and displays all the images that contain the corresponding search term.
In the following example, when you enter 'Sky' in the AI Search Field, the app displays all the images that has sky in them.

![Click Timeline](images/search-result.png " ")

Expand Down
8 changes: 4 additions & 4 deletions ai-vision-lab/5-improve-ux/5-improve-ux.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,8 @@ In this task, you make use of the Image Upload item that allows user to crop ima

In this task, you add a Share button that allows a user to share the post via email, or other apps.
Note:
- On macOS, the Share will not work on Chrome and Firefox browsers. Use Edge or Safari browsers instead.
- On Windows, the Share will not work on Edge browser. Use Chrome, Edge or Safari browsers instead.
- On macOS, Share will NOT work on Chrome and Firefox browsers. Use Edge or Safari browsers.
- On Windows, Share will NOT work on Edge browser. Use Chrome, Edge or Safari browsers.

1. Navigate to the Timeline page. Under the **Timeline** region, right-click **Actions** and select **Create Action**.

Expand Down Expand Up @@ -153,7 +153,7 @@ Note:
![Property Editor](images/true-action-share.png " ")
8. **Save the Run** the page. You can see a Share button for each post. Clicking on the Share button will open a context menu to choose the app where you want to share. In this example, choose Mail and the post is attached as an image in an email draft with an associated text.
8. **Save the Run** the page. You can see a Share button for each post. Click on **Share** to open a context menu and choose the app you want to share with. In this example, choose **Mail** and the post is attached as an image in an email draft with an associated text.
![App output](images/run-app-share.png " ")
Expand All @@ -171,7 +171,7 @@ In this task, you enable the Push Notifications for the Social Media App wherein
- Column: **NOTIFIED**
- Data Type: **VARCHAR2**
- Length: **1**
- Deafult: **'N'** (By default all rows in the SM_REACTIONS will have the default value 'N' to indicate that the user has not yet been notified.)
- Deafult: **'N'** (By default, all rows in the SM\_REACTIONS will have the default value 'N' to indicate that the user has not yet been notified.)
Click **Apply**.
Expand Down
Binary file modified ai-vision-lab/5-improve-ux/images/automations.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ai-vision-lab/5-improve-ux/images/pwa.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 808c5f0

Please sign in to comment.