Integrating with Backend

Backend Services
Part 1: Node JS and MySQL
Jumail Bin Taliba
School of Computing, UTM
June 2020
 Watch on YouTube
Set the playback speed 1.5X
See the timestamp in the description
 • Design Principles and Design
Patterns
• Local Development
• Setting Up Databases
Agenda • Writing Code for REST API
• Deployment
• Testing with Flutter App
 SOLID Principles

• Single responsibility principle

• Open close principle
• Liskov substitution principle
• Interface segregation principle
• Dependency inversion principle

Why care?
• Software development is a collaborative work
• The intention of the principles is to make software easier to maintain
and to extend
 Design Patterns

What are design patterns?

• Reusable solutions to repeating problems

Example of design pattern?

• Creational patterns: Builder, Singleton, Dependency Injection, etc
• Structural patterns: Facade, Adapter, etc
• Behavioural patterns: Command, Memento, State, Iterator, etc
• *Architectural patterns: MVC, MVP, MVVM, etc
 System Architecture

Mobile App Back-end

Programming:
Node, PHP, Python,
Perl,
Deno

Database:
MySQL, MongoDB,
Firebase
HTTP
REST
MVVM GraphQL MVC
Architecture Example: Get the profile of a given user Architecture
HTTP : http://www.mywebsite.com/getprofile.php? uid=1213
REST : GET http://www.mywebsite.com/profiles/1213
GraphQL: query{
User( uid: 1213){
fullName
role
}
}
 Back-end Architecture

Model View Controller (MVC)

Front-end Back-end

Model
1. Client Request • Handles data related logic
Controller
• Talks to the database, e.g
SELECT, INSERT, UPDATE, etc
• Handles client
requests: GET, POST,
etc

• Gets data from the

4. Server Response models and passes View
data to the views
• Handles data presentation
• Gets presentations • Dynamic UI / pages
from the views and • Template engines
passes to the client
 Back-end Architecture (2)

Example: Show user profile

Front-end Back-end

Model

http://mysite.com/users/10 SELECT * FROM users

Controller WHERE id = 10

user = UserModel.getUser(10)

If (user is found) then

