Practical Dev. Guide

A hands-on Guide for build web apps

by Șerban Petrescu

INtroduction

Foreword

About myself

  • I have a BSc. in Computer Science from UT-CN,
  • Currently studying for a MSc. in Software Engineering at UBB,
  • Working as a Lead developer and solution architect,
  • Teaching a Software Design laboratory at UT-CN,
  • Trying to be active in open source and on Stack Overflow.

AUdience

  • Mainly intended for students searching for guidance in building software projects.
  • May be useful for other entry-level developers.
  • Prerequisites:
    • Some programming knowledge (e.g. Java),
    • Basic database design concepts.

Purpose

  • Provide guidance for building modern web apps,
  • Explain the most important concepts encountered,
  • Explore and apply best-practices,
  • Learn to leverage commonly-used tools. 

Technologies

  • Frontend:
    • React
    • Ant Design
  • Backend: 
    • Spring (Boot, Data, Security)
    • Hibernate, Flyway
  • Database: H2
  • Message Queue: RabbitMQ
  • Tools:
    • IntelliJ IDEA,
    • Postman,
    • VSCode

Our practice app

Overview

  • Throughout this series, we'll build a small school app.
  • This app is used by teachers to:
    • Import and maintain student data,
    • Record attendance,
    • Add grades,
    • Generate a final report.
  • It is also used by students to:
    • View their own grades and attendance,
    • Download a report card.

Student data

  • At the beginning of the academic year, teachers receive spreadsheets with student data. For each student, the teachers get:
    • Student identifier,
    • Group number,
    • First and last name,
    • Email address.
  • Each teacher imports this data and may later update it (in case something is inaccurate or outdated).

AttendAnce

  • A teacher may teach several different topics, each topic requiring a series of lectures.
  • During a lecture, the teacher records the attendance (the students which are present).
  • The teacher may alter the attendance list - only during the day of the lecture - by:
    • Removing a person (e.g. when kicking out someone),
    • Adding a person (e.g. for appending late comers). 

Grades

  • For each topic, each student may receive a list of "tagged" grades (consisting of a name and a score). For example:

 

 

 

 

  • The teacher adds grades for his students and may later edit these grades (but not remove).
Tag Score
Assignment 1 8.5
Assignment 2 4
Final Exam 5

Final Report

  • At the end of the semester, teachers submit a final report.
  • This report contains the list of students with:
    • A final score.
    • An indicator with the status (passed / failed).
  • In order to pass, students must obtain a minimum final score and must have a minimum number of attendances.
  • Both these minimums and the formula for computing the final score from the grades are defined by the teacher.

Student view

  • Students are notified via email when a teacher gives them a new grade.
  • Additionally, students may view their own grades and attendance, grouped by topic.
  • They may download this information as a report card.

Working mode

GitHub

  • I'll use GitHub to share all the code.
  • Each step will be a separate commit. You can checkout any specific commit in the history and try it out separately. 

Layered Architecture

  • The application coding will be split into layers.
  • Each layer will handle a single responsibility. 
  • With this architecture, it is easy to transition or include other styles / patterns (e.g. MVC).

VErtical vs Horizontal Slicing

  • I'll develop the app using vertical slicing: one feature at a time.
  • Horizontal slicing might be easier to follow in some cases, but it promotes a style of development that I don't recommend.

Thanks

Made with Slides.com