U2-A2 Resources

ACTIVITY:
“RESOURCES INSTALLATION”
TÉCNICO SUPERIOR UNIVERSITARIO EN

TECNOLOGÍAS DE LA INFORMACIÓN
ÁREA DESARROLLO DE SOFTWARE
MULTIPLATAFORMA
PRESENTA:
CARLOS ENRIQUE GONGORA ESCALONA
CD. REYNOSA, TAMAULIPAS MAYO 2024.

Table of Contents
Topic Page
Index of Images ................................................................................... iii
Index of Tables ..................................................................................... vi
1 Resources ......................................................................................... 1
1.1 Programs ............................................................................................ 1
1.1.1 Visual Studio Code ..................................................................... 1
1.1.2 Android Studio .......................................................................... 4
1.1.3 Git .......................................................................................... 13
1.1.4 Java Development Kit .............................................................. 19
1.1.5 Node ...................................................................................... 21
1.1.6 Gradle .................................................................................... 24
1.1.7 Execution Policy ...................................................................... 27
1.2 Frameworks and libraries ................................................................... 28
1.2.1 Cordova .................................................................................. 28
1.2.2 Bootstrap ................................................................................ 30
1.2.3 Jquery .................................................................................... 30
2 Project Setup ................................................................................. 31
3 Extra: JavaScript Exercises ....................................................... 33

3.1 JS Variables ...................................................................................... 33
3.1.1 Exercise 1 ............................................................................... 33
3.1.2 Exercise 2 ............................................................................... 33
3.1.3 Exercise 3 ............................................................................... 33
3.1.4 Exercise 4 ............................................................................... 34
i
3.1.5 Exercise 5 ............................................................................... 34
3.2 JS Operators ..................................................................................... 34
3.2.1 Exercise 1: .............................................................................. 34
3.2.2 Exercise 2: .............................................................................. 34
3.2.3 Exercise 3: .............................................................................. 35
3.2.4 Exercise 4: .............................................................................. 35
3.2.5 Exercise 5: .............................................................................. 35
3.3 JS Data Types ................................................................................... 35
3.3.1 Exercise 1: .............................................................................. 36
3.4 JS Functions ...................................................................................... 36
3.4.1 Exercise 1: .............................................................................. 36
3.4.2 Exercise 2: .............................................................................. 36
3.4.3 Exercise 3: .............................................................................. 37
3.4.4 Exercise 4: .............................................................................. 37
3.5 JS Objects ......................................................................................... 37
3.5.1 Exercise 1: .............................................................................. 37
3.5.2 Exercise 2: .............................................................................. 38
3.5.3 Exercise 3: .............................................................................. 38
ii
Index of Images
Image Page
Image 1 Visual Studio Code ........................................................................... 2
Image 2 Visual Studio Code ........................................................................... 2
Image 3 Visual Studio Code Execution ............................................................ 2
Image 4 Visual Studio Code Terms ................................................................. 3
Image 5 Visual Studio Code Additional Tasks .................................................. 3
Image 6 Visual Studio Code Installation .......................................................... 3
Image 7 Android Studio Execution .................................................................. 4
Image 8 Android Studio Setup ........................................................................ 5
Image 9 Android Studio Components .............................................................. 5
Image 10 Android Studio Configuration Settings .............................................. 6
Image 11 Android Studio Installation .............................................................. 6
Image 12 Android Studio Import .................................................................... 7
Image 13 Android Studio Wizard .................................................................... 7
Image 14 Android Studio Installation Type ...................................................... 7
Image 15 Android Studio SDK Components Setup ........................................... 8
Image 16 Android Studio Emulator Settings .................................................... 8
Image 17 Android Studio Emulator Hypervisor Driver....................................... 9
Image 18 Android Studio SDK components License Agreement ........................ 9
Image 19 Android Studio Downloading Components ........................................ 9
Image 20 Android Studio Interface ............................................................... 10
Image 21 Android Studio SDK Platforms ....................................................... 10
Image 22 Android Studio SDK Tools ............................................................. 11
Image 23 Android Studio SDK Tool ............................................................... 11
Image 24 Android Studio Platforms and Tools Installation .............................. 11
Image 25 Environment Variables Panel 1 ...................................................... 12
Image 26 Android SDK Path ......................................................................... 12
iii
Image 27 Path System Variable 1 ................................................................. 12
Image 28 SDK Platforms and Tools Path ....................................................... 12
Image 29 Git Execution................................................................................ 13
Image 30 Git Installation ............................................................................. 14
Image 31 Git Editor ..................................................................................... 14
Image 32 Git Path ....................................................................................... 15
Image 33 Git SSH ........................................................................................ 15
Image 34 Git OpenSSL Library ..................................................................... 16
Image 35 Git Default Options ....................................................................... 16
Image 36 Git Terminal Emulator ................................................................... 17
Image 37 Git Pull Command ......................................................................... 17
Image 38 Git Credential Helper .................................................................... 18
Image 39 Git Extra Options .......................................................................... 18
Image 40 Git Experimental Options .............................................................. 18
Image 41 JDK Installation ............................................................................ 19
Image 42 JDK Location ................................................................................ 19
Image 43 JDK Installation Finished ............................................................... 20
Image 45 Java_Home Path .......................................................................... 20
Image 46 System Variable Path 2 ................................................................. 21
Image 47 JDK Path ...................................................................................... 21
Image 48 Node Execution ............................................................................ 21
Image 49 Node Setup .................................................................................. 22
Image 50 Node License Agreement .............................................................. 22
Image 51 Node Location .............................................................................. 23
Image 52 Node Custom Setup ...................................................................... 23
Image 53 Node Installation .......................................................................... 24
Image 54 Node Installation Completed ......................................................... 24
Image 55 Gradle Extraction .......................................................................... 25
Image 56 Gradle Folder ............................................................................... 25
iv
Image 57 Gradle Movement ......................................................................... 25
Image 59 Gradle_Home Path ....................................................................... 26
Image 60 System Variable Path 3 ................................................................. 26
Image 61 Gradle-8.5 Path ............................................................................ 26
Image 62 Get-ExecutionPolicy -List Command ............................................... 27
Image 63 Set-ExecutionPolicyList Command ................................................. 27
Image 64 Type Yes ..................................................................................... 27
Image 65 ExecutionPolicy List Updated ......................................................... 28
Image 66 Cordova Directories ...................................................................... 28
Image 67 Test Folder in VS Code ................................................................. 29
Image 68 Cordova Installation...................................................................... 29
Image 69 Project Directory .......................................................................... 29
Image 70 Platforms Installations .................................................................. 29
Image 71 Bootstrap Installation ................................................................... 30
Image 72 Jquery Installation ........................................................................ 30
Image 73 Comment Content Security Policy .................................................. 31
Image 74 MVC Implementation .................................................................... 31
Image 75 File References Updated ............................................................... 32
Image 76 App Running ................................................................................ 32
v
Index of Tables
Table Page
Table 1 Resources ......................................................................................... 1
vi
1 Resources
Every project needs resources to carry out certain tasks in the project. The
following programs, frameworks and libraries will be part of the initial resources
for the development of an application.
Resource Version Link

