ACTIVITY:

“START RESOURCE INSTALLATION”

TÉCNICO SUPERIOR UNIVERSITARIO EN

TECNOLOGÍAS DE LA INFORMACIÓN
AREA: DESARROLLO DE SOFTWARE
MULTIPLATAFORMA
PRESENTS:

HUMBERTO MISAEL ARAGUZ CRUZ

CT. REYNOSA, TAMAULIPAS MAY 2024.

Table of contents

Subject Page

Table of contents ................................................................................................... i

Index of figures ................................................................................................... iii

Introduction ......................................................................................................... 1

Establish the workspace ..................................................................................... 2

Creating the Folder.......................................................................................... 2

Adding the Android Platform ............................................................................ 3

Adding the Browser Platform ........................................................................... 3

Installation of the resources ................................................................................ 4

Installation of bootstrap ................................................................................... 4

Installation of jQuery ........................................................................................ 4

Visualize the application ..................................................................................... 5

Command to run the browser .......................................................................... 5

Implementing the Model-View-Controller ............................................................ 6

Implementing Partial Views ................................................................................. 7

Changes in the “index.html” ................................................................................ 7

Conclusion .......................................................................................................... 8

JavaScript Exercises........................................................................................... 9

JS Variables .................................................................................................... 9

JS Operators .................................................................................................. 11

JS Data Types ............................................................................................... 13

i
 JS Functions.................................................................................................. 14

JS Objects ..................................................................................................... 16

JavaScript Completed Exercises ...................................................................... 17

JavaScript Exercises (text) ............................................................................... 18

JS Variables .................................................................................................. 18

JS Operators ................................................................................................. 19

JS Data Types ............................................................................................... 20

JS Functions.................................................................................................. 21

JS Objects ..................................................................................................... 22

ii
Index of figures

Figure Page

Figure 1 Creating the main folder........................................................................ 2

Figure 2 Selecting the new folder to work ........................................................... 2
Figure 3 Adding the android platform .................................................................. 3
Figure 4 Adding the browser platform ................................................................. 3
Figure 5 Installing bootstrap framework .............................................................. 4
Figure 6 Installing jQuery to the project .............................................................. 5
Figure 7 Running the project on the browser ...................................................... 5
Figure 8 Ordering the folder to follow the MVC ................................................... 6
Figure 9 Function to load the partial views .......................................................... 7
Figure 10 Delete the security policy .................................................................... 7
Figure 11 JS Variables Exercise 1 ...................................................................... 9
Figure 12 JS Variables Exercise 2 ...................................................................... 9
Figure 13 JS Variables Exercise 3 ...................................................................... 9
Figure 14 JS Variables Exercise 4 .................................................................... 10
Figure 15 JS Variables Exercise 5 .................................................................... 10
Figure 16 JS Variables Completed Exercises ................................................... 10
Figure 17 JS Operators Exercise 1 .................................................................... 11
Figure 18 JS Operators Exercise 2 .................................................................... 11
Figure 19 JS Operators Exercise 3 .................................................................... 11
Figure 20 JS Operators Exercise 4 ................................................................... 12
Figure 21 JS Operators Exercise 5 ................................................................... 12
Figure 22 JS Operators Completed Exercises .................................................. 12
Figure 23 JS Data Types Exercise 1 ................................................................. 13
Figure 24 JS Data Types Completed Exercises ................................................ 13
Figure 25 JS Functions Exercise 1 ................................................................... 14

iii
Figure 26 JS Functions Exercise 2 ................................................................... 14
Figure 27 JS Functions Exercise 3 ................................................................... 15
Figure 28 JS Functions Exercise 4 ................................................................... 15
Figure 29 JS Functions Completed Exercises .................................................. 15
Figure 30 JS Objects Exercise 1 ....................................................................... 16
Figure 31 JS Objects Exercise 2 ....................................................................... 16
Figure 32 JS Objects Exercise 3 ....................................................................... 17
Figure 33 JS Objects Completed Exercises ...................................................... 17
Figure 34 JavaScript Completed Exercises ...................................................... 17

iv
Introduction

