y9c / angular_reatful_gin_sqlite_template

🌐 Angular_Reatful_Gin_Sqlite_template

Angular + Reatful + Gin + Sqlite template

Aim

The most basic code to show the full architecture

Application Architecture

    ----------
    | client | ←-----|
    ----------       |
       |             ↓
       |         ----------
       |         | server |
       |         ----------
       |render       ↑
       |         ---------
       ||------→ | Caddy |
       ||        ---------
       ↓|proxy       ↑
    ╔══════╗     -------    ╔═══════╗   --------   ╔══════════╗
    ║ View ║  →  | API | ←  ║ Model ║ ← | Data | ← ║ Analysis ║
    ╚══════╝     -------    ╚═══════╝   --------   ╚══════════╝
        ↓            ↓          ↓           ↓          ↓
    -----------  -----------  -------  ----------   ----------
    | Angular |  | Restful |  | Gin |  | Sqlite |   | Pandas |
    -----------  -----------  -------  ----------   ----------
        ↓                        ↓                      ↓
    --------------           ----------             ----------
    | TypeScript |           | Golang |             | Python |
    --------------           ----------             ----------

Fetures

• Angular 5.2.0
• golang 1.10
• caddy 0.10.10
• Echarts 4.0.1
• python 3.6.4
• pipenv 8.3.2

Prerequisites

• Client:

Node, npm

cd ./client
npm install --global @angular/cli

• Server:

Go, caddy

go get github.com/gin-gonic/contrib/static
go get github.com/gin-gonic/gin
go get github.com/jinzhu/gorm
go get github.com/jinzhu/gorm/dialects/sqlite

curl https://getcaddy.com | bash -s http.git,http.ratelimit

Python, pandas

pip install pipenv
cd ./server/analysis
pipenv install --python 3.6

Compile and Run

Tested on linux machine only!

Run on development environment

# make dev

cd client
ng server &
cd ..
go run server/main.go &
caddy -conf ./server/caddy/Caddyfile_dev

Run on production environment

# make run

cd client
ng build --prod
cd ../server
go build main.go
cd ..
./server/main
caddy -conf ./server/caddy/Caddyfile

Open http://0.0.0.0:8888/

Analysis Data

cd ./server/analysis

# do something...

Changelog

• use gin to route both static page and API
• split router in differnt files (ref)
• expose the API to the client
• use caddy Proxy for /index.html and /api
• write a makefile
• Add Wiki page
• Add nested component in Angular client
• Add UI (Bootstrap or Antd?)
• Use python to manipulate data layer
• change models directory structure in server
• Add RxJS observer of API to plot cell data
• Add python type hinting

ISSUE

• Gin model is case insensitive, but Angular is case sensitive. (May raise error)
• 'index' is meaningful in gorm, thus where(index = ?) trigger a bug. (database table column name)