Como criar um app CRUD com Ember.js?

introdução neste tutorial, você aprenderá como construir uma aplicação crud simples (criar, ler, atualizar, excluir) usando ember js contaremos com o back4app como o serviço de backend para gerenciar seus dados sem esforço este guia cobre todas as operações básicas de um sistema crud, mostrando como configurar um projeto back4app, projetar um modelo de dados dinâmico e integrar operações crud em uma aplicação ember js no início, você estabelecerá um projeto back4app chamado basic crud app ember que fornece uma solução confiável de armazenamento de dados não relacional para seu aplicativo você definirá sua estrutura de dados configurando modelos e campos manualmente ou com a ajuda do agente de ia do back4app em seguida, você explorará o back4app admin app—uma interface sem código que permite gerenciar dados com interações simples de arrastar e soltar por fim, você integrará seu aplicativo ember js com o back4app por meio de chamadas de api, implementando controles de acesso seguros ao longo do caminho ao final deste tutorial, você terá uma aplicação ember js pronta para produção capaz de realizar todas as operações crud, incluindo autenticação de usuário segura e gerenciamento eficaz de dados principais conclusões construa uma aplicação crud baseada em ember js com um robusto backend entenda como estruturar e integrar um backend escalável com um front end ember js use o intuitivo admin app do back4app para realizar operações de criar, ler, atualizar e excluir sem esforço aprenda sobre estratégias de implantação, incluindo a containerização com docker, para uma entrega de aplicação sem interrupções pré requisitos antes de começar, por favor, confirme que você tem uma conta no back4app com um projeto recém criado precisa de ajuda? visite introdução ao back4app https //www back4app com/docs/get started/new parse app uma configuração de desenvolvimento ember js instale o ember cli e configure seu ambiente seguindo os guias do ember js https //guides emberjs com/release/ familiaridade básica com ember js, javascript e apis rest revise esses tópicos se necessário passo 1 – configuração do projeto iniciando um novo projeto no back4app faça login na sua conta back4app clique no botão “novo app” no seu painel atribua o nome do projeto basic crud app ember e siga os prompts subsequentes para completar a configuração do projeto criar novo projeto uma vez que o projeto é criado, ele aparecerá no seu painel e formará a base para a configuração do seu backend passo 2 – projetando o modelo de dados estruturando seus modelos de dados para este aplicativo crud, você definirá vários modelos em seu projeto back4app abaixo estão exemplos que descrevem os modelos principais e seus campos necessários para realizar operações crud 1\ modelo de itens este modelo armazena informações sobre cada item campo tipo de dados descrição id objectid identificador único gerado automaticamente título string nome do item descrição string resumo breve do item criadoem data timestamp marcando quando o item foi adicionado atualizadoem data timestamp marcando a última atualização 2\ modelo de usuários este modelo lida com a autenticação de usuários e credenciais campo tipo de dados descrição id objectid identificador único gerado automaticamente nome de usuário string nome de usuário único para o usuário email string endereço de e mail único do usuário hashdasenha string senha de usuário criptografada criadoem data timestamp quando a conta foi criada atualizadoem data timestamp quando a conta foi atualizada você pode criar esses modelos e definir seus campos diretamente no painel do back4app criar nova classe você pode adicionar campos selecionando um tipo de dado, inserindo o nome do campo, definindo um valor padrão e marcando se é obrigatório criar coluna utilizando o agente de ia do back4app para geração de esquema o agente de ia do back4app é um recurso inteligente dentro do seu painel que pode configurar automaticamente seu esquema de dados com base em suas especificações esta ferramenta simplifica a inicialização do projeto, garantindo que seu modelo de dados esteja otimizado para operações crud como usar o agente de ia abra o agente de ia faça login no seu painel do back4app e encontre o agente de ia nas configurações do projeto forneça os detalhes do seu modelo envie uma descrição detalhada dos modelos e campos que você precisa revise e confirme o agente de ia gerará um esquema sugerido confirme os detalhes para aplicar a configuração exemplo de prompt create the following models in my back4app project 1\) model items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) model users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) essa abordagem assistida por ia economiza tempo e garante que sua estrutura de dados seja consistente e otimizada passo 3 – habilitando o app de admin e lidando com operações crud uma visão geral do app de admin o aplicativo admin do back4app fornece uma plataforma amigável e sem código para gerenciar seus dados de backend sua interface de arrastar e soltar permite que você execute facilmente tarefas crud, como adicionar, visualizar, atualizar e remover registros habilitando o aplicativo admin vá para o menu “mais” no seu painel do back4app selecione “aplicativo admin” e clique em “habilitar aplicativo admin ” configure suas credenciais de admin criando uma conta de admin inicial isso também configurará funções (por exemplo, b4aadminuser ) e modelos de sistema habilitar aplicativo admin uma vez ativado, faça login no aplicativo admin para gerenciar os dados do seu aplicativo painel do aplicativo admin gerenciando operações crud via o aplicativo admin dentro do aplicativo admin, você pode inserir registros clique no botão “adicionar registro” dentro de um modelo (por exemplo, itens) para inserir novos dados inspecionar/modificar registros selecione qualquer registro para visualizar seus detalhes ou editar seus campos excluir registros remova entradas que não são mais necessárias esta interface simplificada melhora significativamente a eficiência da gestão de dados passo 4 – conectando seu aplicativo ember js com o back4app com seu backend configurado, é hora de conectar seu aplicativo ember js ao back4app usando chamadas de api no ember js o ember js utiliza o ember data para lidar com operações de dados neste tutorial, você usará o adaptador rest para interagir com seu backend back4app 1\ configurando o adaptador rest crie ou atualize o adaptador da sua aplicação (por exemplo, app/adapters/application js ) com a seguinte configuração import restadapter from '@ember data/adapter/rest'; export default class applicationadapter extends restadapter { host = 'https //parseapi back4app com'; headers = { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }; } 2\ definindo modelos de dados do ember crie um modelo ember para item (por exemplo, app/models/item js ) import model, { attr } from '@ember data/model'; export default class itemmodel extends model { @attr('string') title; @attr('string') description; @attr('date') createdat; @attr('date') updatedat; } e de forma semelhante para user (por exemplo, app/models/user js ) import model, { attr } from '@ember data/model'; export default class usermodel extends model { @attr('string') username; @attr('string') email; @attr('string') passwordhash; @attr('date') createdat; @attr('date') updatedat; } 3\ implementando operações crud use o serviço de loja do ember data para realizar operações crud por exemplo, para buscar todos os itens, você pode criar uma rota semelhante a import route from '@ember/routing/route'; export default class itemsroute extends route { model() { return this store findall('item'); } } você pode adicionar, atualizar ou excluir registros de forma semelhante usando os métodos da api do ember data alternativa usando fetch nativo para chamadas de api se você preferir não usar ember data, pode utilizar chamadas fetch nativas por exemplo, para recuperar itens async function fetchitems() { try { let response = await fetch('https //parseapi back4app com/classes/items', { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); let data = await response json(); console log('fetched items ', data); } catch (error) { console error('error fetching items ', error); } } integre essas chamadas de api em seus componentes ou serviços ember conforme necessário passo 5 – melhorando a segurança do seu backend implementando controles de acesso proteja seus dados configurando listas de controle de acesso (acls) para cada objeto por exemplo, ao criar um item que deve ser visível apenas para seu proprietário, você pode ajustar as configurações de acl através de suas chamadas de api permissões em nível de classe (clps) dentro do painel do back4app, configure clps para garantir que apenas usuários autenticados tenham acesso a certos modelos isso adiciona uma camada extra de segurança ao impor regras de acesso padrão passo 6 – implementando autenticação de usuário no ember js configurando contas de usuário back4app aproveita o modelo de usuário parse para gerenciar autenticação em sua aplicação ember js, você pode criar serviços para gerenciar o cadastro e login de usuários via chamadas de api por exemplo, crie um serviço de autenticação ( app/services/auth js ) import service from '@ember/service'; export default class authservice extends service { async register(username, password, email) { try { let 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 }) }); let result = await response json(); console log('user registered successfully ', result); } catch (error) { console error('registration error ', error); } } async login(username, password) { try { let response = await fetch(`https //parseapi back4app com/login?username=${username}\&password=${password}`, { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); let result = await response json(); console log('user logged in ', result); } catch (error) { console error('login error ', error); } } } este serviço pode ser injetado em suas rotas ou componentes para gerenciar sessões, redefinições de senha e outras tarefas relacionadas à autenticação passo 7 – implantando sua aplicação ember js back4app suporta várias estratégias de implantação você pode implantar sua aplicação ember js usando métodos como a containerização docker 7 1 construindo sua aplicação ember construa sua aplicação execute o seguinte comando no seu terminal ember build environment=production verifique a saída certifique se de que a dist/ pasta contém seus ativos prontos para produção 7 2 visão geral da estrutura do projeto um projeto típico do ember js pode ser organizado da seguinte forma basic crud app ember/ \| app/ \| | adapters/ \| | | application js \| | models/ \| | | item js \| | | user js \| | routes/ \| | | items js \| | services/ \| | auth js \| config/ \| | environment js \| public/ \| tests/ \| ember cli build js \| package json \| readme md 7 3 dockerizando sua aplicação ember se você prefere uma implantação em contêiner, inclua um dockerfile na raiz do seu projeto \# use an official node js image as the base from node 16 alpine \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application code copy \# build the ember application run npm run build environment=production \# use a lightweight web server to serve static files from nginx\ stable alpine copy from=0 /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 implantando via implantação web back4app conecte seu repositório github hospede seu projeto ember js no github configure as configurações de implantação no seu painel do back4app, navegue até implantação web , vincule seu repositório (por exemplo, basic crud app ember ), e selecione o branch desejado defina os comandos de construção defina seu comando de construção (por exemplo, ember build environment=production ) e especifique o diretório de saída implante seu app clique em implantar e monitore os logs até que seu app fique ao vivo passo 8 – conclusão e próximos passos ótimo trabalho! você agora construiu uma aplicação crud baseada em ember js integrada com o back4app neste tutorial, você configurou um projeto chamado basic crud app ember , projetou modelos para itens e usuários, e gerenciou seu backend através do back4app admin app você também conectou sua aplicação ember js usando chamadas de api e implementou práticas de segurança robustas próximos passos aprimore sua aplicação considere adicionar recursos como funcionalidade de busca avançada, visualizações detalhadas ou atualizações em tempo real expanda as capacidades do backend explore funções em nuvem, integre apis de terceiros ou configure controle de acesso baseado em funções aprofunde seu entendimento visite a documentação do back4app https //www back4app com/docs e outros recursos do ember js para tópicos mais avançados feliz codificação e melhores desejos em sua jornada com ember js!