In this document, we embark on the journey of setting up a development

workspace for Android applications using Visual Studio Code and Apache
Cordova. Our primary focus will be on crafting an efficient workspace, starting with
the creation of a dedicated project folder and the initiation of the Android platform.
Leveraging the power of Cordova, we extend our reach to incorporate the browser
platform, broadening the scope of our application.

As we delve deeper into the development environment, we enhance the user

interface by installing essential resources such as Bootstrap and jQuery. This
guide not only provides step-by-step instructions but also emphasizes the
importance of structuring your project using the Model-View-Controller (MVC)
paradigm. Learn how to organize your project folders, create necessary
directories, and efficiently implement partial views to optimize your application's
functionality.

Follow along as we guide you through each stage, from the foundational setup to
the implementation of the Model-View-Controller architecture, ensuring a
seamless and organized approach to Android development.

1
Establish the workspace

We will be utilizing Visual Studio Code as our primary code editor, and Apache
Cordova specifically geared towards Android development. To initiate this
process, we will create a dedicated folder within your system for your project's
files.

Creating the Folder

Open your terminal and navigate to the directory where you want to store your
project. Once there, execute the following command to create a new folder for
your project:

Figure 1 Creating the main folder

This creates the fundamental directory structure for your project. We will proceed
with further steps to configure it for development.

Then point out from the terminal that you are now working on the folder of the app
created with Cordova, using the cd command:

Figure 2 Selecting the new folder to work

2
Adding the Android Platform

With the workspace established, the next step involves incorporating the target
platform for your application. In this case, we will be focusing on Android
development.

To specify Android as the platform for your project, use the following command in
your terminal within the project directory:

Figure 3 Adding the android platform

Adding the Browser Platform

And the browser could see the project:

Figure 4 Adding the browser platform

3
Installation of the resources

Once you have the development environment set up, we will incorporate the
necessary resources to enhance the user interface of your application.

Installation of bootstrap

Integrate the Bootstrap framework with the following command:

Figure 5 Installing bootstrap framework

Installation of jQuery

Also, we must install the jQuery, with the next command:

4
 Figure 6 Installing jQuery to the project

Visualize the application

Command to run the browser

To view the project on the computer we must run the project in the search
browser, with the next command:

Figure 7 Running the project on the browser

5
Implementing the Model-View-Controller

One time we have all the necessary resources installed we must move it to the
correctly folders to follow the MVC:

Figure 8 Ordering the folder to follow the MVC

With one level less than 'www' we must create three folders with the following
names: Models, Views, and Controllers.

Also create the public folder at the same level as Models, Views, and Controllers
to add the folder of ‘css’, ‘js’, and ‘img’.

Also, if you do not know where the files are downloaded, all files downloaded with
the terminal are saved in the “node_modules” folder.

6
Implementing Partial Views

Now we need to modify certain files by adding, changing, and deleting lines, we
are starting with “index.js”. What we are doing here is writing a function to load a
partial view.

Figure 9 Function to load the partial views

Changes in the “index.html”

Finally, we must change the main index, called “index.html”, by removing a line
where a safety line existed, changing, and adding file references, and adding the
other part of the function to load the partial view. Further down in the Cordova
policy paragraph there is a security line, we must eliminate or comment on it, it
could work with any problem.

Figure 10 Delete the security policy

7
Conclusion

In conclusion, this guide comprehensively navigates the process of setting up a

development workspace for Android applications using Visual Studio Code and
Apache Cordova. From establishing the initial project folder to incorporating
Android and browser platforms, the document meticulously guides developers
through each step.

Emphasizing the significance of structuring projects with the Model-View-

Controller paradigm, the guide ensures a well-organized approach to Android
development.

The incorporation of essential resources like Bootstrap and jQuery enhances the
user interface, while the detailed instructions on implementing partial views and
organizing project folders contribute to optimizing functionality. This guide equips
developers with the knowledge and tools needed for a seamless and efficient
Android development experience.

8
JavaScript Exercises

JS Variables

Figure 11 JS Variables Exercise 1

Figure 12 JS Variables Exercise 2

