Computer Based Technologies
ThS. Nguyễn Đức Anh
1

Computer Technologies
2
Internet
Web-based technologies
Mobile apps
AI
Blockchain
Big Data
…

Technology Application in real life
3
E-Commerce site
Game
Social platforms
Self-driving car
eKyc system
Banking system
…

4

5

6

7

8

9

10

11

About the course
Provide specific concepts of computer technologies in the
process of a software development project.
Explore various technologies and methods used to build a
complete software application.
By that, students will be able to build any other applications
from zero to deployment.
12

Learning schedule
1. Introduction to software development project
2. How to prototype ideas
3. The ultimate application setup
4. Generate a starter project
5. Database design and implementation
6. Design template
7. Version control with Git
8. Data type, validation & associations
9. Using Rails admin library
10. Deploy application to cloud
11. Opportunities & guidances for jobs at technology enterprises
13

Class layout
14
1. Theory
2. Tutorial
3. Practice

Assessment
15
Class participation 10%
Midterm Assessment 30%
Final project 60%
Note: Students achieve less than 80% class attendance and
participation will not be able to take the final exam.

Questions or comments?
Email: duc4nh.nguyen@gmail.com
16

1. Introduction to web
development project
17

Web Application Architecture
18

Key Concepts
19
Frontend is everything you see and can interact with using a browser.
The front-end is built using a combination of technologies such as HTML,
JavaScript and CSS
Backend, also called the server-side, consists of the server which
provides data on request, the application that channels it, and the
database which organizes the information.
Web server: a computer that stores web server software and a website's
component files
Database is an organized collection of structured information, or data
(popular databases being used are MySQL, SQLite, Postgres, etc)
File system handles the persistent storage of data files, apps, and the
files associated with the operating system itself

Web Application Architecture Diagram
20

Preparation before next class
21
Install before the next class starts:
Ruby
Rails
SQLite

Installing Ruby, Rails & SQLite
22
Follow this article, install Ruby, Rails & SQLite (you can
ignore other parts)
For window user: also refer to this to install SQLite
Noted: the required version is as below:
ruby 3.1.2 (for window user: find this version here)
Rails 7.0.4

Verify that your packages are installed
23
ruby -v
rails -v
sqlite3 --version

2. How to prototype ideas
24

User story
25
A user story is an informal, general explanation of a software
feature written from the perspective of the end user or customer
User stories help articulate what value a product feature can bring
and have a better understanding of why users want a certain
functionality

How to write User Story
26

User stories examples
27
Topic: Library management tools
User story 1:
a. As an bookkeeper
b. I want to see the list of all books available in my library
c. So that, I can monitor the books availability
d. Acceptance criteria:
Book list in a table
Data shown to be: title, publisher, year, status of the
book (in stock/ lent?)

Sample application topics
28
Restaurant management
Supermarket management system
Food recipe management
Bookstore management
Dairy app
Warehouse management
Bus management
Civil management
Car parking management
Train line operating system
HR application
etc…

Class exercise
29
Each student choose one topic, it can be from the
given list or anything else you can think of
Write down at least 5 user stories for your chosen topic

3. The ultimate application setup
30

Introducing Terminal
31
A terminal is simply a text-based interface to the computer

Open Terminal
32
Mac: Click the Launchpad icon in the Dock, type Terminal in the
search field, then click Terminal
Window: Click Start and search for "Command Prompt" or type
"cmd" and then click OK.

Ruby
33
Ruby is a
open-source
object-oriented
scripting
interpreted
high-level
programming language

Rails
34
Rails is a full-stack framework.
It ships with all the tools needed to build amazing web
apps on both the front and back end

Why Ruby on Rails?
35
Cost-effective. The Ruby on Rails framework is 100% free and is an
open-source framework.
Built on Model-View-Controller (MVC) architecture
Easy to manage changes.
Secure.
Performance.
Flexibility.
Productivity.
Consistent.

Over the past two decades, Rails has taken countless companies
to millions of users and billions in market valuations.
36

Go And Ruby Are The Highest-Paying Primary
Languages
37
According to recent (2023) report
The median salary for IT professionals with Go and Ruby skills
was greater than 60 million dong. Which is about at least 52%
more than the median salary for JavaScript or Java
professionals with the same amount of experience.

Verify that your packages are installed
38
ruby -v
rails -v
sqlite3 --version

4. Generate a starter project
39

