Activity Guide for

Oracle JET
 Table of Contents

1. Lesson 1: Introduction to OJET Extension kit----------------------------------------------

- No Activity

2. Lesson 2: Getting Started with OJET ----------------------------------------------------------

- Activity: Setting up the development Environment(Refer to Environment
Setup)

3. Lesson 3: Understanding Architecture of OJET Application ------------------------------

-No Activity

4. Lesson 4: Building a simple OJet-JS application with components --------------------

5. Lesson 5: Implements Navigation and Routing in your Application-----------------------

6. Lesson 6: Building a data-driven OJet-JS application with CRUD operations-------

7. Lesson 7: Integrating a RESTful API in an OJet-JS application-------------------------

8. Lesson 8: Implementing Advanced OJet-JS Concepts--------------------------------------

- Validating and Converting input--------------------------------------------------

9. Lesson 9: Theming application -------------------------------------------------------------------

- Activity: Customizing the theme and styling of an OJet-JS application-------------

10. Lesson 10: Testing and Debugging -----------------------------------------------------------

11. Lesson 11: Deploying OJET App ------------------------------------------------------

 Practical Lesson 1: Introduction to OJET
Extension kit

Practical Lesson 1: Overview

Practical Overview

There is no practice for this Lesson.

Practical Lesson 2: Getting Started With OJET

Practical Lesson 2.1: Overview

No Practical
Practical Lesson 3: Understanding OJET
Architecture

Practical Lesson 3.1: Overview

No Practical
Practical Lesson 4: Building simple OJet-JS application with
components

Overview
In this Practical we create a simple form application .
Where user can Enter their Information like Name and Password etc.

Prerequisites:
1. Basic knowledge of HTML, CSS, and JavaScript.
2. Familiarity with Oracle JET components and Knockout.js.
3. A code editor of your choice (e.g., Visual Studio Code, Sublime Text, etc.).
4. Internet connectivity to download required packages and dependencies.

Steps:

Step 1: Set Up the Project

1. If you haven't already, create a new Oracle JET project by following the
mentioned steps in the image.
2. Ensure that you have the necessary Oracle JET components and
dependencies installed by running:
Step -2

Now once you are done with all these step OJET will Automatically create all the
required files and it will import necessary Modules.

Step -3

Now Lets Understand the Project Structure.

a. you can see Folder is Created here Now lets Open this Folder and understand.

b. all the coding we will be doing inside this src Folder.Lets see how its looks like.
Main file contains all the required libraries and views contains all the HTML files and
viewModels contains all the logic/ Javascript code for views files.
Step -4 Now we have got an understanding about the project structure of the OJET
application now lets start doing coding .

For this we have to open this Folder into VS code.

Step -5 Open VS code , search and click Enter

Step -6 Now select your Folder. Go to file icon and select open Folder.

Step -7 Select your Folder.

When you will open the Folder in VS code it will look like this.
Step-8 Now open Customer.html file
Go to src-> js-> views-> Customers.html and open it

Write code to take user input .

Step -9 Now open Customers.js File.

Go to src-> js-> viewModels-> Customers.js and open it
Step -10 Now we are done with the logic so lets Run the Application.
Follow these steps to Run the Application
a. open cmd and navigate to your project directory
cd myFIrstApp

and use command ojet serve to Run it

Now your Application is Ready .
Navigate to Customers page
Practical Lesson 5: Implementing routing and navigation
in an OJet-JS application

Description:
In this activity, you will create a Web page where you can navigate between
different other pages of the application.

Prerequisites:
- Basic knowledge of HTML, CSS, JavaScript, Oracle JET, and Knockout.js.
- A code editor to write and test your code.

Step 1: Set Up the Project

1. If you haven't already, create a new Oracle JET project by following the
mentioned steps in the image.

2. Ensure that you have the necessary Oracle JET components and
dependencies installed by running:
Step -2

Now once you are done with all these step OJET will Automatically create all
the required files and it will import necessary Modules.

Step -3

Now Lets Understand the Project Structure.

a. you can see Folder is Created here Now lets Open this Folder and
understand.
b. all the coding we will be doing inside this src Folder.Lets see how its looks
like.

Main file contains all the required libraries and views contains all the HTML
files and viewModels contains all the logic/ Javascript code for views files.
Step -4 Now we have got an understanding about the project structure of the
OJET application now lets start doing coding .

For this we have to open this Folder into VS code.

Step -5 Open VS code , search and click Enter

Step -6 Now select your Folder. Go to file icon and select open Folder.

Step -7 Select your Folder.

When you will open the Folder in VS code it will look like this.
Step –8 now open index.html file and write the code to implement routing and
navigation
Step -9 now open appController.js and there we will implement the logic for
routing and navigation.
Step-10 Now open dashboard.html file and make some changes in this file.
Step-11 Similarly Now open the Customers.html file and make some
changes in this file.
Step-12 Similarly Now open the about.html file and make some changes in
this file.

Step -22 now its time to run the app

Open terminal
Step -23 Now we are done with the logic so lets Run the Application.

Follow these steps to Run the Application

a. open cmd and navigate to your project

directory

cd myFIrstApp

