Module 004 Setting up My Environment

“The environment is everything that isn’t me.”

–Albert Einstein.

After undergoing the trouble of listing what needs to be done and visualizing
the flow of your solution, what is next to do? It is to implement them as
designed. To do that, you will need an environment to do so. Environments
are essential to accomplish things. Human have Earth to live in. Programs
have the Computer to run into. But how about the source codes? We store
them into individual files.

This is the main coverage of this module. To setup your working

environment and to familiarize with it.

At the end of this module, you will be able to:

1. Identify the latest tools used to develop C++ programs
2. Identify the steps needed to install and configure your working
environment
3. Identify the parts of the Visual Studio Code
4. Argue the importance of having version controls

Again, researching beyond the coverage of this module is highly encouraged

to supplement your understanding of the topics covered. And as always,
think and see beyond the box.

What are we waiting for? Let us continue our exploration of the world of
Computer Programming.

Course Module
Recall

In the previous module, we continued our discussion of flowcharts and

pseudocodes. We augmented our understanding of flowcharts through
solving problems and writing technical work items. We enumerated the
characteristics of Technical Work Items, namely:
a) Concise
b) Unambiguous
c) Classifiable as either INPUT, PROCESS or OUTPUT
d) Specific
Lastly, we worked on sample problems, interpreted them, wrote Technical
Work Items, drafted flowcharts and composed pseudocodes.

Introduction

Working Environment is essential to organize, categorize, control and ensure

efficiency and productivity of accomplishing tasks. These tasks include but is
not limited to our software development activities and configurations. This
provides ways for us to be able to conduct our development activities away
from other activities such as Office Productivity, Business Intelligence and
Entertainment. In addition, having our working environment ensures us that
the tools and development files that we will use are organized in two
separate directories, a utility-centric root directory and a projects directory.

Tools of the Trade

When we talk about environments, we deal with all that is needed for
software development. We are not limited to IDEs only. We also include the
operating system where we will be storing our files. We also include the
compilers that will eventually compile our source codes. And much more. Let
us do this!

Operating System

One of the main thing we consider when undergoing Software Development

is the operating system. It is here where we develop our software. It is here
where we run our software. It is here where we look for IDEs that we can use
to augment our development. Choosing the best suitable operating system
 enables us to better forecast the features that we will place in our software
and the various permission requests that we will need.

Figure 1. Griffin, A. (2015). Windows 10 Free: Why is Microsoft Giving Away Its New Operating
System? And Who’s Losing Out? [Online Blog]. Retrieved from http://www.independent.co.uk/life -
style/gadgets-and-tech/news/windows-10-free-why-is-microsoft-giving-away-its-new-operating-
system-and-who-s-losing-out-9995492.html#gallery

For this course, we will be using Microsoft Windows as our operating system.
Majority of users use Microsoft Windows as their operating system because
of its user-friendly interface and easy navigation. Aside from that, the power
that Windows deliver to the user is tremendous. Majority of configurations
are available for the users to exploit and manage. As for the security, vast
access control and file management is available and easy to configure.

You may also try using any distribution of Linux operating system like Ubuntu
and Fedora in writing and compiling your C++ source codes. However, this
course will only cover Microsoft Windows. The setup and installation process
may vary, however IDE configuration and setup will virtually be the same.

Integrated Development Environment

In Software Development, we have the so-called Integrated Development

Environment (IDE). IDEs are fully-integrated software that contains various
features dedicated to software development. They organize source codes and
development artifacts. They contain several shortcuts that enable the
developer to compile their source codes without leaving the IDE. Some
examples of IDEs are Eclipse, Visual Studio Enterprise, and Android Studio.

Course Module
 Figure 2. Visual Studio Code

Our choice of IDE for this course is the Visual Studio Code (VSCode) of
Microsoft. Visual Studio Code is the latest iteration of Microsoft Visual Studio
series available for free. It is a lightweight IDE which means it uses minimal
storage size and RAM resources. It supports a variety of programming
languages like C++, C#, JavaScript, Python and PHP. This IDE supports syntax
highlighting, intellisense, plugins, and file system organization. Visual Studio
Code is available for Windows, MacOS and Linux.

Compilers

Not only do we need to have an Integrated Development Environment, we

also need to enable our Integrated Development Environment to compile our
selected compiled programming language to executables. In our case, we will
need to have a specialized compiler to be able to compile our C++ source
codes. Since C++ is a longstanding programming language, C++ has a number
of compilers. These compilers vary mainly on how they support internal
libraries, up-to-date third-party libraries and code optimization.
 Figure 3. MinGW Installation Manager

Minimalist GNU for Windows, or simply MinGW, is a development utility for