page = UserView.render (user)
Server Response View
<h1> … </h1> Response.send(page)
<ul> End if <h1>{{user.name} </h1>
… <ul>
</ul> <li>Email: {{user.email} </li>
<li>Phone: {{user.phone}} </li>
</ul>
 Back-end Architecture (3)

Our architecture for REST API Server

Mobile App Back-end

router.get(‘/user/:id’)
GET /users/10
Controller Model

Router
user = UserModel.getUser(10)

If (user is found) then SELECT * FROM users

Response.send(user)
Else
WHERE id = 10
Response.error(404)
End If
Response
{
"id": 10,
"name" : "Abdullah Tajuddin",
"email" : "[email protected]"
}
Database
 Project Source Code

backend

https://github.com/jumail-utm/backend_node_mysql

Frontend (Flutter App – Todo List)

https://github.com/jumail-utm/flutter_todo_rest
 Setting Up for Local Development

• Install Xampp
https://www.apachefriends.org/download.html

• Install MySQL Client

phpMyAdmin

MySQL Workbench
https://www.mysql.com/products/workbench

MySQL Admin (Chrome Extension)

https://chrome.google.com/webstore/detail/chrome-mysql-admin/ndgnpnpakfcdjmpgmcaknimfgcldechn

• Install Node JS
https://nodejs.org/en/download
 Creating Database

Create database from any MySQL Client tool

Use SQL script rather than using GUI

Sample script on my github repo

https://github.com/jumail-
utm/backend_node_mysql/blob/master/dev/mysql/setup_database.sql
 Writing Code for REST API Service with Node JS

• Setup Project
• Project structure
• Install dependency packages
• Setup Database connection
• Define model classes
• Define route handlers

Command line and Code snippet:

https://jumail-utm.github.io/backend_node_mysql/pages/node-mysql-rest-api
 Express JS Middleware

• Express JS is a routing and middleware web framework

• An Express application is a series of function calls (called middlewares)
that run between the time of the server gets the request and the time
it sends out the response

HTTP Request Express

Model

Middleware

Middleware

Middleware
HTTP Response
 Express JS Middleware (2)

Terminologies
Example express app code
HTTP const app = express()
method Route
app.get( '/', handleRootRoute )
Router
app.post( '/users', handleCreateUser )

app.get(‘/users/:id’)
Model app.get( '/users/:id', (req, res, next ) => {
// code are excluded for brevity
HTTP Request app.post(‘/users’)
Model })

function handleRootRoute(req, res, next){

app.get(‘/’)
Model // code are excluded for brevity
}
Middleware

Middleware

Middleware
function handleCreateUser(req, res, next){
// code are excluded for brevity
}

HTTP Response
 Express JS Middleware (3)
How it works?
app.use()
Model app.get(‘/endpoint’)
Model

HTTP express.json()
app.post(‘/’)

Middleware
Request Model

Router app.get(‘/’)
Model

Middleware

Middleware

Middleware
next() next()

HTTP
Response
 Express JS Middleware (4)

Middleware Functions
const app = express()
Each middleware function accepts three parameters
app.post( '/users', handleCreateUser )
• req: Request data from the client
app.get( '/users/:id', (req, res, next ) => {
• res: Server response to the client // code are excluded for brevity
})
• next: function to execute the next middleware
function handleCreateUser(req, res, next){
// code are excluded for brevity
}
 Express JS Middleware (5)

Passing Data To Next Middleware Example

app.get( ‘/anyroute’, firstMiddleware,
• A middleware can pass data to secondMiddleware,
the next one by injecting the lastMiddleware )

data to req or res function firstMiddleware(req, res, next){

req.firstValue = 10
next()
}
• Not by passing parameter to
function secondMiddleware(req, res, next){
next() req.secondValue = 20
So the following does not really work next()
}
function firstMiddleware(req, res, next){
next( 10 ) function lastMiddleware(req, res, next){
} const a = req.firstValue
const b = req.secondValue
console.log( ‘result = ‘, a + b)
}
 Express JS Middleware (6)
Chaining Middleware
• Practical implementation of express Example: Register a new account
is by middleware chaining
app.post(‘/users/accounts’)
Model

• It promotes modularity
HTTP Request

verifyAdminRole
isUserLoggedIn

newAccount
• Large tasks can be splitted into
smallers ones

• Each middleware can focus on its

specific task

HTTP Response
 Express JS Middleware (7)

Example app.post( ‘/users/accounts’, isUserLoggedIn,

verifyAdminRole,
newAccount )

function isUserLoggedIn(req, res, next){

const user = req.user
if (!user) return res.sendStatus(401) // unauthorized
next()
}

function verifyAdminRole(req, res, next){

const user = req.user
if (user.role !== ADMIN_ROLE) return res.sendStatus(403) // Forbidden
next()
}

function newAccount(req, res, next){

const newAccountData = req.body

// Code for creating a new account goes here

}
 Deploy on Heroku for Production

• Sign up for an account on Heroku

https://signup.heroku.com

• Install the Heroku CLI tools

https://devcenter.heroku.com/articles/heroku-cli

• Create Heroku Apps

https://dashboard.heroku.com/apps

• Create ClearDB My SQL

https://jumail-utm.github.io/backend_node_mysql/pages/heroku-setup-mysql

• Deploy Node JS project to Heroku – Prepare, Deploy and Troubleshoot

https://jumail-utm.github.io/backend_node_mysql/pages/heroku-deploy-node

• Test the REST API Server

 Project Source Code

backend

https://github.com/jumail-utm/backend_node_mysql

Frontend (Flutter App – Todo List)

https://github.com/jumail-utm/flutter_todo_rest
 • Setting up databases
• MVC pattern for REST API
Summary • Writing REST API service with
Node JS and MySQL
• Deploy Node apps to Heroku
 Integrating with Backend

Backend Services
Part 2: REST Service on Firebase
Jumail Bin Taliba
School of Computing, UTM
June 2020
 Watch on YouTube
Set the playback speed 1.5X
See the timestamp in the description
 • Architecture Setups
• Introduction to Firebase
• Setting Up Local Firebase
Agenda • Developing REST Service
• Deploying to Firebase
Introduction
 Architecture Setups

Each application has several types of code:

Task Example
UI or presentation Show screen, manage layout, etc
Presentation logic related Conditional UI, state management, etc
Authentication Verify who a user is
Authorization Verify what a user has access to
Database related CRUD operations
Local resource related Access to device’s camera, local files, sensors, etc
API access Geo location API

Question: Where should you put these code?

 Architecture Setups (2)
Example Setup 1.1: Thin Client e.g. web-based apps, mobile apps
REST API service, Firebase apps, etc

Front-end Back-end

Business Logics

Authentication

Authorization

User Interface Database access

SDK
UI Logic Related

Database
 Architecture Setups (2)
Example Setup 1.2: Thin Client

Front-end Back-end

Business Logics

Database access

User Interface
SDK
UI Logic Related

Authentication

Database Authorization
 Architecture Setups (3)
Example Setup 2.1: Thick Client e.g. desktop apps, Java apps,
.Net apps, Firebase apps,
mobile apps, etc
Front-end Back-end

SDK

Database

Business logics
User Interface
UI Logic Related
Authentication
Authorization
 Architecture Setups (3)
Example Setup 2.2: Thick Client

Front-end Back-end

Authentication
SDK

Database Authorization

Business logics
User Interface
UI Logic Related
 Architecture Setups (4)

Firebase Setup for REST API Service (Example 1)

Backend code and Firebase are at the same environment
Front-end Back-end

Node JS
Database access

Authentication
Default Credential
User Interface REST Firebase Admin SDK
Authorization

UI Logic Related

Business Logics Firebase

Used for data storage
Firestore Storage Auth
 Architecture Setups (4)

Firebase Setup for REST API Service (Example 2)

Backend code and Firebase are at different environment

Front-end Back-end

Firebase Admin
Storage

Credential
Account

SDK
Firestore

User Interface REST

Auth
UI Logic Related

Business Logics
 Architecture Setups (5)

Firebase Setup for Client App (Example 1)

e.g.
Front-end SPA web app, Back-end
Flutter app,
mobile app

Firestore Firebase
Security Rules
Firebase Config
Firebase SDK

Storage To control access to firebase resources

User Interface Authentication

One advantage:
UI Logic Related Allow server push
Business Logics
 Architecture Setups (6)

Example of
Firebase Security
Rules
 Architecture Setups (7)

Firebase Setup for Client App (Example 2)

Front-end Back-end
Example use case:
Cloud Functions
Refactoring code (Node JS)
Business Logics
Firebase SDK
Firebase Config

Default Credential
Firebase Admin SDK

User Interface
UI Logic Related Firestore Storage Authentication
Business Logics
Firebase Security Rules
 Introduction to Firebase

• What is Firebase?
• A BaaS solution
• Backend made easy
• Firebase Services:
• Database: Firestore, Realtime (document-based NoSQL)
• Cloud Storage
• Authentication
• Authorization
• Web Hosting
• Cloud Functions
• Cloud Messaging
• Many more ….
 What is NoSQL?

• “Not Only SQL”

• Non-Relational database
• No schema
• Allow unstructured data
• No normalization
• Does not guarantee data integrity and consistency
• Types of NoSQL databases:
• Document-based (e.g. Firebase’s Firestore and Realtime, MongoDB)
• Column-based (e.g. Apache Cassandra)
• Graph-based (e.g Neo4J)
 SQL vs Document-based NoSQL
SQL Document-based NoSQL
A database contains a list of tables A database contains a list of collections
A table contains a list of records A collection contains a list of documents
A table may have relationships to other tables
Collection Users
Table Users
uid name email Document 1: uid 11

11 Abdullah [email protected] {
"uid" : 11, Document 2: uid 53
Razali "name" : "Abdullah Razali",
{
53 Ali Bakar [email protected] "email" : "[email protected]"
"uid" : 53, Document 3: uid 211
} "name" : "Ali{ Bakar",
211 Siti Aminah [email protected]
"email" : "[email protected]"
"uid" : 211,
Rashid } "name" : "Siti Aminah Rashid",
"email" : "[email protected]"
Example query: }

SELECT * FROM users

Example query (in Firebase):
WHERE uid = 11
db.collection('users').doc('11').get()
 What are Cloud Functions?

• Functions run on Google Cloud Platform, e.g. on Firebase

• Serverless: No server management is required
• Event-driven: a function executes when certain event occurs
Source Event Use case example
Firestore onCreate, on Update, onDelete, onWrite Send a push notification to users when a new
data created
Cloud Storage onChange [on Objects] Resize and convert format of an avatar
Authentication onCreate, onDelete Create a new document for newly registered
user
HTTP onRequest, onCall REST API call,
Callable functions – Refactoring some client-
side code to server-side code
… and many more ….
 How to Write Cloud Functions?

• Install firebase-tools

• Create a firebase project with functions features added

$ firebase init functions

• Write the code in ./functions/index.js file for the following tasks:

• Import Firebase SDK
• Initialize the SDK with an authorization strategy
• Export functions to be listened by Firebase
Example of index.js is in the following slide

• Deploy the functions to Firebase

$ firebase deploy --only functions
How to Write Cloud Functions? (2)
./functions/index.js
 How to Write Cloud Functions? (3)

Example 1: Triggers

No explicit function call

required: A trigger will
be called automatically
by Firebase when the
event occurs.
 How to Write Cloud Functions? (4)

Example 2:
Callable Functions
A callable function can be called
directly from the client app.

An example use case, to refactor some

business logics code at client-side and
move it to server-side
 How to Write Cloud Functions? (5)

To call to cloud functions

from Flutter, use the
CloudFunction package

Each cloud function call is

asynchronous
 How to Write Cloud Functions? (6)

Example 3:
HTTP Requests
Functions are called from
HTTP-based clients, e.g.
web browser, REST client
 Demo
Developing REST Service on Firebase
 Demo - Project Source Code

backend
https://github.com/jumail-utm/backend_firebase_rest

Frontend (Flutter App – Todo List)

https://github.com/jumail-utm/flutter_todo_rest

Command line and code snippet to code along:

https://jumail-utm.github.io/backend_firebase_rest
 Back-end Architecture

Adopt MVC architecture

Mobile App Back-end

router.get(‘/user/:id’)
GET /users/10
Controller Model

Router
user = UserModel.getUser(10)

If (user is found) then db.collection(‘users’).do

Response.send(user)
Else
c(10).get()
Response.error(404)
End If Firebase SDK
Response
{
"id": 10, Express JS
"name" : "Abdullah Tajuddin",
"email" : "[email protected]"
}
Firestore
 Express JS Middleware

HTTP Request Express

Model

Middleware

Middleware

Middleware
HTTP Response

Watch the previous lecture video to learn more about Express JS and Router
Setting Up Local Firebase
Developing REST API
Project Structure
Deploying the Project
 • Introduction to Firebase
• Set up Local Firebase
Summary • Develop REST API on Firebase
• Deploy REST API to Firebase