Creating the Application
40
On a terminal, let start with:
rails new <your-app-name>
Your app name should be: [your name]-[student-id]-[your topic].
Follow this convention as this will be a part of your final submission.
e.g: nguyen-duc-anh-0123456789-library-system

Start the server
41
cd <your-app-name>
rails server

Hello, Rails!
42
On your browser: go to http://127.0.0.1:3000
Confirm that your app is running

Introducing Code Editor & IDE
43
Code editors are tools typically used by programmers and web developers to
write and edit code
e.g: Sublime
An integrated development environment (IDE) is a software application that
helps programmers develop software code efficiently. It increases developer
productivity by combining capabilities such as software editing, building, testing,
and packaging in an easy-to-use application.
e.g: Rubymine, IntelliJ, VScode
Feel free to select a code editor or IDE of your choice! A good one will help you
speed up development process a LOT.

5. Database design and
implementation
44

Defining Models
45
Term Model in Rails is used to describing data structures and the
methods to access them in general.
In rails with an SQL database
A model class represent a table
Model attributes represent columns
Model objects represent rows

Defining Models (2)
46

Defining Model Associations
47
In Rails, an association is a connection between two models.
For example, a model for authors and a model for books. Each
author can have many books.
One-to-One
One-to-Many
Many-to-Many

Sketching database schema
48
Draw.io

Class exercise
49
Based on the topic & user stories your selected from
previous exercises, sketch your database schema
Must have at least 1 one-to-one and 1 one-to-many
relationship
Nice to have many-to-many relationship
You can draw it on paper or any tool of your choice,
but you should take a picture of it. This will be a part of
your final submission.

Rails scaffolding
50
A scaffold is a set of automatically generated files which forms the
basic structure of a Rails project. These files include:
A controller
A model
Views for every standard controller action (index, edit, show, new)
A new route.
And a migration to prepare your database.

Rails scaffolding (2)
51
Syntax: rails g scaffold <Model-name> <attributes_1>:<type_1>
<attributes_2>:<type_2> …
Types available:
:binary
:boolean
:date
:datetime
:decimal
:float
:integer
:primary_key
:string
:text
:time
:timestamp

Rails scaffolding (3)
52
rails g scaffold Subject name:string description:string
rails g scaffold Book title:string author:string publisher:string year:integer
subject:references
rails db:migrate
rails server

Understand CRUD in your Rails application
53
CRUD refers to the four basic operations a software application should be
able to perform – Create, Read, Update, and Delete.
The CREATE operation adds a new record to a database.
READ returns records (or documents or items) from a database table (or
collection or bucket) based on some search criteria.
UPDATE is used to modify existing records in the database. For example, this can
be the change of address in a customer database or price change in a product
database.
DELETE operations allow the user to remove records from the database. A hard
delete removes the record altogether, while a soft delete flags the record but
leaves it in place.

Class exercise
54
Build a Rails scaffolding following the database design
made from previous exercise;
Test out 4 CRUD functions of the models you created.

6. Design template
55

Some required packages for FE template
56
In order to utilize our frontend template properly, we would need to
install NodeJS & Yarn
NodeJS: https://nodejs.org/en/download/
Yarn: https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable

Add design using Tailwind template
57
Kickoff Tailwind is a free and simple starting point for Ruby on Rails 7
applications
https://github.com/ducng0610/ruby_on_rails_starter_template
Clone the template:
git clone https://github.com/ducng0610/ruby_on_rails_starter_template.git

Generate new application using template
58
rails new <your-app-name> -j esbuild -m <route to template.rb file>
Your app name should be: [your name]-[student-id]-[your topic]-final-submission.
Follow this convention as this will be a part of your final submission.
e.g: nguyen-duc-anh-0123456789-library-system-final-submission
Example:
rails new nguyen-duc-anh-0123456789-library-system-final-submission -j esbuild -m
ruby_on_rails_starter_template/template.rb

Re-Generate scaffold
59
rails g scaffold Subject name:string description:string
rails g scaffold Book title:string author:string publisher:string year:integer
subject:references
rails db:migrate

Restart the app
60
yarn build
yarn build:css
rails server
Note for Window user: due to cmd syntax, we need to make a slight
change to package.json file as below:

Try out the new template!
61
Check out new template at http://localhost:3000/books

Class exercise
62
Rebuild your application with Tailwind template
Verify that your app is working with nice UI

7. Version control with Git
63

What is Version control
64
Version control, also known as source control, is the practice of
tracking and managing changes to software code.
Version control systems are software tools that help software teams
manage changes to source code over time.
As development environments have accelerated, version control
systems help software teams work faster and smarter.

