Scribd
Upload
55 views17 pages

Project 2: Installing An IDE: Name of The Assignment

This document summarizes how to install the WebStorm IDE and create a basic web application that displays mathematical functions. It first defines what an IDE is and describes common IDE features. It then explains how to download and install WebStorm, and outlines the steps to create an HTML file, JavaScript file, and link them to display addition, subtraction, multiplication, and division calculations in a web browser. The conclusions note that WebStorm allows for easy code editing and debugging of various languages.

Uploaded by

Bryan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
55 views17 pages

Project 2: Installing An IDE: Name of The Assignment

This document summarizes how to install the WebStorm IDE and create a basic web application that displays mathematical functions. It first defines what an IDE is and describes common IDE features. It then explains how to download and install WebStorm, and outlines the steps to create an HTML file, JavaScript file, and link them to display addition, subtraction, multiplication, and division calculations in a web browser. The conclusions note that WebStorm allows for easy code editing and debugging of various languages.

Uploaded by

Bryan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

San Carlos University of Guatemala Group Number

Faculty of Engineering
School of Sciences 15
Technical English 1
Section: N
Date: October 12th, 2020

Name of the assignment:

Project 2: Installing an IDE

ID Number Name
201602880 Bryan Alexander Portillo Alvarado
201314182 Eduardo Xavier Ordoñez Monterroso
201602645 Werner Isaac Perez Zamora
201906935 Cristian Rodrigo Diaz España
201113817 Nery Rolando Ramirez Tzay
Index
Contents Page

What is an IDE? ................................................................................. 5


IDE Common Features ..................................................................... 5
WebStorm .......................................................................................... 6
Downloading and Installing WS ....................................................... 6
Making our First App Web .............................................................. 10
Conclutions ........................................... Error! Bookmark not defined.
Annexes ............................................................................................ 16
References ....................................................................................... 17
Introduction

The IDE is a programming environment that is packaged, like an


application program that is a development environment of a
programming language that is composed of a set of tools in an
interactive way that allows the developer to compile and debug.
An IDE can work with several programming languages, which can help
to handle entire projects that is to say to handle many files. There are
IDEs that also include class browsers, objects and class hierarchy
diagrams for when you do object-oriented programming.
The installation of an IDE is important because it depends on this that
the tools that are integrated work in their entirety and can provide the
help and experience for which they were created, creating a pleasant
work environment for developers
Objectives

General

• Describe what an IDE is, its characteristics and how to install it


on our computer.

Specific

• Describe what the WebStorm IDE is and how to install it correctly.

• Understand the step-by-step process of creating a window that


displays mathematical functions in the WebStorm IDE.

• Analyze the feasibility of using the WebStorm IDE, in the creation


of a window that shows mathematical functions.
What is an IDE?
Writing code is an important part of programming. We start with a
blank file, write a few lines of code, and a program is born! IDEs
facilitate this process with features like syntax highlighting
and autocomplete.

An integrated development environment or (IDE) is an application that


facilitates application development. IDEs are designed to encompass
all programming tasks in one application. Therefore, IDEs offer a central
interface featuring all the tools a developer need.

IDE Common Features

Code editor

This feature is a text editor designed for writing and editing source code.
Source code editors are distinguished from text editors because they
enhance or simplify the writing and editing of code.
Compiler

This tool transforms source code writing in a human readable writable


language into a form executable by the computer.

Debugger

This tool is used during testing to help debug application programs.


WebStorm

WebStorm is a powerful IDE for modern JavaScript development.


This IDE provides full support for JavaScript, TypeScript, HTML, CSS
as well as for frameworks such as React, Angular, and Vue.js right out
of the box, no additional plugins are required.
Besides client-side applications, WebStorm helps you develop server-
side applications (trending topic) with Node.js, mobile apps with React
Native or Cordova, and desktop apps with Electron

Downloading and Installing WS


WebStorm is not a free product, you need buy it, but you can get a
License and download it for free, using your institutional E-mail.

STEP 1. Download WebStorm