Figure 13 JS Variables Exercise 3

9
 Figure 14 JS Variables Exercise 4

Figure 15 JS Variables Exercise 5

Figure 16 JS Variables Completed Exercises

10
JS Operators

Figure 17 JS Operators Exercise 1

Figure 18 JS Operators Exercise 2

Figure 19 JS Operators Exercise 3

11
 Figure 20 JS Operators Exercise 4

Figure 21 JS Operators Exercise 5

Figure 22 JS Operators Completed Exercises

12
JS Data Types

Figure 23 JS Data Types Exercise 1

Figure 24 JS Data Types Completed Exercises

13
JS Functions

Figure 25 JS Functions Exercise 1

Figure 26 JS Functions Exercise 2

14
 Figure 27 JS Functions Exercise 3

Figure 28 JS Functions Exercise 4

Figure 29 JS Functions Completed Exercises

15
JS Objects

Figure 30 JS Objects Exercise 1

Figure 31 JS Objects Exercise 2

16
 Figure 32 JS Objects Exercise 3

Figure 33 JS Objects Completed Exercises

JavaScript Completed Exercises

Figure 34 JavaScript Completed Exercises

17
JavaScript Exercises (text)

JS Variables

Exercise 1.- Create a variable called carName, assign the value Volvo to it.

Answer: let carName = “Volvo”;

Exercise 2.- Create a variable called x, assign the value 50 to it.

Answer: let x = 50

Exercise 3.- Display the sum of 5 + 10, using two variables: x and y.

Answer:

let x = 5;

let y = 10;

document.getElementById(“demo”).innerHTML = x + y;

Exercise 4.- Create a variable called z, assign x + y to it, and display the result in
an alert box.

Answer:

let x = 5;

let y = 10;

let z = x + y;

alert (z);

18
Exercise 5.- On one single line, declare three variables with the following names
and values:

firstName = "John"

lastName = "Doe"

age = 35

Answer: let firstName = “John”, lastname = “Doe”, age = 35;

JS Operators

Exercise 1.- Multiply 10 with 5, and alert the result:

Answer: alert(10 * 5);

Exercise 2.- Divide 10 by 2, and alert the result:

Answer: (10 / 2);

Exercise 3.- Alert the remainder when 15 is divided by 9.

Answer: (15 % 9);

Exercise 4.- Use the correct assignment operator that will result in x being 15
(same as x = x + y).

Answer:

x = 10;

y = 5;

19
x += y;

Exercise 5.- Use the correct assignment operator that will result in x being 50
(same as x = x * y).

Answer:

x = 10;

y = 5;

x *= y;

JS Data Types

Exercise 1.- Use comments to describe the correct data type of the following
variables:

1. let length = 16; // _______________

2. let lastName = “Johnson”; // _____________

3. const x = {

firstName: “John”,

lastName: “Doe”

}; // ________________

Answers: 1.- Number, 2.- String, 3.- Object

20
JS Functions

Exercise 1.- Execute the function named myFunction.

Answer:

function myFunction() {

alert(“Hello World!”);

myFunction();

Exercise 2.- Create a function called "myFunction".

Answer:

function myFunction() {

alert(“Hello World!”);

Exercise 3.- Make the function return "Hello".

Answer:

function myFunction() {

return “Hello”;

document.getElementById(“demo”).innerHTML = myFunction();

21
Exercise 4.- Make the function display "Hello" in the inner HTML of an element
with the ID "demo".

Answer:

function myFunction() {

document.getElementById(“demo”).innerHTML = “Hello”;

JS Objects

Exercise 1.- Alert "John" by extracting information from the person object.

Answer:

const person = {

firstName: “John”,

lastName: “Doe”

};

alert (person.firstName);

Exercise 2.- Add the following property and value to the person object: country:
Norway.

Answer:

const person = {

firstName: “John”,

lastName: “Doe”,

22
 country: “Norway”

};

Exercise 3.- Create an object called person with name = John, age 50.

Then, access the object to alert("John is 50").

Answer:

const person = {

name: “John”, age: 50

};

alert(person.name + “ is “ + person.age);

23