Android studio 2023.1.1.28 Download
Node V20.11.0 Download
Gradle 8.5 Download
Java Development Kit (JDK) 17 Download
Git 2.43.0 Download
Bootstrap 5.3.3 Download
Jquery 3.2.1 Download
Table 1 Resources
1.1 Programs
For the development of the course enrollment application, it is necessary to

comply with the following programs to start the project.
1.1.1 Visual Studio Code
According to Microsoft (n.d.), Visual Studio Code is a lightweight but powerful

source code editor which runs on desktops, it is available for Windows, macOS
1
and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js
and has a rich ecosystem of extensions for other languages and runtimes.
Image 1 Visual Studio Code
For the installation process of this application, the file must first be downloaded.
On the official Visual Studio Code website, the file should be available for
download.
Image 2 Visual Studio Code
Now that the file is downloaded, execute it to start the installation.
Image 3 Visual Studio Code Execution
After the execution, accept the terms and conditions of the program.
2
Image 4 Visual Studio Code Terms
Choose the additional tasks to be performed by the program. In my case I will

create a shortcut and leave the default tasks.
Image 5 Visual Studio Code Additional Tasks
Start the installation process by clicking on the install button.
Image 6 Visual Studio Code Installation
3
1.1.2 Android Studio
For this program, the professor has shared the installation file. To start the
installation first execute the file.
Image 7 Android Studio Execution
Allow the program to make changes to the device. Now execute it to start the
setup process.
4
Image 8 Android Studio Setup
Install both components of Android Studio.
Image 9 Android Studio Components
Click on next. In the next prompt, it’ll ask for a path for installation. Choose a
path and hit next.
5
Image 10 Android Studio Configuration Settings
It will start the installation, and once it is completed, it will be like the image
shown below.
Image 11 Android Studio Installation
Click on next. Once “Finish” is clicked, it will ask whether the previous settings
need to be imported [if the android studio had been installed earlier], or not. It is
better to choose the ‘Don’t import Settings option’.
6
Image 12 Android Studio Import
Now Android Studio wizard is working, click ‘Next’ to continue with the setup.
Image 13 Android Studio Wizard