Windows. It presents minimalistic approach in presenting tools and libraries
necessary to develop application for Microsoft Windows. This focuses on
Native Microsoft Windows Application Development, hence any third-party
libraries and non-standard utilities are omitted to ensure that the
development process adhere to the standard of Microsoft Windows without
needing to install additional unnecessary dependencies for your application,
usually without the developers’ knowledge.

There are a number of development utilities and compiler-centric tools to build

and compile C++ applications. Some Integrated Development Environment
have their own compilers built within the IDE like Visual Studio Express.

Version Control

Now that we have a list of tools that we minimally need to develop our very
first C++ application, we need to secure a version control for our files.Version
Control is a way to organize the development files and configurations in a
centralizedrepository. Having version control for small projects are optional
considering the low number of files that are processed, however this course
will make use of version control to allow you to revert and secure copies of
changes that you will commit to the repository, and build your initial
reputation in the Open Source Community.

Course Module
 Figure 4. MicroEJ. (2015). MicroEJ and Github [Online Blog].
Retrieved from http://www.microej.com/microej-and-github/

We will be using the Open Source Community’s most famous and most used
online version control repository since 2016, the Github. Github is a free and
public web-based repository that allows distributed version control and
source control management tool that uses extended Git functionalities. The
repositories for Github are public for free users which we will exploit for this
course.

Microsoft has its own version control repository for Open Source projects called
CodePlex which tried to be in par with Github. CodePlex was made to allow
developers in the Open Source Community to publicly share software.

Installing, Setting and Configuring Our Work Environment

In this section, we will install, setup and configure the tools that we will use
for the development. Let us get started!

Creating GitHub Account

 Figure 5. Github, Inc. Official Website

We will start with creating our very first Github account. If you already have
an existing account, you may use that account and skip to the next
subsection.
1. Visit the GitHub, Inc. website through the link https://github.com/.
2. Click the “Sign up” link on the upper right corner of the page.
3. For Step 1:
a. Enter your preferred username, valid and active email address,
and password.
b. Click “Create an account” button.
4. For Step 2:
a. Select “Unlimited public repositories for free”.
b. Leave the “Help me set up an organization next” checkbox
unticked.
c. Click “Continue” button.

5. For Step 3:
a. Select the most appropriate options you desire. This course
will not limit you on how you will use your GitHub account in
the future.
b. Click “Submit” button.
6. You are now ready to create your first GitHub project.

Creating GitHub Repository for Week004

Course Module
 Figure 6. Week004 Initial Github Repository

Now that we have our GitHub account, we need to create a repository for this
week’s configurations. The initial steps might differ depending if you already
have created repositories in the past, or if this will be your very first GitHub
repository.

1. To create an initial repository:

a. If you do not have yet any repository,
i. Click “Start a project” button.
b. If you already have an existing repository(-ies),
i. Click “New repository” button.
2. Enter “AMAOEd-CompProg1-Week004” (without spaces) in the
“Repository name” textbox.
3. Enter “My very first C++ application.” in the “Description (optional)”
textbox.
4. Make sure the “Public” checkbox is ticked.
5. Tick the “Initialize this repository with a README” checkbox.
6. Set the GitIgnore template:
a. Click the “Add .gitignore: None” button.
b. Enter “C++” in the “Filter ignores” textbox.
c. Click “C++” in the typeahead.
d. Verify that the button changes to “Add .gitignore: C++”.
7. Set the License template:
a. Click the “Add a license: None” button.
 b. Enter “GNU General Public License v3.0” in the “Filter licenses”
textbox.
c. Click “GNU General Public License v3.0” in the typeahead.
d. Verify that the button changes to “Add a license: GNU General
Public License v3.0”.
8. Verify that the fields are correct and accurate.
9. Click “Create repository” button.
10. You now have created your Github repository for this week’s activity.

Downloading Visual Studio Code

Figure 7. Visual Studio Code Official Website

The download and installation is straight forward. For convenience of users

working with different Microsoft Windows Architecture, we will stick with
the standard Visual Studio Code for 32-bit Windows.

1. Visit the Visual Studio Code official website at

https://code.visualstudio.com.
2. Click the “Download” button.
3. Click the “[Download Icon] Windows” button.
4. Verify that the Download page is displayed. Wait until the download is
completed.

Course Module
Downloading Visual Studio Code

Figure 8. Visual Studio Code GUI

Next we need to install our IDE, the Visual Studio Code. Follow the steps
below with ease.

1. Run the downloaded Visual Studio Code installer (i.e. VSCodeSetup-

xxxx-x.x.x.exe).
a. Approve the necessary security checkpoint if necessary (for Admin
rights confirmation boxes).
2. Click “Next” button.
3. Read and accept the License Agreement:
a. Tick the “I accept the agreement” checkbox.
b. Click “Next” button.
4. Use the default installation directory:
a. For 32-bit Windows, the directory should be “C:\Program
Files\Microsoft VS Code”.
b. For 64-bit Windows, the directory should be “C:\Program Files
(x86)\Microsoft VS Code”.
c. Click “Next” button.
5. Select the start menu folder,
a. Keep the value as is “Visual Studio Code”.
b. Leave the “Don’t create a Start Menu folder” checkbox unticked.
c. Click “Next” button.
6. Select additional tasks,
a. Leave the default settings as is.
b. Click “Next” button.
 7. Verify installation tasks then click “Install” button.