and use command ojet serve to Run it

Now your Application is Ready .

Practical Lesson 6: Building a data-driven OJet-JS application with
CRUD operations

Practical Overview

In this Activity, we will perform read, delete, update, and create operations on
data.

Prerequisites:

-Basic knowledge of HTML, CSS, JavaScript, Oracle JET, and Knockout.js.

- A code editor to write and test your code.

Step 1: Set Up the Project

1. If you haven't already, create a new Oracle JET project by following the
mentioned steps in the image.

2. Ensure that you have the necessary Oracle JET components and
dependencies installed by running:
Step -2

Now once you are done with all these step OJET will Automatically create all
the required files and it will import necessary Modules.

Step -3

Now Lets Understand the Project Structure.

a. you can see Folder is Created here Now lets Open this Folder and
understand.
b. all the coding we will be doing inside this src Folder.Lets see how its looks
like.

Main file contains all the required libraries and views contains all the HTML
files and viewModels contains all the logic/ Javascript code for views files.
Step -4 Now we have got an understanding about the project structure of the
OJET application now lets start doing coding .

For this we have to open this Folder into VS code.

Step -5 Open VS code , search and click Enter

 Step -6 Now select your Folder. Go to file icon and select open Folder.

Step -7 Select your Folder.

When you will open the Folder in VS code it
will look like this.
Step-8 Now open Customer.html file

Go to src-> js-> views-> Customers.html

and open it
Step -9 Now open Customers.js File.

Go to src-> js-> viewModels-> Customers.js

and open it
Step -10 Now we are done with the logic so
lets Run the Application.

Follow these steps to Run the Application

a. open cmd and navigate to your project

directory

cd myFIrstApp
and use command ojet serve to Run it

Now your Application is Ready

Practical Lesson – 7 OJET and Restful Services

Practical Lesson 7: Overview

Activity: Implementing Restfull Services using Oracle JET

Description:

In this activity, you will enhance the user registration form from Lesson 6 by
implementing Restfull Services using Oracle JET. The form will include various
fields for personal information, Country, and State. You will validate user input to
ensure that all required fields are filled correctly before submitting the form.

Prerequisites:
- Basic knowledge of HTML, CSS, JavaScript, Oracle JET, and Knockout.js.
- A code editor to write and test your code.

Step 1: Set Up the Project

1. If you haven't already, create a new Oracle JET project by following the
mentioned steps in the image.
2. Ensure that you have the necessary Oracle JET components and
dependencies installed by running:
Step -2
Now once you are done with all these step OJET will Automatically create all the
required files and it will import necessary Modules.
Step -3
Now Lets Understand the Project Structure.
a. you can see Folder is Created here Now lets Open this Folder and understand.

b. all the coding we will be doing inside this src Folder.Lets see how its looks like.
Main file contains all the required libraries and views contains all the HTML files
and viewModels contains all the logic/ Javascript code for views files.
Step -4 Now we have got an understanding about the project structure of the
OJET application now lets start doing coding .
For this we have to open this Folder into VS code.
Step -5 Open VS code , search and click Enter

Step -6 Now select your Folder. Go to file icon and select open Folder.
Step -7 Select your Folder.

When you will open the Folder in VS code it will look like this.
Step-8 Now open Customer.html file
Go to src-> js-> views-> Customers.html and open it
Step -9 Go to src-> js-> viewsModels-> Customers.js and open it
Step 10- now go to inside the js folder and create a new Folder named as service
Step -11 now inside this folder create a new file name it as CustomersServices.js

Step -12 now once you are done with the file creation its time to add logic in the
file.
Step -13 now open Terminal and run these commands as mentioned to configure
json server.
Step-14 inside your project main directory create a new folder and name it as db

Step-15 inside this Folder create a new file and name it as db.json

Add the code in your file.

Step -16 After this create another folder inside the js folder and name it as json.
Step-17 After creating folder you need to create a new file inside this folder and
name it as config.json
Step-18 now create another folder inside the js folder and name it as utils
Step-19 now create a new file in this folder and name it as core.js
Step- 20 now create another file in the same folder and name the file as
Service.js
And add code in this file
Step-21 by default there is file already created index.html , please make
necessary changes in this file.
Step -22 now its time to run the app
Open terminal

Step -23 Now we are done with the logic so lets Run the Application.
Follow these steps to Run the Application
a. open cmd and navigate to your project directory
cd myFIrstApp

and use command ojet serve to Run it

Now your Application is Ready .

Enter the data in the fields.

Step-23 now click on create button to create data in console.

Step-24 now go to console and check data is created or not. Right click on page
and go to inspect option

Step -25 now go to console.

 Practical Lesson 8:

Validating and Converting input

Practical Lesson 8: Overview

Activity: Implementing Input Validation for a Registration Form using Oracle JET

Description:

In this activity, you will enhance the user registration form from Lesson 6 by
implementing input validation using Oracle JET. The form will include various
fields for personal information, contact details, and confirmation. You will validate
user input to ensure that all required fields are filled correctly before submitting
the form.

Prerequisites:
- Basic knowledge of HTML, CSS, JavaScript, Oracle JET, and Knockout.js.
- A code editor to write and test your code.

