svelteapp typescript go
1.0.0
Il s'agit d'une application de démonstration de shopping simple, basée sur les mêmes exemples angular / react / vue.js dans le type essentiel d'Adam Freeman:
/src )/backend )/db )Le projet est livré avec un Dockerfile qui peut créer un seul petit conteneur avec des versions multi-étages (taille d'image ~ 25 Mo) et également prendre en charge pour être ouverte dans DevContainer / Codespace.
Un flux de travail GitHub Action est créé pour exécuter le test de construction pour les refontes Pull-Riquests pour les mises à jour de dépendance.
Le but de Project est une démonstration de construire une petite application monolithique complète et autonome avec des cadres modernes, mais n'est pas destiné à être un modèle pratique pour toutes les applications du monde réel. Par exemple, les gestionnaires d'erreurs entre front-end et authentification sont principalement ignorées.
Une version similaire utilisant Vue.js, Express, MongoDB et Docker Compose peut être trouvée ici (n'est plus maintenue).
L'application Svelte a les itinéraires suivants:
| Itinéraire | Page |
|---|---|
/ | Index (sera redirigé vers /products ) |
/products | Parcourez et ajoutez des produits au panier |
/order | Affichage et commande de paiement |
/summary/{id} | Résultat de la commande |
/ , elle redirigera immédiatement vers /products ./products charge la liste des produits à partir d'un service API et affichent les catégories et les articles.Add To Cart sur tous les articles, il sera ajouté au panier (Global State Array orderLines ).Submit Order sur /products , l'application redirigera vers /order , WHCIH affichera le détail de la commande.Submit Order sur /order , l'application enverra la commande à un service API et obtiendra l'ID de commande./summary/[id] en conséquence. Le backend crée deux API de type repos:
| API | Fonction |
|---|---|
Obtenez /api/products | Interroger la base de données et les données du produit de retour |
Post /api/orders | Écrivez des données de commande dans la base de données et renvoyez un nouvel ID de commande |
Les projets originaux d'Adam Freeman utilisent json-server sur un serveur express comme simulations API. Je garde les spécifications d'entrée / sortie des services pour la démonstration. À l'heure actuelle, comme tous les exemples originaux, l'application ne lit que les listes de produits et les données de commande d'écriture. Le package Axios utilisé dans les exemples originaux est également remplacé par fetch .
Sveltekit a également une fonctionnalité pour créer des "API backend". Cependant, le serveur Golang est suffisant ici, nous n'avons donc pas vraiment besoin de créer des API dupliquées.
/api/products Renvoyez une liste de produits à partir de la base de données. La category sera utilisée pour créer des boutons de filtre de catégorie sur l'application.
Exemple de corps de demande:
(aucun)
Exemple de corps de réponse:
[
{
"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Écrivez des articles et des quantités commandées. Le service créera un nouvel ID de commande et l'associera aux produits commandés.
Exemple de corps de demande:
{
"lines" : [
{
"productId" : 1 ,
"productName" : " Kayak " ,
"quantity" : 2
},
{
"productId" : 2 ,
"productName" : " Lifejacket " ,
"quantity" : 4
}
]
}Exemple de corps de réponse:
{
"id" : 42
} La base de données SQLite ( ./db/data.sqlite3 ) dans ce référentiel contient déjà les products de table avec 9 enregistrements de produits (qui peuvent être trouvés dans de nombreux livres d'Adam Freeman) et des orders de table vides. Vous pouvez utiliser le navigateur DB pour SQLite pour lire la base de données. Il existe également un fichier de sauvegarde au cas où vous auriez besoin de restaurer la base de données.
Voici les déclarations SQL pour les recréer:
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 ' );Pour le développement local, vous aurez besoin
Remarque: Le package
go-sqlite3nécessite que GCC se compile avec la variable d'environnementCGO_ENABLED=1.Pour les utilisateurs de Windows, il peut être installé avec Mingw (unzip et ajouter
mingw64binsur$PATH, puis redémarrer le code vs). Sur Linux, il peut être installé avec l'build-essentialdu package.
git clone https://github.com/alankrantas/svelteapp-typescript-go.git
cd svelteapp-typescript-go
npm i -g yarn@latest
yarn setup-fullEt installer / mettre à niveau le fil:
npm i -g yarn@latest Exécutez l'application Svelte en mode développement. L'application n'appellera aucune API backend, mais il renvoie des données de produit simulées et le numéro de commande renvoyé est toujours 42 .
yarn dev L'application sera ouverte sur 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-allInstallez les dépendances, créez des applications frontales et back-end et exécutez le serveur local:
# 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 L'application ouvrirait sur http://localhost:8080 .
# build container
yarn docker
# run container
yarn docker-run L'application ouvrirait sur http://localhost:8080 .
