Computer Based Technologies

ThS. Nguyễn Đức Anh

2 Computer Technologies

Internet
Web-based technologies
Mobile apps
AI
Blockchain
Big Data
…
3 Technology Application in real life

E-Commerce site
Game
Social platforms
Self-driving car
eKyc system
Banking system
…
4
5
6
7
8
9
10
11
12 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.
13 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
14 Class layout

1. Theory

2. Tutorial

3. Practice
15 Assessment

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.
16 Questions or comments?

Email: duc4nh.nguyen@gmail.com
 1. Introduction to web
17
development project
18 Web Application Architecture
19 Key Concepts
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
20 Web Application Architecture Diagram
21 Preparation before next class

Install before the next class starts:

Ruby
Rails
SQLite
22 Installing Ruby, Rails & SQLite

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
23 Verify that your packages are installed

ruby -v
rails -v
sqlite3 --version
24
2. How to prototype ideas
25 User story

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
26 How to write User Story
27 User stories examples
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?)
28 Sample application topics
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…
29 Class exercise

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
30
3. The ultimate application setup
31 Introducing Terminal
A terminal is simply a text-based interface to the computer
32 Open Terminal

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.
33 Ruby

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

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
35 Why Ruby on Rails?

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.
36 Over the past two decades, Rails has taken countless companies
to millions of users and billions in market valuations.
37 Go And Ruby Are The Highest-Paying Primary
Languages

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.
38 Verify that your packages are installed

ruby -v
rails -v
sqlite3 --version
39
4. Generate a starter project
40 Creating the Application
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
41 Start the server

cd <your-app-name>
rails server
42 Hello, Rails!
On your browser: go to http://127.0.0.1:3000
Confirm that your app is running
43 Introducing Code Editor & IDE
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
44
implementation
45 Defining Models
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
46 Defining Models (2)
47 Defining Model Associations
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
48 Sketching database schema
Draw.io
49 Class exercise

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.
50 Rails scaffolding

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.
51 Rails scaffolding (2)
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
52 Rails scaffolding (3)

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
53 Understand CRUD in your Rails application
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.
54 Class exercise

Build a Rails scaffolding following the database design

made from previous exercise;
Test out 4 CRUD functions of the models you created.
55
6. Design template
56 Some required packages for FE template

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
57 Add design using Tailwind template
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

58 Generate new application using template

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
59 Re-Generate scaffold

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
60 Restart the app

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:
61 Try out the new template!

Check out new template at http://localhost:3000/books

62 Class exercise

Rebuild your application with Tailwind template

Verify that your app is working with nice UI
63
7. Version control with Git
64 What is Version control

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.
65 Git

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
66 Create Github Account & Github Project

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
67 Create Github Account & Github Project (2)
68 Create Github Account & Github Project (3)

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"
69 Create Github Account & Github Project (4)

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
70 Create Github Account & Github Project (5)
71 Class exercise

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 &
72
associations
73 Data Validation

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
74 Data Validation

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
75 Data Validation

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
76 Data Association

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
78 Remember to Save your code on Github!

git status
git add -A
git commit -m "Add model validation and association"
git push origin master
79 Class exercise

Build your own data validation and association

Remember to commit your code to github!
80 Polishing plate boiler UI

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
81 Update root url

Look for config/routes.rb

Replace
root to: 'home#index'
With
root to: 'books#index'
82 Show model association name

Look for app/views/books/index.html.erb

And app/views/books/show.html.erb
Replace
book.subject
With
book.subject.name
83 Update website title

Look for app/views/shared/_head.html.erb

Replace
<%= content_for?(:title) ? yield(:title) : "Kickoff Tailwind" %>
With
<%= content_for?(:title) ? yield(:title) : "Library Management" %>
84 Select box for association

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 %>
85 Add logo of our own

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
86 Add links to Menu

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" %>
87 Remember to Save your code on Github!

git status
git add -A
git commit -m "Polishing plate boiler content"
git push origin master
88 Class exercise

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!
89
9. Using Rails admin library
90 Introducing Rails Admin

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
91 Try out Rails Admin
Restart the server: rails server
Try it out at: http://localhost:3000/admin
92 Remember to Save your code on Github!

git status
git add -A
git commit -m "Add rails admin"
git push origin master
93 Class exercise

Try out Rails admin on your project

Remember to commit your code to github!
94
10. Deploy application to cloud
95 What is software deployment?

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
96 Deploy your app to Railway

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
97 Config Postgres database on production
environment

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!
98 Config Postgres database on production
environment (2)

Look for Gemfile, add following:

gem 'pg', '1.3.5', group: :production
Rerun: bundle install
99 Config Postgres database on production
environment (3)
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
100 Config Procfile

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
101 (only Window users) Making run-file executable

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

102 Remember to Save your code on Github!

git status
git add -A
git commit -m "Config for Railway deployment"
git push origin master
103 Generate a project on Railway

Create a new Railway account at https://railway.app/new

We can login using our Github account!
104 Generate a project on Railway

Create a new project

Select “Deploy from Github Repo”
Select your repository
105 Generate a project on Railway

Let create a database

On your new project, select New
Select Database > Add PostgreSQL
106 Generate a project on Railway
Once everything is in place, the deployment should happen
automatically
107 Generate a project on Railway
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
108 Config hosting

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.
109 Config hosting

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
110 Remember to Save your code on Github!

git status
git add -A
git commit -m "Config for blocked hosting"
git push origin master
111 Application on the Cloud!
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!
112 Class exercise

Deploy your app to Railway

Verify that your production url work, this url will be your
final submission
113 Final project submission

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
114
jobs at technology enterprises