Step 1: Set Up the Project

1. If you haven't already, create a new Oracle JET project by following the
mentioned steps in the image.
2. Ensure that you have the necessary Oracle JET components and
dependencies installed by running:
Step -2
Now once you are done with all these step OJET will Automatically create all the
required files and it will import necessary Modules.
Step -3
Now Lets Understand the Project Structure.
a. you can see Folder is Created here Now lets Open this Folder and understand.

b. all the coding we will be doing inside this src Folder.Lets see how its looks like.
Main file contains all the required libraries and views contains all the HTML files
and viewModels contains all the logic/ Javascript code for views files.
Step -4 Now we have got an understanding about the project structure of the
OJET application now lets start doing coding .
For this we have to open this Folder into VS code.
Step -5 Open VS code , search and click Enter

Step -6 Now select your Folder. Go to file icon and select open Folder.
Step -7 Select your Folder.

When you will open the Folder in VS code it will look like this.
Step-8 Now open Customer.html file
Go to src-> js-> views-> Customers.html and open it
Step -9 Now open Customers.js File.
Go to src-> js-> viewModels-> Customers.js and open it

Step -10 Now we are done with the logic so lets Run the Application.
Follow these steps to Run the Application
a. open cmd and navigate to your project directory
cd myFIrstApp

and use command ojet serve to Run it

Now your Application is Ready .
Navigate to Customers page
 Practical Lesson 9:

Theming application

Practical Lesson 8: Overview

Practical Overview
Activity: Create a Responsive Web Page Layout using Oracle JET Theming

Description:
In this activity, you will create a responsive web page layout using Oracle JET
theming features. The layout will adapt and display appropriately on different
devices and screen sizes. You will use Oracle JET's theming capabilities to
customize the appearance of the web page and make it visually appealing.

Prerequisites:
- Basic knowledge of HTML, CSS, JavaScript, and Oracle JET theming.
- A code editor to write and test your code.

Instructions:

Step 1: Set Up the Project

1. If you haven't already, create a new Oracle JET project by following the
mentioned steps in the image.
2. Ensure that you have the necessary Oracle JET components and
dependencies installed by running:
Step -2
Now once you are done with all these step OJET will Automatically create
all the required files and it will import necessary Modules.
Step -3
Now Lets Understand the Project Structure.
a. you can see Folder is Created here Now lets Open this Folder and
understand.

b. all the coding we will be doing inside this src Folder.Lets see how its
looks like.
Main file contains all the required libraries and views contains all the
HTML files and viewModels contains all the logic/ Javascript code for
views files.
Step -4 Now we have got an understanding about the project structure of
the OJET application now lets start doing coding .
For this we have to open this Folder into VS code.
Step -5 Open VS code , search and click Enter

Step -6 Now select your Folder. Go to file icon and select open Folder.
Step -7 Select your Folder.

When you will open the Folder in VS code it will look like this.
Step-8 Now open Customer.html file
Go to src-> js-> views-> Customers.html and viewModels->customers.js
and open it
Step -10 Now we are done with the logic so lets Run the Application.
Follow these steps to Run the Application
a. open cmd and navigate to your project directory
cd myFIrstApp

and use command ojet serve to Run it

Now your Application is Ready
Practical Lesson 10: Testing and Debugging Ojet Application

Practical Overview

In this practical, we will configure the mocha chai testing framework to perform
testing in the ojet application.

Prerequisites:
- Basic knowledge of HTML, CSS, JavaScript, Oracle JET, and Knockout.js.
- A code editor to write and test your code.

Step 1: Set Up the Project

1. If you haven't already, create a new Oracle JET project by following the
mentioned steps in the image.

2. Ensure that you have the necessary Oracle JET components and
dependencies installed by running:

Step -3 now move to your application directory

Step- 4 now open the project in VS code

Now it will be opened.

Step-5 now we will configure mocha chai testing in our project

For this follow the commands in the given image.
Step-6 now create a new directory under the root directory and name it as test

Go to the new folder icon and write the name as test of the folder.

Step-7 now inside this folder create a new javascript file and name its as
myComponent.test.mjs
Step-8 after you have created the file lets add the code in this file .
Step-9 now go to src->js->viewModels and here create a new file and name it as
myComponentViewModel.js

And now add the code

Step-10 Now in the last make some changes into package.json

You can find this file in the main directory of your project
Step-11 Now after doing all these changes lets go to terminal
And run this command to execute the test case.
Practical Lesson 11: Building and Deploying Ojet Application

Practical Overview

Prerequisites:
- Basic knowledge of HTML, CSS, JavaScript, Oracle JET, and Knockout.js.
- A code editor to write and test your code.

Step 1: Set Up the Project

1. If you haven't already, create a new Oracle JET project by following the
mentioned steps in the image.

2. Ensure that you have the necessary Oracle JET components and
dependencies installed by running:

Step -3 now move to your application directory

Step-4 now run the build command to build the application

Now you can see we are getting this msg success build finished.

Step-5 now lets deploy the application on web

For doing this please follow the command mentioned below.

Now you can see your application is ready on server .
----------End of Activity Guide-------