Advanced Application

Development
(CSE-214)
week-1 : Introduction

Dr. Alper ÖZCAN

Akdeniz University
[email protected]

1
 Course Schedule
◼ Introduction (February 11)
◼ Angular – Typescript (February 18)
◼ Angular Application Architecture(February 25)
◼ Data binding, Routing(March 4)
◼ Angular forms, RxJS (March 11)
◼ Introduction to SpringBoot (March 18)
◼ Spring Core (March 25)
◼ Hibernate / JPA (April 1)
◼ Midterm (April 8)
◼ Rest / CRUD (April 15)
◼ Spring MVC (April 22)
◼ JPA / Hibernate Advanced Mappings (April 29)
◼ Project Presentations (Due on May 6)
◼ Project Presentations (Due on May 13)
◼ Final examination review (May 20)

2
 Grading

◼ Midterm (15%)
◼ Lab (20 %) (Coding will be held on lab)
◼ Project (25%) – Angular + SpringBoot
◼ Proposal, final report, github repo
◼ Each project team should consist of 2 students
◼ Final (40%)

3
 Prerequisites
◼ Background in
◼ Programming

◼ Programming:
◼ Angular - Typescript

◼ SpringBoot - Java

◼ VsCode , IntelliJ

4
 Text Books - Angular

5
 Text Books - SpringBoot

6
 What’s this course about
◼ Front-End (Angular)
◼ Data Binding: Effective data exchange between templates and

components.
◼ Component Lifecycle Hooks: Lifecycle management for

Angular components.
◼ Routing: Efficient navigation between application views.

◼ Angular Forms: Form handling and validation.

◼ Dependency Injection: Modular and testable architecture.

◼ RxJS: Reactive programming for asynchronous operations.

7
 What’s this course about
◼ Back-End (Spring Boot)
◼ Hibernate/JPA: Data persistence and ORM (Object-Relational

Mapping).
◼ REST API Development: Secure and scalable APIs for CRUD

operations.
◼ Spring MVC: Clear separation of concerns using Model-View-

Controller architecture.
◼ Advanced JPA Mappings: Efficient representation of complex

data relationships.
◼ Security: Authentication and authorization using Spring Boot

REST API Security.

8
Project

9
Project

10
Software Development Life Cycle

11
Artificial intelligence tools in the software
development life cycle

12
How Will AI Affect the Work of Developers?

13
How Will AI Affect the Work of Developers?

14
 AI (LLM) based code generation (napkins)

https://www.napkins.dev/
15
 AI (LLM) based code generation (bolt)

https://bolt.new/ 16
 HTML, CSS, JS
HTML (Hypertext Markup Language) is
an essential building block of any
webpage. It describes the structure and
semantics (meaning) of content rather
than its appearance.

HTML contains few

predefined elements
or tags each of which
means differently for a
browser.

https://html-css-js.com/ 17
 HTML, CSS, JS
Cascading Style Sheets which is known
as CSS is a style sheet language that
used to handle the presentation of the
web page containing HTML. It makes
our websites beautiful and modern
looking.

https://html-css-js.com/ 18
 HTML, CSS, JS
JavaScript which is often known as JS,
is a high-level dynamic interpreted
programming language that allows
client-side scripting to create completely
dynamic web applications and websites.

https://html-css-js.com/ 19
 Bootstrap

•Bootstrap is a free front-end

framework for faster and
easier web development
•Bootstrap includes HTML and
CSS based design templates
for forms, buttons, tables,
navigation, modals, image
carousels and many other, as
well as optional JavaScript
plugins
•Bootstrap also gives you the
ability to easily create
responsive designs

20
 Responsive Design

Responsive Web
Design is about using
HTML and CSS to
automatically resize,
hide, shrink, or enlarge,
a website, to make it
look good on all
devices (desktops,
tablets, and phones)

21
 What is a Single Page Application (SPA)?
A Single Page Application (SPA) dynamically updates the
content of the page as users interact with it, instead of
loading new pages from the server. This results in faster load
times and a more responsive, app-like user experience.

22
 What is a Single Page Application (SPA)?
In single page web apps, once the page gets loaded, the server
does not send any more HTML or CSS. Whereas for the
traditional one, every time when new data is requested, the
whole page gets reloaded.

23
Advantages of Single Page Application

24
 Model-View-Controller (MVC) Design
Pattern
Model: Manages the data, logic, and rules of the application.
View: Represents the user interface (UI) and displays data from the model.
Controller: Acts as a mediator between the Model and View, Handles user
interactions and updates the model or view