Git
65
By far, the most widely used modern version control system in the
world today is Git.
Developers who have worked with Git are well represented in the
pool of available software development talent
Read More about Git (vietnamese)
Installing Git

Create Github Account & Github Project
66
Create your https://github.com personal account
Go to https://github.com/new
Project name: <your-app-name>
e.g: [your name]-[student-id]-[your topic]-final-submission. Follow this
convention as this will be a part of your final submission.
e.g: nguyen-duc-anh-0123456789-library-system-final-submission
• Description: description about your app
e.g: A library management system
Visibility Level: Public

Create Github Account & Github Project (2)
67

Create Github Account & Github Project (3)
68
Initialize the Local Repo: git init
Add the GitHub remote to the repo as the origin: git remote add
origin https://github.com/<your-user-name>/<your-app-name>.git
Add all our files to the first commit to the project: git add .
Commit the first commit: git commit -m "Initial commit of a Rails
application with scaffold"

Create Github Account & Github Project (4)
69
Push our changes: git push -u origin master
Verify That the Files Got Committed:
In the browser, refresh the GitHub page for the repo created
earlier (as on the next slice)
Go back to the terminal and check the git log as well: git log

Create Github Account & Github Project (5)
70

Class exercise
71
Create your own Github account, commit and push
your code!
Verify your github url repository works (e.g
https://github.com/ducng0610/nguyen-duc-anh-0123
456789-library-system-final-submission) this link will be
your final submission

8. Data type, validation &
associations
72

Data Validation
73
We want verify the attributes of Book & Subject are valid, e.g:
Subject must has name
A book must has title, author, year & publisher
Title of the book must be unique
Year of a book must be a number
Year of a book must not be in the future

Data Validation
74
app/models/book.rb
validates_presence_of :title, :author, :publisher
validates_uniqueness_of :title
validates_numericality_of :year
app/models/subject.rb
validates_presence_of :name

Data Validation
75
Custom validator
validate :year_up_to_present
def year_up_to_present
errors.add(:field_name, 'Year must not be in the future') if year >
Time.now.year
end

Data Association
76
Build one-to-many relation between Book and Subject
A subject has many books
A book belongs to a subject
app/models/book.rb
belongs_to :subject
app/models/subject.rb
has_many :books

77

Remember to Save your code on Github!
78
git status
git add -A
git commit -m "Add model validation and association"
git push origin master

Class exercise
79
Build your own data validation and association
Remember to commit your code to github!

Polishing plate boiler UI
80
Let polish a few thing for our app, which include but not limit to:
a. Update root url
b. Show model association name
c. Select box for association
d. Add logo of our own
e. Add links to Menu
f. Update website title

Update root url
81
Look for config/routes.rb
Replace
root to: 'home#index'
With
root to: 'books#index'

Show model association name
82
Look for app/views/books/index.html.erb
And app/views/books/show.html.erb
Replace
book.subject
With
book.subject.name

Update website title
83
Look for app/views/shared/_head.html.erb
Replace
<%= content_for?(:title) ? yield(:title) : "Kickoff Tailwind" %>
With
<%= content_for?(:title) ? yield(:title) : "Library Management" %>

Select box for association
84
Look for app/views/books/_form.html.erb
Replace
<%= form.text_field :subject_id, class: input_class %>
With
<%= form.select :subject_id, options_from_collection_for_select(
Subject.all, 'id', 'name', selected = book.subject_id), class: label_class %>

Add logo of our own
85
Look for app/views/shared/_navbar.html.erb
Search for “Remove this logo and add your own”
Replace the section with <%= image_tag("logo.png", size: '60') %>
Noted: Your logo.png should be available at
app/assets/images/logo.png