8. Wait for the installation process to complete.
9. After the installation process finishes, untick the “Launch Visual
Studio Code” checkbox.
10. Click “Finish” button.
11. The installation process is now completed.

Downloading Minimalist GNU for Windows

Figure 9. MinGW Official Website

Now that we have our IDE installed, we need to install our complier next. To
begin, we will need to download a version of MinGW. It is best practice to
download the latest stable build of MinGW for 32-bit Windows.

1. Visit the official website of MinGW at http://www.mingw.org/.

2. Under Navigation pane (left corner), click the “Downloads” link.
3. Click the link beside the text “Looking for the latest version?” (i.e.
Download mingw-get-setup.exe).
4.

Installing MinGW Installation Manager

Course Module
 Figure 10. MinGW Installation Manager Setup

Compared to the rest of the setup, this installation process will take several
steps to complete. This is mainly because of how MinGW was designed. It
focuses on Native libraries hence even its Graphical User Interface (GUI) is
made using Native Windows Application.

1. Run the downloaded “mingw-get-setup.exe” file.

a. Approve the necessary security checkpoint if necessary (for Admin
rights confirmation boxes).
2. Click the “Install” button.
3. Change the settings as indicated:
a. Keep the “Installation Directory” to “C:\MinGW”.
b. Keep the rest of the settings as is.
c. Click “Continue” button.
4. The download process of its components will proceed. Wait until it
finishes (i.e. 100% progress).
a. After, click the “Continue” button.
5. The “MinGW Installation Manager” will appear.
 Installing MinGW Components

Figure 11. MinGW Installation Manager

Now that we have the MinGW Installation Manager installed, we need to

select and install all components that we will need for this course.
1. Open the “MinGW Installation Manager” at “C:\MinGW\bin\mingw-
get.exe”.
2. Update the catalogue:
a. Click the “Installation” menu.
b. Click the “Update Catalogue” option.
c. Verify that the “Update Catalogue Dialog” is open.
d. Wait until the download process is complete.
e. Click the “Close” button.
3. Set MinGW Base to install:
a. Click the checkbox beside “mingw32-base”.
b. Click the “Mark for Installation” option.
c. Verify that the checkbox beside “ming32-base” is now ticked.
4. Set C++ compiler to install:
a. Click the checkbox beside “mingw32-gcc-g++”.
b. Click the “Mark for Installation” option.
c. Verify that the checkbox beside “ming32-gcc-g++” is now ticked.
5. Set Objective-C compiler to install:
a. Click the checkbox beside “mingw32-gcc-objc”.
b. Click the “Mark for Installation” option.
c. Verify that the checkbox beside “ming32-gcc-objc” is now ticked.
6. Queue for installation:
a. Click the “Installation” menu.
b. Click the “Apply Changes” option.
c. Verify that the “Schedule of Pending Actions” is displayed.
d. Click the “Apply” button.
e. This will take time. Wait for the download process to complete.
f. Click the “Close” button.
7. Verify that the following have a green checkbox:
a. mingw32-base
b. mingw32-gcc-g++
c. mingw32-gcc-objc
Course Module
 8. Manually close the “MinGW Installation Manager”.

Configuring Microsoft Windows Path

Figure 12. G++ Version

We need to insert our newly installed tools and utilities as Windows-

searchable items. This way, Visual Studio Code will not need to reference
MinGW compiler and libraries per project.

1. Press the “[Windows Logo] Windows” and the “Pause” keys at the
same time. This will open the Windows System window.
2. Click the “Advanced System Settings” link on the left pane of the
window to open the System Properties dialog.
3. Click the “Environment Variables…” button.
4. Under system variables, locate and select the “Path” variable.
5. Click the “Edit” button.
6. Add MinGW’sBin folder as entries:
a. For Windows 10:
i. Click the “New” button.
ii. Enter “C:\MinGW\bin” in the textbox.
iii. Click the “OK” button.
b. For Windows 8.1 and earlier versions:
i. Verify that the “Path” value is displayed in the “Variable
name” textbox.
ii. In the “Variable value” textbox, add the following lines
without the quotations: “;C:\MinGW\bin;” (take note of the
semi-colons placed in front and at the backof the file path.)
iii. Click the “OK” button.
7. Click the “OK” button.
 8. Click the “OK” button to close the System Properties dialog.
