svelteapp typescript go
1.0.0
Esta es una aplicación de demostración de compras simple, basada en el mismo angular/react/vue.js ejemplos en mecanografiado esencial de Adam Freeman:
/src )/backend )/db )El proyecto viene con un DockerFile que puede crear un solo contenedor pequeño con compilaciones de múltiples etapas (tamaño de imagen ~ 25 MB) y también es compatible que se abrirá en DevContainer/CodeSpace.
Se crea un flujo de trabajo de acción de GitHub para ejecutar la prueba de compilación para las requisiciones de extracción de dependientes para las actualizaciones de dependencia.
El propósito del proyecto es una demostración para construir una aplicación monolítica completa y autónoma con marcos modernos, pero no destinado a ser una plantilla práctica para cualquier aplicación del mundo real. Por ejemplo, los manipuladores de errores entre el front-end y la autenticación se ignoran principalmente.
Una versión similar que usa Vue.js, Express, MongoDB y Docker Compose se puede encontrar aquí (ya no se mantiene).
La aplicación Svelte tiene las siguientes rutas:
| Ruta | Página |
|---|---|
/ | Índice (redirigirá a /products ) |
/products | Explorar y agregar productos al carrito de compras |
/order | Vista y orden de pago |
/summary/{id} | Resultado de orden |
/ , redirigirá inmediatamente a /products ./products carga la lista de productos desde un servicio API y muestra las categorías y artículos.Add To Cart en cualquier elemento, se agregará al CART ( orderLines de la matriz de estado global).Submit Order /products , la aplicación redirigirá /order , lo que mostrará el detalle del pedido.Submit Order /order , la aplicación enviará el pedido a un servicio API y obtendrá la ID de pedido./summary/[id] como resultado. El backend crea dos API como RESTful:
| API | Función |
|---|---|
Get /api/products | Consulta db y devuelve datos de productos |
Post /api/orders | Escriba los datos del pedido en DB y devuelva el nuevo ID de pedido |
Los proyectos originales de Adam Freeman usan json-server en un servidor Express como Servicios de API simulada. Mantengo la especificación de entrada/salida de los servicios en aras de la demostración. En este momento, como todos los ejemplos originales, la aplicación solo lee listas de productos y escribe datos de pedidos. El paquete Axios utilizado en los ejemplos originales también se reemplaza con fetch .
Sveltekit también tiene una característica para crear "API de backend". Sin embargo, el servidor Golang aquí es suficiente, por lo que realmente no necesitamos crear API duplicadas.
/api/products Devuelva una lista de productos de la base de datos. La category se utilizará para crear botones de filtro de categoría en la aplicación.
Cuerpo de solicitud de ejemplo:
(ninguno)
Cuerpo de respuesta de ejemplo:
[
{
"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/ordersEscriba el artículo y las cantidades ordenadas. El servicio creará una nueva ID de pedido y la asociará con los productos ordenados.
Cuerpo de solicitud de ejemplo:
{
"lines" : [
{
"productId" : 1 ,
"productName" : " Kayak " ,
"quantity" : 2
},
{
"productId" : 2 ,
"productName" : " Lifejacket " ,
"quantity" : 4
}
]
}Cuerpo de respuesta de ejemplo:
{
"id" : 42
} La base de datos SQLite ( ./db/data.sqlite3 ) en este repositorio ya contiene los products de la tabla con 9 registros de productos (que se pueden encontrar en muchos libros de Adam Freeman) y una orders vacía. Puede usar el navegador DB para SQLite para leer la base de datos. También hay un archivo de copia de seguridad en caso de que necesite restaurar la base de datos.
Aquí están las declaraciones SQL para recrearlas:
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 ' );Para el desarrollo local que necesitará
Nota: El paquete
go-sqlite3requiere que GCC se compile con la variable de entornoCGO_ENABLED=1.Para los usuarios de Windows, se puede instalar con MingW (Unzip y Agregar
mingw64bina$PATH, luego reiniciar el código VS). En Linux se puede instalar con el paquetebuild-essential.
git clone https://github.com/alankrantas/svelteapp-typescript-go.git
cd svelteapp-typescript-go
npm i -g yarn@latest
yarn setup-fullE instalar/actualizar hilo:
npm i -g yarn@latest Ejecute la aplicación SVELTE en modo de desarrollo. La aplicación no llamará a ninguna API de backend, sino que devuelve datos simulados del producto y el número de pedido devuelto siempre es 42 .
yarn dev La aplicación estará abierta en 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-allInstale dependencias, cree aplicaciones front-end y back-end y ejecute el servidor 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 La aplicación se abriría en http://localhost:8080 .
# build container
yarn docker
# run container
yarn docker-run La aplicación se abriría en http://localhost:8080 .