25
 What is Angular?

Angular is a popular TypeScript-based front-end

framework developed by Google.

It allows developers to build Single Page Applications

(SPAs), which offer dynamic user experiences by updating
the content seamlessly without reloading the entire page.

Key features of Angular include data binding, routing,

dependency injection, and form handling.

26
 Structure of Angular Components
Components are the building blocks of an Angular application. Each component
manages a specific part of the UI

•TypeScript class (.ts): Contains logic and data for the component.
•HTML template (.html): Defines the structure and layout of the view.
•CSS or SCSS (.css or .scss): Styles for the view.
•Metadata (@Component decorator): Provides component configuration

27
Angular application architecture

28
 angular.json
The angular.json file is the main configuration file for an Angular project. It defines
various settings and configurations that are used by the Angular CLI (Command
Line Interface) to build, serve, and test the application.

Central configuration: The angular.json file configures how the Angular CLI
should behave (build, serve, test, etc.) for the entire project.

Project-specific settings: It holds project-specific settings for the apps or libraries

within the project.

Customizable build process: It allows developers to customize aspects of the

build, like optimization, file replacements, and file paths for assets and styles.

Multiple environments: Supports configuring different environments (like

development and production) by using file replacements and different build
settings.

29
 Bootstrapping the AppModule (main.ts)

• Acts as the starting point (entry point) for the application lifecycle.

• This file is the bootstrap file of the Angular application. Angular uses main.ts to
load the Angular module and start the app.

• platformBrowserDynamic: Angular's function for bootstrapping applications in

the browser.

• AppModule: The root module of the application.

30
 index.html

• This is the entry point for the application.

• When the app starts, the browser loads index.html. It contains the root
<app-root></app-root> element, AppComponent is rendered in the index.html file's
<app-root></app-root> element

• it includes references to the stylesheets and JavaScript files, including the bundled
Angular code. 31
 Main Module (AppModule), app.module.ts

This file defines the root NgModule (Angular Module) of the application. It
tells Angular which components, directives, and services are part of the
app.
32
 AppComponent (app.component.ts)

• This is the root component that is rendered inside <app-root></app-root> in

index.html.

• It is defined in app.component.ts, where the logic for the root component is

implemented.

• The AppComponent acts as the main component that interacts with other
components, binds data, and defines the application's structure.

• It is typically bootstrapped in app.module.ts under the bootstrap array.

33
Angular Files Execution Flow

34
Execution Flow
index.html is loaded first when the browser requests
the app. It includes a reference to the Angular
application and the root component (<app-root></app-
root>).
main.ts is executed next. It bootstraps the Angular
application by calling
platformBrowserDynamic().bootstrapModule(AppModul
e) to initialize the Angular module (AppModule).
app.module.ts is processed, and Angular sets up the
application module, registers components, imports
other necessary modules, and prepares the app for
rendering.
AppComponent is the root component declared in
app.module.ts, and Angular renders this component
inside the <app-root></app-root> element in index.html.

35
Relationships

• index.html references the root component <app-

root></app-root>.

• main.ts boots the AppModule, which then uses

AppComponent as the root component.

• AppModule imports and declares AppComponent, and

AppComponent becomes the starting point for the UI.

36
 What is Spring Boot?
Spring Boot is a robust, production-ready Java-based back-
end framework that simplifies application development by
providing built-in configurations and features like REST APIs,
database integration with JPA/Hibernate, and security
services.

Its lightweight nature and modular architecture make it ideal for

building scalable, secure server-side applications.

37
Technical Design (Spring Boot)

38
Technical Design (Spring Boot)

39
 Why Full-Stack Development?

You will learn how to integrate Angular and Spring Boot to

develop a complete e-commerce application.

The front-end Angular application will communicate with the

back-end Spring Boot application through REST APIs,
providing full CRUD operations and database management.

This architecture enables you to deliver a seamless, secure,

and scalable user experience.

40
 Full-Stack Development

Building dynamic and responsive user interfaces with Angular

Managing back-end operations and databases using Spring

Boot

Establishing secure communication between front-end and

back-end services

Implementing key features like authentication, routing, and

reactive programming

41
VScode

42
Installing Java

43
Installing Java

44
Installing Java

45
Installing Maven

46
 Installing Maven

C:\Program Files\apache-maven-3.9.6-bin

47
Installing Maven

48
Installing Maven

49
Installing Maven

50
Installing IntelliJ

51
Installing IntelliJ

52
Installing IntelliJ

53
Installing IntelliJ

54
Spring Initializer

55
Spring Initializer

56