svelteapp typescript go
1.0.0
これは、Adam FreemanによるEssential Typescriptの同じAngular/React/Vue.jsの例に基づいたシンプルなショッピングデモアプリです。
/src ）/backend ）/db ）このプロジェクトには、マルチステージビルド（画像サイズ〜25 MB）を備えた単一の小さなコンテナを作成できるDockerFileが付属しており、DevContainer/CodeSpaceで開くこともサポートしています。
GitHubアクションワークフローは、依存関係の更新用のDepandabotのプルリクエストのビルドテストを実行するために作成されます。
プロジェクトの目的は、最新のフレームワークを備えた小規模で自己完結型のフルスタックモノリシックアプリケーションを構築するデモですが、現実世界のアプリケーションの実用的なテンプレートではないことです。たとえば、フロントエンドと認証の間のエラーハンドリングはほとんど無視されます。
Vue.js、Express、Mongodb、Docker Composeを使用した同様のバージョンは、ここにあります（もはや維持されていません）。
Svelteアプリには次のルートがあります。
| ルート | ページ |
|---|---|
/ | index（ /productsにリダイレクトします） |
/products | ショッピングカートに製品を閲覧して追加します |
/order | 表示およびチェックアウト注文 |
/summary/{id} | 順序の結果 |
/で開かれると、すぐに/productsにリダイレクトされます。/products APIサービスから製品のリストをロードし、カテゴリとアイテムを表示します。Add To Cart 、カートに追加されます（グローバルステートアレイorderLines ）。/productsのSubmit Orderをクリックすると、アプリは/orderにリダイレクトされ、WHCIHは注文の詳細を表示します。Submit Order /orderを[注文]をクリックすると、アプリは注文をAPIサービスに送信し、注文IDを取得します。/summary/[id]にリダイレクトされます。 バックエンドは、2つのRESTFUL-LIKE APIを作成します。
| API | 関数 |
|---|---|
取得/api/products | クエリdbおよび返品製品データ |
投稿/api/orders | 注文データをDBに書き込み、新しい注文IDを返します |
Adam Freemanのオリジナルプロジェクトは、Express Serverでjson-server Mock APIサービスとして使用しています。デモのために、サービスの入力/出力仕様を保持します。現在、すべての元の例と同様に、アプリは製品リストのみを読み取り、注文データを書き込みます。元の例で使用されているAxiosパッケージもfetchに置き換えられます。
Sveltekitには、「バックエンドAPI」を作成する機能もあります。ただし、ここのGolangサーバーで十分であるため、重複したAPIを作成する必要はありません。
/api/productsデータベースから製品のリストを返します。このcategory 、アプリにカテゴリフィルターボタンを作成するために使用されます。
例リクエストボディ：
（なし）
応答本体の例：
[
{
"id" : 1 ,
"name" : " Kayak " ,
"category" : " Watersports " ,
"description" : " A boat for one person " ,
"price" : 275.0
},
{
"id" : 2 ,
"name" : " Lifejacket " ,
"category" : " Watersports " ,
"description" : " Protective and fashionable " ,
"price" : 48.95
}
]/api/orders注文されたアイテムと数量を書き込みます。このサービスは、新しい注文IDを作成し、注文した製品に関連付けます。
例リクエストボディ：
{
"lines" : [
{
"productId" : 1 ,
"productName" : " Kayak " ,
"quantity" : 2
},
{
"productId" : 2 ,
"productName" : " Lifejacket " ,
"quantity" : 4
}
]
}応答本体の例：
{
"id" : 42
}このレポのSQLiteデータベース（ ./db/data.sqlite3 ）には、すでに9つの製品レコード（多くのAdam Freemanの本にあります）と空のテーブルorders備えたテーブルproductsが既に含まれています。 SQLite用のDBブラウザを使用して、データベースを読み取ることができます。データベースを復元する必要がある場合に備えて、バックアップファイルもあります。
これらを再作成するためのSQLステートメントは次のとおりです。
CREATE TABLE " products " (
" id " INTEGER NOT NULL UNIQUE, -- product ID
" name " TEXT NOT NULL ,
" category " TEXT NOT NULL ,
" description " TEXT ,
" price " REAL NOT NULL ,
PRIMARY KEY ( " id " AUTOINCREMENT)
);
CREATE TABLE " orders " (
" id " INTEGER NOT NULL , -- order ID
" product_id " INTEGER NOT NULL , -- product ID
" quantity " INTEGER NOT NULL
);
INSERT INTO " main " . " products " (
" id " ,
" name " ,
" category " ,
" description " ,
" price "
)
VALUES
( ' 1 ' , ' Kayak ' , ' Watersports ' , ' A boat for one person ' , ' 275.0 ' ),
( ' 2 ' , ' Lifejacket ' , ' Watersports ' , ' Protective and fashionable ' , ' 48.95 ' ),
( ' 3 ' , ' Soccer Ball ' , ' Soccer ' , ' FIFA-approved size and weight ' , ' 19.5 ' ),
( ' 4 ' , ' Corner Flags ' , ' Soccer ' , ' Give your playing field a professional touch ' , ' 34.95 ' ),
( ' 5 ' , ' Stadium ' , ' Soccer ' , ' Flat-packed 35,000-seat stadium ' , ' 79500.0 ' ),
( ' 6 ' , ' Thinking Cap ' , ' Chess ' , ' Improve brain efficiency by 75% ' , ' 16.0 ' ),
( ' 7 ' , ' Unsteady Chair ' , ' Chess ' , ' Secretly give your opponent a disadvantage ' , ' 29.95 ' ),
( ' 8 ' , ' Human Chess Board ' , ' Chess ' , ' A fun game for the family ' , ' 75.0 ' ),
( ' 9 ' , ' Bling Bling King ' , ' Chess ' , ' Gold-plated, diamond-studded King ' , ' 1200.0 ' );地元の開発には必要です
注：
go-sqlite3パッケージでは、GCCが環境変数CGO_ENABLED=1にコンパイルする必要があります。Windowsユーザーの場合、MINGW（UNZIPおよびADD
mingw64binに$PATHに追加してから、コードを再起動します）でインストールできます。 Linuxでは、パッケージbuild-essentialでインストールできます。
git clone https://github.com/alankrantas/svelteapp-typescript-go.git
cd svelteapp-typescript-go
npm i -g yarn@latest
yarn setup-full糸のインストール/アップグレード：
npm i -g yarn@latest開発モードでSvelteアプリを実行します。アプリはバックエンドAPIを呼び出すことはなく、代わりにモック製品データを返し、返された注文番号は常に42です。
yarn devアプリはhttp://localhost:3000で開きます。
# download frontend dependencies
yarn
# download backend dependencies
yarn setup-server
# download both dependencies
yarn setup-full
# or
# yarn setup-all # upgrade frontend dependencies
yarn upgrade-app
# upgrade backend dependencies
yarn upgrade-server
# upgrade both dependencies
yarn upgrade-full
# or
# yarn upgrade-all依存関係をインストールし、フロントエンドアプリとバックエンドアプリの両方を構築し、ローカルサーバーを実行します。
# build frontend app
yarn build-app
# build backend server (which will set CGO_ENABLED=1)
yarn build-server
# build both
yarn build-full
# or
# yarn build
# yarn build-all # serve in macOS or Linux
yarn serve
# serve in Windows
yarn serve-winアプリはhttp://localhost:8080で開きます。
# build container
yarn docker
# run container
yarn docker-runアプリはhttp://localhost:8080で開きます。