Choose the installation type as custom, with this installation type, the SDK
components will be chosen.
Image 14 Android Studio Installation Type
7
The SDK components required for the project are shown in the following image.
Do not install the Android virtual device, it is not required for the project.
Image 15 Android Studio SDK Components Setup
Set the maximum amount of RAM available for the Intel Hardware Accelerated
Execution Manager (HAXM) to use for all x86 emulator instances.
Image 16 Android Studio Emulator Settings
Install Android Emulator Hypervisor driver, click ‘Next’ and proceed.
8
Image 17 Android Studio Emulator Hypervisor Driver
Accept the terms and conditions of the SDK components.
Image 18 Android Studio SDK components License Agreement
Now wait for the SDK components to download.
Image 19 Android Studio Downloading Components
Click in ´More Actions´ to open the SDK Manager.
9
Image 20 Android Studio Interface
Install the next SDK Platforms that are shown in the following image. Select:
• Android 14.0 (“UpsideDownCake”)
• Android 13.0 (“Tiramisu”)
• Android 12.0 (“S”)
Image 21 Android Studio SDK Platforms
Install the next SDK Tools that are shown in the following image.
10
Image 22 Android Studio SDK Tools
Disable the "Hide obsolete packages" and select the 'Android SDK Tools' Tool.
Image 23 Android Studio SDK Tool
Wait for all SDK components and SDK tools to be installed.
Image 24 Android Studio Platforms and Tools Installation
Open the Environment Variables panel.
11
Image 25 Environment Variables Panel 1
Create two user variables according to the path where the file is located, one
called 'ANDROID_HOME' and the other 'ANDROID_SDK_ROOT'.
Image 26 Android SDK Path
Now open the path system variable.
Image 27 Path System Variable 1
Adds two new Environment Variables according to the path where the SDK tools
and platform-tools are located.
Image 28 SDK Platforms and Tools Path
12
1.1.3 Git
Git is a free and open-source distributed version control system designed to

handle everything from small to very large projects with speed and efficiency.
(Git, n.d.)
installation first execute the file, when the setup starts, click ‘Next.’
Image 29 Git Execution
Choose default settings for installation location and components.
13
Image 30 Git Installation
Leave start folder, text editor, and initial branch as Visual Studio Code editor.
Image 31 Git Editor
Maintain default settings for initial branch name and PATH environment and click
‘Next.’
14
Image 32 Git Path
Keep default SSH program.
Image 33 Git SSH
Use the OpenSSL Library for server certificates.
15
Image 34 Git OpenSSL Library
Keep default options for line ending conversions.
Image 35 Git Default Options
Keep default options for terminal emulator.
16
Image 36 Git Terminal Emulator
Select default behavior for 'git pull' command.
Image 37 Git Pull Command
Select default credential helper.
17
Image 38 Git Credential Helper
Customize any additional options if desired.
Image 39 Git Extra Options
Select experimental features if desired.
Image 40 Git Experimental Options
Now git bash is working.
18
1.1.4 Java Development Kit
The Java™ Development Kit (JDK) is software for Java developers. The JDK
enables you to write applications that are developed once and run anywhere on
any Java virtual machine. Java applications that are developed with the JDK on
one system can be used on another system without changing or recompiling the
code. (IBM, 2023)
installation first execute the file. Execute the file, accept it to make changes to
the device, and then click next to setup JDK.
Image 41 JDK Installation
Select the path where the file will be located.
Image 42 JDK Location
After that, wait until the installation to finish, and click close.
19
Image 43 JDK Installation Finished
Create the user variable according to the path where the file is located.
Image 45 Java_Home Path
20
Image 46 System Variable Path 2
Add a new Environment Variable according to the path where the bin of the file
is located.
Image 47 JDK Path
1.1.5 Node
Node.js is used to build back-end services like APIs like Web App, Mobile App or
Web Server. A Web Server will open a file on the server and return the content
to the client. (Geeks for Geeks, n.d.)
installation first execute the file.
Image 48 Node Execution
Then press next to start the setup process.
21
Image 49 Node Setup
Accept the End-User License Agreement.
Image 50 Node License Agreement
Choose a custom location or click “Next” to install. In my case I will click next.
22
Image 51 Node Location
Select the way the functions will be installed.
Image 52 Node Custom Setup
Click on the “Install button”
23
Image 53 Node Installation
Wait for the installation to finish.
Image 54 Node Installation Completed
1.1.6 Gradle
For this program, the teacher has shared a RAR file with the program in it. To
start the installation first extract the file.
24
Image 55 Gradle Extraction
While the extraction finishes, create a folder named 'Gradle' in the location 'C:\'.
Image 56 Gradle Folder
Now that the RAR file has been extracted, open the folder, and move the folder
named 'gradle-8.5' to the 'Gradle' folder created.
Image 57 Gradle Movement
25
Create the user variable according to the path where the ‘gradle-8.5’ folder is
located.
Image 59 Gradle_Home Path
Image 60 System Variable Path 3
Add a new Environment Variable according to the path where the bin of the folder
is located.
Image 61 Gradle-8.5 Path
26
1.1.7 Execution Policy
Open PowerShell, press Win + X and choose "Windows PowerShell" or