Go to https://www.jetbrains.com/webstorm/ and press the button Download


STEP 2. Right click on Webstorm-xx.exe and press Run as
administrator

STEP 3. Click on next Button


Wizard installer will pop up on your screen.
STEP 4. Choose your Installation folder Location
You can change the Destination folder or set the Default folder, and then press Next.

STEP 5. Press Install Button


You must wait the installation process, DONT CLOSE THE INSTALLATION WINDOW.
STEP 6. Press Finish
If all been installed correctly, you will see the Completing WebStorm Setup message

Once the installation its over you can open it, the first time you will see the next Screen.

You be able to choose the Evaluate for free option or you can also input your credentials (only if
you had the License)
Making our First App Web
We are going to make our first web app with WebStorm IDE, we must select New Project
option.

In Right side you be able to select, what technology do you want to apply (this option will do a
template project also will download source dependencies for that template )
In this case we are going to use the Bootstrap option. (“Bootstrap is a free and open-
source CSS framework directed at responsive, mobile-first front-end web development. It
contains CSS- and (optionally) JavaScript-based design templates
for typography, forms, buttons, navigation, and other interface components”)

After that we will see 2 folders css and js, this folder contains all resources of Bootstrap
framework.
Let's walk through the following steps. At the end of this, you will see an web application
that displays "mathematical results" in your web browser.
So our first thing to do is create a html file, following the picture below.

We will type the following code (basic structure of html file)


we will add the following tags: h1 will represents the title, <div class=” row”> will represent the
button grid’s space. Also we are going to add the reference to our Bootstrap resources with the
<link> tag.

Looks like…

After applying some colors, margins…


Also, we are going to create a js File on our js Folder. This file will contain the arithmetic
methods.

In Functions.js we use document.GetElement. The method returns the element that has the ID
attribute with the specified value ( the value will be the Id of each Button created on index.html),
and we add an EventListener this method attaches an event handler to the specified element
( mousse click will be the event). Two variable that handle input values, those are added to the
Event methods and a total variable ( name doesn’t matter) that combine the previous variables
in one arithmetic function;
We do the same for each Arithemetic method.

And we are done!!!!!

Addition

Subtraction

Multiplication

Division
Conclusions

• An IDE is easy to download and install, and in terms of console


management it is very agile and optimal for user’s who are not
familiar with the subject.

• WebStorm allows us an ease of code editing, as well as efficient


navigation, error detection and refactoring functionalities for
various languages.

• WebStorm is integrated with very popular command line tools,


and it was very useful in the development of the window where
mathematical functions are performed.
Annexes

System Requirements:
RAM: 8GB of total system RAM.
Disk space: 2.5GB and another 1GB for caches
Monitor resolution: 1024x768
Operating system: Officially released 64bit versions
(Microsoft Windows 8 or later, any Linux that
supports Gnome, KDE, macOs 10.13 or later)

JavaScript (JS) is a lightweight, interpreted, or just-


in-time compiled programming language with first-
class functions. While it is most well-known as the
scripting language for Web pages, many non-
browser environments also use it, such as Node.js,
Apache CouchDB and Adobe Acrobat. JavaScript
is a prototype-based, multi-paradigm, single-
threaded, dynamic language, supporting object-
oriented, imperative, and declarative (e.g.
functional programming) styles.
References

JavaScript. (2020). Retrieved 11 October 2020, from


https://developer.mozilla.org/en-US/docs/Web/JavaScript

Mark Otto, a. (2020). Introduction. Retrieved 11 October 2020, from


https://getbootstrap.com/docs/4.5/getting-started/introduction/

Getting started with WebStorm - Help | WebStorm. (2020). Retrieved


11 October 2020, from
https://www.jetbrains.com/help/webstorm/getting-started-with-
webstorm.html

Walker, A. (2020). What is an IDE (Integrated Development


Environment)?. Retrieved 11 October 2020, from
https://learn.g2.com/ide#ide-benefits

ECMAScript 6. (2020). Retrieved 11 October 2020, from


https://www.w3schools.com/js/js_es6.asp

You might also like