Building a Basic CRUD Application with Polymer: A Comprehensive Walkthrough

visão geral neste guia, você aprenderá como desenvolver uma aplicação crud (criar, ler, atualizar, excluir) totalmente funcional usando polymer este tutorial demonstra como realizar operações essenciais para gerenciar e modificar dados você começará configurando um projeto back4app, intitulado basic crud app polymer , que servirá como o backend para sua aplicação em seguida, você criará um modelo de dados escalável, delineando coleções e campos precisos—seja manualmente ou com a ajuda do agente de ia do back4app—para garantir que seu banco de dados esteja otimizado para operações crud a seguir, você aproveitará o back4app admin app, uma interface de gerenciamento fácil de usar com arrastar e soltar, para simplificar suas operações de dados finalmente, você integrará seu frontend polymer com o back4app usando apis rest/graphql, enquanto reforça a segurança do backend com controles de acesso sofisticados ao final deste tutorial, você terá construído uma aplicação web pronta para produção que suporta operações crud essenciais e inclui autenticação de usuário e recursos robustos de gerenciamento de dados o que você vai aprender desenvolver uma aplicação crud que gerencia dados de forma eficiente com um backend confiável projetar um backend escalável e conectá lo a um frontend baseado em polymer utilizar uma interface de administração de arrastar e soltar (back4app admin app) para facilitar operações de dados implantar sua aplicação usando técnicas modernas, incluindo containerização com docker pré requisitos antes de começar, certifique se de que você tem uma conta back4app com um projeto ativo para assistência, confira introdução ao back4app https //www back4app com/docs/get started/new parse app uma configuração de desenvolvimento polymer use polymer cli ou ferramentas similares e verifique se o node js (v14 ou posterior) está instalado uma compreensão básica de javascript, polymer e apis rest você pode consultar a documentação do polymer https //www polymer library polymer project org/3 0/docs/devguide/feature overview para mais detalhes passo 1 – configurando seu projeto iniciando um novo projeto back4app acesse sua conta back4app selecione a opção “novo app” no seu painel atribua o nome do projeto basic crud app polymer e siga as instruções para finalizar a criação do projeto criar novo projeto após concluir estas etapas, seu projeto será visível no painel do back4app, formando a espinha dorsal para sua configuração de backend passo 2 – elaborando seu esquema de banco de dados estruturando seu modelo de dados para este aplicativo crud, várias coleções são necessárias abaixo estão coleções de exemplo junto com campos e seus respectivos tipos, que ajudarão você a projetar um esquema de banco de dados robusto capaz de lidar com operações crud 1 coleção de itens campo tipo descrição id objectid chave primária gerada automaticamente título string o título do item descrição string uma breve descrição do item criado em data timestamp marcando a criação do item atualizado em data timestamp da atualização mais recente 2 coleção de usuários campo tipo detalhes id objectid chave primária gerada automaticamente nome de usuário string identificador único para o usuário email string endereço de e mail único hash senha string senha criptografada para segurança criado em data timestamp quando a conta foi criada atualizado em data timestamp para a última atualização da conta você pode criar manualmente essas coleções no painel do back4app, estabelecendo novas classes e adicionando colunas correspondentes criar nova classe adicione facilmente novos campos escolhendo um tipo de dado, nomeando o campo e especificando quaisquer valores padrão ou parâmetros obrigatórios criar coluna aproveitando o agente de ia do back4app para criação de esquema o agente de ia do back4app, acessível a partir do seu painel, gera automaticamente um esquema de banco de dados com base em um prompt detalhando suas coleções e campos este recurso economiza muito tempo, garantindo que seu backend seja precisamente adaptado para operações crud como utilizar o agente de ia inicie o agente de ia acesse o através das configurações do seu projeto ou do menu principal no painel do back4app insira os detalhes do seu esquema forneça um prompt descritivo que liste as coleções e campos que você precisa revise e confirme após o agente de ia processar sua solicitação, revise o esquema gerado e aplique o ao seu projeto exemplo de prompt 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) usar o agente de ia garante que seu esquema seja consistente e otimizado para os requisitos da sua aplicação passo 3 – ativando o app de admin e realizando operações crud visão geral do app de admin o app de admin do back4app oferece uma interface sem código para gerenciamento de backend seu design intuitivo de arrastar e soltar simplifica as operações crud—permitindo que você crie, visualize, atualize e exclua registros sem esforço ativando o app de admin vá para o menu “mais” no seu painel do back4app selecione “admin app” e então clique em “ativar admin app ” configure suas credenciais de administrador criando um usuário administrador inicial, que também estabelecerá funções (como b4aadminuser ) e coleções do sistema ativar admin app após a ativação, faça login no admin app para gerenciar seus dados de backend painel do admin app gerenciando dados usando o admin app dentro do admin app, você pode adicionar registros use o botão “adicionar registro” em qualquer coleção (por exemplo, itens) para criar novas entradas visualizar/modificar registros clique em um registro para inspecionar seus detalhes ou editar seus campos remover registros utilize a função de exclusão para eliminar dados que não são mais necessários esta interface melhora muito a usabilidade ao simplificar todas as funções crud passo 4 – conectando o polymer com o back4app com seu backend configurado via admin app, é hora de vincular seu frontend polymer ao back4app opção a utilizando apis rest/graphql usaremos apis rest ou graphql para realizar operações crud por exemplo, para recuperar itens usando rest // example rest call to get items const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('items fetched ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); integre chamadas de api semelhantes em seus elementos polymer conforme necessário passo 5 – reforçando a segurança do backend implementando listas de controle de acesso (acls) proteja seus dados aplicando acls a objetos por exemplo, para criar um item restrito async function createrestricteditem(data, owner) { const itemdata = { title data title, description data description }; // configure acl to permit only the owner access const acl = { " " { read false, write false }, \[owner id] { read true, write true } }; try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ itemdata, acl acl }) }); const result = await response json(); console log('restricted item created ', result); } catch (error) { console error('error creating item ', error); } } configurando permissões em nível de classe (clps) dentro do painel do back4app, configure clps para cada coleção para definir regras de acesso padrão essa configuração garante que apenas usuários autorizados possam acessar dados sensíveis passo 6 – autenticação de usuário no polymer estabelecendo contas de usuário o back4app usa a classe user do parse para gerenciar a autenticação no seu projeto polymer, implemente o cadastro e login de usuários conforme demonstrado abaixo // example function for user registration using rest api async function signupuser(username, password, email) { try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, password, email }) }); const result = await response json(); alert('user registered successfully!'); console log(result); } catch (error) { alert('registration error ' + error message); } } uma abordagem semelhante pode ser adotada para login e gerenciamento de sessão, com recursos adicionais como verificação de e mail e redefinição de senha configurados através do painel do back4app passo 7 – implantando seu frontend polymer com implantação web o recurso de implantação web do back4app permite que você hospede seu aplicativo polymer de forma contínua, vinculando seu repositório do github siga estas etapas para implantar seu aplicativo 7 1 construindo sua versão de produção abra o diretório do seu projeto em um terminal execute o comando de build polymer build este comando gera uma build pasta com todos os arquivos estáticos otimizados verifique a build certifique se de que a build pasta contém um arquivo index html junto com os diretórios de ativos necessários 7 2 organizando e carregando seu código fonte seu repositório deve conter o código fonte completo do seu frontend polymer uma estrutura de diretório de exemplo pode ser parecida com basic crud app polymer frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── my app js │ ├── api config js │ └── components/ │ ├── items list js │ └── auth form js ├── polymer json └── readme md exemplo src/api config js // src/api config js export const app id = 'your application id'; export const rest api key = 'your rest api key'; export const api url = 'https //parseapi back4app com'; exemplo src/my app js import { polymerelement, html } from '@polymer/polymer/polymer element js'; class myapp extends polymerelement { static get template() { return html` \<style> / your css styles here / \</style> \<h1>item manager\</h1> \<items list>\</items list> \<auth form>\</auth form> `; } } customelements define('my app', myapp); exemplo src/my app js comprometendo seu código no github inicialize um repositório git (se ainda não feito) git init prepare seus arquivos git add confirme suas alterações git commit m "compromisso inicial para o frontend polymer" crie um repositório no github nomeie como basic crud app polymer frontend envie seu código para o github git remote add origin https //github com/seu usuario/basic crud app polymer frontend git git push u origin main 7 3 conectando seu repositório github com a implantação na web acesse a implantação na web faça login no back4app, navegue até seu projeto ( basic crud app polymer ), e selecione a implantação na web integre o github siga as instruções para conectar sua conta do github, permitindo que o back4app acesse seu repositório selecione seu repositório e branch escolha o repositório (por exemplo, basic crud app polymer frontend ) e a branch apropriada (por exemplo, main ) 7 4 configurando as configurações de implantação especifique os seguintes detalhes comando de construção se a build pasta não estiver pré construída, defina o comando (por exemplo, polymer build ) o back4app executará isso durante a implantação diretório de saída defina como build para que o back4app identifique seus arquivos de site estáticos variáveis de ambiente inclua quaisquer variáveis necessárias (como chaves de api) na configuração de implantação 7 5 containerizando seu aplicativo polymer com docker se o docker for sua escolha de implantação, inclua um dockerfile em seu repositório semelhante a # use an official node image for building from node 16 alpine as builder \# set working directory workdir /app \# copy dependency files copy package json / \# install dependencies run npm install \# copy the project files copy \# build the polymer app run polymer build \# use nginx to serve the built files from nginx\ stable alpine copy from=builder /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] integre este dockerfile em seu projeto e selecione docker como a opção de implantação no back4app 7 6 implantando seu aplicativo clique no botão de implantação uma vez que suas configurações estejam confirmadas, clique em implantar acompanhe o processo de construção back4app buscará seu código, executará o comando de construção e implantará seu aplicativo containerizado recupere sua url após a implantação, você receberá uma url onde seu aplicativo polymer estará acessível 7 7 testando sua implantação visite a url abra o link fornecido em seu navegador verifique a funcionalidade verifique se todas as rotas carregam corretamente e se os ativos como css, javascript e imagens são exibidos conforme o esperado solução de problemas se ocorrerem problemas, revise os logs de implantação e as configurações de integração do github no back4app passo 8 – conclusão e direções futuras ótimo trabalho! você construiu com sucesso uma aplicação crud completa usando polymer e back4app seu projeto, basic crud app polymer , agora possui coleções bem definidas para itens e usuários, gerenciadas de forma integrada através do admin app, com um frontend polymer seguro e integrado próximos passos aprimorar o frontend adicione recursos como visualizações detalhadas de itens, funcionalidade de busca ou atualizações em tempo real expandir funcionalidade integre lógica adicional de backend com cloud functions ou apis de terceiros explorar mais confira a documentação do back4app https //www back4app com/docs para configurações mais avançadas e otimizações de desempenho com essas habilidades, você está bem preparado para construir backends crud escaláveis e implantar aplicações web robustas com polymer e back4app boa codificação!