Semester: Summer semester 2021

Lecture language: English

Exam language: English

Exam type: Project work + Oral examination

Maximum number of participants: 30

Notice

The course will start on April 12^th, 2021 and will take place fully online. More information will be provided in the Moodle courseroom for the registered students. Registration is possible until April 5^th, 2021 (see the registration section below).

About this course

The World Wide Web and its underlying technologies are increasingly gaining importance for the development of interactive Web applications. This course introduces concepts, principles, and methods in current client and server-side Web technologies. Basic Web technologies such as HTML, CSS, JSON, JavaScript, etc. are a prerequisite to take this course. The focus of this course is rather on advanced topics in emerging Web technologies. These include extensions of Web standards, Web toolkits and development environments, current backend Web frameworks (e.g. Node/Express, Flask), frontend Web frameworks (e.g. Angular, React), and combination of different Web technologies (e.g. MEAN/MERN Stack, Dash). This course follows a student-centered and project-based learning approach. Web technologies will be presented in the lecture by student groups. The presented technologies are further investigated and applied in hands-on sessions as well as small student projects carried out throughout the course.

Getting credits for this course requires a successful completion of all assignments, project, and oral exam at the end of the semester. The final grade will be calculated as follows: assignments and project (40%), student presentations including hands-on sessions (15%), class participation & group management / collaboration (12%), and oral exam (33%). 

Target audience

• Master ISE CE
• Master Applied Computer Science
• Master Komedia

Date and location

Lecture / Hands-on sessions:

• Mon, 12:00 - 14:00
• Online
• Starts on April 12, 2021

Lecture / Hands-on sessions:

• Wed, 14:00 - 16:00
• Online
• Starts on April 14, 2021

Prerequisites

• Knowledge of basic Web technologies such as HTML, CSS, and JavaScript is required
• Knowledge of Python is helpful
• High motivation and commitment
• Good teamwork skills

Registration

Due to didactical methods, we have a limit of 30 students for this class (first come first serve). To register, please send an email to Mr. Mouadh Guesmi  by  April 5^th , 2021 with your matriculation number, study program, and knowledge / experience in Web technologies. If the maximum number of participants is reached, we will use a waiting list.

Organization

• Course material in Moodle
• Show in course catalog (LSF, Module Database)

Lecturers

Prof. Dr. Mohamed Chatti (Lecturer)

M. Sc. Mouadh Guesmi (Teaching Assistant)

M. Sc. Shoeb Joarder (Teaching Assistant)

Group name: NOMA

Group members: Nathalie Schulz, Olga Filipova, Martín José García Muñoz, Arcadio Abraham Herrera Abril, Yili Zhang

Project description:

The idea of the project is to develop an educational website aiming at enabling students to request help from more experienced students i.e., students who have passed a specific course and entitled as “Gurus”. Students can request appointments for help sessions known as “Guru Events” and the “Gurus” can receive points for helping others. The main communication between the users is done by using course group chat and private messages.

Main features:

• Registration / Login
• Encrypting passwords
• Chat functionality using socket.io e.g., course group chat / private messages, mark messages as read
• Profile pictures
• Request Guru event / Accept request

Technologies used:

• Frontend: Angular, Material UI
• Backend: Node.JS Express.JS, Socket.io, MongoDB

Links: GitLab, Deployed version, Demo, Advertisement

Group name: VemOs

Group members: Valentin Panagiev, Enio Sultan, Martin Vlahov, Saadet Güzelyurt

Project description:

The idea of the project is to develop a website aiming to find and connect study partners. The application is mainly to find study pals and tutors, and students can become tutors for courses to teach other students and have an extra source of income

Main features:

• Sign up on Unipal
• Search for university-specific courses (filter: university)
• Join university-specific courses
• Post questions/comment on course pages
• Look for available study pals/tutors per course
• Connect with study pals/tutors
• View other users’ profiles
• Rate (1-5 stars) study pals and tutors

Technologies used:

• Frontend: Angular, Bootstrap, Material UI, HTML, CSS
• Backend: Node.JS, Express.JS, Passport, JWT, MongoDB

Links: GitLab, Deployed version, Demo, Advertisement

Group name: Noders

Group members: Ao Sun, Chengzhi Wei, Jing Song, Bhoomika Rana, Mahmoud

Project description:

The idea of the project is to develop an “extension plugin” for the LMS CourseMapper where students can collaborate by sharing, commenting files and communicating using real-time chat in private/public rooms

Main features:

• Extension of CourseMapper Project
• Private channels for real time conversation
• Upload files and comment on slides under certain public channels
• Edit profile, login, logout and password reset
• View members and have real time conversation

Technologies used:

• Frontend: React, Ant Design, Material UI
• Backend: Node.JS/Express, MongoDB

Links: GitHub, Deployed version, Demo and Advertisement

Group name: BioNWeb

Group members: Osman Tasdelen, Ahmad Rifaee, Shahab Aldin Abbaszadeh, Oliver Fischer Fabian, Furkan Erbil

Project description:

The idea of the project is to develop an social web application aimed to face the hardship in making new connections between students and finding group members for specific courses

Main features:

• Registration
• Login/Logout
• Personal profile
• Search and filter
• Features favourites (user profiles)
• Chat

Technologies used:

• Frontend: React, Material UI
• Backend: Node.JS/Express, Redis, MongoDB, Certbot, Docker

Links: GitHub, Demo Demo Technologies Advertisement Advertisement (Commercial)

Group name: TechColony

Group members: Saif Almaliki, Yustinus Aquila Adrian, Mohammed Saidul Islam, Yixin Huang, Jan Wystub

Project description:

The idea of the project is to develop an educational website for students to search gather learning materials such as videos, books and papers and enable them to make notes

Main features:

• Material Based Learning Based on Open APIs such as videos (YouTube Data API) , books (Google Books API) , ad papers (Arxive.org)
• User Profile
• Authentication (Login, Register , Forget Password , Register by Google Account

Technologies used:

• Frontend: Angular, Bootstrap, Firebase
• Backend: Node.JS/Express, MongoDB

Links: GitLab, Deployed Version Demo Advertisement