Web Technology Template

• Introduction
• Template
  • Assignment
  • Client
  • Server
  • Documentation
  • Tests

Introduction

Welcome to Web Technology. Last year during Web Applications you learned about basic web techniques and languages such as HTML, CSS, Javascript and REST. These techniques are the basis of web applications today. Although these applications can be accessed from a web browser, they tend to be a lot more dynamic than just plain old sites. Examples of these kinds of applications are Gmail, Netflix, WhatsApp Web and Google Docs.

The foundations for these types of applications are laid by Javascript. This programming language is built into every browser. Therefor, this module will put a lot of emphasis on Javascript. We will be using it client-side (within the browser) as well as server-side (using Node.js).

Though web applications started out as web browser applications this is no longer the case. Several frameworks have been developed to allow web technology to be used on mobile devices such as React native. Also using Electron it is possible to build a desktop application. For example Twitch and Discord were built with Electron.

Template

This template is the basis of the backend and front-end application you have to build as the assignment for this course. The template contains everything you need to built both the backend and the front-end. This page explains how to use it. Each section below explains a root directory in the template.

Assignment

In order to receive a passing grade you need to implement the assignment. The assignment description can be found in the assignment directory. This directory contains the explanation if the assignment as well as a partial functional design. The functional design contains requirements, user stories and basic wireframes.

Client

The client directory has to contain your client. The client has to be built using Svelte. The base application has already been added, and you will not have to install it yourself. Teachers will run the npm install and npm start scripts from the package.json file in order to start your application. If it does not start your entry will not be graded. The required scripts have already been added.

After downloading the template run npm i in the client directory to download and install the required dependencies.

Server

As stated in the course manual the backend will be created using node.js. Node js is a server side environment to run Javascript applications. On top of Node we will use Express expressjs.com. Express is a framework capable of functioning as a REST server. A default hello world application has already been added.

While developing you can start the server using npm run dev in the server directory. This will start the server using the Nodemon dependency. Nodemon will restart the server if a change in the source code is detected. This means you will not have to restart the server manually after every code change.

After downloading the template run npm i in the server directory to download and install the required dependencies.

Documentation

As part of the assignment you will need to document some of your work. This documentation should be placed in the documentation directory. Documentation must be written in Markdown. Not Word or PDF. Feel free to add images to explain things better. Markdown has many options to create nice documentation, and it renders well on most Git hosters such as Gitlab and GitHub.

Tests

In order to validate the functionality of your server it needs to be tested. Testing will be done using REST calls from within IntelliJ. These tests are explained in greater detail in the testing section. A few examples for the default hello world and authentication endpoints have been added.