"PowerShell" from the menu.
To view the current execution policies for all scopes, type and run the following
command: ‘Get-ExecutionPolicy -List’.
Image 62 Get-ExecutionPolicy -List Command
To set the execution policy for the CurrentUser scope to "RemoteSigned," type
and run the following command: ‘Set-ExecutionPolicy RemoteSigned -Scope
CurrentUser’.
Image 63 Set-ExecutionPolicyList Command
Type "y" for yes and press ‘Enter’ to confirm the change.
Image 64 Type Yes
27
To confirm that the execution policy has been changed, type and run the ‘Get-
ExecutionPolicy -List’ command.
Image 65 ExecutionPolicy List Updated
1.2 Frameworks and libraries
For the development of the course enrollment application, it is necessary to

comply with the following frameworks and libraries to start the project.
1.2.1 Cordova
Cordova is an open-source mobile development framework. It allows you to use

standard web technologies such as HTML5, CSS3, and JavaScript for cross-
platform development, avoiding each mobile platform’s native development
language. (Cordova, n.d.)
To use this framework, first create a folder in the documents directory, the folder
must have a publication folder, and a test folder.
Image 66 Cordova Directories
28
Open the Test Folder in Visual Studio Code
Image 67 Test Folder in VS Code
Open the terminal and execute the ‘npm install -g cordova’ command.
Image 68 Cordova Installation
Create a blank Cordova project using the command-line tool. Navigate to the
directory where you wish to create your project and type ‘cordova create MyApp.’
Image 69 Project Directory
After creating a Cordova project, navigate to the project directory with ‘cd MyApp’.
Add the browser platform and android platform with ‘cordova platform add
{platform}.’
Image 70 Platforms Installations
Now cordova is installed in the project folder.
29
1.2.2 Bootstrap
Bootstrap is a front-end development framework for the creation of websites and

web apps. Designed to enable responsive development of websites. (Sola, 2022)
Use "npm install bootstrap" to install Bootstrap to the project.
Image 71 Bootstrap Installation
1.2.3 Jquery
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like
HTML document traversal and manipulation, event handling, animation, and Ajax
much simpler with an easy-to-use API that works across a multitude of browsers.
(Jquery, n.d.)
Use "npm install jquery" to install Jquery to the project.
Image 72 Jquery Installation
30
2 Project Setup
Thanks to all the installation and the correct configuration of each of the
resources, the project can begin to structure.
Open the index file in ‘www’ folder and disable the Content Security Policy by
commenting out the corresponding line to prevent exceptions.
Image 73 Comment Content Security Policy
Implement the MVC architecture for better organization, ensuring that only files
in the "www" folder are included in the final project. Follow the recommended
folder structure for a clean organization.
Image 74 MVC Implementation
31
Update file references in the "index.html" file after moving the "js," "css," and
"img" folders.
Image 75 File References Updated
Run the Cordova application using the command "cordova run browser" in the
terminal to test the application in the default browser.
Image 76 App Running
32
3 Extra: JavaScript Exercises
3.1 JS Variables
3.1.1 Exercise 1
Create a variable called carName, assign the value Volvo to it.
let carName = "Volvo";
3.1.2 Exercise 2
Create a variable called x, assign the value 50 to it.
let x = 50
3.1.3 Exercise 3
Display the sum of 5 + 10, using two variables: x and y.
let x = 5;
let y = 10;
document.getElementById("demo").innerHTML = x + y;
33
3.1.4 Exercise 4
Create a variable called z, assign x + y to it, and display the result in an alert box.
let x = 5;
let y = 10;
let z = x + y;
alert(z);
3.1.5 Exercise 5
On one single line, declare three variables with the following names and values:
firstName = "John"
lastName = "Doe"
age = 35
let firstName = "John", lastName = "Doe", age = 35;
3.2 JS Operators
3.2.1 Exercise 1:
Multiply 10 with 5, and alert the result:
alert(10 * 5);
3.2.2 Exercise 2:
34
Divide 10 by 2, and alert the result:
alert(10 / 2);
3.2.3 Exercise 3:
Alert the remainder when 15 is divided by 9.
alert(15 % 9);
3.2.4 Exercise 4:
Use the correct assignment operator that will result in x being 15 (same as x = x
+ y).
x = 10;
y = 5;
x += y;
3.2.5 Exercise 5:
Use the correct assignment operator that will result in x being 50 (same as x = x
* y).
x = 10;
y = 5;
x *= y;
3.3 JS Data Types
35
3.3.1 Exercise 1:
Use comments to describe the correct data type of the following variables:
let length = 16; // number