9. Close the Windows System window.
10. To test if you correctly performed the steps:
a. Open a command prompt.
b. Enter “g++ --version”.
c. Verify that the “g++ (GCC) 5.3.0” is displayed.

Downloading Project Templates for Visual Studio

Figure 13. Github Repository of Project Templates for Visual Studio

Since we have installed all necessary tools and utilities to develop C++
applications, let us now setup our project directory.

1. In your user’s My Documents (or Documents) folder, create a new

folder named “Projects”. Note: This will serve as our parent project
directory throughout the course.
2. Inside our project directory, create a new folder “AMAOEd-
CompProg1-Week004”. This is our Week 004 directory.
3. Login to Github using your account.
4. Visit the Github repository, https://github.com/JimAlvarez/projects-
templates. This repository contains the project templates for Visual
Course Module
 Studio Code, for one, which covers the essential settings we will need
for the projects.
5. Click the “Clone or download (arrow down icon)” button.
6. Click the “Download ZIP” link.
7. Extract the downloaded archive to our parent project directory.
8. Copy the following folders inside “projects-templates-
master\templates\vscode\c++” folder to our Week 004 directory:
a. “.vscode”
b. “src”
9. By this time, our “AMAOEd-CompProg1-Week004” should have two
folders (i.e. “.vscode” and “src”).

Adding C++ Extension to Visual Studio Code

Figure 14. C/C++ Extension for Visual Studio Code

Lastly, we need to install the C/C++ Extension for Visual Studio to support C
and C++ applications.
1. Open Visual Studio Code.
2. Click the “Extension (CTRL+SHIFT+X)” icon on the left pane.
3. Enter “C/C++” in the textbox. A list of extensions will be displayed that
supports C/C++.
4. Select the first item with “C/C++” purple icon.
5. Click the “Install” icon of the “C/C++” extension.
Week 004 - Hello World

Now that we have setup our work environment, tools, utilities and
configurations to write, run and debug a C++ application, we will now work
on our very first Hello World application.

Figure 15. C/C++ Extension for Visual Studio Code

Let us start by opening Visual Studio Code.

1. Open Visual Studio Code.

Open our project folder “AMAOEd-CompProg1-Week004”.

2. Under File menu, click “Open Folder… [CTRL + K CTRL+O]” option.
3. Locate and select our “AMAOEd-CompProg1-Week004” folder.
4. Click the “Select Folder” button.
5. Verify that under the Explorer pane (left side), there are two folders
available (i.e. “.vscode” and “src” folders).
6. There are times that Visual Studio Code will download several
updates and packages for our project. Let the download complete first
before proceeding.

Open our project folder “AMAOEd-CompProg1-Week004”.

Course Module
 1. In the code, under the TO DO comments, add the line: cout << “Hello
World”;
2. This is case-sensitive. Do not capitalize any part of the line outside of
the quotation marks. The line ends with a semi-colon (;).
Build and run our application.
1. Click the “Debug (CTRL+SHIFT+D)” icon.
2. Click the “Start Debugging“ button with a green play icon.

A command prompt-like window will appear. This command prompt-like

window is called console. For the rest of the modules, we will work with
console applications to build your fundamentals in computer programming.

Notice that in the console, the words “Hello World” are displayed.

You have successfully created your very first application using C++!

Glossary

Integrated Development Environment (IDE): A fully-integrated software

that contains various features dedicated to software development.
Compilers: A programming language-specific lightweight application that
translates source codes to executables.
Source Code: A file containing human-readable program codes.
Development Artifacts: Files of varying purposes that are used for Software
Development.
Compiled Programming Languages: Programming languages that needs a
third-party software to translate source codes to executables.
Executables: Runnable application. Computer-readable file that performs a
specific set of read-only instructions.
Native Microsoft Windows Application [Development]: A development
paradigm for Windows wherein the entire process depends solely on the
built-in libraries and utilities of Windows to develop Microsoft Applications.
Utility-Centric [Root] Directory: A directory located in the root directory of
the current operating system that will contain all utilities and tools to be
used for the development process.
Projects Directory: A directory located in the users Documents directory
that will contain all projects for the development process.
Commit: Upload a file to a repository that serves as a final agreement that
the changes to be saved is final.
 Repository: A virtual online directory where source codes, configurations
and documentations are stored that typically allows defined users to review
and download the contents.

References and Supplementary Materials

Online Supplementary Reading Materials

What is version control?; https://www.visualstudio.com/learn/what-is-
version-control/; June 8, 2017
Quick Tour of the Integrated Development Environment;
https://msdn.microsoft.com/en-us/library/ms165088(v=vs.80).aspx; June
8, 2017
Shutting down CodePlex;
https://blogs.msdn.microsoft.com/bharry/2017/03/31/shutting-down-
codeplex/; June 12, 2017
Visual Studio Code – Code Editing. Redefined;
https://code.visualstudio.com/; June 13, 2017

Course Module