svelteapp typescript go
1.0.0
Este é um aplicativo de demonstração de compras simples, com base nos mesmos exemplos angulares/react/vue.js no essencial da TypeScript de Adam Freeman:
/src )/backend )/db )O projeto vem com um Dockerfile que pode criar um único recipiente pequeno com compilações com vários estágios (tamanho da imagem ~ 25 MB) e também suportar a ser aberto no DevContainer/Codespace.
Um fluxo de trabalho de ação do Github é criado para executar o teste de construção para as solicitações de dependência do DependBot para atualizações de dependência.
O objetivo do projeto é uma demonstração de construir uma aplicação monolítica pequena e independente de pilha completa com estruturas modernas, mas não deve ser um modelo prático para quaisquer aplicações do mundo real. Por exemplo, os manuseio de erros entre o front-end e a autenticação são principalmente ignorados.
Uma versão semelhante usando Vue.js, Express, MongoDB e Docker Compose pode ser encontrada aqui (não é mais mantida).
O aplicativo esbelto tem as seguintes rotas:
| Rota | Página |
|---|---|
/ | Índice (será redirecionado para /products ) |
/products | Navegue e adicione produtos ao carrinho de compras |
/order | Pedido de exibição e checkout |
/summary/{id} | Resultado do pedido |
/ , ele redirecionará imediatamente para /products ./products carrega a lista de produtos de um serviço de API e exibe as categorias e itens.Add To Cart em qualquer itens, ele será adicionado ao carrinho ( orderLines do Global State Array).Submit Order /products , o aplicativo será redirecionado para /order , o que mostrará os detalhes do pedido.Submit Order /order , o aplicativo enviará o pedido para um serviço de API e obtenha o ID do pedido./summary/[id] como resultado. O back-end cria duas APIs de repouso:
| API | Função |
|---|---|
Get /api/products | Consulta DB e retornar dados do produto |
Post /api/orders | Escreva os dados do pedido no banco de dados e retorne o ID do novo pedido |
Os projetos originais de Adam Freeman usam json-server em um servidor expresso como serviços de API simulados. Eu mantenho a especificação de entrada/saída dos serviços em prol da demonstração. No momento, como todos os exemplos originais, o aplicativo lê apenas listas de produtos e grava os dados do pedido. O pacote Axios usado nos exemplos originais também é substituído por fetch .
O Sveltekit também possui um recurso para criar "APIs de back -end". No entanto, o servidor Golang aqui é suficiente, por isso não precisamos criar APIs duplicadas.
/api/products Retorne uma lista de produtos do banco de dados. A category será usada para criar botões de filtro de categoria no aplicativo.
Exemplo de órgão de solicitação:
(nenhum)
Exemplo de corpo de resposta:
[
{
"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/ordersEscreva item e quantidades ordenadas. O serviço criará um novo ID de pedido e o associará aos produtos ordenados.
Exemplo de órgão de solicitação:
{
"lines" : [
{
"productId" : 1 ,
"productName" : " Kayak " ,
"quantity" : 2
},
{
"productId" : 2 ,
"productName" : " Lifejacket " ,
"quantity" : 4
}
]
}Exemplo de corpo de resposta:
{
"id" : 42
} O banco de dados sqlite ( ./db/data.sqlite3 ) neste repo já contém os products da tabela com 9 registros de produtos (que podem ser encontrados em muitos livros de Adam Freeman) e em uma orders vazia. Você pode usar o navegador de banco de dados para o SQLite para ler o banco de dados. Há também um arquivo de backup, caso você precise restaurar o banco de dados.
Aqui estão as declarações SQL para recriá -las:
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 o desenvolvimento local, você precisará
NOTA: O pacote
go-sqlite3exige que o GCC seja compilação com a variável de ambienteCGO_ENABLED=1.Para usuários do Windows, ele pode ser instalado com Mingw (descompacte e adicionar
mingw64bina$PATHe reiniciar vs código). No Linux, ele pode ser instalado com o pacotebuild-essential.
git clone https://github.com/alankrantas/svelteapp-typescript-go.git
cd svelteapp-typescript-go
npm i -g yarn@latest
yarn setup-fullE instalar/atualizar o fio:
npm i -g yarn@latest Execute o aplicativo esbelto no modo de desenvolvimento. O aplicativo não chamará nenhuma API de back -end; em vez disso, retorna os dados simulados do produto e o número do pedido retornado é sempre 42 .
yarn dev O aplicativo estará aberto em 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 dependências, crie aplicativos front-end e back-end e execute o 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 O aplicativo seria aberto em http://localhost:8080 .
# build container
yarn docker
# run container
yarn docker-run O aplicativo seria aberto em http://localhost:8080 .
