Quickstarters
CRUD Samples
How to Build a Basic CRUD App with Knockout.js: A Step-by-Step Guide
40 min
visão geral neste guia, você aprenderá como criar uma aplicação crud (criar, ler, atualizar, excluir) completa usando knockout js este tutorial demonstra como implementar operações essenciais dentro de um aplicativo web enquanto aproveita o back4app como seu serviço de backend começaremos configurando um projeto back4app intitulado basic crud app knockout , estabelecendo um sistema de gerenciamento de dados confiável para sua aplicação depois disso, você projetará um esquema de banco de dados flexível definindo coleções e campos—seja manualmente ou com a ajuda do agente de ia do back4app—para garantir que seu aplicativo possa lidar com todas as operações crud de forma eficaz em seguida, você usará o back4app admin app, uma ferramenta amigável de arrastar e soltar, para gerenciar suas coleções com facilidade esta interface simplifica o processo de execução de operações crud finalmente, você integrará seu frontend knockout js com o back4app usando chamadas de api rest esta integração também abordará práticas seguras de backend com controles de acesso adequados ao final deste tutorial, você terá construído um aplicativo web pronto para produção que suporta funcionalidades básicas de crud, inclui autenticação de usuário e apresenta um gerenciamento de dados robusto principais conclusões entenda como desenvolver aplicações crud que gerenciam dados de forma eficiente usando back4app ganhe experiência prática em projetar um backend escalável e conectá lo a um frontend knockout js aprenda a usar uma ferramenta de administração sem código (back4app admin app) para executar operações de criar, ler, atualizar e excluir descubra estratégias de implantação, incluindo a containerização com docker, para lançar seu aplicativo web rapidamente pré requisitos antes de começar, certifique se de que você tem uma conta back4app e um projeto ativo consulte introdução ao back4app https //www back4app com/docs/get started/new parse app se você precisar de orientação um ambiente de desenvolvimento configurado para knockout js inclua bibliotecas via cdn ou instale via npm se preferir uma configuração modular conhecimento básico de javascript, knockout js e apis rest consulte a documentação do knockout js https //knockoutjs com/documentation/introduction html para uma introdução passo 1 – inicialização do projeto configurando seu projeto back4app acesse sua conta back4app selecione a opção “novo app” no seu painel insira o nome do projeto basic crud app knockout e complete o processo de configuração criar novo projeto uma vez criado, seu projeto será visível no seu painel, formando a espinha dorsal da sua configuração de backend passo 2 – elaborando seu esquema de banco de dados projetando a estrutura de dados para este aplicativo crud, você criará várias coleções abaixo estão coleções de exemplo com campos e tipos de dados sugeridos para orientar o design do seu banco de dados este esquema suporta as operações crud fundamentais 1 coleção de itens campo tipo de dados detalhes id objectid chave única gerada automaticamente título string o título do item descrição string um breve resumo do item criado em data timestamp quando o item é criado atualizado em data timestamp da última atualização 2 coleção de usuários campo tipo de dados detalhes id objectid identificador único gerado automaticamente nome de usuário string identificador único para cada usuário email string endereço de e mail único do usuário hash da senha string hash seguro da senha do usuário criado em data timestamp de criação da conta atualizado em data carimbo de data/hora para a última atualização da conta você pode criar manualmente essas coleções no painel do back4app adicionando uma nova classe para cada coleção e definindo os campos criar nova classe defina seus campos escolhendo um tipo de dado, nomeando o campo, definindo valores padrão e marcando campos obrigatórios criar coluna usando o agente de ia do back4app para automação de esquema o agente de ia do back4app simplifica a geração de esquemas diretamente do seu painel ele pode criar automaticamente coleções e campos com base na sua descrição passos para usar o agente de ia inicie o agente de ia acesse o através do seu painel do back4app ou configurações do projeto detalhe seu modelo de dados cole uma descrição listando suas coleções e campos necessários revise e aplique o agente proporá um esquema revise e confirme as sugestões para integrá las ao seu projeto prompt de exemplo create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) esse processo economiza tempo e garante um esquema consistente e otimizado para sua aplicação passo 3 – ativando o app de admin e gerenciando operações crud visão geral da interface de administração o aplicativo de administração back4app fornece uma solução sem código para gerenciar seus dados de backend sua interface intuitiva de arrastar e soltar permite operações crud sem esforço como ativar o aplicativo de administração vá para o menu “mais” no seu painel do back4app selecione “aplicativo de administração” e clique em “ativar aplicativo de administração ” configure suas credenciais de administrador criando o primeiro usuário administrador, que também configura funções como b4aadminuser e coleções de sistema essenciais ativar aplicativo de administração após a ativação, faça login no aplicativo de administração para começar a gerenciar os dados painel do aplicativo de administração usando a interface de administração para crud dentro do aplicativo de administração você pode adicionar registros clique no botão “adicionar registro” em uma coleção (por exemplo, itens) para criar novas entradas visualizar/modificar registros selecione um registro para inspecionar seus detalhes ou atualizar campos remover registros exclua quaisquer entradas que não sejam mais necessárias esta interface simplificada melhora a usabilidade e acelera o gerenciamento dos seus dados passo 4 – conectando knockout js com back4app com seu backend em funcionamento, é hora de integrar seu frontend knockout js usando chamadas de api rest usando a api rest para operações crud como o sdk do parse não é tipicamente usado com knockout js, você fará chamadas de api diretamente abaixo estão exemplos de como lidar com tarefas crud exemplo de recuperação de itens // example rest call to retrieve items function fetchitems() { fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(response => response json()) then(data => { viewmodel items(data results); }) catch(error => console error('error retrieving items ', error)); } fetchitems(); exemplo de viewmodel do knockout js abaixo está um exemplo de viewmodel para gerenciar seus itens function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var newitem = { title self newtitle(), description self newdescription() }; fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(newitem) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; self deleteitem = function(item) { fetch('https //parseapi back4app com/classes/items/' + item objectid, { method 'delete', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(() => { self items remove(item); }) catch(error => console error('error deleting item ', error)); }; // additional methods for update and read operations can be added similarly } // activate knockout js ko applybindings(new appviewmodel()); este viewmodel integra chamadas de api para criar e deletar itens enquanto gerencia o estado com observáveis do knockout js passo 5 – protegendo seu backend listas de controle de acesso (acls) proteja seus dados atribuindo acls a cada objeto por exemplo, para tornar um item acessível apenas ao seu criador function createsecureitem(itemdata, owneruserid) { var newitem = { title itemdata title, description itemdata description, acl { " " { "read" false, "write" false }, \[owneruserid] { "read" true, "write" true } } }; fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(newitem) }) then(response => response json()) then(data => console log('secure item created ', data)) catch(error => console error('error creating item ', error)); } permissões em nível de classe (clps) dentro do painel do back4app, defina clps para cada coleção para garantir que apenas usuários autenticados ou autorizados possam acessar informações sensíveis passo 6 – implementando a autenticação de usuário configurando contas de usuário o back4app usa uma classe de usuário para gerenciar a autenticação no seu aplicativo knockout js, gerencie o registro e o login do usuário usando chamadas de api rest exemplo registro de usuário function registeruser(username, password, email) { var user = { username username, password password, email email }; fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(user) }) then(response => response json()) then(data => alert('registration successful!')) catch(error => alert('registration error ' + error message)); } uma abordagem semelhante pode ser seguida para o login do usuário e gerenciamento de sessão recursos adicionais como verificação de e mail e redefinições de senha podem ser configurados via back4app passo 7 – implantando seu frontend knockout js usando implantação web o recurso de implantação web do back4app permite que você hospede seu frontend knockout js sem esforço, vinculando seu repositório do github siga estas etapas 7 1 crie seus arquivos de produção abra o diretório do seu projeto em um terminal execute seu processo de build se você estiver usando uma ferramenta de build como webpack, execute o comando apropriado (por exemplo, npm run build ) para compilar seus ativos confirme a build certifique se de que sua pasta de build contém um index html e todos os ativos estáticos necessários 7 2 organize e comite seu código no github seu repositório deve incluir todos os arquivos fonte para seu frontend knockout js uma estrutura de exemplo pode ser basic crud app knockout frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── index js │ ├── appviewmodel js │ └── styles css ├── package json └── readme md arquivo de exemplo src/appviewmodel js function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var itemdata = { title self newtitle(), description self newdescription() }; fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(itemdata) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; // additional crud methods (update, delete) can be defined similarly } // apply knockout bindings ko applybindings(new appviewmodel()); comitando e enviando código para o github inicialize o git (se ainda não tiver feito) git init prepare seus arquivos git add confirme suas alterações git commit m "commit inicial para o frontend knockout js" crie um repositório no github (por exemplo, basic crud app knockout frontend ) envie seu código git remote add origin https //github com/seu usuario/basic crud app knockout frontend git git push u origin main 7 3 vinculando seu repositório do github com a implantação na web acesse o recurso de implantação na web no seu painel do back4app, selecione seu projeto (basic crud app knockout) e clique em implantação na web conecte se ao github siga as instruções para integrar sua conta do github escolha seu repositório e branch selecione seu repositório (por exemplo, basic crud app knockout frontend ) e a branch (por exemplo, main ) que contém seu código 7 4 configurações de implantação comando de construção se o seu repositório não incluir uma pasta pré construída, especifique o comando de construção (por exemplo, npm run build ) diretório de saída defina isso para a pasta que contém seus arquivos estáticos (por exemplo, build ou public ) variáveis de ambiente adicione quaisquer variáveis de ambiente necessárias, como chaves de api 7 5 containerizando sua aplicação com docker (opcional) se você deseja usar o docker, inclua um dockerfile em seu repositório # use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy source code and build the app copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 implantando seu aplicativo clique no botão implantar após configurar as definições, inicie a implantação monitore o processo back4app buscará seu código, construirá (se necessário) e implantará seu aplicativo containerizado acesse seu aplicativo uma vez concluído, o back4app fornecerá uma url para acessar seu aplicativo knockout js 7 7 testando a implantação abra a url fornecida verifique se seu aplicativo carrega corretamente execute testes certifique se de que todas as rotas e ativos (css, js, imagens) estão funcionando depure se necessário use ferramentas de desenvolvedor para inspecionar quaisquer erros e consulte os logs de implantação do back4app passo 8 – conclusão e direções futuras muito bem! você construiu com sucesso uma aplicação crud básica usando knockout js e back4app você configurou um projeto chamado basic crud app knockout , elaborou coleções detalhadas para itens e usuários, e gerenciou seus dados através do admin app além disso, você integrou seu frontend knockout js com seu backend usando chamadas de api rest e implementou controles de acesso seguros próximos passos expanda seu frontend melhore seu aplicativo com recursos como visualizações detalhadas de itens, capacidades de busca ou atualizações em tempo real adicione lógica avançada de backend explore o uso de funções em nuvem ou a integração de serviços de terceiros aprofunde se consulte a documentação do back4app https //www back4app com/docs para mais otimização e integrações avançadas ao seguir este tutorial, você agora tem o conhecimento para construir um aplicativo crud robusto e escalável com knockout js usando back4app boa codificação!