
Links utilizados para a propriedade url:
https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/250px-Angular_full_color_logo.svg.png
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmOeR9edc42Muln0rqVEIe_QJXR2TtOEEaqG7DLEQ8ZR7vvnGtNDpIyL2I8V2SQ8bY3pw&usqp=CAU
Comandos utilizados na aula
1) Criação do projeto
ng new app-estoque
cd app-estoque
2) Instalação das dependências
npm install @supabase/supabase-js
ng add @nebular/theme
ng add @ngx-formly/schematics --ui-theme=bootstrap
Vamos criar a interface e a classe que será responsável pelas operações CRUD da aplicação.
Comandos utilizados:
ng g c public/components/login
Comandos utilizados:
ng g m components/admin/dashboard --routing
ng g c components/admin/dashboard
Vamos iniciar a codificação do template da Movimentação, mas antes precisamos incluir alguns imports e ajustes.
base.module.ts --> Incluir nos exports FormsModule
styles.scss--> Inserir o estilo do componente NgSelect com:
@import "~@ng-select/ng-select/themes/default.theme.css";
movimentacao.service --> Em getLastMovimentacoes inserir no final return data;
Instalando a biblioteca ngxcharts
npm i @swimlane/ngx-charts@17.0.1
Documentação
https://github.com/swimlane/ngx-charts
2. Demonstração
https://swimlane.github.io/ngx-charts/#/ngx-charts/bar-vertical
Após baixar os fontes do projeto você precisa:
Instalar as dependências :
npm install
E incluir suas chaves(key e url) do Supabase no arquivo database.service.ts.
Que tal construir aplicações em Javascript utilizando o incrível framework Angular 11 no front-end e o Supabase para acessar as APIs e salvar as informações no Banco de dados?
Muitos desenvolvedores iniciantes se perdem na quantidade de tecnologias disponíveis. No mundo Javascript, isso é particularmente um terror, como uma quantidade absurda de frameworks e serviços.
O objetivo desse curso é apresentar de forma direta e simples, a possibilidade de apenas com conhecimentos básicos de HTML, CSS e Javascript, utilizar uma plataforma moderna e com muitas oportunidades de mercado. O Angular.
Vamos explorar diversos temas desse framework como:
Ferramenta de Comando para geração de artefatos (Angular CLI)
Componentes;
Rotas;
Serviços;
Injeção de dependências;
Integração com várias bibliotecas;
E muito mais...
Por outro lado, o desenvolvedor precisa pensar no modelo do backend, tipo de banco de dados, Relacional ou NoSQL, autenticação, e uma lista de questões do lado do servidor.
Assim, apresento o Supabase. Uma alternativa de código livre que oferece a possibilidade de criar banco de dados Postgres, serviços de autenticação e geração de APIs de forma instantânea.
Inicialmente, iremos desenvolver um TODO e logo em seguida uma aplicação mais completa de Estoque.
A aplicação terá as funcionalidades:
Autenticação;
CRUDs das entidades de um estoque padrão;
Rotas protegidas;
Movimentação de produtos;
Dashboard;
Gráficos.
A partir dela, você terá condições de construir uma dezena de sistemas comerciais.
Iremos explorar a criação de projetos e o desenvolvimento de banco de dados, tabelas e APIs de forma muito produtiva.