let lastName = "Johnson"; // string
const x = {
firstName: "John",
lastName: "Doe"
}; // object
3.4 JS Functions
3.4.1 Exercise 1:
Execute the function named myFunction.
function myFunction() {
alert("Hello World!");
}
myFunction;
3.4.2 Exercise 2:
Create a function called "myFunction".
function myFunction {
alert("Hello World!");
}
36
3.4.3 Exercise 3:
Make the function return "Hello".
return "Hello";
}
document.getElementById("demo").innerHTML = myFunction();
3.4.4 Exercise 4:
Make the function display "Hello" in the inner HTML of an element with the ID
"demo".
document.getElementById("demo").innerHTML = "Hello";
}
3.5 JS Objects
3.5.1 Exercise 1:
Alert "John" by extracting information from the person object.
const person = {
firstName: "John",
lastName: "Doe"
};
37
alert(person.firstName);
3.5.2 Exercise 2:
Add the following property and value to the person object: country: Norway.
const person = {
firstName: "John",
lastName: "Doe",
country: "Norway"
};
3.5.3 Exercise 3:
Create an object called person with name = John, age = 50.

Then, access the object to alert("John is 50").
const person = {
name: "John", age: 50
};
alert(person.name + " is " + person.age);
38

U2-A2 Resources

Uploaded by

Copyright:

Available Formats

You might also like

U2-A2 Resources

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

U2-A2 Resources

Uploaded by

Copyright:

Available Formats

ACTIVITY:

TÉCNICO SUPERIOR UNIVERSITARIO EN

CARLOS ENRIQUE GONGORA ESCALONA

CD. REYNOSA, TAMAULIPAS MAYO 2024.

2 Project Setup ................................................................................. 31

3 Extra: JavaScript Exercises ....................................................... 33

Resource Version Link

For the development of the course enrollment application, it is necessary to

1.1.1 Visual Studio Code

According to Microsoft (n.d.), Visual Studio Code is a lightweight but powerful

Image 1 Visual Studio Code

Image 2 Visual Studio Code

Now that the file is downloaded, execute it to start the installation.

Image 3 Visual Studio Code Execution

Choose the additional tasks to be performed by the program. In my case I will

Image 5 Visual Studio Code Additional Tasks

Start the installation process by clicking on the install button.

Image 6 Visual Studio Code Installation

Image 7 Android Studio Execution

Install both components of Android Studio.

Image 9 Android Studio Components

Image 11 Android Studio Installation

Image 13 Android Studio Wizard

Image 14 Android Studio Installation Type

Image 15 Android Studio SDK Components Setup

Image 16 Android Studio Emulator Settings

Install Android Emulator Hypervisor driver, click ‘Next’ and proceed.

Accept the terms and conditions of the SDK components.

Image 18 Android Studio SDK components License Agreement

Now wait for the SDK components to download.

Image 19 Android Studio Downloading Components

Click in ´More Actions´ to open the SDK Manager.

Image 21 Android Studio SDK Platforms

Image 23 Android Studio SDK Tool

Wait for all SDK components and SDK tools to be installed.

Image 24 Android Studio Platforms and Tools Installation

Open the Environment Variables panel.

Image 26 Android SDK Path

Now open the path system variable.

Image 27 Path System Variable 1

Image 28 SDK Platforms and Tools Path

Git is a free and open-source distributed version control system designed to

Image 29 Git Execution

Choose default settings for installation location and components.

Image 31 Git Editor

Keep default SSH program.

Image 33 Git SSH

Use the OpenSSL Library for server certificates.

Keep default options for line ending conversions.

Image 35 Git Default Options

Keep default options for terminal emulator.

Select default behavior for 'git pull' command.

Image 37 Git Pull Command

Select default credential helper.

Customize any additional options if desired.

Image 39 Git Extra Options

Select experimental features if desired.

Image 40 Git Experimental Options

Now git bash is working.