Backend de Node. js para iniciantes no Flutter

1. Introdução ao curso: Você é um desenvolvedor de flutter quer levar suas habilidades para o próximo nível, não introduzindo nenhum back-end GAS para iniciantes em flutter O guia definitivo da dívida apresentará a você o mundo da criação de back-ends personalizados. Neste curso, você aprenderá a criar sistemas de back-end poderosos usando os novos GS e Mongo DB, libertando-se das limitações do Fire Base e evitando a dispendiosa dependência de fornecedores Desde escrever o código do servidor até dominar as operações de credibilidade e, finalmente, implantá-lo usando o aplicativo ferroviário, você ganhará experiência prática na criação de uma arquitetura de back-end personalizada desenvolvendo um aplicativo básico revestido até o final do curso Além disso, para garantir o gerenciamento contínuo do estado, usaremos o popular pacote de provedores Este curso definitivamente ajudará você a superar a maioria dos desenvolvedores que não sabem como criar seu próprio back-end e estão presos apenas a fireways Então, sem perder mais tempo. Vamos começar. 2. Configurar um projeto Node js: Oi. Bem-vindo ao primeiro vídeo do curso, onde aprenderemos como criar um backback personalizado usando No JS e Mongo DV para nosso aplicativo mais plano Então, a primeira coisa que precisamos fazer é não instalar nenhum GS em seu sistema. Então acesse seu navegador e digite nos.org. E a partir daqui, você pode simplesmente baixá-lo e instalá-lo. Estou usando um sistema máximo, mas se você estiver no Windows, basta alterá-lo por meio de downloads e do instalador do Windows. Então, como você pode ver, vou escrever V e tenho a versão. Então, após a instalação, se você puder ver essa versão na sua linha de comando, isso significa que você instalou com sucesso o no es. E o NPM será instalado automaticamente sem Jaz, então não precisamos pensar nisso Se eu escrever a versão NPM. Então, eu também tenho o NPM. Depois de instalar o node js, precisamos criar um projeto node JS. Então, vá para o diretório desejado e crie uma nova pasta. Vou chamá-lo de aplicativo Nodes. Dentro do aplicativo Nodes, crie outra pasta chame-a de back-end. Nessa pasta, todo o código do servidor estará lá. E mais tarde, criaremos outra pasta chamada front end, que consistirá em todo o código flutter Então, agora precisaremos de um ponto de entrada para nosso servidor. Assim como no flutter, é o arquivo principal de pontos Então, dentro da pasta de back-end, crie um novo arquivo JS, e ele será um arquivo que eu acabarei de abrir no código VS. Abra a pasta. Aqui, estou abrindo esse back-end e aqui vou criar um novo servidor de arquivos. Assim. Se você quiser, você também pode chamá-lo de index do chase, mas estou apenas chamando-o de server do chase Agora, abra um novo terminal nessa pasta de back-end e inicialize o NPM digitando NPM em Y. É assim que você inicializa Você pode ver que o arquivo de entrada principal é o ponto do servidor S. Mas se você não tivesse criado o arquivo JS do ponto do servidor , ele teria usado o S como o arquivo principal. E todos os pacotes ou dependências externas serão mostrados neste arquivo Agora, quando falamos sobre pacotes, o primeiro pacote que precisamos é o pacote expresso. Express JS é uma estrutura que funciona com base na funcionalidade do servidor web net JS para simplificar suas APIs e adicionar novos recursos úteis Isso facilita a organização da funcionalidade de nossos aplicativos com middlewares Então, aqui no pool de back-end do terminal, simp NPM install express assim Você também pode acessar npmjsen.com e pesquisar o pacote expresso se quiser saber mais se quiser saber Bem como você pode ver nas dependências, eu tenho o pacote express Agora vamos criar um servidor expresso. Em primeiro lugar, temos que dizer ao nosso projeto que usaremos o express. Vamos importar ou, você pode dizer, exigir o pacote expresso na parte superior. Basta escrever que const Express é reexpressar e, em seguida, temos que criar uma instância ou objeto do expresso Estou dando o nome de app. Esse é um processo padrão e, em seguida, escreverei o código para iniciar o servidor. Ou seja, vou ouvi-lo na panela três vezes e, depois de bem-sucedido, vou registrar o console. Registro do console aqui. Vou apenas escrever um servidor rodando na porta 3.000. Ok, guarde. Em seguida, tente executar o servidor digitando o nó do terminal e o nome final do servidor e apresentando-o Se o servidor estiver em execução, ou seja, nosso servidor está funcionando. Se você acessar seu navegador e digitar host local 3.000 Então aqui você pode ver que não é possível obter uma barra. Essa é a rota de casa. Mas pelo menos não está mostrando nenhum outro erro, ou seja, a página não é uma resposta ou o servidor não está disponível dessa forma. Isso significa que o servidor está sendo executado com êxito. No próximo vídeo, criaremos algumas rotas para nosso servidor. Obrigado. 3. Criando rotas: Oi Bem vindo de volta. Agora, vamos gerar alguns dados na rota 3.000 do host local Para isso, temos que configurar a solicitação GT para a rota de corte Vamos ver nosso código aqui acima do aplicativo Listen. Vou escrever o aplicativo GT. E então qual rota queremos. Queremos a rota de corte. E sempre que slash route está sendo chamada, queremos que essa função seja executada Solicite uma resposta. Isso nos dá solicitação e resposta. Então, esses são os princípios básicos do Express Framework. Então você deve saber disso. Ou então, você pode simplesmente criar o aplicativo e, eventualmente, entender os conceitos. Então, aqui, você pode simplesmente entender. A solicitação é o que enviamos do front-end para o servidor. Então, suponha que uma pessoa esteja enviando alguns dados de senha de e-mail. Então, buscaremos essas informações por meio dessa variável de solicitação Seja qual for o front-end que estamos enviando, podemos receber a solicitação. Da mesma forma, a resposta é o que enviamos do servidor para o front-end. Então, obviamente, temos quando o fronten está solicitando alguns dados Nós o enviaremos com essa variável de resposta. Então, aqui vamos escrever a resposta dot send. E esta é a página inicial. Por enquanto, são apenas dados fictícios. Obviamente, não enviaremos dados diretamente no formato de string. Só para fazer você entender. Agora, temos que parar o servidor, então basta controlar C e iniciá-lo novamente para que esse código seja atualizado. Agora, se eu for atualizar C, esta é a página inicial Isso significa nossa barra. Sempre que vamos ao nosso bar local do Hos Fit Hus, recebemos essa resposta Mas se formos para qualquer outro nó semelhante , obviamente não podemos obter nós. Agora vamos criar a rota das notas. Como nosso aplicativo será um aplicativo de nó, precisamos criar uma rota para os nós. Abaixo de d é o caminho para casa, pegue então aqui Slash Notes Então, novamente, uma função será chamada solicitação de resposta de solicitação de resposta e eu enviarei resposta de envio. Esta é a página de notas. Salve isso. Novamente, vá e pare o servidor. Eu o salvei e o iniciei novamente. Então, agora, se eu seguir a rota das notas em barra, veja, esta é a página de notas E se eu simplesmente cortar, então esta é a página inicial Então é assim que você cria rotas. E certifique-se de que eu entendi que isso é para as rotas GT. Há um tipo diferente de solicitações, ou seja, g post como essa, você entenderá, mas essa é a básica, que é a solicitação GT. No próximo vídeo, trabalharemos na configuração do banco de dados Mongo DB. Obrigada 4. Configurar o Atlas do MongoDB: Oi, bem vindo de volta. Agora, vamos configurar nosso banco de dados Mongo DB. Usaremos o serviço Atlas Cloud para isso. Então, basta abrir seu navegador e acessar o Mongo DB Atlas. Aqui, em seguida, clique no primeiro link. Em seguida, faça login ou cadastre-se com sua conta do Google. Eu já tenho uma conta, então vou fazer login. Se você for um novo usuário, poderá dar qualquer nome à sua organização e selecionar as opções do Mongo DB Atlas Como estou apenas fazendo login, não vou ver essas coisas, mas, no seu caso, será apenas fornecer o nome da sua organização. Em seguida, selecione a opção Mongo Atlas. Agora, depois de entrar, veja, eu tenho essa organização com o nome de Rahul E se você estiver nesta página , a primeira coisa a fazer é criar um novo projeto. Então, eu já tenho esse projeto, mas no seu painel, você não verá o nome desse projeto, obviamente. Então, basta clicar em Criar novo projeto. E aqui, dê a ele um nome de projeto. Vou escrever um aplicativo de notas. Em seguida, clique em Avançar. Aqui, o proprietário do projeto cria o projeto. E depois que o projeto é criado, temos que construir um banco de dados. Basta clicar nele. Em seguida, selecione o pneu livre que é zero. Obviamente, mais tarde, você pode optar por servidores e esse tipo de coisa. Então, o provedor é a AWS e a região fica perto de você. Então, basta escolher onde você mora. E você pode dar o nome do seu cluster. Vou apenas deixá-lo padrão. É o cluster zero. E clique em Criar. Com o It's Caps e tudo mais. Motocicleta Depois disso, estamos dando os retoques finais. Depois disso, você precisa criar nome de usuário e senha. Basta lembrar esses detalhes. Eu vou usar uma senha muito simples por enquanto. Eu vou me lembrar disso. Clique em criar um. Então, onde você gostaria de se conectar a partir do ambiente de nuvem, escolha esta opção. E então eu já tenho meu endereço IP. Acabei de adicionar meu endereço IP atual. Então, eu tenho meu IP aqui. E então é só terminar, fechar e ir para Tababase. M. Ok. Agora, a próxima etapa é permitir o acesso de qualquer lugar. Como você pode ver, fornecemos nosso endereço IP, que significa que somente esse sistema estará acessível a esse servidor. Mas queremos que outras pessoas também usem nosso aplicativo na vida real. Acesse o acesso à rede aqui, clique em Adicionar endereço IP e clique em permitir acesso em qualquer lugar. S e depois confirme. Está em um status dependente. Está demorando algum tempo. Estamos implantando suas alterações na ação atual configurando Como você pode dizer, está demorando. Está tudo bem. Vamos dizer isso depois alguns minutos antes de abrir um código VS. E, obviamente, temos que conectar esse nó ao Mongo dV. Para isso, usaremos outro pacote conhecido como Mo. Nesse terminal, vou pará-lo e escrever NPM install Mo e pressionar enter No pacote de serviço que Jason arquivou, você pode ver que o de Mongo está lá E acredito que nosso banco de dados também está configurado. Então, no próximo vídeo, estabeleceremos a conexão entre o NA e esse banco de dados. Obrigada 5. Conecte aplicativo Node ao MongoDB: I. Na próxima etapa, precisaremos de uma string de conexão para conectar nosso aplicativo ao banco de dados Mongo DV Para isso, vá até o último painel e, aqui, clique no botão Conectar ao cluster. Então, aqui, basta clicar em Conectar. Então, há muitas opções. Vou escolher o Mongo DB para o código VS. E então simplesmente copie essa cadeia de conexão. Substituiremos a senha pela nossa própria senha. Abra o código VS e, no servidor, vamos estabelecer uma conexão. Simplesmente, em primeiro lugar, importe o pacote Mongoose Mongoose igual ao requerido Mongoose igual Em seguida, escreva mongoose connect. Aqui temos que dar a corda. Essa é a cadeia de conexão. E simplesmente substitua a senha e também a remova do que simplesmente escrever a senha. Eu dei 12345. E, no final, também escreverei o nome do banco de dados. Isso é Nodes DV. Era só um cluster, e esse é o nome do banco de dados. Nodos DV. E quando a conexão for bem-sucedida, eu acionarei essa função. eu acionarei essa função. Que terá todas as rotas. Isso significa que vou garantir que as rotas sejam acessíveis somente se a conexão for bem-sucedida. Eu simplesmente recorto e colo todas as rotas dentro da conexão do Mongoose E essa maçã estará lá fora. Então, precisamos de uma ferramenta para testar as APIs. Para realizar operações cruas em um servidor ou banco de dados, precisamos de um cliente ou front-end No momento, não temos o aplicativo flutter. Então, para simular ou enviar solicitações falsas, usaremos o Postman para testar a API Então, basta acessar um navegador e escrever postman e aqui, eu já tenho essa configuração, mas certifique-se de criar uma conta e baixar o software Eu tenho esse carteiro aqui já instalado. Muitas rotas anteriores. Aqui, primeiro de tudo, inicie seu servidor novamente. O servidor está em execução. Isso significa que acho que não há erro com o Mongo. Vamos enviar uma solicitação G. Esta é a solicitação Get, e eu escreverei 3.000 notas de barra em HTTP e depois no host local E se eu enviar uma solicitação de GT aqui, veja, esta é a página de notas. Isso significa que nossa resposta está aí e o servidor está funcionando perfeitamente. E esse carteiro é muito necessário. Espero que você o tenha instalado também. Antes de fazer qualquer outra coisa, até agora, sempre que fizermos alguma alteração no código , precisamos parar o servidor e reiniciá-lo novamente. Essa não é uma boa experiência de desenvolvimento. Para resolver isso, usaremos um pacote conhecido como Nudmon. Isso permitirá a atualização ao vivo do servidor. É quando fazemos alterações e as salvamos, ele reiniciará o próprio servidor e refletirá as alterações. Novamente, pare o servidor e escreva NPM install global node M. Então, amarre esse código Instalaremos esse pacote globalmente no sistema para que, em projetos futuros, você não precise instalá-lo repetidamente. Então, basta pressionar enter. Eu já tenho o Node Ml instalado globalmente. Então, isso o instalará em seu sistema. E depois disso, no arquivo JS do pacote, crie um novo script Abaixo do início, basta escrever D e escrever o script nodemon server do chase Isso ocorre somente na fase de desenvolvimento. No servidor ativo, ele automaticamente perseguirá o servidor de nós. Salve isso. De agora em diante, escreveremos NPM run Dv e veremos o servidor Nod Mon ser iniciado Isso significa que, a partir de agora, a experiência de desenvolvimento será um pouco melhor. É isso para este vídeo. No próximo vídeo, começaremos a trabalhar na criação de modelos para nosso. Obrigada. 6. Criando modelo de Anotação: Oi Bem vindo de volta. Portanto, antes de prosseguir, gostaria de estruturar nosso projeto em arquivos e pastas de forma organizada. Então, primeiro de tudo, vou parar o servidor. Em seguida, dentro da pasta de back-end, criarei uma nova pasta chamada SRC E mova o arquivo JS de pontos do servidor dentro da pasta*** Agora eu tenho que fazer algumas alterações no pacote do arquivo SN também Aqui. Quando eu estiver fazendo o script de inicialização, escreverei o código-fonte do servidor sla do JS e também no nodemon Isso também é script em D porque o arquivo não está no diretório raiz. Então é isso. Agora, vamos criar alguns modelos. Para nossos dados de nós. Os modelos são a estrutura de qualquer dado em nosso aplicativo. Salvaremos essa estrutura de dados em nosso banco de dados Mongo DB Mongoose ajudará a salvar os dados e a criar modelos Além disso, podemos usar esse modelo para realizar operações de multidões no banco de dados. Então, tudo isso está conectado ao pacote Mongoose. Portanto, você deve saber o básico disso. Dentro de como pasta, crie uma nova pasta e nomeie-a como modelos. Dentro do modelo, crie um novo arquivo JS. Note que Js são assim. Ok. Agora, há algumas etapas para criar um modelo. O primeiro passo é exigir o pacote de mangusto. Em primeiro lugar, vamos exigir o pacote mangoose. Em seguida, temos que definir o esquema. Esses são os detalhes dos dados. Nos dados do nosso nó, ele terá um conteúdo de título de ID como este. Quais são os preenchimentos armazenados nesses dados? Vamos criar um esquema const igual ao esquema Mongo Aqui, temos o parêntese. O primeiro preenchimento será ID e agora discute as propriedades Digite, será string, exclusivo será verdadeiro, ou seja, todo o ID deve ser exclusivo e obrigatório. Ou seja, esse campo é obrigatório, não pode ser deixado vazio no banco de dados. Em seguida, o próximo será o ID do usuário, o tipo será st e re é verdadeiro. Porque, obviamente, o usuário pode ter vários nós, então o ID do usuário não pode ser exclusivo. Em seguida, o título que é o título do nó tipo string re, então ele terá o tipo de conteúdo string. Isso é, não é necessário. Finalmente, adicionamos. Seu tipo será. Assim, o padrão será o ensinado agora. Se nenhum dado for fornecido, o padrão estará lá. Então, importamos os Mongos. Definimos um esquema. Agora temos que criar o modelo. Para isso, precisamos fornecer um nome de modelo e um esquema. Então, basta escrever o modelo de pontos Mongos. O nome do modelo será Node e o esquema será note schema A etapa final é exportar o modelo. Simplesmente no início desse modelo, as exportações do módulo de gravação são iguais ao modelo Mongoose Como você pode ver, esse é o modelo Node de código de quatro horas. Então, espero que você tenha entendido tão bem quanto conhece os conceitos. Porque, obviamente, esse é o conceito do pacote Mongo e do Mongo DB também Então é isso. Nos próximos vídeos, também criaremos algumas novas rotas. Obrigada 7. Rota para adicionar nota: Olá, vamos usar o modelo de notas para buscar todas as notas no banco de dados e enviá-las como uma resposta JCN Portanto, no arquivo JS do servidor, alterarei essas notas de barra para sns do list E aqui vou escrever R. Logo no início, no topo, tenho que exigir o modelo. Apenas escreve que o nó é igual ao nó re modela. Então, aqui vou escrever que nós são iguais a um nó fino. Isso significa obter todos os nós do banco de dados, e é uma função síncrona, então temos que fazer com que seja uma sincronização E então, na resposta, vou apenas enviar Res JS e notas. Não estou colocando essas notas em nenhum parêntese porque elas estarão automaticamente no formato JCN Vou salvá-lo e executar o servidor. E se eu for até esse ponto final, isso é a lista de notas. Então veja que estou recebendo uma matriz vazia. Isso significa que não há notas inseridas, obviamente, mas não há erro. Agora, vamos criar uma rota para adicionar uma nota. Abaixo dessa lista de rotas, crie uma rota GT para agora app.gs notes ad Será uma função de sincronização. Solicite uma resposta. Agora, temos que criar uma instância do modelo de nó. Então, para esse novo nó, é igual à nova instância do nó. Como você sabe quais dados são testados, será necessário um ID. Vou codificar os dados por enquanto. Posteriormente, alteraremos essa rota para uma postagem e uma leitura do usuário. Vou apenas escrever 0001, então o ID do usuário será rahle atmail.com, então o título será o primeiro a minha nota e o conteúdo será, este é o conteúdo então o ID do usuário será rahle atmail.com, então o título será o primeiro a minha nota e o conteúdo será, este é o conteúdo. Quando temos essa instância de nó com os dados, precisamos salvar os dados do modelo no banco de dados. E isso é muito simples. Basta usar essa nova variável de nota e digitar salvar. É isso mesmo. Esse código salvará esses dados no banco de dados. Então, como você pode ver, o Mongo torna isso muito fácil. Em seguida, crie uma variável de resposta no formato CN e eu enviarei uma mensagem que o novo nó foi criado. No final, escreverei Response No Jason e enviarei essa variável de resposta assim É isso mesmo. Salve isso. Agora, vamos testar essa API. O ponto final da APA é um nó e um nó. Mensagem Lash ad C, uma nova nota é criada, e eu vou, se eu for e agora escrever lista L, vamos ver acho que porque eu sei qual é o erro Sim. Eu tenho que mudar essas coisas. Agora, se eu for e listar, veja, eu tenho isso, no qual inseri o ID, o título do ID do usuário. Porque não era único, então estava dando um erro. De qualquer forma, não seremos valores de código rígido como esses. Mas, como você pode ver, os dados são inseridos. Se eu adicionar isso também, e depois com o terceiro ID, usarei um ID de usuário diferente, John, e essa será sua primeira nota fictícia como essa, e se ele escrever adicionar também, nesse caso, se eu for escrever uma lista, todas as três notas estarão lá Ou seja, Johns e eu acho que Johns têm três, quatro k. Obviamente, o último Como eu disse, esse anúncio publicitário tem algo que, quando estamos, talvez eu tenha inserido duas vezes Essa é a questão. Mas está tudo bem. A API está funcionando perfeitamente. Portanto, no próximo vídeo, trabalharemos na rota para obter notas apenas por ID de usuário. Obviamente, não queremos essa lista em que todas as notas de todos os usuários sejam buscadas Não quero que outros usuários vejam a postagem uns dos outros. Além disso, posso ver que tenho esse tipo de ácaro, está tudo bem. Apenas salve-o. E isso é tudo para este vídeo. Obrigada 8. Obter notas por ID de usuário: Oi. Bem vindo de volta. Então, como você pode ver, podemos buscar todas as notas na rota da lista de nós de barra Mas, obviamente , queremos que o usuário possa ver seus próprios dados no aplicativo. Para isso, passaremos o ID do usuário como parâmetro ao chamar a rota. Então, vamos mudar essa rota que está depois dessa lista, vou aceitar uma variável de ID de usuário. Isso significa que, ao ligar para essa rota, a pessoa precisa enviar esses dados. E então vou usar esses dados para filtrar a descoberta. Ou seja, vou apenas filtrar onde ID do usuário é igual à solicitação que os PMs façam o ID do usuário Ou seja, isso é um parâmetro, ou seja, PMs. Dessa forma, somente os nós desse usuário em particular serão mostrados. Então, vamos testá-lo. Sim, vou usar o Postman para isso. Agora, vou escrever rah no gmail.com. Essa é uma ID de usuário. Eu tenho essa solicitação de GAT Se eu enviar, vejo apenas os dois dados que os meus estão mostrando agora. Então isso significa que isso está funcionando perfeitamente. A próxima coisa que precisamos fazer é instalar um pacote porque, quando enviamos dados via solicitação de postagem, nosso servidor de nós não conseguirá entendê-los por padrão. Ou seja, suponha que aqui quando fizermos as solicitações de postagem e no corpo, enviaremos os dados do nó porque, obviamente, aqui estamos apenas codificando os dados do nó, mas, posteriormente, solicitaremos essas informações ao usuário E nesse caso, temos que garantir que nosso servidor seja capaz de entender esses dados. Para isso, usaremos o pacote body passer. Então, vou usar o Control C para parar meu servidor e escrever NPM install body passer assim Ele converterá os dados do JC, que enviaremos do front-end e os tornará legíveis pelo nosso servidor É isso mesmo. E para fazer isso funcionar. Temos que usá-lo como um middleware. Aqui no topo. Em primeiro lugar, vou importar se o analisador de corpo é igual a require e, em seguida, o analisador de corpo Depois disso, eu tenho que escrever o URL do aplicativo e do pacote corporal codificado, estendido é igual a falso, e então eu tenho que usar o analisador app dot use body Aqui, estendido é falso. Uma vez que não enviaremos nenhum dado aninhado no corpo. A chave não terá nenhum dado JCN como valor. Ou seja, como você pode ver aqui, todos os dados, todos os valores, são apenas strings simples Mas suponha que tenhamos algum tipo de tag, e será uma matriz de strings. Nesse caso, você precisa torná-lo verdadeiro, estendido. Então, como você pode ver, essa linha, basta fazer com que ela apenas converta os dados JN para serem legíveis Agora, vamos trabalhar em nossa rota de adição de notas. Anteriormente, criamos uma rota para adicionar uma nota, mas ela estava apenas armazenando dados fictícios como esses Agora, vamos trabalhar nisso para que possamos recuperar dados do corpo da solicitação, que é essa, e armazená-la no banco Em primeiro lugar, temos que fazer disso uma solicitação de postagem, em vez de E lembre-se, essas solicitações de postagem não podem ser testadas no navegador. Então, usaremos o postman a partir de agora até construirmos um front-end Agora, aqui, em vez de codificar, solicitarei o ID do ponto corpo do ponto Ou seja, os dados estarão no formato JCN e o ID será sua chave Vou usar isso apenas para imprimir o valor. Da mesma forma, o ID do usuário será o corpo do ponto da solicitação. Faça com que seja grande. Solicite o ID do usuário. Vou solicitar o título do ponto, corpo do ponto. E o conteúdo será o conteúdo do corpo do ponto solicitado. Ok. Fora isso, acho que não. Este é o s. E eu vou aqui apenas escrever a mensagem com a interpolação de strings Novo nó criado com ID e, em seguida, simplesmente escreverei o ID de ponto do terceiro corpo da solicitação. Só essa é a resposta. Eu quero Sy. Então, vamos iniciar nosso servidor novamente. E agora teste. Aqui, em primeiro lugar, a rota é adicionada. Lembre-se, esta será uma rota postal. Agora, para enviar dados corporais, primeiro clique nesse corpo e depois em Raw e certifique-se de inserir o texto, você escreve JS porque enviaremos Jsta você escreve JS porque enviaremos Jsta Aqui, vamos escrever que o ID será 005. Porque há quatro notas no momento. Eu sei disso. O ID do usuário será enviado. O título será Hard the My note. E o conteúdo será Este é o conteúdo. Agora, vamos tentar. Vamos apenas publicá-lo e ver um novo nó criado com o ID 005. E isso é 005, eu esqueci. Pode ser zero, mas está tudo bem. Se eu for, se eu escrever uma lista e depois escrever para gmail.com, receberemos Então você pode ver o mais recente aqui. E se eu também for ao banco de dados e atualizá-lo , você pode ver 001-00-2003, todos os dados estão lá. Vamos ver se consigo mudar mais esse 210 e atualizar. É isso aí, 005. E se eu fizer isso de novo, veja. Posso simplesmente listar apenas as notas de R, dá uma ideia. Então é isso. Para este vídeo, nos vemos no próximo vídeo. Obrigada 9. Rota para atualização e exclusão: Oi, bem vindo de volta. Agora é hora de criarmos também uma rota para atualizar uma nota. Então, abaixo está adicionar rota. Escreva o aplicativo Tot. E como se trata de atualização, usaremos put Esta é uma solicitação de atualização no STP, e eu darei o nome da rota em notas Será a função de sincronização, que dará resposta à solicitação. Ok. Agora, a maneira como fazemos isso é escrever que nota de atualização R é igual ao peso do ponto do nosso modelo de nota. Desta vez, escreveremos not find, escreveremos bem e veremos, substituímos, removeremos, excluiremos e usaremos a atualização desta forma. E agora, aqui, a maneira como fazemos é primeiro escrever a condição entre parênteses ou A condição é que a ID seja igual à ID do ponto, corpo do ponto da solicitação. Então, enviaremos a identificação pelo corpo. Então, o que queremos atualizar? Queremos atualizar o campo de título para o título do ponto b ponto da solicitação de valor e o campo de conteúdo para o conteúdo do ponto do corpo do ponto da solicitação de valor. Então essa é a condição são os campos que queremos atualizar e para quais dados e o último, escreveremos que neu é igual a verdadeiro Isso significa que essa consulta retorna os dados. Se não escrevermos que neu é igual a verdadeiro, ele retornará os dados anteriores, não os dados atualizados Por isso, ele simplesmente retorna os dados atualizados, que serão armazenados nessa variável de atualização. Então, lembre-se disso, encontre um e atualize. Essa é a maneira de fazer isso e retorna os dados atualizados. Agora, depois disso, criaremos uma variável de resposta. Aqui, escreveremos uma mensagem que a nota foi atualizada com o ID. E o ID será o ID do corpo do ponto da solicitação. Em seguida, também enviaremos os dados da nota que são uma nota de atualização atualizada como esta. Isso significa que também estamos retornando os dados. Para ver isso no console. É isso mesmo. Nada mais. Restaure o Json, que é ponto de resposta Jason, e enviaremos a variável de resposta, assim Vamos testá-lo, como você pode ver aqui. No ID cinco. Vou atualizar os dados. Aqui. Será O nome da rota é a data das notas da lista. Deve ser colocado. Lembrar. O ID é o título 005 Este é o meu conteúdo assim. Eu não quero mudar nenhuma outra coisa. Eu vou e vamos ver o que aconteceu. que houve algum erro, Creio que houve algum erro, mas por quê? Não. Eu não mudei. Eu deixei eu verificar novamente. Notas, atualização. Em seguida, encontrei um e atualizei o ID do corpo solicitado. E a identificação está aqui. Ok, a identificação estava errada, obviamente. Eu mudo isso. Agora, se eu escrever put C, este é meu conteúdo atualizado. E se eu for ao banco de dados e atualizá-lo, você pode dizer que este é meu conteúdo atualizado Outros detalhes permanecerão os mesmos. Ok. Portanto, a rota de atualização também está funcionando. Agora, a próxima rota que queremos é a rota diária. Para atualizar, usamos a solicitação put route put. Aqui, usaremos essa exclusão. Isso é uma exclusão de pontos. Aqui você pode ver que temos Abdo get post Put and delete. A rota será composta por notas, exclusão e , em seguida, um toque de sincronização Solicite uma resposta. A consulta será excluída. A nota é igual a um peso. Observe que exclua um. Então, aqui vou usar delete one porque, obviamente, estou apenas excluindo um, e a condição será ID sho ser igual à solicitação ponto por Em seguida, criarei uma resposta escreverei uma mensagem igual a Nota foi excluída com ID. Em seguida, você solicitará o body dot ID. E lembre-se aqui, ele não fornecerá os dados. Ele apenas escreverá, se exclusão estiver concluída, algo assim. Você verá na resposta, mas isso não retorna os dados excluídos dessa forma. Em seguida, escreverei a resposta que o ponto C tem. Vou escrever um ponteiro aqui. Salvar. Agora vamos testar essa rota também. E agora vou deletar a rota atualizada. Essa. Vou usar delete, primeiro aqui, depois alterarei o nome da rota para delete. E aqui, eu não preciso enviar todas essas coisas. Só se eu enviar um documento de identidade , tudo bem. Se eu enviar todos esses dados , tudo bem. Então, vou apenas escrever o n e ver que a nota foi excluída, confirmei que T excluiu a contagem um Então essa foi a resposta do servidor. E se eu for lá e voltar, então isso estará lá. Isso não deveria estar no banco de dados. Vamos atualizá-lo. Vamos ver se 005 está lá ou não S. O último é 00004. Esse é o último. Portanto, todas as nossas rotas foram escritas e estão funcionando perfeitamente. No próximo vídeo, vamos apenas organizar nossas rotas de uma certa maneira. Obrigada 10. Organize nossas rotas: Oi. Escrevemos todas as nossas rotas no arquivo JS do servidor. Se você quiser, você pode fazer isso, mas eu gosto de torná-lo mais organizado. Já que em aplicativos maiores, você terá muito mais rotas para percorrer. Como você pode ver, temos quatro rotas para gerenciar nós. Esses são esses quatro. Então, vamos separá-los em um arquivo diferente. Eu não estou falando sobre essa rota. Estou falando sobre essas quatro rotas. Então, vamos superar o servidor primeiro. Dentro da pasta asserts, crie uma nova pasta route e dentro dela, crie um novo arquivo Node toc. Ou seja, esse será o nó da rota. Aqui, em primeiro lugar, inp express é igual a require Express, então aqui, usaremos o roteador da biblioteca Express, é um roteador Express como este e certifique-se de exportar esse roteador para que possamos importá-lo no arquivo JS do servidor posteriormente Depois disso, vá para Servidores Aqui, arquivo JS do servidor. E corte todas as quatro rotas , exceto a rota de casa. Aqui, a partir do aplicativo dot, coloque e exclua este post, recorte, acesse essas rotas aqui e simplesmente cole assim Agora, em vez desse app.gg, usaremos E lembre-se também de importar o modelo do nó. Portanto, esse nó constante correto é igual a require. Isso estará fora dos modelos, observe como esta, e aqui basta escrever o roteador Aqui também. Como você pode dizer que este é o nosso próprio arquivo de roteador. Ou seja, estamos usando esse roteador expresso. E você pode remover as notas de barra do nome do roteador. Porque isso é comum em todas as quatro rotas. Usaremos isso no servidor, o arquivo JS, para conectá-lo às nossas próprias rotas. Você entenderá que, em primeiro lugar, basta remover as rotas que a barra indica aqui também E aqui também, salve-o. Agora, finalmente, diga ao servidor o arquivo JS use as rotas que estão escritas no arquivo separado. Aqui, em primeiro lugar, arquivo de rota mp. Aqui vamos importá-lo aqui. O roteador C Note é necessário. Desculpe, essa deve ser a nota de barra de rotas E então eu vou usá-lo apenas como um aplicativo de middleware, por exemplo, uma solicitação que contém notas de barra, e o roteador de nós como este. e o roteador de nós Então, se você entender isso, ele anexará as rotas automaticamente Isso é um anúncio de barra de notas de barra ou atualização de barra de notas de barra Portanto, qualquer solicitação que chegue a isso, ou seja, ela tem notas de barra Ele detectará e, em seguida , veremos, adicionaremos uma chamada, atualizaremos esta chamada ou excluiremos esta chamada desta forma. Essa é uma maneira mais limpa. Além disso. Não é importante, mas como todos os dados estão chegando no JCN, também ouvirei Sen responder à mensagem do JCN, vou apenas escrever A API está funcionando assim. E, obviamente, agora eu não uso esses comentários. Eu sei quais são os pedidos. Eu sei o que é resposta. Então, se eu tiver que testá-lo, vou apenas escrever terminal e P. Es list s mail.com Será uma solicitação Get. Vamos ver e ver. As rotas também estão funcionando agora. Eu tenho duas rotas aqui. Eu tenho duas notas. S. E se eu escrever John, então, eu tenho todas as notas de John que são três e quatro. Então, nosso servidor está completo. No próximo vídeo, implantaremos esse servidor no aplicativo ferroviário para que ele fique ativo. Obrigada. 11. Push código para o Github: Oi. Nosso back-end está completo. Agora é hora de implantá-lo da casa local para um servidor remoto que todos possam acessá-lo. Usaremos a plataforma ferroviária para a implantação em vez da Heroku, já que ela não exige cartão de crédito para começar Antes disso, vamos fazer uma pequena alteração em nosso código. Temos que trocar o pote. Como temos o pote fornecido, temos que usar o pote fornecido pela ferrovia na variável de ambiente em vez de um pote estático. Aqui, basta escrever a constante put two process Env pot e, se não estiver lá, basta usar 3.000 E aqui colocado assim. Portanto, este é o único código necessário e aqui eu posso usar, posso simplesmente usar isso assim. Ok, a configuração está feita, posso simplesmente parar o servidor por enquanto. Para implantar código, eu acho, estamos usando ferrovia, renderização ou qualquer outra plataforma. Primeiro, temos que enviar nosso código para o Github. Então vá para sua conta do Github , faça login na sua conta Getab e você terá que criar um novo Basta escrever um novo, então eu o chamarei de API do aplicativo de notas e, em seguida, o tornarei público. Você pode remover o arquivo leia-me e clicar em Criar repositório três E depois disso, temos que inicializar o Git em nosso projeto. Aqui, basta escrever Git nele, depois escrever Git add dot escrever get commit com Estou apenas escrevendo o primeiro commit Em seguida, pegue a filial principal. Espero que você conheça o código G. Ou seja, essas são apenas linhas de obtenção, e você também pode ver todas essas linhas aqui. Depois, basta copiar e colar e , finalmente, obter origin main. Assim. S. Vamos verificar se nosso código foi enviado ou não. Vou apenas atualizá-lo. E veja. Temos o código de back-end aqui, então, modelos, es. Tudo está lá. Além disso, eu também instalei esses módulos de nós, mas não é necessário , pois você pode ignorar esses módulos de nós, bem como qualquer arquivo NV de pontos Então, na primeira etapa do próximo vídeo, faremos login na ferrovia e implantaremos nosso servidor lá. Obrigada. 12. Implante seu repositório: Olá. Agora, vamos ao aplicativo Railway Dot. É um aplicativo ferroviário certo como este, apresentador. Você pode ver, traga seu código. Nós cuidaremos do resto, todas essas coisas. Então essa é a plataforma ferroviária. Eu gosto muito disso. Você também pode criar banco de dados. Além de fazer o upload de qualquer código de serviço. Basta clicar em Entrar. Faça login com o Github. E veja. E porque eu já entrei com minha conta do guitub Acho que é por isso que enviado diretamente para cá sem pedir autenticação. Mas, definitivamente, você precisará se autenticar por meio de sua conta do guitab Depois de fazer login aqui, basta criar um novo projeto. Então você pode ver que há muitas opções de implantação a partir do Gitab po, implantação de um modelo estático Você também pode criar banco de dados aqui, pois veja que você pode usar o Mongo DB aqui Em seguida, você pode usar esse link no seu servidor se não estiver usando o Atlas. Então, depende de você. Vou apenas implantar a partir do Github po. Então eu já me autentiquei com meu Github. Mas você pode não ver todas essas coisas. Você tem que configurar o aplicativo Github e coisas assim. Então você pode simplesmente clicar nele e simplesmente digitar uma senha. Então, aqui, vou usar essa API de notas. Além disso, lembro que você tem a opção de autorizar o acesso a todos os repositórios ou a alguns Então, eu dei todos os repositórios porque depende de você. Clique nas notas, API. Então, se você tiver alguma variável de ambiente, poderá adicioná-la aqui ou posteriormente. Mas vou clicar em implantar agora. Então, isso será feito em alguns segundos. Mas, como você pode ver, é muito fácil implantar nosso servidor. Você não precisa fazer muita configuração e agora pode ver que isso é um sucesso. A última coisa que precisamos fazer é criar um domínio. Esse é o endpoint da nossa API, que pode ser usada pelo cliente para acessar esse servidor Obviamente, precisamos de algum tipo de URL. Acesse as configurações aqui. Basta clicar em gerar domínio. Ele está gerando o URL da API do nosso servidor e C. Podemos ver nossa API. E se eu clicar, se eu clicar nele , agora nossa rota inicial está mostrando o resultado. É a API que está funcionando. Como você se lembra, essa era a rota de casa. Agora, vamos testar essa APA no Postman também. Vou apenas copiá-lo. Traga o carteiro Aqui. Em vez desse host local, usarei o Notes. No começo, eu tenho que escrever HTTPS e depois coluna. Agora, pegue tudo para Ravel, envie e veja, temos as rotas aqui Agora, se eu tentar adicionar uma rota e postar nela, acho que essa foi excluída e esse é o conteúdo. Acho que 005 não está lá. Vamos publicá-lo. S, novo nó criado. E agora ilist@gmail.com e pegue, dê a solicitação Get. Então, posso ver os dados mais recentes do meu nó aqui. Isso significa que nossa API foi implantada com sucesso e está funcionando perfeitamente Então, todo o código do lado do servidor está pronto. No próximo vídeo, começaremos a trabalhar em nosso aplicativo de vibração. Obrigado. 13. Crie um projeto de flutter: Olá, bem-vindo de volta a um novo vídeo. Agora é hora de trabalharmos em nosso front-end. A primeira coisa a fazer é criar um novo projeto de vibração. Estou assumindo que você já instalou o sistema Flutter S Agora, como você pode ver, já temos esse back-end. Agora, aqui, que está no aplicativo Notes, abra um terminal. Abra um terminal. E certifique-se de ter o flutter instalado. S. Quando escrevo a versão flutter, posso ver a versão Flutter Agora aqui, eu abri o terminal aqui porque já criamos o desenvolvimento de back-end nesta pasta. Aqui vou apenas escrever uma carta, criar um front-end como este. Vamos criá-lo. Você pode usar qualquer nome de projeto ou qualquer local. Eu simplesmente prefiro que seja assim. E depois disso, você pode ver o front-end aqui, excluirei a pasta Windows Windows, depois a web, depois o Linux, depois o macOS e depois testarei Já que eu não vou construir para essas plataformas. Agora abra esse projeto em código. Como esse front-end. Não execute o aplicativo agora. Vou simplesmente alterar o nome do aplicativo neste arquivo de manifesto principal do Android. Espero que você saiba que aqui, vou apenas escrever um aplicativo de notas. Portanto, sempre que você criar esse aplicativo em seu celular, o nome do aplicativo será aplicativo Notes em vez de front-end. E você também pode torná-lo capital, você também pode dar espaço. Depende de você. Esse era só o nome. Agora. Vamos criar uma página inicial porque, obviamente, eu sei que não vou usar esse código fictício Dentro do ib, crie uma pasta conhecida como páginas e, dentro dela, crie o ponto ponto da página inicial. Agora, criaremos um orçamento estadual completo para tela inicial com uma barra de aplicativos e um botão de ação flutuante por enquanto. Em primeiro lugar, importe o pacote de material e, em seguida, crie um widget de estado completo, chame-o de página inicial Então, aqui, vou devolver um andaime e depois o aplicativo. Todos esses são widgets de vibração. Suponho que você tenha o conhecimento básico de flutter. O aplicativo de notas de texto Em seguida, o título centralizado é igual a verdadeiro. Depois da barra a, basta escrever o botão de ação flutuante e, em seguida, o botão de ação flutuante aqui ao pressionar, deixe-o vazio por enquanto e adicione os ícones do ícone const infantil adicione os ícones do ícone const Assim, salve-o. Em seguida, no arquivo d principal, remova essa página inicial fictícia Esse é o padrão. Em seguida, também removerei esses comentários. Estou apenas escrevendo notas vibrantes. E aqui em casa. Vou escrever a página inicial. Ok, guarde. Agora, vou começar o emulador Pixel five. Você pode usar o emulador ou também pode conectar seu próprio dispositivo real, ou também pode conectar porque eu sei que esse estúdio Android é um grande software e também pode atrasar seu sistema Depois disso, basta executar e iniciar a depuração. Vai levar tempo, espere. Mas já sabemos que nosso servidor, ou seja, o back-end, está funcionando perfeitamente. Apenas conectá-lo ao front-end é relativamente fácil porque a maior parte da lógica principal estava no lado do servidor. Estará lá. Então, se eu ver este aplicativo ferroviário, certifique-se de aprender mais sobre essa plataforma ferroviária, porque definitivamente é muito útil. Você tem tantas coisas que são produção, desenvolvimento, você também pode fornecer ambientes. Porque com a prática, você entenderá e garantirá que esse plano inicial tenha um limite. Mas, obviamente, quando você é iniciante, não conseguirá esgotar esse limite porque isso é apenas para fins de teste Você pode implantá-lo e mostrar seus projetos aos empregadores. Depende de você. OK. Então, aqui eu acredito que o servidor está funcionando e veja, temos o aplicativo de notas. Vou apenas remover esse banner de depuração. Os banners de depuração do programa caem. OK. Então é isso para este vídeo. S nos próximos vídeos. Obrigada. 14. Criar modelo de Anotação: Em nosso aplicativo, lidaremos com dados de nós. É muito importante ter um modelo para isso. Usamos modelos para fornecer uma estrutura predefinida aos nossos dados em vez de apenas usá-los todos os lugares como pares de valores-chave de estação Então, dentro da Lib, crie uma pasta chamada models e, dentro dela, crie um novo arquivo de pontos Note dot dart Agora, criaremos uma classe de modelo para o node. E isso terá todas as propriedades, que já definimos no esquema Mongo DV Node, ou seja, esse arquivo JS Aqui, basta começar com o ID da string. ID do usuário da string título da string desculpe, i string title. O conteúdo da string Datet adicionado cria um construtor Observe que está certo. Esse ID de ponto, esse ID de usuário, esse título, esse conteúdo e esse ponto adicionado. Você pode acessar o esquema do nó e ver que também temos essas propriedades lá Agora, vamos trabalhar na serialização da JCN. Vamos criar o punchon para converter dados JCN provenientes do banco de dados para esse objeto de nó, bem como desse objeto para o formato JS, que é entendido pelo servidor Então, aqui está simplesmente certo. Fábrica. Observe que, a partir de um mapa como esse, enviaremos dados do mapa, que serão um mapa dinâmico em sequência de caracteres e retornarão um objeto de nota. Aqui temos que passar valores ID do mapa ID. Portanto, certifique-se de que essas teclas sejam iguais às do DV. Ou seja, se você quiser saber, estou falando sobre essas chaves aqui. O ID do usuário dá título a essas chaves. Isso também é mencionado em nosso esquema. Eu só não quero que você cometa nenhum erro tolo aqui. ID do usuário Mapeie a ID do usuário. Mapa do título, este será o título. Mapa de conteúdo. Conteúdo. Data adicionada. Lembre-se de que, se escrevermos a data adicionada dessa forma, não funcionará porque estará no formato adjacente de string ou sequência, mas queremos o formato de data e hora Vamos escrever, ou seja, vamos colá-lo. Analisaremos essa data no formato de data e hora e tentaremos paase para que ela retorne null em caso de exceção em vez de erro Ou seja, se por engano a data não estiver lá, ela simplesmente retornará nula Isso não gerará nenhuma exceção ou você pode dizer pare nosso aplicativo. E, como você pode dizer, esse é um rótulo nulo. Pelo menos estaremos seguros dessa forma. Pelo menos o aplicativo não falhará. Dessa forma, os dados são convertidos do JCN para esse objeto e agora criam outra função Que isso retornará um mapa de string, mapa dinâmico de dois, e isso retornará um mapa. Ele terá ID como ID ID do usuário como ID do usuário, título como título e , em seguida, a data de adição. Agora, a data adicionada, que enviaremos, estará no formato de data e hora, mas agora precisamos convertê-la novamente para o formato de string, que é entendido pelo banco de dados. Então, basta escrever adicionado e convertê-lo em 2i86 01 string. Portanto, lembre-se de que estamos novamente convertendo em string a partir da data e hora Esse é um conceito simples. Então, esses são os dados da nossa nota. Apenas salve tudo. E antes de prosseguir, gostaria de primeiro interromper o aplicativo. E vou instalar algumas dependências. Usaremos o provedor como gerenciamento de estado em nosso aplicativo. O outro pacote será o UUID para criar IDs exclusivos para nosso Em seguida, precisamos do pacote SDTP para chamar a API. Portanto, você pode acessar o site pub dot, pesquisá-los e colá-los na seção de dependências do arquivo doML do pups ou, no comando, simplesmente Pub add UUI, você pode simplesmente começar com provedor UUID e HTTP e Então, isso instalará tudo. Vamos ver se há algum erro ou não. No arquivo pups dot Yamal, você pode ver que temos o provedor UUID Então é isso para este vídeo. Obrigada. 15. Interface de usuário da home page: Oi Vamos executar nosso aplicativo novamente. Neste vídeo, trabalharemos na interface de usuário da página inicial. Nesta página, exibiremos todas as notas desse usuário. Primeiro, vamos criar uma interface básica. Aqui, temos a barra a, temos o botão de ação flutuante. No corpo, vamos começar com uma área segura e rígida. Assim, se houver algum entalhe ou algo relacionado ao dispositivo, ele estará na zona segura Em seguida, usaremos o construtor de pontos de visualização em grade. Então, se você quiser, você pode usar a visualização em lista. Mas aqui, já que é uma nota, a visualização em grade ficará melhor. Então, aqui no delegado da grade, você tem que escrever const sliver grid delegate com fixa de eixos cruzados Eu sei que é muito confuso, mas aqui simplesmente escreva também. E esse código simplesmente significa isso na tela. Teremos apenas dois elementos na horizontal. Então você verá quando tivermos esse UR pronto. Então, como você sabe, na lista, também temos a contagem de itens. Agora, vou usar apenas uma contagem fictícia. Há cinco, então no construtor de itens. Escreva o contexto e o índice. Aqui, retornarei que a cor do contêiner será cor azul pontilhada por enquanto e a margem será contornada nos conjuntos dos cinco. E ponto e vírgula aqui. Reinicie ou você pode salvá-lo. E veja. Essa é a visualização em grade e há apenas dois elementos na horizontal ou em uma linha. Então, se você der três, isso acabará, mas obviamente não ficará bem porque é um dispositivo móvel. Tem um pequeno Então esta é apenas a interface do usuário. Agora, obviamente, precisaremos uma página na qual o usuário possa adicionar notas. Dentro das páginas, crie um novo arquivo, adicione uma nova nota ao dardo Mapeie o material e, em seguida, crie um widget de estado e adicione uma nova nota. Ok. Aqui, simplesmente dê um andaime. Um bar. Deixe isso por enquanto. No corpo, tenha uma área segura e, dentro da área segura, tenha uma coluna. E as crianças simplesmente o deixam vazio por enquanto. Ok. Navegue até esta página de adicionar novas notas na página inicial Temos esse botão de ação flutuante na página inicial aqui. Basta escrever, navegar pelo contexto enviar o caminho da página de material. Em seguida, no construtor, contextualize aqui e adicione uma nova nota. Ok. E eu simplesmente darei uma nova propriedade a ela. Há um diálogo em tela cheia para dois. Portanto, isso é simplesmente uma propriedade da rota da página de material. Se você não quiser, você também pode remover isso. Então, o que ele faz é que, se eu clicar em mais , ele terá essa cruz em vez de uma seta para trás. Então, é como uma caixa de diálogo em tela cheia em vez de uma página. Essa é a única coisa que esse código faz. Também temos a tela de adicionar novas notas. Trabalharemos na interface do usuário no próximo vídeo. Obrigada 16. Adicione uma IU de Anotação: Vamos trabalhar na página de adição de uma nova nota. Então, aqui precisaremos de campos de texto para que o usuário insira o título e o conteúdo da nota e um botão para salvá-la. Então, primeiro de tudo, vou começar com um controlador de edição de texto. Eu sei que haverá um controlador de título. O controlador é igual ao controlador tex thing. Outro será o controlador de nós. Ou seja, esse será o nó real. Eu tenho os controladores então no corpo. Vamos ter um campo de texto. Dentro da coluna, o controlador será o controlador de título. A decoração será uma decoração de entrada constante no texto, como borda do título , como borda de entrada, nenhuma. Em seguida, após a decoração de entrada. Vamos ter um pouco de estilo. O estilo será um tecido têxtil constante. Vamos definir o tamanho da fonte como. Não será como pool de fontes. OK. E então eu quero foco automático. Foco automático para Pro. Vamos salvá-lo. Se eu for e clicar no anúncio, posso ver que o foco automático está lá e o campo do título está lá Também darei um pouco de preenchimento à coluna. Enrole-o com estofamento e aqui será simétrico, horizontal, 20, vertical Vou apenas salvá-lo e ver. Parece decente. Este é um título, o próximo campo de entrada que é o próximo campo de texto será texto preenchido aqui. O controlador será um controlador de notas. Número máximo de linhas. Vou atribuí-lo como nulo para que o usuário possa pressionar enter e descer , ou seja, ele pode ter várias linhas e, em seguida, o estilo de estilo será constante, têxtil no tamanho 20, depois decoração com decoração de entrada na nota de texto Salve isso. Agora, se eu clicar nele, temos o título, temos a nota. Mas se eu clicar na nota aqui , só ela estará em foco. Se eu clicar em qualquer lugar nessa área restante, ela não estará em foco. Para fazer isso dessa forma, podemos apenas a segunda nota expandida. Expandido assim. E agora, o que acontece é que, se eu voltar e voltar para a tela novamente e clicar em qualquer lugar da tela, agora temos a nota aqui porque ela está ocupando todo o espaço aqui. Porque, obviamente, eu quero que o título seja competitivamente menor do que a nota E se eu clicar em enter , teremos várias linhas. A única coisa que resta é um botão seguro, que fornecerei na barra de aplicativos. Aqui, faça ações e, pressionar, um botão de ícone ficará vazio por enquanto. E então o ícone será o ícone const. A nota dos ícones adiciona cores, ponto verde, tamanho 30. Salve isso. Portanto, esse ícone estará no topo C. Temos o ícone de salvar. Ou ele pode simplesmente salvá-lo ou voltar. E certifique-se de descartar também esses controladores de edição Controlador de edição de texto dot dispose. Observe o controle dot dispose desta forma. Que quando voltarmos e voltarmos à página novamente, haverá uma nova instância dos controladores Então é isso para essa interface de usuário. No próximo vídeo, trabalharemos na criação de um provedor. Obrigada. 17. Criando provedor de notas: Oi, bem vindo de volta. Agora é hora de lidar com os dados. Para isso, precisamos criar um provedor para os novos dados. Então, dentro da pasta Lip, crie um novo provedor de pasta e dentro dela, crie um novo arquivo. Fornecedor de notas dot dot. Então, vamos fazer isso. Em primeiro lugar, importe material para que possamos usar esse provedor de notificação de alterações e, em seguida, importar modelos e não iniciar OK. OK. Agora, vamos criar um provedor de notas de classe que estende o provedor de notificação de alterações. Em seguida, teremos uma variável, que consistirá em uma lista de todos os nós, igual à lista vazia por enquanto. Este ano, buscaremos notas da APA mais tarde. No momento, faremos isso localmente. Em seguida, crie uma função para adicionar uma nota. Ele aceitará uma nota e simplesmente adicionaremos essa nota na variável. E então ligue para notificar os ouvintes desta forma. É um provedor muito simples. Então, espero que você saiba que precisamos registrar nosso provedor no arquivo principal. Aqui, envolva o aplicativo de material com igd e escreva o provedor Então, temos que mencionar os fornecedores. Eu usei vários fornecedores porque suponha que no futuro você queira adicionar mais fornecedores e tudo mais, então você pode fazer isso Usaremos o provedor do notificador de alterações e, em seguida, os contatos, e o nome do nosso provedor é notas Fornecedor como esse. Em seguida, basta salvá-lo. E começamos. Em seguida, vamos criar uma função interna, adicionar uma nova nota, onde criaremos um modelo de nota e enviaremos para a função do provedor. Aqui está simplesmente escrever e adicionar uma nova nota. Agora, primeiro de tudo, verificaremos se o título está lá. controlador de título, o texto Tom está vazio, então mostraremos um mensageiro cuidadoso de contexto, que mostra o widget snag p, snag pow no conteúdo, simplesmente o título não Assim, torne-o constante e a partir daqui simplesmente retorne. Não quero que o código Billow seja executado. Se o título estiver vazio. Então, se não estiver vazio, criarei uma instância de nota que é nova nota, é para nota. E aqui vou passar o ID de dados. Vou usar o pacote UUID para criar IDs exclusivos para simplesmente criar um ID de UU como Portanto, ele criará IDs exclusivos como esse. Então ID do usuário, por enquanto, estou fornecendo alguns dados estáticos. Então, suponha que ajo lag val por enquanto. Isso é só um boneco. Posteriormente, usaremos as preferências compartilhadas. Mas agora, basta testá-lo. O título será o texto do ponto do controlador de título, e o conteúdo será o texto do controlador de notas e o adicionado será um ponto d como este. Esse é o nosso modelo de nodo. Depois disso, simplesmente usaremos o provedor fornecido fora do contexto. Aqui, de qual fornecedor precisamos. Precisamos do provedor de nós Node. E então, como isso está fora da função de fatura, escreveremos Listen, is the falls porque eu não quero que ele ouça nenhuma alteração. Porque se estivesse dentro da construção, então ele pode se rebelar Mas, obviamente, isso está dentro de uma função, e vou chamar a nota de adição e enviar o novo valor da nota desta forma. Em seguida, mostrarei novamente o messenger of context show snag bar snack bar E o conteúdo será adicionado com sucesso. E então vou deixar o Navigator fazer pop assim. E então chame essa função dentro do botão do ícone aqui. Essa. Basta ligar para uma nova nota. Então é isso para este vídeo. No próximo vídeo, trabalharemos. Trabalharemos nesta página inicial no TY. Obrigada. 18. Mostrar notas na página inicial: Oi. Então, agora podemos adicionar novos dados. Então, vamos trabalhar na interface de usuário da nota, que está na página inicial onde mostraremos todas as notas. Antes disso, como o nome do arquivo é provedor de notas, farei com que seja provedor de notas, não nota. E então aqui, serão notas, e então aqui, serão notas. É isso mesmo. Não é algo muito importante, mas é como se o nome do arquivo fosse fornecido pelas notas. Vamos para a página inicial aqui. Então, primeiro de tudo, escreverei para meu provedor. Aqui, o provedor de notas igual ao provedor de contexto e é o provedor de notas. E eu tenho que escrever isso dentro do projeto de lei. Assim. Então, no filho da área segura aqui, primeiro enviarei um texto condicionalmente , se não houver nenhuma nota disponível Aqui, vou apenas escrever notas. O ponto do provedor está vazio. Em seguida, exiba const center. Criança centrada. E no texto, ainda não vou escrever nenhuma nota. Assim, é isso. Para que o usuário observe que não há notas disponíveis e ele possa adicioná-las. Em seguida, na visualização em grade, construtor de pontos. A contagem de itens será notas que as notas do provedor fazem n. Em seguida, no construtor de itens. Em primeiro lugar, terei o modelo de notas e, em seguida, escreverei que a nota atual é igual às notas do provedor de notas e ao índice. Então, obviamente, é uma visualização em grade, nós individuais estarão aqui. Obviamente, isso é do zero ao índice até zero, um, dois assim. Em seguida, no recipiente, remova a cor azul aqui porque era apenas um boneco Em seguida, a margem e a margem inferior direita fornecem alguns contras de preenchimento em todas as dez e, em seguida, fornecem caixa borda decorativa à caixa de decoração Em seguida, a cor da borda será cinza, W dois e depois dentro da caixa, raio da borda da decoração, raio da borda, raio circular, dê dez OK. Em seguida, o filho do contêiner. Temos que sair da decoração da caixa de borda e, aqui, a criança será uma coluna. O alinhamento do eixo cruzado será o alinhamento do eixo cruzado Nas crianças, vamos mostrar no topo o título do nó. Título atual da nota, e não é nulo. Estilo têxtil constante. Espessura da fonte espessura da fonte ponto em negrito tamanho da fonte 20. Em seguida, as linhas máximas fornecem uma, essa é a propriedade desse texto, e então o estouro de texto, ou seja, o estouro , deve ser um eclipse de pontos de transbordamento Isso significa simplesmente peso, mostrarei Antes de tudo, veja todo o código aqui. Então, Max fala um, ou seja, eu só quero que o título esteja em uma linha. Suponha que o título seja muito grande, então eu não quero que seja em duas ou três linhas. Faça uma linha e o texto restante será eclipse Ellipses Isso significa ponto, ponto, ponto, assim. Então, não vai ficar muito ruim. Depois desse texto, forneça algumas obras de tamanho e altura sete. Então eu tenho que escrever a descrição. Novamente, a descrição é um texto com o conteúdo atual da nota. Não é nulo, então o tecido aqui novamente, tamanho, dê 18, cores de cinza, faça 700 Estes são apenas um estilo. Obviamente, você pode criar seus próprios estilos para que tenha uma boa aparência. Depois do estilo dentro do texto, novamente, escreva no máximo 24 linhas aqui desta vez e, em seguida, transborde para overflow eps Agora vamos testá-lo H Acabei de salvar tudo. E agora veja, ainda não há notas. E eu escrevo uma nova nota, minha primeira nota e escrevo. Este é um conteúdo fictício. Vamos torná-lo grande para que excesso de texto funcione e torná-lo elipse Espero que isso funcione. E se eu pressionar salvar ver o node it com sucesso, então esse é um conteúdo fictício e aí está a elipse E se eu conseguir, as linhas máximas são cinco. Vamos ver o que acontece? OK. Aí está o transbordamento. Às quatro. OK. Então, isso parece bom. Temos o título aqui em negrito, temos o texto. E lembre-se, no momento, isso não está salvando no banco de dados. É só no local. Então, se eu atualizá-lo, esses dados desaparecerão. E agora, meu foco é apenas trabalhar no provedor. Posteriormente, conectaremos o serviço de API a esse provedor. Agora, obviamente, podemos adicionar dados. Mas também precisamos criar uma função para atualizar e excluir notas. Vá para as notas fornecidas aqui e abaixo, adicione uma nota, escreverei uma nota nula Isso solicitará os dados do nó. Esse é o nó a ser atualizado. E agora, eu tenho que atualizar esse valor. Em primeiro lugar, dentro desta lista de notas, pois ela será exibida para o usuário. Preciso saber o índice dessa nota aqui nesta lista. Escreverei no índice da nota que é igual ao índice das notas elemento , onde sempre que você encontrar o ID do elemento igual ao nó que está sendo enviado , obtenha o índice. Então, o que quero dizer com isso é que ele percorrerá essa nota e verificará a ID de todas as notas com essa ID. E se conseguir, aqui obteremos o índice que deveria estar na posição dois. Em seguida, escreverei notas que são esse índice de notas da lista e as alterarei para nossa nova nota atualizada e, em seguida, escreverei para notificar os ouvintes Essa é apenas uma lógica básica. Em seguida, obteremos o índice e alteraremos esse valor do índice nessa matriz para essa nova variável de nó. Da mesma forma, faremos algo para a função de nó atrasado. Vou obter o índice desta nota e, em seguida, simplesmente escrever essa lista de notas ou A e, em seguida, remover o anúncio, remover esse índice e notificar a listess Portanto, isso atualizará a interface do usuário. E espero que você tenha entendido que essa atualização e exclusão são temporárias, pois estamos fazendo isso apenas no nível do aplicativo. Então é isso. No próximo vídeo, trabalharemos e também criaremos uma tela para editar uma nota. Obrigada. 19. Trabalhar na página de Editar nota: Oi. Bem-vindo de volta. Neste vídeo, trabalharemos na edição de uma nota. Então, o que eu quero é que, quando o usuário tocar em qualquer nota, ele seja enviado para a página de edição, onde poderá atualizar e excluir o Death Note Então, para isso dentro das páginas, crie um novo arquivo, edite uma nota. Copie e cole todo o código de uma nova nota. E depois disso, faremos algumas mudanças. Copie e cole aqui, altere o nome do widge que é uma nota como esta Então, como isso editará uma nota, temos que aceitar os dados da nota no construtor Aqui, vou escrever a nota final. Observe que esse será um parâmetro obrigatório. Então, esta nota. Em seguida, atribuirei os valores de nota a esse controlador de edição de texto. Aqui em seu estado, escreverei que o texto do controlador de título é igual ao título do widget e sei que isso não é nulo e, semelhante, t é igual à nota do widget, não ao Então eu espero que você tenha entendido isso. Suponha que exista esse título, meu primeiro nó, minha primeira nota. Então, sempre que formos para a página de edição, ela já estará preenchida dentro do campo de texto. E depois podemos editá-lo. Agora, não precisamos dessa função de adicionar novas notas. Aqui, vamos criar uma função para atualizar uma nota. Vídeo Então, se o texto do controlador de título do trim estiver vazio da mesma forma Não vamos permitir isso, então vamos tc messenger of context that snag par E o texto do título não pode ficar vazio, e voltaremos daqui. Isso será constante se tudo estiver bem, o que faremos é qualquer texto atualizado que tenhamos. Vamos atribuir ao nó, que temos no construtor construtor para que não atualizemos os outros Outros preenchimentos significam ID, data do ID do usuário. Essas coisas já estão dentro dessa variável, certo. Dessa forma, não precisamos atualizar isso. Agora, tente entender o que vou fazer é o título do ponto do widget Vou alterá-lo para texto pontilhado do controlador de título, e eu não preciso disso, então wig dot note do content é igual ao texto pontilhado do controlador de notas Em seguida, chamarei o provedor de contexto e, em seguida contexto e, em seguida, a escuta do provedor de notas será falsa, chamarei a função de atualização e enviarei a nota que está no construtor, mas já a atualizamos E suponha que o usuário não altere o conteúdo. Além disso, não precisamos nos preocupar com. Como no construtor, já colocamos dentro do texto o que já estava dentro dessa variável O mesmo será atualizado novamente. É isso mesmo. Em seguida, vou usar essas mensagens e apenas escrever o título atualizado com sucesso. E então vou escrever navigator dot POP Isso também criará um novo botão dentro da barra de aplicativos para excluí-lo Primeiro de tudo, essas notas e, nós podemos fazer isso. Vou mudar o ícone, eles apenas marcam o círculo e atribuem a ele a nota de atualização da função assim, ok? Acima desse botão. Vou criar outro botão que é botão de ícone. O ícone será ícone de ícone, adie as cores vermelhas. Ao pressionar, o que eu quero é simplesmente chamar a função provedora de notas de contexto fornecida pela nota de atraso e enviar uma nota de ponto do widget como esta Além disso, não quero ouvir as mudanças porque só quero chamar essa função. Então eu preciso desse caful e do navigator dot pop. Vou apenas escrever. E não deveria ser título. Eles devem ser anotados e excluídos com sucesso. É isso mesmo. Essa é a coisa toda. Agora temos que navegar até esta página a partir da tela inicial. Então vá para a tela inicial. Dentro do construtor de itens. Aqui, embrulhe este recipiente com um poço de tinta e escreva no navegador de contexto, ph e depois rota da página do material Vou enviar para a página de edição da nota com o valor da nota e o valor da nota é a nota atual aqui. Como antes, escreverei um diálogo em tela cheia. É isso mesmo. Então, salve tudo. Por que isso está nesse grão. Não queremos o UUID. Vamos testá-lo. Eu gostaria da minha primeira nota. Vou escrever este é meu conteúdo antigo. Guarde isso para que, se eu clicar nele, veja, essa era a lanchonete antes da lanchonete. Se eu clicar nele, teremos uma exclusão e a atualização. Então, vou apenas atualizá-lo para. Este é meu novo conteúdo, pressione salvar e diga, este é meu novo conteúdo. Se eu clicar nele novamente e excluí-lo, não o exclua com sucesso, e agora é balançar sem notas Isso significa que todas as funcionalidades estão funcionando corretamente com o provedor no nível do aplicativo No próximo vídeo, finalmente integraremos o Mongo Db para que todos os dados recebidos no aplicativo venham de um banco de dados real. Obrigada. 20. Função para adicionar nota: Oi. Bem-vindo de volta. Então, até agora, todas as funcionalidades estavam funcionando apenas no nível do aplicativo Não estávamos armazenando nenhum dado no Mongo DV. Então, agora é hora de integrarmos também a API do Mongo DB. Aqui na pasta lift, crie uma nova pasta services e dentro dela, crie um ponto de serviço de API de arquivo como este. Em primeiro lugar, preciso do pacote HTTP. Vou dar como HTTP, então preciso de modelos do modelo Note. Agora, crie um serviço de API de classe. Aqui, a primeira coisa que queremos é a variável estática. É um URL base de string constante estático . O que é esse URL base? Esse é o domínio do Railway App. Vamos lá e aqui no aplicativo ferroviário, temos o domínio, essa cópia e cole aqui. Mas certifique-se de adicionar a coluna HTTPS aqui e, em seguida, o banco de dados, desculpe, o banco de dados, a rota. Essa é a rota dos nós. Como temos apenas essa rota, isso é mencionado no BaseRL Mas, obviamente, se você tiver várias rotas, não fará isso. Agora, crie uma função para adicionar um nó. Então, estou tornando-a estática para que possamos chamar essa função sem criar um objeto. Portanto, será em todo o futuro. Dê um nome para adicionar nota. Será a função de canto, e passaremos o modelo de notas aqui. Agora, a primeira coisa que precisamos é o URI, escrevemos o URI de solicitação . Espero que você saiba como usar o pacote STP O URI será o URL base. Use o URL base e adicione. Essa era a nossa rota. Se você se lembrar disso no lado do servidor , escreverei que a resposta R é aguardar a adição de HTTP, temos que usar a solicitação post Então temos que enviar a URL, que é a URI. E agora enviaremos o corpo no mapa e escreveremos apenas a função de dois mapas. Se você se lembra na nota, temos esses dois mapas, que os converterão automaticamente em um mapa. É assim que essas coisas acontecem. Espero que você entenda essa conversão de objeto em mapa. Em seguida, teremos o corpo da resposta, escreveremos o código igual ao JC do código e, em seguida, redefiniremos o e, em seguida, redefiniremos Corpo vermelho. Vou simplesmente imprimir o corpo que ele diz para debo, caso contrário, não precisaremos fazer isso na produção Agora, vamos chamar essa função no provedor de notas. Depois disso, notifique os ouvintes, chame o Mongo D V, que é o serviço de API, de adicionar nota É isso mesmo. Agora, você pode estar pensando por que escrevi essa linha no final. Porque isso atualizará a interface em segundos ou instantaneamente. E em segundo plano, os mesmos dados serão enviados para o banco de dados. Obviamente, também será uma boa experiência para o usuário, porque ele não precisará esperar porque poderá ver essa nota instantaneamente na página inicial. E se ele voltar mais tarde, então mais tarde significa que, obviamente, isso levará apenas 5 segundos, mas suponha que em 10 minutos ele abra novamente o aplicativo, então as notas na página inicial serão buscadas do banco e todas as notas serão iguais Lembre-se, obviamente, que você também pode fazer isso na parte superior, mas isso não faz nenhum sentido. Agora vamos fazer isso. Vamos tentar adicionar uma nota. Vou escrever para aprender Sem cadeira. Mostarda. Acho que havia um pouco de ar para o teclado. Vamos ver o que acontece. É por isso que, na maioria das vezes, prefiro dispositivos físicos. Escolha do nó. Podemos salvar e ver no terminal o novo nó criado com o ID this. Então, isso vem do servidor. Espero que você se lembre que essa foi a nossa resposta. Então isso significa que isso é armazenado no banco de dados. Então é isso para este vídeo. S no próximo capítulo. Obrigado. 21. Funcionalidade para atualizar e excluir: Oi Bem vindo de volta. Da mesma forma, como adicionar uma nota. Vamos criar uma funcionalidade de API para atualizar a nota também. Acesse o serviço de API e, abaixo, adicione uma nota. Basta escrever a tática. Futuro. Isso também evitará. Nota de data, faça com que seja uma sincronização. Isso aceitará uma nota. E agora, novamente, crie o URI de solicitação de URI. O URI é igual a URI dot p, o URI base e depois a atualização. Então, a resposta R é aguardar o TTP. Desta vez, temos que usar o put B no servidor e também fornecemos o put. Aqui, temos que substituir o URI e o corpo pela nota no mapa. Então, da mesma forma, decodifique esse corpo de envio do e envie uma string Para excluir, vou apenas copiar essa função e colar. Isso será um nó de exclusão. Estão aqui. Ele será excluído. Sua solicitação de TP será adiada. E é isso. E lembre-se, se quiser, você pode enviar um objeto de nota como esse ou apenas o ID. Depende de você porque, a partir desse mapa, o servidor extrairá o ID sozinho ou, se você enviar apenas o ID , tudo bem. Depende de você. Vamos chamar essa função, acessar o provedor de notas e, da mesma forma, no final, escrever uma nota de data do serviço de API e escrever uma nota de serviço de API, não atrasar, como essa, e salvá-la. Isso é o que acontecerá se eu for aqui e escrever Dummy atualizado e clicar aqui Veja. A nota foi atualizada com ID e Dummyd Isso significa que ele foi atualizado no servidor. Lembre-se de que, se você atualizá-lo , esses dados serão removidos porque não estamos buscando notas no momento Isso está apenas no nível do aplicativo. Mas pelo menos você pode ver que está funcionando. Portanto, nossa atualização e exclusão do APA também estão funcionando. No próximo vídeo, escreveremos a funcionalidade para buscar todas as notas e criar uma função que mostre tudo aqui. Obrigada 22. Função para buscar notas: Oi Bem vindo de volta. É hora de buscarmos todos os nós na tela inicial para que, se reiniciarmos o aplicativo , os dados também possam ser vistos Crie uma nova função no arquivo do serviço APS aqui. Vamos escrever um futuro estático. E isso não retornará vazio. Isso retornará a lista de nós. Nós buscamos nós. E enviaremos o ID do usuário aqui. Então queremos o URI, então é a lista de URI base de URI e2ip de solicitação URI e2ip base Lembre-se de que esse é o ID do usuário. Temos que enviá-lo na URL apenas porque será uma solicitação GT. Nossa resposta R é igual a um TPG e, em seguida, solicitamos o URI, assim Não precisamos enviar mais nada. Em seguida, escrever a lista decodificada é para Json decodificar a resposta a esse corpo Sabemos que será uma lista. E então basta retornar o mapa de pontos decodificado. Vou converter todos os nós no objeto do nó. Nota do mapa, temos que enviar a nota e isso é para perder. Você precisa conhecer a serialização JC para essas coisas. Então, espero que esses sejam os conceitos de vibração. Mas entenda que estamos convertendo o mapa em um objeto de nota e devolvendo-o Em seguida, também temos que criar uma nova função na classe do provedor para chamar isso de notas de busca Acesse o provedor de notas aqui. E vamos começar ter uma variável booleana para que a tela inicial mostre um indicador de carregamento Se estiver alternando, evitarei que os nós de patch sincronizem. Será uma lista de notas em forma de notas que o serviço de API await faz para buscar Agora, vou dar o ID do usuário. Então, esses dados virão em ordem crescente, já que eu não mencionei nada no site do servidor Então, o que vou fazer é escrever que os nós são iguais a buscar nós com pontos invertidos na lista de dois pontos Então, eu simplesmente inverti tudo dentro dela e depois converti em lista novamente e atribuo isso aos nossos nós viáveis Para que possa ser visto na parte frontal. Lembre-se de que, se você não escrever essa linha , ela também funcionará, mas estará em ordem crescente Portanto, as notas mais recentes não estarão no topo. Você pode tentar. Em seguida, acrescentarei que a facilidade de carregamento é igual a falsa e notificarei os ouvintes E vou chamar esse patch de fun nodes no construtor desse provedor de Nodes Então, quando sua instância for chamada, ela chamará essa função de nós e nossa tela inicial será preenchida com os dados mais recentes dos nós Agora, finalmente, vá para a tela inicial, aqui, no corpo Vou simplesmente escrever as notas fornecidas se estiver carregando, então const center o indicador de progresso circular infantil É isso mesmo. Agora, vamos ver. O indicador de progresso circular está lá. Sim. Veja, temos essa nota, que vem do banco de dados. Então, se eu atualizá-lo novamente, essa nota também estará lá Isso significa que nossa API também está funcionando perfeitamente. Nosso front-end e back-end agora estão conectados. Então, a última coisa que faremos é, no próximo vídeo, usar as preferências compartilhadas para armazenar o ID do usuário. Então, aqui, agora mesmo , na pesquisa In the API. Desculpe, no provedor de notas. Estou codificando o ID do usuário, o que não é bom porque, obviamente, pessoas diferentes têm IDs de usuário diferentes Então, no próximo vídeo, criaremos um ID de usuário exclusivo e o armazenaremos no dispositivo do usuário e o usaremos para as operações de CRD. Obrigada 23. Função para armazenar userid: Oi Bem vindo de volta. Então, até agora, estávamos usando IDs de usuário fictícios. Vamos usar um armazenamento de dados offline, como preferências compartilhadas, para salvar o ID do usuário criado pelo UUID E lembre-se de que só podemos armazenar valores int, string, double e booleanos na forma de valores-chave Dentro das preferências compartilhadas. Eu acredito que você não pode armazenar modelos de dados complexos. P, você tem que usar. Oi, posso armazená-lo, eu sei, mas as preferências compartilhadas, não tenho certeza. Agora pare de solicitar a carta e, no terminal, basta escrever a letra P compartilhada por pessoa. Está sendo instalado. Então, se eu for aqui no pub sec dot, posso ver as preferências compartilhadas, ok? Agora, vamos criar uma nova função, que retornará uma ID exclusiva para a ID do usuário. Então, nas notas fornecidas, vamos aqui, criar uma nova função, que retornará a string, obterá o ID do usuário. Uma sincronização. Ok. Em primeiro lugar, criaremos uma instância referencia flaps, uma instância de preferências compartilhadas para obter uma instância como essa Em seguida, criarei uma string de nível, que escreverá que o ID do usuário é igual a, talvez, get string. Então, primeiro, tentarei obter o ID do usuário do dispositivo. Ou seja, se o usuário não for um novo usuário, ou seja, ele pode estar usando um aplicativo, então o ID do usuário será armazenado. Agora, verificarei se o ID do usuário é igual a nulo, seja, se é um novo usuário, criarei a chave que está definida como string, depois escreverei o ID do usuário da chave, e o valor aqui será o UUID Isso criará uma ID exclusiva para nós e eu atribuirei essa ID à chave. Desculpe, espere. Eu vou te explicar. Eu sei que você pode estar ficando um pouco confuso. E, finalmente, retornarei o ID do usuário. E o que não é nulo, eu sei porque aqui estamos armazenando se for nulo e, se não for nulo, estamos apenas retornando o ID do usuário diretamente Novamente, estou explicando que, primeiro, criaremos uma instância de preferência compartilhada. Em seguida, verificaremos se já existe uma chave de ID de usuário. Caso contrário, se for nulo, criaremos uma chave para esse ID de usuário na preferência compartilhada e salvaremos um novo ID exclusivo dentro dela E então eu atribuirei esse valor a essa variável e o retornarei no final. Isso significa que essa função retornará de qualquer forma um ID de usuário. Em seguida, chamarei essa função aqui dentro, ou seja, string, ID do usuário é igual a await get user ID como este, e enviarei esse ID de usuário para essa função Ok. Todo o resto é bom. Então, agora temos que fazer com que o ID do usuário seja armazenado no Agora, temos o ID do usuário armazenado nas preferências compartilhadas. Precisamos garantir que enviemos esse ID de usuário ao adicionar uma nova nota. Acesse esta página aqui. Estamos enviando um hd. Vou escrever novamente. O final s é igual ao peso das referências compartilhadas que obtêm a instância. E como estamos usando um peso, precisamos sincronizá-lo. Em seguida, vou apenas escrever ID do usuário da string para talvez obter a string, e o nome do st é o ID do usuário. O nome da chave é ID do usuário. Aqui obteremos esse ID de usuário e eu o enviarei aqui. R. É isso mesmo. Essa é a única mudança necessária. Então, obviamente, não estamos usando nenhum tipo de autenticação aqui. Eu vou fazer alguns outros núcleos nele. No momento, este curso é dedicado exclusivamente às operações de petróleo bruto e como usar o GS Back e para iniciantes Há muitas coisas que você pode fazer quando, pelo menos agora, se sentir confortável com o básico. Então, espero que você tenha gostado. No próximo vídeo, testarei o aplicativo completo pois todo o resto está pronto. Obrigada 24. Teste o aplicativo completo: Oi Bem-vindo ao vídeo final deste curso. Neste curso, simplesmente testaremos o funcionamento completo do aplicativo. Então, antes de prosseguir, vamos excluir todos os registros anteriores do banco de dados porque eles tinham IDs de usuário fictícios Então, vou deletar todas essas coisas. Ok. Então, acho que deletei tudo. Vamos executar nosso aplicativo. Ok. Obviamente, não temos nenhuma nota no momento. Então eu vou criar. E aqui vou aprender o desenvolvimento da plataforma e salvá-la. Veja a nota adicionada com sucesso. Vou adicionar outra nota. Sem back-end, vou simplesmente escrever operação master red usando o Mongo Tenho mais dois e, finalmente, escreverei o exercício Daily eight, treino e código. Ok. Eu tenho três notas. E se eu começasse, então agora, então eu tenho três nós. E então, se eu tentar atualizar este. E só aprenda nod JS. Usando Mongo DB e flutter. Se eu apenas atualizá-lo, veja. Temos os acenos de aprendizagem e aqui temos o flutter. E se eu reiniciá-lo novamente, vamos ver. Temos os mesmos dados. É por isso que eu chamo essa função de banco de dados no final depois de notificar os ouvintes, porque, obviamente, a experiência do usuário é muito boa aqui O usuário não precisa esperar para armazenar os dados. Ele pode simplesmente ver isso em sua interface de usuário. E agora, se eu excluir este também, consulte Não, exclua-o com sucesso. Agora temos apenas duas notas, e se eu reiniciei, então apenas duas notas estão sendo buscadas Então, estou feliz que o aplicativo esteja funcionando sem problemas. E aprendemos muito nesse curso. Obviamente, tudo era para o nível iniciante. Mas se você conhece o básico, obviamente , no futuro, também poderá trabalhar em projetos complexos Então, espero que você tenha gostado. Confira meus outros cursos também. Obrigada Tenha um bom dia e continue praticando.