Add links to Menu
86
Look for app/views/shared/_navbar.html.erb
Remove everything unrelated to our app (Hint: they are around the “Basic
Link")
Add following url for your objects, e.g:
<%= link_to "Books", "/books", class: "p-3 hover:bg-gray-50 transition ease duration-300
rounded-lg text-center focus:bg-gray-100 lg:inline-block block" %>
<%= link_to "Subjects", "/subjects", class: "p-3 hover:bg-gray-50 transition ease duration-300
rounded-lg text-center focus:bg-gray-100 lg:inline-block block" %>

Remember to Save your code on Github!
87
git status
git add -A
git commit -m "Polishing plate boiler content"
git push origin master

Class exercise
88
Polish your application UI following the examples.
If you are done with all above samples. Try continue
polishing on other areas. Feel free to try out anything
as you wish!
Remember to commit your code to github!

9. Using Rails admin library
89

Introducing Rails Admin
90
RailsAdmin is a Rails engine that provides an easy-to-use interface for
managing your data.
Install gem "rails_admin" in Gemfile
gem 'rails_admin'
Install the library
bundle install
Init the admin:
rails g rails_admin:install

Try out Rails Admin
91
Restart the server: rails server
Try it out at: http://localhost:3000/admin

Remember to Save your code on Github!
92
git status
git add -A
git commit -m "Add rails admin"
git push origin master

Class exercise
93
Try out Rails admin on your project
Remember to commit your code to github!

10. Deploy application to cloud
94

What is software deployment?
95
Software deployment is all of the activities that make a software system
available for use
Web deployment is the process of deploying the code (html, css,
javascript and server code) from source control or source artifacts to a
hosting platform
Popular Cloud Hosting platforms:
AWS (Amazon Web Services) Cloud
Google Cloud
Microsoft Azure
IBM Cloud
Oracle Cloud

Deploy your app to Railway
96
Railway is a simple and powerful deployment platform. It has first-class
Ruby support and built-in integrations such as databases
a. It is simple
b. It is free for exploring
In order to deploy our application to Railway, we will need to:
a. Config PG database on production environment
b. Config Procfile
c. Generate a project on Railway
d. Config hosting

Config Postgres database on production
environment
97
SQLite is a simple database, yet…
It is unsecure
It is not supported by Railway
In fact, it is not suitable for any production environment
We will use Postgres database on production!

Config Postgres database on production
environment (2)
98
Look for Gemfile, add following:
gem 'pg', '1.3.5', group: :production
Rerun: bundle install

Config Postgres database on production
environment (3)
99
Look for config/database.yml, change from
production:
<<: *default
database: db/production.sqlite3
to
production:
<<: *default
database: db/production.sqlite3
url: <%= ENV["DATABASE_URL"] %>
adapter: postgresql

Config Procfile
100
Procfile is where you declare the one or more processes to be run for
your app to function
At root directory, create a new file named Procfile:
web: rails db:migrate && bin/rails server -b 0.0.0.0 -p ${PORT}
js: yarn build --watch
css: yarn build:css --watch

(only Window users) Making run-file executable
101
Make change to bin/rails (remove .exe)
Change #!/usr/bin/env ruby.exe to #!/usr/bin/env ruby
Only on Window, the execution file is not executable by default. Hence
we need to give it execute permission before pushing to Github:
git update-index --chmod=+x bin/rails

Remember to Save your code on Github!
102
git status
git add -A
git commit -m "Config for Railway deployment"
git push origin master

Generate a project on Railway
103
Create a new Railway account at https://railway.app/new
We can login using our Github account!

Generate a project on Railway
104
Create a new project
Select “Deploy from Github Repo”
Select your repository

Generate a project on Railway
105
Let create a database
On your new project, select New
Select Database > Add PostgreSQL

Generate a project on Railway
106
Once everything is in place, the deployment should happen
automatically

Generate a project on Railway
107
Wait for deployment finish, let try out the application on cloud.
On Railway, click on your app > Settings > Domains >
Generate domains
Try out newly generated domain

Config hosting
108
Uhh ohh, our app is not running. It says Blocked host error!
No worry, Blocked Host is a feature of Rails to guard against DNS
rebinding attacks.

Config hosting
109
Let fix it, go to config/application.rb
Add following:
config.hosts << "demo-rails-app-production.up.railway.app"
Remember to change the url to your personal one

Remember to Save your code on Github!
110
git status
git add -A
git commit -m "Config for blocked hosting"
git push origin master

Application on the Cloud!
111
Once our new code pushed to Github, go back to the site url and
you should see the deployment on Railway happen automatically.
Once deploy finish, our application should be available on the
cloud!

Class exercise
112
Deploy your app to Railway
Verify that your production url work, this url will be your
final submission

Final project submission
113
Submit your work via email
Email title: [course-id]-[your name]-[student-id]-[your
topic]-final-submission
e.g:
INS2065-nguyen-duc-anh-0123456789-library-system-final-submission
Your submission must have ALL of the below:
Project Github url
Project live url
Your database design attached

11. Opportunities & guidances for
jobs at technology enterprises
114