Skip to content
Permalink
Browse files
fixed merge conflict
  • Loading branch information
aa7401 committed Oct 2, 2018
2 parents 118e8bf + fd7d34b commit 30a986c8e621a58c3f62fd378ea6849a4327282a
Show file tree
Hide file tree
Showing 37 changed files with 359 additions and 390 deletions.
@@ -0,0 +1,89 @@

# The Goorm IDE

This is an alternative to using Codeanywhere. You need to sign up for an account on [their website](https://ide.goorm.io/), sign in and access the dashboard page. Click on the **Create a New Container** button.

![Create a New Container](exercises/.images/goorm01.png)

You will be presented with a screen where you can name your project and choose a software stack:

![Create a New Container](exercises/.images/goorm02.png)

You should see an IDE that displays the files down the left side with an editor in the main view and a terminal window below:

![Create a New Container](exercises/.images/goorm03.png)

## Cloning the Lab Content

The next step is to clone the repository containing the lab materials into the IDE. Start by opening the [GitHub page](https://github.coventry.ac.uk/340CT-1819SEPJAN/TEACHING-MATERIALS). Locate the **Clone or download** button, clicking this pops open a small window as shown. Copy the URL in this window to your clipboard.

![Create a New Container](exercises/.images/github01.png)

Returning to the IDE, run the following command in the terminal:

```shell
git clone https://github.coventry.ac.uk/340CT-1819SEPJAN/TEACHING-MATERIALS.git labs
```

This creates a `labs/` directory containing all the files from the repository.

By default real-time linting is enabled however this currently uses an old linter and is not ECMA6 compatible. You should disable real-time linting from the **Project** menu.

## Updating NodeJS

We can see the current version of NodeJS by running the `node -v` command. The latest version is 10.11.0 and so we need to upgrade this.

Start by installing the Node Version Manager tool:

```shell
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
```

Now click on the small blue oval on the terminal tab to reload the shell. There are lots of versions available, use the `nvm list-remote` command to see these. Install the latest using `nvm install 10.11.0` substituting the latest version number. To check the version installed use `node -v` again.

## Running an Express Server

Use the terminal to navigate to the `simple_templating` directory and try running the `index.js` script:

```shell
$ cd labs/exercises/01_nodejs/01_templates_forms/simple_templating
$ node index.js
Error: Cannot find module 'express'
```

Notice you get an error, we need to install the missing module using the _Node Package Manager_ tool. We can then try to run the script again:

```shell
$ npm install express
$ node index.js
Error: Cannot find module 'express-handlebars'
```

We get a different error explaining that there is another missing module:

```shell
$ npm install express-handlebars
$ node index.js
app listening on port 8080
```

Now we have the server up and running so the final task is to view the web page using the web browser.

![Setting up a URL and port](exercises/.images/goorm04.png)

This will open a window where you will need to register a new URL and port:

![Setting up a URL and port](exercises/.images/goorm05.png)

1. Use your **University Username** as the URL segment.
2. Make sure you specify port **8080** (this is the one used by your server).

You need to set this up as your **run** configuration as shown.

![Setting up a URL and port](exercises/.images/goorm06.png)

The final step is to open a new browser window and enter your chosen URL, you don't need to specify the port, this was done through port-forwarding:

![Setting up a URL and port](exercises/.images/simple_template.png)

If you make changes to the code or want to quit the IDE you will need to stop the server. To do this, select the terminal window and press ctrl+c.

Large diffs are not rendered by default.

@@ -1,25 +1,53 @@

# Software Quality and Process Management

## 1 NodeJS and Express
On completion of this module, a student should be able to:

## 2 Test-Driven Development
1. Select, evaluate and apply standards, tools and techniques for assuring software quality
2. Critically review a software development process and identify its ranking in an accepted capability maturity model.
3. Critically evaluate an architectural design against accepted quality criteria.
4. Select, evaluate and use tools and techniques to successfully manage a large scale software project, including configuration management and version control.
5. Estimate the cost and duration of a software project.

- Lecture
- Week 1 - Software Project Management Overview LEC
- Copy of 05 Automated Testing
- Copy of 06 Test-Driven Development (2)
- Lab
- introduction to NodeJS
- Building websites using Express
- Writing Unit Tests
- Test Harness
- Employing Test-Driven Development
## Module Content

## 3 Introduction to Software Architecture
The module content is split into the following topics. Each topic lasts for one or two weeks. The lab activities for each are provided in numbered markdown files in the home directory of this repository with the supporting materials in the `exercises/` directory. You should start by cloning this repository into your development workstation. This might be:

- Week 2 - Software Architecture Patterns
- BEA chapter 1: Software Architecture
1. Using the Windows 10 lab computers (download Visual Studio Code from the AppsAnywhere server)
2. Using your own laptop computer
3. or you might use your Chromebook and clone into an instance of an online IDE such as [Goorm](https://www.goorm.io/). For help with this option you will find a lab called **Setup**.

### 1 ECMA6

[Lecture Slides](https://drive.google.com/open?id=1RcI1HSyJpAV64TPEjqzp0Udad9IGZvo4uF7sapCFrkE)

You will need to understand the syntax of the ECMA programming language which you will be using to develop your software during this module.

There are two labs to complete and you should aim to get both completed in the first two weeks:

1. Templates and Forms
2. Dynamic Websites

### 2 Test-Driven Development

[Lecture Slides](https://drive.google.com/open?id=14lBIsoru7s4qwpVGa6hhd1Iq1ezXSvZYk38RSNAZT50)

In this week we will be extending your understanding of ECMA6 by learning how to apply the principles of Test-Driven Development (TDD) when writing code in the ECMA6 programming language. You will be required to complete two labs this week:

1. TDD Express
2. TDD API

### 3 Domain-Driven Design

[Lecture Slides](https://drive.google.com/open?id=15roChBN5xnttLZYg7Wdk7b26W5Q23nCYNycLj8GNy5w)

At this stage you will have been assigned to an assignment topic and will apply the Domain-Driven Design (DDD) techniques to build a domain model. This will form part of your assignment submission. If you have time you will be able to continue your ECMA6 learning.

### 4 Software Architecture

[Lecture Slides](https://drive.google.com/open?id=1Ux83hzw-DdcBWn6PUXz_xF3b-ytE4PsWLpSKS_dqBfw)

Now you will be expected to use your understanding to produce three different architectural designs based on your domain model and evaluate these to identify the best.

## 5 Architectural Coupling

Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -4,7 +4,7 @@

const express = require('express')

const handlebars = require('express3-handlebars').create({defaultLayout: 'main'})
const handlebars = require('express-handlebars').create({defaultLayout: 'main'})
const bodyParser = require('body-parser')
const app = express()
app.use(express.static('public'))
@@ -0,0 +1,25 @@

{
"courses": [
{
"code": "cs",
"title": "Computer Science MSci/BSc (Hons)"
},
{
"code": "com",
"title": "Computing BSc (Hons)"
},
{
"code": "ehns",
"title": "Ethical Hacking and Cybersecurity MSci/BSc (Hons)"
},
{
"code": "gt",
"title": "Games Technology BSc (Hons)"
},
{
"code": "itb",
"title": "Information Technology for Business BSc (Hons)"
}
]
}
@@ -0,0 +1,29 @@
#!/usr/bin/env node

'use strict'

const express = require('express')

const handlebars = require('express-handlebars').create({defaultLayout: 'main'})
const bodyParser = require('body-parser')
const app = express()
app.use(express.static('public'))
app.use(bodyParser.urlencoded({ extended: true }))

app.engine('handlebars', handlebars.engine)
app.set('view engine', 'handlebars')

const port = 8080

app.get('/register', (req, res) => {
res.render('register')
})

app.post('/register', (req, res) => {
const formData = JSON.stringify(req.body, null, 2)
console.log(formData)
const data = { body: formData }
res.render('datapage', data)
})

app.listen(port, () => console.log(`app listening on port ${port}`))
@@ -0,0 +1,19 @@

body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h2 {
color: #666
}

label {
display: inline-block;
width: 200px;
text-align: right;
margin-right: 10px;
}

input[type="submit"] {
margin-top: 10px;
}
@@ -0,0 +1,2 @@
<h2>You Submitted...</h2>
<pre>{{body}}</pre>
@@ -0,0 +1,12 @@

<!DOCTYPE html>
<html>
<head>
<title>Forms R Us</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
{{{body}}}
<p>This information appears on every page.</p>
</body>
</html>
@@ -0,0 +1,42 @@

<h2>Course Registration</h2>
<form method="post" action="/register">
<fieldset>
<legend>Personal Details</legend>
<p><label for="name">Name:</label><input type="text" name="name" /></p>
<p>
<label for="male">Male:</label><input type="radio" name="gender" value="male" /><br />
<label for="female">Female:</label><input type="radio" name="gender" value="female" /><br />
<label for="other">Other:</label><input type="radio" name="gender" value="other" />
</p>
<p>
<label for="dob">Date of Birth:</label>
<input type="date" name="dob" min="1900-01-01" max="2000-07-01" />
</p>
</fieldset>
<fieldset>
<legend>Course Details</legend>
<p>
<label for="course">Choose Course:</label>
<select name="course">
<option value="">-- SELECT --</option>
<option value="cs">Computer Science MSci/BSc (Hons)</option>
<option value="com">Computing BSc (Hons)</option>
<option value="ehns">Ethical Hacking and Cybersecurity MSci/BSc (Hons)</option>
<option value="gt">Games Technology BSc (Hons)</option>
</select>
</p>
<p>
<label for="tandc">Terms and conditions</label>
<input type="checkbox" name="tandc" />
</p>
</fieldset>
<fieldset>
<legend>Account Details</legend>
<p><label for="username">Preferred username:</label><input type="text" name="username" /></p>
<p><label for="password">Password:</label><input type="password" name="password" /></p>
<p><label for="confirm">Confirm password:</label><input type="password" name="confirm" /></p>
</fieldset>
<input type="hidden" name="formtype" value="registration" />
<input type="submit" value="submit form" />
</form>
@@ -4,7 +4,7 @@

const express = require('express')

const handlebars = require('express3-handlebars').create({defaultLayout: 'main'})
const handlebars = require('express-handlebars').create({defaultLayout: 'main'})
const bodyParser = require('body-parser')
const app = express()
app.use(express.static('public'))
@@ -11,7 +11,7 @@
"dependencies": {
"express": "^4.16.3",
"express-es6-template-engine": "^2.0.3",
"express3-handlebars": "^0.5.2",
"express-handlebars": "^0.5.2",
"sqlite3": "^4.0.2"
},
"devDependencies": {
@@ -4,10 +4,12 @@
const express = require('express')
const app = express()

const handlebars = require('express3-handlebars').create({defaultLayout: 'main'})
const handlebars = require('express-handlebars').create({defaultLayout: 'main'})
app.engine('handlebars', handlebars.engine)
app.set('view engine', 'handlebars')

app.use(express.static('public'))

const port = 8080

app.get('/', (req,res) => {
@@ -0,0 +1,12 @@

p, h2 {
font-family: verdana, sans-serif;
}

h2 {
color: #666;
}

img {
float: right;
}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -1,3 +1,4 @@

<h2>Handlebars</h2>
<p><img src="images/clock_small.png" /></p>
<p>This page has been generated by the <strong>Handlebars</strong> template engine.</p>
@@ -3,6 +3,7 @@
<html>
<head>
<title>The Date Site</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
{{{body}}}

0 comments on commit 30a986c

Please sign in to comment.