DataEngineering

About Software Development

Yoonjae Kim

03 28, Thursday.

Thin Geometric Lines
Thin Geometric Lines

4 Key Elements for Project

Design

Front-end

Back-end

AI

4 Key Elements for Project

Design

Front-end

Back-end

AI

Presentation Tier Framework

Brushstroke Arrow Rapid Curved Long
Brushstroke Arrow Rapid Curved Long

WEB

Python : Streamlit

MOBILE APP

Dart : Flutter

JavaScript : React Native

Java/Kotlin : Android

Swift : iOS

Application Tier Framework

Brushstroke Arrow Rapid Curved Long

Backend

JavaScript : Node.js

Python : FastAPI / Flask / Django

Java : Spring

Database Tier Service

Brushstroke Arrow Rapid Curved Long

Service

Firebase (NoSql)

Supabase (Sql)

MongoDB Atlas (NoSql)

Amazon RDS (Sql)

Or You can make your own database

using DB application

Real World Example

Job Search Platform (Wanted)

Hand Drawn Rectangular Frame

In frontend development,

you create what users see on their screens.


The "data" shown on these screens is fetched through communication with the backend server, not stored in the frontend itself.


The screen you're seeing now is an example of the data that needs to be built on the frontend.

Brushstroke Arrow Rapid Curved Long

Real World Example

And this communication can be checked in the 'Chrome-Developer Tools' under the Network tab.


In frontend development, data is fetched and displayed on the screen as is.

3-Tier Architecture

Request Data

Brushstroke Arrow Rapid Curved Long

Read Data

Brushstroke Arrow Rapid Curved Long
Brushstroke Arrow Rapid Curved Long

Response Data

The backend server(API server) does not directly store data. It reads data from the "database" based on client requests. Then, it processes this data and responds back to the client.ckend

Design, Key Element for Project

Design

Front-end

Back-end

AI

Design, Key Element for Project

Design Reference Site

Design, Key Element for Project

AI for Design

Front-end, Key Element for Project

Design

Front-end

Back-end

AI

Let’s Practice React

Back-end, Key Element for Project

Design

Front-end

Back-end

AI

Back-end, Key Element for Project

We will build the backend using FastAPI. We plan to construct and execute this in a Colab environment.

Back-end, Key Element for Project

serving

ssh

Loose Handdrawn Computer

Using a Colab environment essentially means

using a single computer.

Back-end, Key Element for Project

Gwangju

Computer Line Icon
Red Down Arrow
Textured Cutout Earth
Click Here Button

What is ngrok?


ngrok is a globally distributed reverse proxy that secures, protects and accelerates your applications and network services, no matter where you run them. You can think of ngrok as the front door to your applications.


ngrok is environment independent because it can deliver traffic to services running anywhere with no changes to your environment's networking. Run your app on AWS, Azure, Heroku, an on-premise Kubernetes cluster, a Raspberry Pi, and even your laptop. With ngrok, it all works the same.


ngrok is a unified ingress platform because it combines all the components to deliver traffic from your services to the internet into one. ngrok consolidates together your reverse proxy, load balancer, API gateway, firewall, delivery network, DDoS protection and more.



Only Private IP,

Not Publuc IP

Let’s get Authtoken of Ngrok

Sign up!

Let’s get Authtoken of Ngrok

You can check your token

"Let's deploy a backend using Colab and FastAPI!

Red Down Arrow

You need to insert the Ngrok authtoken here.

After running this code, you will receive a URL.

"Let's deploy web service of comment system

Replace it with URL you get

Red Down Arrow

Uncomment all the code.

"Let's deploy web service of comment system

Brushstroke Arrow Rapid Curved Long
Brushstroke Arrow Rapid Curved Long

Local Database,

SQLite