One place for hosting & domains

      Como implementar uma rolagem suave no React


      Introdução

      A rolagem suave é quando em vez de clicar em um botão e ser imediatamente levado a uma parte diferente da mesma página, o usuário é enviado para lá através de uma animação de rolagem. É um daqueles recursos sutis de IU em um site que fazem uma grande diferença estética.

      Neste artigo, você irá usar o pacote react-scroll no npm para implementar uma rolagem suave.

      Pré-requisitos

      Você precisará do seguinte para completar este tutorial:

      Este tutorial foi verificado com o Node v13.14.0, npm v6.14.5, react v16.13.1 e o react-scroll v.1.7.16.

      Você irá construir um aplicativo simples neste tutorial, mas caso deseje um resumo rápido de como o react-scroll funciona, sinta-se a vontade para consultar estes passos condensados:

      Instale o react-scroll:

      npm i -S react-scroll
      

      Importe o pacote react-scroll:

      import { Link, animateScroll as scroll } from "react-scroll";
      

      Adicione o componente de ligação. O componente <Link /> irá apontar para uma determinada área do seu aplicativo:

      <Link to="section1">
      

      Vamos nos aprofundar mais e construir um pequeno aplicativo React com rolagem suave.

      Passo 1 — Instalar e executar um aplicativo React

      Por questões de conveniência, este tutorial ira usar um projeto iniciador do React (usando o Create React App 2.0) que possui uma barra de navegação (ou navbar) no topo, juntamente com cinco seções distintas de conteúdo.

      Os links na barra de navegação são apenas marcadores de ancoragem neste ponto, mas logo serão atualizados para habilitar a rolagem suave.

      O projeto pode ser encontrado em React With Smooth Scrolling. Observe que esse link é para a ramificação de início. A ramificação mestre inclui todas as alterações finalizadas.

      Captura de tela do repositório GitHub

      Para clonar o projeto, use o comando a seguir:

      git clone https://github.com/do-community/React-With-Smooth-Scrolling.git
      

      Se você olhar no diretório src/Components, irá encontrar um arquivo Navbar.js que contém o <Navbar> com nav-items correspondentes a cinco diferentes <Section>s.

      src/Components/Navbar.js

      import React, { Component } from "react";
      import logo from "../logo.svg";
      
      export default class Navbar extends Component {
        render() {
          return (
            <nav className="nav" id="navbar">
              <div className="nav-content">
                <img
                  src={logo}
                  className="nav-logo"
                  alt="Logo."
                  onClick={this.scrollToTop}
                />
                <ul className="nav-items">
                  <li className="nav-item">Section 1</li>
                  <li className="nav-item">Section 2</li>
                  <li className="nav-item">Section 3</li>
                  <li className="nav-item">Section 4</li>
                  <li className="nav-item">Section 5</li>
                </ul>
              </div>
            </nav>
          );
        }
      }
      

      Em seguida, se abrir o arquivo App.js no diretório src, verá onde o <Navbar> está incluído juntamente com as cinco <Section>s.

      src/Components/App.js

      import React, { Component } from "react";
      import logo from "./logo.svg";
      import "./App.css";
      import Navbar from "./Components/Navbar";
      import Section from "./Components/Section";
      import dummyText from "./DummyText";
      class App extends Component {
        render() {
          return (
            <div className="App">
              <Navbar />
              <Section
                title="Section 1"
                subtitle={dummyText}
                dark={true}
                id="section1"
              />
              <Section
                title="Section 2"
                subtitle={dummyText}
                dark={false}
                id="section2"
              />
              <Section
                title="Section 3"
                subtitle={dummyText}
                dark={true}
                id="section3"
              />
              <Section
                title="Section 4"
                subtitle={dummyText}
                dark={false}
                id="section4"
              />
              <Section
                title="Section 5"
                subtitle={dummyText}
                dark={true}
                id="section5"
              />
            </div>
          );
        }
      }
      
      export default App;
      

      Cada componente <Section> assume um title (título) e subtitle (subtítulo).

      Como o projeto está usando textos fictícios nas diferentes seções, de forma a reduzir o código repetido, esse texto foi adicionado em um arquivo DummyText.js, importado e passado para cada componente <Section>.

      Para executar o aplicativo, utilize os comandos a seguir.

      • cd React-With-Smooth-Scrolling
      • npm install
      • npm start

      Isso irá iniciar o aplicativo no modo de desenvolvimento e atualizar automaticamente o aplicativo quando for salvar seus arquivos. É possível visualizá-lo no navegador em localhost:3000.

      Captura de tela do aplicativo no navegador

      Agora, é hora de instalar o pacote react-scroll e adicionar essa funcionalidade. Encontre mais informações para o pacote no npm.

      Pacote react-scroll no npm

      Para instalar o pacote, execute o seguinte comando:

      Em seguida, abra o arquivo Navbar.js novamente e adicione um import para duas importações chamadas Link e animateScroll.

      src/Components/Navbar.js

      import { Link, animateScroll as scroll } from "react-scroll";
      

      Observe que o nome animatedScroll foi alterado para scroll para facilitar o uso.

      Com todas as importações definidas, atualize agora seus nav-items para usar o componente <Link>. Esse componente recebe várias propriedades. Leia mais sobre todas elas na página de documentação.

      Por enquanto, preste bastante atenção no activeClass, to, spy, smooth, offset e duration.

      • activeClass – a classe aplicada quando o elemento é atingido.
      • to – o alvo para onde a rolagem é feita.
      • spy – para tornar o Link selecionado quando o scroll estiver na posição do seu alvo.
      • smooth – para animar a rolagem.
      • offset – para rolar pixels adicionais (como um preenchimento).
      • duration – o tempo que leva a animação de rolagem. Isso pode ser um número ou uma função.

      A propriedade to é a mais importante, já que informa ao componente para qual elemento deve ser feita a rolagem. Neste caso, isso será cada uma das suas <Section>s.

      Com a propriedade offset, é possível definir uma quantidade adicional de rolagem a ser feita de forma a chegar em cada <Section>.

      Aqui está um exemplo das propriedades que você usará para cada componente <Link>. A única diferença entre eles será a propriedade to, já que cada uma delas aponta para uma <Section> distinta:

      <Link
          activeClass="active"
          to="section1"
          spy={true}
          smooth={true}
          offset={-70}
          duration={500}
      >
      

      Será necessário atualizar cada um dos nav-items adequadamente. Com tudo isso adicionado, você deve ser capaz de voltar ao seu navegador (seu aplicativo já deve ter sido reiniciado automaticamente) e ver a rolagem suave em ação.

      A propriedade activeClass permite definir uma classe a ser aplicada no componente <Link> quando o seu elemento to estiver ativo. Um <Link> é considerado ativo se seu elemento to estiver em exibição próximo ao topo da página. Isso pode ser acionado clicando no <Link> em si ou rolando a página até a <Section> manualmente.

      Para provar isso, o Chrome DevTools foi aberto e o quinto <Link> foi inspecionado, assim como mostrado abaixo. Ao clicar nesse <Link> ou manualmente rolar a página até o final, vê-se que a classe ativa foi, de fato, aplicada.

      Visualização do navegador do aplicativo React

      Para aproveitar isso, crie uma classe ativa e adicione um sublinhado ao link. Adicione este pequeno código CSS no arquivo App.css no diretório src:

      src/App.css

      .nav-item > .active {
          border-bottom: 1px solid #333;
      }
      

      Agora, caso volte para o seu navegador e role um pouco na página, perceberá que o <Link> apropriado está sublinhado.

      Visualização do navegador atualizada do aplicativo React

      Passo 4 — Adicionando funções adicionais

      Para finalizar com mais um pouco de conteúdo, este pacote também fornece algumas funções que podem ser chamadas diretamente, como scrollToTop, scrollToBottom, etc., bem como diversos eventos que você pode manipular.

      Em referência a essas funções, tipicamente, o logotipo do aplicativo em uma barra de navegação irá levar o usuário à página inicial ou ao topo da página atual.

      Como um exemplo simples de como chamar uma dessas funções mencionadas, um manipulador de cliques foi adicionado ao nav-logo para trazer o usuário de volta ao topo da página, desta forma:

      src/Components/Navbar.js

      scrollToTop = () => {
          scroll.scrollToTop();
      };
      

      De volta no navegador, você deve ser capaz de rolar a página para baixo, clicar no logotipo na barra de navegação e ser levado de volta para o topo da página.

      Conclusão

      A rolagem suave é um daqueles recursos que pode adicionar um grande valor estético para seu aplicativo. O pacote react-scroll permite que você implemente esse recurso sem uma sobrecarga significativa.

      Neste tutorial, você adicionou uma rolagem suave a um aplicativo e experimentou diferentes configurações. Se tiver curiosidade, explore as outras funções e eventos que este pacote tem a oferecer.



      Source link

      Como construir uma API REST com o Prisma e o PostgreSQL


      O autor selecionou a Diversity in Tech Fund​​​​​ para receber uma doação como parte do programa Write for DOnations.

      Introdução

      O Prisma é um conjunto de ferramentas para banco de dados de código aberto. Ele consiste em três ferramentas principais:

      • Prisma Client: um construtor de consultas gerado automaticamente e fortemente tipado para o Node.js e o TypeScript.
      • Prisma Migrate: um sistema declarativo de modelagem e migração de dados.
      • Prisma Studio: uma GUI para visualizar e editar dados em seu banco de dados

      Essas ferramentas visam aumentar a produtividade de um desenvolvedor de aplicativos em seu fluxo de trabalho com banco de dados. Um dos principais benefícios do Prisma é o nível de abstração que ele fornece: em vez de lidar com consultas SQL ou migrações de esquema complexas, os desenvolvedores de aplicativos podem trabalhar com seus dados de uma maneira mais intuitiva usando o Prisma para trabalhar com seus bancos de dados.

      Neste tutorial, você irá construir uma API REST para um pequeno aplicativo de blog no TypeScript usando o Prisma e um banco de dados PostgreSQL. Você irá configurar seu banco de dados PostgreSQL localmente com o Docker e implementar as rotas da API REST usando o Express. No final do tutorial, você terá um servidor Web sendo executado localmente em sua máquina que pode responder a vários pedidos HTTP, além de ler e escrever dados no banco de dados

      Pré-requisitos

      Este tutorial assume o seguinte:

      Possuir uma familiaridade básica com o TypeScript e as APIs REST é útil, mas não é obrigatório para este tutorial.

      Passo 1 — Criando seu projeto do TypeScript

      Neste passo, você irá configurar um projeto simples do TypeScript usando o npm. Esse projeto servirá como fundação para a API REST que você irá construir ao longo deste tutorial.

      Primeiramente, crie um novo diretório para o seu projeto:

      Em seguida, navegue até o diretório e inicialize um projeto vazio do npm. Observe que a opção -y presente aqui significa que os prompts interativos do comando estão sendo ignorados. Para que os prompts sejam executados, remova o -y do comando:

      Para mais detalhes sobre esses prompts, siga o Passo 1 em Como usar os módulos do Node.js com o npm e o package.json.

      Você receberá um resultado semelhante ao seguinte, com as respostas padrão sendo utilizadas:

      Output

      Wrote to /.../my-blog/package.json: { "name": "my-blog", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }

      Esse comando cria um arquivo package.json mínimo que você usa como o arquivo de configuração para o seu projeto do npm. Agora, você está pronto para configurar o TypeScript em seu projeto.

      Execute o comando a seguir para uma configuração simples do TypeScript:

      • npm install typescript ts-node @types/node --save-dev

      Isso instala três pacotes como dependências de desenvolvimento em seu projeto:

      • typescript: a cadeia de ferramentas do TypeScript.
      • ts-node: um pacote para executar aplicativos do TypeScript sem compilação prévia para JavaScript.
      • @types/node: as definições de tipo do TypeScript para o Node.js.

      A última coisa a ser feita é adicionar um arquivo tsconfig.json para garantir que o TypeScript esteja configurado corretamente para o aplicativo que você irá compilar.

      Primeiramente, execute o comando a seguir para criar o arquivo:

      Adicione o seguinte código JSON ao arquivo:

      my-blog/tsconfig.json

      {
        "compilerOptions": {
          "sourceMap": true,
          "outDir": "dist",
          "strict": true,
          "lib": ["esnext"],
          "esModuleInterop": true
        }
      }
      

      Salve e saia do arquivo.

      Essa é uma configuração padrão e mínima para um projeto do TypeScript. Se quiser aprender sobre as propriedades individuais do arquivo de configuração, procure por elas na documentação do TypeScript.

      Você configurou seu projeto simples do TypeScript usando o npm. Em seguida, irá configurar seu banco de dados do PostgreSQL com o Docker e conectar o Prisma a ele.

      Passo 2 — Configurando o Prisma com o PostgreSQL

      Neste passo, você irá instalar o Prisma CLI, criar seu arquivo de esquema do Prisma inicial, configurar o PostgreSQL com o Docker e conectar o Prisma a ele. O esquema do Prisma é o arquivo de configuração principal para sua configuração do Prisma e contém o esquema do seu banco de dados.

      Comece instalando o Prisma CLI com o seguinte comando:

      • npm install @prisma/cli --save-dev

      Como prática recomendada, aconselha-se instalar o Prisma CLI localmente em seu projeto (ao invés de uma instalação global). Isso ajuda a evitar conflitos de versão caso você tenha mais de um projeto Prisma em sua máquina.

      Em seguida, você irá configurar seu banco de dados do PostgreSQL usando o Docker. Crie um novo arquivo do Docker Compose com o seguinte comando:

      Agora, adicione o código a seguir ao arquivo recém-criado:

      my-blog/docker-compose.yml

      version: '3.8'
      services:
        postgres:
          image: postgres:10.3
          restart: always
          environment:
            - POSTGRES_USER=sammy
            - POSTGRES_PASSWORD=your_password
          volumes:
            - postgres:/var/lib/postgresql/data
          ports:
            - '5432:5432'
      volumes:
        postgres:
      

      Esse arquivo do Docker Compose configura um banco de dados do PostgreSQL que pode ser acessado pela porta 5432 do contêiner do Docker. Observe também que as credenciais do banco de dados estão atualmente definidas como sammy (usuário) e your_password (senha). Sinta-se livre para alterar essas credenciais para o usuário e senha de sua escolha. Salve e saia do arquivo.

      Com essa configuração ajustada, inicie o servidor do banco de dados PostgreSQL com o seguinte comando:

      O resultado deste comando será semelhante a este:

      Output

      Pulling postgres (postgres:10.3)... 10.3: Pulling from library/postgres f2aa67a397c4: Pull complete 6de83ca23e55: Pull complete . . . Status: Downloaded newer image for postgres:10.3 Creating my-blog_postgres_1 ... done

      Verifique se o banco de dados está sendo executado com o seguinte comando:

      Isso irá gerar um resultado semelhante a este:

      Output

      CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 8547f8e007ba postgres:10.3 "docker-entrypoint.s…" 3 seconds ago Up 2 seconds 0.0.0.0:5432->5432/tcp my-blog_postgres_1

      Com o servidor do banco de dados em execução, crie agora sua configuração do Prisma. Execute o comando a seguir a partir do Prisma CLI:

      Isso imprimirá o seguinte resultado:

      Output

      ✔ Your Prisma schema was created at prisma/schema.prisma. You can now open it in your favorite editor.

      Observe que como uma prática recomendada, aconselha-se prefixar todas as invocações do Prisma CLI com o npx. Isso garante que sua instalação local esteja sendo usada.

      Depois de executar o comando, o Prisma CLI criou uma nova pasta chamada prisma em seu projeto. Ela contém os dois arquivos a seguir:

      • schema.prisma: o arquivo de configuração principal para o seu projeto Prisma (incluirá o seu modelo de dados).
      • .env: um arquivo dotenv para definir a URL de conexão do seu banco de dados.

      Para garantir que o Prisma saiba a localização do seu banco de dados, abra o arquivo .env e ajuste a variável de ambiente DATABASE_URL.

      Primeiro, abra o arquivo .env:

      Agora, defina a variável de ambiente da seguinte forma:

      my-blog/prisma/.env

      DATABASE_URL="postgresql://sammy:your_password@localhost:5432/my-blog?schema=public"
      

      Certifique-se de substituir as credenciais do banco de dados por aquelas que você especificou no arquivo do Docker Compose. Para aprender mais sobre o formato da conexão de URL, visite os documentos do Prisma.

      Assim que terminar, salve e feche o arquivo.

      Neste passo, você configurou seu banco de dados do PostgreSQL de dados com o Docker, instalou o Prisma CLI e conectou o Prisma ao banco de dados através de uma variável de ambiente. Na próxima seção, você irá definir seu modelo de dados e criar as tabelas do seu banco de dados.

      Passo 3 — Definindo seu modelo de dados e criando tabelas de banco de dados

      Neste passo, você irá definir seu modelo de dados no arquivo do esquema do Prisma. Esse modelo de dados será então mapeado para o banco de dados com o Prisma Migrate, que irá gerar e enviar as instruções SQL para criar as tabelas que correspondem ao seu modelo de dados. Como você está criando um aplicativo de blog, as principais entidades do aplicativo serão usuários e postagens.

      O Prisma usa sua própria linguagem de modelagem de dados para definir a forma dos dados do seu aplicativo.

      Primeiro, abra seu arquivo schema.prisma com o seguinte comando:

      • nano prisma/schema.prisma

      Agora, adicione as seguintes definições de modelo a ele. Coloque os modelos no final do arquivo, logo após o bloco generator client:

      my-blog/prisma/schema.prisma

      . . .
      model User {
        id    Int     @default(autoincrement()) @id
        email String  @unique
        name  String?
        posts Post[]
      }
      
      model Post {
        id        Int     @default(autoincrement()) @id
        title     String
        content   String?
        published Boolean @default(false)
        author    User?   @relation(fields: [authorId], references: tag:www.digitalocean.com,2005:/community/tutorials/how-to-build-a-rest-api-with-prisma-and-postgresql-pt)
        authorId  Int?
      }
      

      Salve e saia do arquivo.

      Você está definindo dois modelos, chamados User e Post. Cada um deles tem um número de campos que representam as propriedades do modelo. Os modelos serão mapeados para as tabelas do banco de dados; os campos representam as colunas individuais.

      Observe também que existe uma relação de uma para muitos entre os dois modelos, especificada pelos campos de relação posts e author em User e Post. Isso significa que um usuário pode estar associado a muitas postagens.

      Com esses modelos posicionados, crie agora as tabelas correspondentes no banco de dados usando o Prisma Migrate. No seu terminal, execute o seguinte comando:

      • npx prisma migrate save --experimental --create-db --name "init"

      Esse comando cria uma nova migração em seu sistema de arquivos Aqui está uma visão geral resumida das três opções que são fornecidas ao comando:

      • --experimental: é necessário porque o Prisma Migrate está atualmente em um estado experimental.
      • --create-db: permite que o Prisma Migrate crie o banco de dados chamado my-blog que é especificado na URL de conexão.
      • --name "init": especifica o nome da migração (será usado para nomear a pasta de migração que será criada em seu sistema de arquivos).

      O resultado deste comando será semelhante a este:

      Output

      New datamodel: // This is your Prisma schema file, // learn more about it in the docs: https://pris.ly/d/prisma-schema datasource db { provider = "postgresql" url = env("DATABASE_URL") } generator client { provider = "prisma-client-js" } model User { id Int @default(autoincrement()) @id email String @unique name String? posts Post[] } model Post { id Int @default(autoincrement()) @id title String content String? published Boolean @default(false) author User? @relation(fields: [authorId], references: tag:www.digitalocean.com,2005:/community/tutorials/how-to-build-a-rest-api-with-prisma-and-postgresql-pt) authorId Int? } Prisma Migrate just created your migration 20200811140708-init in migrations/ └─ 20200811140708-init/ └─ steps.json └─ schema.prisma └─ README.md

      Sinta-se à vontade para explorar os arquivos de migração que foram criados no diretório prisma/migrations.

      Para executar a migração em seu banco de dados e criar as tabelas para seus modelos do Prisma, execute o seguinte comando em seu terminal:

      • npx prisma migrate up --experimental

      Você receberá o seguinte resultado:

      Output

      . . . Checking the datasource for potential data loss... Database Changes: Migration Database actions Status 20200811140708-init 2 CreateTable statements. Done 🚀 You can get the detailed db changes with prisma migrate up --experimental --verbose Or read about them here: ./migrations/20200811140708-init/README.md 🚀 Done with 1 migration in 206ms.

      O Prisma Migrate agora gera as declarações SQL que são necessárias para a migração e as envia para o banco de dados. Vê-se a seguir as instruções SQL que criaram as tabelas:

      CREATE TABLE "public"."User" (
        "id" SERIAL,
        "email" text  NOT NULL ,
        "name" text   ,
        PRIMARY KEY ("id")
      )
      
      CREATE TABLE "public"."Post" (
        "id" SERIAL,
        "title" text  NOT NULL ,
        "content" text   ,
        "published" boolean  NOT NULL DEFAULT false,
        "authorId" integer   ,
        PRIMARY KEY ("id")
      )
      
      CREATE UNIQUE INDEX "User.email" ON "public"."User"("email")
      
      ALTER TABLE "public"."Post" ADD FOREIGN KEY ("authorId")REFERENCES "public"."User"("id") ON DELETE SET NULL ON UPDATE CASCADE
      

      Neste passo, você definiu seu modelo de dados em seu esquema do Prisma e criou as respectivas tabelas de bancos de dados com o Prisma Migrate. No próximo passo, você irá instalar o Prisma Client em seu projeto para que seja possível consultar o banco de dados.

      Passo 4 — Explorando as consultas do Prisma Client em um script simples

      O Prisma Client é um construtor de consultas gerado automaticamente e fortemente tipado que pode ser usado para ler e escrever dados programaticamente em um banco de dados a partir de um aplicativo Node.js ou TypeScript. Você irá usá-lo para ter acesso ao banco de dados em suas rotas da API REST, substituindo as ORMs tradicionais, consultas SQL simples, camadas de acesso de dados personalizadas, ou qualquer outro método de comunicação com um banco de dados.

      Neste passo, você irá instalar o Prisma Client e familiarizar-se com as consultas que podem ser enviadas com ela. Antes de implementar as rotas para sua API REST nos próximos passos, primeiro irá explorar algumas das consultas do Prisma Client em um script simples e executável.

      Primeiro, instale o Prisma Client em seu projeto abrindo seu terminal e instalando o pacote npm do Prisma Client:

      • npm install @prisma/client

      Em seguida, crie um novo diretório chamado src que irá conter seus arquivos de origem:

      Agora, crie um arquivo do TypeScript dentro do novo diretório:

      Todas as consultas do Prisma Client retornam promessas que você pode await (aguardar) em seu código. Isso requer que você envie as consultas dentro de uma função async (assíncrona).

      Adicione o seguinte texto clichê com uma função async a ser executada em seu script:

      my-blog/src/index.ts

      import { PrismaClient } from '@prisma/client'
      
      const prisma = new PrismaClient()
      
      async function main() {
        // ... your Prisma Client queries will go here
      }
      
      main()
        .catch((e) => console.error(e))
        .finally(async () => await prisma.disconnect())
      

      Aqui está um rápido detalhamento do código boilerplate.

      1. Você importa o construtor PrismaClient do pacote npm @prisma/client previamente instalado.
      2. Você instancia o PrismaClient chamando o construtor e obtém uma instância chamada prisma.
      3. Você define uma função async chamada main onde irá adicionar suas consultas do Prisma Client a seguir.
      4. Você chama a função main, enquanto captura todas as exceções em potencial e certifica-se de que o Prisma Client feche todas as conexões do banco de dados abertas chamando o prisma.disconnect().

      Com a função main no lugar, comece a adicionar as consultas do Prisma Client ao script. Ajuste o index.ts para que fique parecido com o seguinte:

      my-blog/src/index.ts

      import { PrismaClient } from '@prisma/client'
      
      const prisma = new PrismaClient()
      
      async function main() {
        const newUser = await prisma.user.create({
          data: {
            name: 'Alice',
            email: '[email protected]',
            posts: {
              create: {
                title: 'Hello World',
              },
            },
          },
        })
        console.log('Created new user: ', newUser)
      
        const allUsers = await prisma.user.findMany({
          include: { posts: true },
        })
        console.log('All users: ')
        console.dir(allUsers, { depth: null })
      }
      
      main()
        .catch((e) => console.error(e))
        .finally(async () => await prisma.disconnect())
      

      Neste código, duas consultas do Prisma Client estão sendo usadas:

      • create: cria um novo registro de User. Observe que você está usando na verdade um texto aninhado, o que significa que um registro de User e Post estão sendo criados na mesma consulta.
      • findMany: lê todos os registros de User existentes no banco de dados Você está fornecendo a opção include que carrega também os registros de Post relacionados para cada registro de User.

      Agora, execute o script com o seguinte comando:

      Você verá o seguinte resultado em seu terminal:

      Output

      Created new user: { id: 1, email: '[email protected]', name: 'Alice' } [ { id: 1, email: '[email protected]', name: 'Alice', posts: [ { id: 1, title: 'Hello World', content: null, published: false, authorId: 1 } ] }

      Nota: se estiver usando a GUI de um banco de dados, é possível confirmar que os dados foram criados olhando nas tabelas User e Post. De maneira alternativa, você pode explorar os dados do Prisma Studio executando npx prisma studio --experimental.

      Até aqui, você usou o Prisma Client para ler e escrever dados em seu banco de dados. Nos passos restantes, você irá aplicar esse novo conhecimento para implementar as rotas para uma API REST amostral.

      Passo 5 — Implementando sua primeira rota da API REST

      Neste passo, você irá instalar o Express em seu aplicativo. O Express é um framework Web popular para o Node.js que será usado para implementar as rotas da sua API REST neste projeto. A primeira rota a ser implementada lhe permitirá buscar todos os usuários da API usando uma solicitação GET. Os dados do usuário serão recuperados do banco de dados usando o Prisma Client.

      Vá em frente e instale o Express com o seguinte comando:

      Como você está usando TypeScript, também será necessário instalar os respectivos tipos como dependências de desenvolvimento. Execute o comando a seguir para fazer isso:

      • npm install @types/express --save-dev

      Com as dependências no lugar, configure agora sua aplicação Express.

      Comece abrindo seu arquivo de código de origem principal novamente:

      Agora, exclua todo o código em index.ts e substitua-o pelo seguinte, de forma a iniciar sua API REST:

      my-blog/src/index.ts

      import { PrismaClient } from '@prisma/client'
      import express from 'express'
      
      const prisma = new PrismaClient()
      const app = express()
      
      app.use(express.json())
      
      // ... your REST API routes will go here
      
      app.listen(3000, () =>
        console.log('REST API server ready at: http://localhost:3000'),
      )
      

      Aqui está um rápido detalhamento do código:

      1. Você importa o PrismaClient e o express dos respectivos pacotes npm.
      2. Você instancia o PrismaClient chamando o construtor e obtém uma instância chamada prisma.
      3. Você cria seu aplicativo Express chamando o express().
      4. Você adiciona o middleware express.json() para garantir que os dados JSON sejam processados corretamente pelo Express.
      5. Você inicia o servidor na porta 3000.

      Agora, implemente sua primeira rota. Adicione o seguinte código entre as chamadas para app.use e app.listen:

      my-blog/src/index.ts

      . . .
      app.use(express.json())
      
      app.get('/users', async (req, res) => {
        const users = await prisma.user.findMany()
        res.json(users)
      })
      
      app.listen(3000, () =>
      console.log('REST API server ready at: http://localhost:3000'),
      )
      

      Depois de adicionado, salve e saia do seu arquivo. Em seguida, inicie seu servidor Web local usando o seguinte comando:

      Você receberá o seguinte resultado:

      Output

      REST API server ready at: http://localhost:3000

      Para acessar a rota /users, aponte seu navegador para http://localhost:3000/users ou qualquer outro cliente HTTP.

      Neste tutorial, você irá testar todas as rotas da API REST usando o curl, um cliente HTTP baseado em terminal.

      Nota: se preferir usar um cliente HTTP baseado em GUI, pode usar o Postwoman ou o Advanced REST Client.

      Para testar sua rota, abra uma nova janela ou guia de terminal (para que o seu servidor Web local continue sendo executado) e execute o seguinte comando:

      • curl http://localhost:3000/users

      Você receberá os dados de User que você criou no passo anterior:

      Output

      [{"id":1,"email":"[email protected]","name":"Alice"}]

      Observe que a matriz posts não foi incluída desta vez. Isso ocorre porque a opção include não está sendo passada para a chamada findMany na implementação da rota /users.

      Você implementou sua primeira rota da API REST em /users. No próximo passo, você irá implementar as rotas restantes da API REST para adicionar mais funcionalidade à sua API.

      Passo 6 — Implementando as rotas restantes da API REST

      Neste passo, você irá implementar as rotas restantes da API REST para seu aplicativo de blog. No final, seu servidor Web irá atender diversas solicitações GET, POST, PUT, e DELETE.

      Aqui está uma visão geral das diferentes rotas que serão implementadas:

      Método HTTPRotaDescrição
      GET/feedBusca todos os posts publicados.
      GET/post/:idBusca um post específico com base em seu ID.
      POST/userCria um novo usuário.
      POST/postCria um novo post (como um rascunho).
      PUT/post/publish/:idDefine o campo published (publicado) de um post como true (verdadeiro).
      DELETEpost/:idExclui um post por seu ID.

      Vá em frente e implemente as rotas GET restantes primeiro.

      Abra o index.ts com o seguinte comando:

      Em seguida, adicione o código a seguir após a implementação da rota /users:

      my-blog/src/index.ts

      . . .
      
      app.get('/feed', async (req, res) => {
        const posts = await prisma.post.findMany({
          where: { published: true },
          include: { author: true }
        })
        res.json(posts)
      })
      
      app.get(`/post/:id`, async (req, res) => {
        const { id } = req.params
        const post = await prisma.post.findOne({
          where: { id: Number(id) },
        })
        res.json(post)
      })
      
      app.listen(3000, () =>
        console.log('REST API server ready at: http://localhost:3000'),
      )
      

      Salve e saia do seu arquivo.

      Esse código implementa as rotas API para duas solicitações GET:

      • /feed: retorna uma lista de posts publicados.
      • /post/:id: retorna um post específico por seu ID.

      O Prisma Client é usado em ambas as implementações. Na implementação de rota /feed, a consulta enviada com o Prisma Client filtra por todos os registros de Post onde a coluna published contém o valor true. Além disso, a consulta do Prisma Client usa include (incluir) para também buscar as informações de author relacionadas para cada post retornado. Na implementação de rota /post/:id, o ID que é recuperado do caminho do URL é passado para ler um registro de Post específico do banco de dados.

      Você pode interromper o servidor apertando CTRL+C em seu teclado. Em seguida, reinicie o servidor usando:

      Para testar a rota /feed, use o seguinte comando curl:

      • curl http://localhost:3000/feed

      Como nenhum post ainda foi publicado, a resposta é uma matriz vazia:

      Output

      []

      Para testar a rota /post/:id, use o seguinte comando curl:

      • curl http://localhost:3000/post/1

      Isso irá retornar o post que você criou inicialmente:

      Output

      {"id":1,"title":"Hello World","content":null,"published":false,"authorId":1}

      Em seguida, implemente as duas rotas POST. Adicione o código a seguir em index.ts após as implementações das três rotas GET:

      my-blog/src/index.ts

      . . .
      
      app.post(`/user`, async (req, res) => {
        const result = await prisma.user.create({
          data: { ...req.body },
        })
        res.json(result)
      })
      
      app.post(`/post`, async (req, res) => {
        const { title, content, authorEmail } = req.body
        const result = await prisma.post.create({
          data: {
            title,
            content,
            published: false,
            author: { connect: { email: authorEmail } },
          },
        })
        res.json(result)
      })
      
      app.listen(3000, () =>
        console.log('REST API server ready at: http://localhost:3000'),
      )
      

      Assim que terminar, salve e feche o arquivo.

      Esse código implementa as rotas API para duas solicitações POST:

      • /user: cria um novo usuário no banco de dados.
      • /post: cria um novo post no banco de dados.

      Assim como antes, o Prisma Client é usado em ambas as implementações. Na implementação de rota /user, são passados os valores do corpo da solicitação HTTP para a consulta create do Prisma Client.

      A rota /post é um pouco mais confusa: aqui não é possível passar diretamente os valores do corpo da solicitação HTTP; em vez disso, é necessário primeiro extraí-los manualmente para passá-los para a consulta do Prisma Client. A razão por trás disso é que a estrutura do JSON no corpo da solicitação não corresponde à estrutura esperada pelo Prisma Client. Sendo assim, é necessário criar manualmente a estrutura esperada.

      Você pode testar as novas rotas interrompendo o servidor com CTRL+C. Em seguida, reinicie o servidor usando:

      Para criar um novo usuário com a rota /user, envie a seguinte solicitação POST com o o curl:

      • curl -X POST -H "Content-Type: application/json" -d '{"name":"Bob", "email":"[email protected]"}' http://localhost:3000/user

      Isso irá criar um novo usuário no banco de dados, imprimindo o seguinte resultado:

      Output

      {"id":2,"email":"[email protected]","name":"Bob"}

      Para criar um novo post através da rota /post, envie a seguinte solicitação POST com o curl:

      • curl -X POST -H "Content-Type: application/json" -d '{"title":"I am Bob", "authorEmail":"[email protected]"}' http://localhost:3000/post

      Isso irá criar um novo post no banco de dados e conectá-lo ao usuário com e-mail [email protected]. O seguinte resultado será impresso:

      Output

      {"id":2,"title":"I am Bob","content":null,"published":false,"authorId":2}

      Por fim, é possível implementar as rotas PUT e DELETE.

      Abra o index.ts com o seguinte comando:

      Em seguida, adicione o código destacado após a implementação das duas rotas POST:

      my-blog/src/index.ts

      . . .
      
      app.put('/post/publish/:id', async (req, res) => {
        const { id } = req.params
        const post = await prisma.post.update({
          where: { id: Number(id) },
          data: { published: true },
        })
        res.json(post)
      })
      
      app.delete(`/post/:id`, async (req, res) => {
        const { id } = req.params
        const post = await prisma.post.delete({
          where: { id: Number(id) },
        })
        res.json(post)
      })
      
      app.listen(3000, () =>
        console.log('REST API server ready at: http://localhost:3000'),
      )
      

      Salve e saia do seu arquivo.

      Esse código implementa as rotas API para uma solicitação PUT e uma DELETE:

      • /post/publish/:id (PUT): publica um post por seu ID.
      • /post/:id (DELETE): exclui um post por seu ID.

      Novamente, o Prisma Client é usado em ambas as implementações. Na implementação de rota /post/publish/:id, o ID do post a ser publicado é recuperado da URL e passado para a consulta update do Prisma Client. A implementação da rota /post/:id para excluir um post no banco de dados também recupera o ID do post da URL e o passa para a consulta delete do Prisma Client.

      Novamente, interrompa o servidor com CTRL+C em seu teclado. Em seguida, reinicie o servidor usando:

      Teste a rota PUT com o seguinte comando curl:

      • curl -X PUT http://localhost:3000/post/publish/2

      Isso irá publicar o post com um valor de ID de 2. Se você reenviar a solicitação /feed, esse post será agora incluído na resposta.

      Por fim, teste a rota DELETE com o seguinte comando curl:

      • curl -X DELETE http://localhost:3000/post/1

      Isso irá excluir o post com um valor de ID de 1. Para confirmar se o post com este ID foi excluído, reenvie uma solicitação GET para a rota /post/1.

      Neste passo, você implementou as rotas restantes da API REST para seu aplicativo de blog. A API agora responde a várias solicitações GET, POST, PUT e DELETE e implementa funcionalidades para ler e escrever dados no banco de dados.

      Conclusão

      Neste artigo, você criou um servidor da API REST com uma série de rotas distintas para criar, ler, atualizar e excluir dados de usuários e posts para um aplicativo de blog amostral. Dentro das rotas da API, você usou o Prisma Client para enviar as respectivas consultas para seu banco de dados.

      Como passos adicionais, você pode implementar rotas de API adicionais ou estender seu esquema de banco de dados com o Prisma Migrate. Certifique-se de visitar a documentação do Prisma para aprender sobre os diferentes aspectos do Prisma e explorar alguns exemplos de projetos prontos para serem executados no repositório prisma-examples. Por exemplo, como usar ferramentas como o GraphQL ou o grPC APIs.



      Source link

      Como instalar uma pilha ERPNext no Ubuntu 18.04


      O autor selecionou a Software in the Public Interest para receber uma doação como parte do programa Write for DOnations.

      Introdução

      O ERPNext é uma suíte de Planejamento de Recursos Empresariais (ERP) que aproveita o poder e a flexibilidade das tecnologias de código aberto. Ele se destaca no gerenciamento de processos de negócio fundamentais, como finanças, vendas, recursos humanos, fabricação, compras, serviços, necessidades de assistência técnica e muito mais. Entre os benefícios da implementação de um sistema como o ERPNext estão:

      • Melhor produtividade, automatizando processos de negócio repetitivos
      • Melhoria da eficiência de TI através do compartilhamento de um banco de dados para todos os departamentos dentro da empresa
      • Melhor tomada de decisão graças a uma visão integral de como as unidades de negócios se relacionam entre si

      O ERPNext é baseado no Frappe, um framework Web full-stack de aplicativos escrito em Python que aproveita ao máximo o ambiente de tempo de execução Node/JavaScript e usa o MariaDB como seu banco de dados de back-end. Uma das muitas vantagens dos aplicativos baseados no Frappe, como o ERPNext, é o utilitário de linha de comando bench. O CLI do bench economiza tempo dos administradores automatizando tarefas como instalar, atualizar, configurar e gerenciar vários sites do Frappe/ERPNext.

      Neste tutorial, você irá instalar e configurar uma pilha ERPNext em um servidor executando o Ubuntu 18.04. Isso permitirá que você configure sua pilha para vários ambientes de desenvolvimento ou produção dependendo das suas necessidades. Além disso, isso irá prepará-lo para construir uma arquitetura mais complexa e tolerante a falhas.

      Pré-requisitos

      Nota: ao escolher as especificações do seu servidor, tenha em mente que os sistemas ERP consomem muitos recursos. Este guia exige um servidor com 4 GB de RAM, que será suficiente para casos de uso básicos. No entanto, os requisitos específicos de hardware podem variar dependendo do número de usuários e do tamanho do seu negócio.

      • Um nome de domínio totalmente registrado com um registro A apontado para seu servidor. Se você estiver usando um Droplet da DigitalOcean, então você pode seguir este guia para configurar corretamente seu DNS. Este tutorial utilizará o your_domain durante todo o processo.

      Passo 1 — Configurando o firewall

      Embora configurar um firewall para o desenvolvimento seja opcional, para a produção, isso é uma prática de segurança obrigatória.

      Você precisará abrir as seguintes portas em seu servidor ERPNext:

      • 80/tcp e 443/tcp para o HTTP e HTTPS respectivamente
      • 3306/tcp para a conexão do MariaDB (recomendado apenas se precisar de acesso remoto ao banco de dados)
      • 143/tcp e 25/tcp para o IMAP e STMP respectivamente
      • 22/tcp para o SSH (se você ainda não tiver ativado o OpenSSH)
      • 8000/tcp para testes de desenvolvimento antes de implantar seu site

      Para abrir várias portas ao mesmo tempo, utilize o seguinte comando:

      • sudo ufw allow 22,25,143,80,443,3306,8000/tcp

      De maneira alternativa, você pode permitir conexões vindas de endereços IP específicos em portas específicas usando este comando:

      • sudo ufw allow from server_IP to any port port_number

      Depois de abrir todas as portas necessárias,o ative o firewall:

      Depois de ativar o firewall, confirme o status de suas portas abertas:

      Para mais informações sobre a configuração do firewall, leia nosso guia How To Set Up a Firewall with UFW on Ubuntu 18.04.

      Configurar um firewall adequado é o primeiro dos dois passos preliminares. Agora, você irá configurar o mapeamento de teclado e a codificação de caracteres no seu servidor.

      Passo 2 — Configurando localidades

      É altamente recomendado que você configure o mapeamento de teclado para o console, bem como a linguagem e a codificação de caracteres no seu host. Isso é necessário para evitar possíveis problemas durante o processo de instalação do ERPNext 12. Observe que essa configuração não tem nada a ver com a linguagem UI na sua plataforma ERPNext em si, mas com a configuração de localidades do sistema.

      Primeiro, atualize seu servidor:

      Agora, configure o keymap, a linguagem e a codificação de caracteres:

      • sudo localectl set-keymap us && sudo localectl set-locale LANG=en_US.utf8

      O utilitário localectl é usado pelo Ubuntu 18.04 e outras distribuições Linux para controlar e alterar as configurações de localidade e de layout de teclado em todo o sistema antes do usuário fazer login, que é exatamente o que o ERPNext 12 necessita.

      Você também precisará adicionar as seguintes linhas ao seu arquivo /etc/environment. Use o nano ou seu editor de texto preferido para abrir o arquivo:

      • sudo nano /etc/environment

      Agora, adicione o conteúdo a seguir:

      /etc/environment

      LC_ALL=en_US.UTF-8
      LC_CTYPE=en_US.UTF-8
      LANG=en_US.UTF-8
      

      Salve e feche o arquivo.

      Reinicialize seu servidor para aplicar todas as alterações:

      Dê ao seu servidor alguns minutos para reinicializar e então fazer um ssh nele. Agora, você está pronto para instalar seu banco de dados.

      Passo 3 — Instalando o MariaDB 10.4

      Agora, você irá adicionar o MariaDB à sua pilha de servidor. O ERPNext 12 requer o MariaDB 10.2+, mas a versão incluída no repositório oficial do Ubuntu 18.04 é a 10.1, o que significa que você precisará instalar uma versão superior. Para os propósitos deste guia, você irá usar a versão mais recente do MariaDB, que no momento da escrita deste artigo é a versão 10.4.

      Para instalar o MariaDB 10.4 no Ubuntu 18.04, você precisará adicionar a chave de assinatura e o repositório apropriados. Você pode encontrar essas informações no assistente do repositório da Fundação MariaDB. Visite esta URL em seu navegador Web. Agora, sob 1. Choose a Distro, clique em Ubuntu. Uma segunda coluna intitulada 2. Choose a Release irá aparecer. Abaixo deste título, clique em 18.04 LTS “bionic”. Uma terceira coluna intitulada 3.Choose a Version então aparecerá. Abaixo deste clique em 10.4 stable. Uma terceira coluna intitulada 4.Choose a Mirror então aparecerá. Escolha um espelho baseado em sua localização e então o MariaDB irá preencher os comandos adequados para sua instalação personalizada.

      MariaDB repo wizard

      Execute os três comandos preenchidos, que adicionarão corretamente o repositório e a chave do MariaDB. Seus próprios comandos serão parecidos com este:

      • sudo apt-get install software-properties-common && sudo apt-key adv --fetch-keys 'https://mariadb.org/mariadb_release_signing_key.asc' && sudo add-apt-repository 'deb [arch=amd64,arm64,ppc64el] http://mirror.klaus-uwe.me/mariadb/repo/10.4/ubuntu bionic main'

      Depois de terminar de adicionar o repositório, instale o MariaDB:

      • sudo apt install mariadb-server

      Depois de instalar o mariadb-server, instale os seguintes pacotes:

      • sudo apt install libmysqlclient-dev python3-mysqldb

      O ERPNext 12 é uma aplicação Python e, portanto, ele requer a biblioteca python3-mysqldb para o gerenciamento do banco de dados. Quanto ao libmysqlclient-dev, mariadb-client, e libmariadbclient18: esses pacotes permitem aos usuários se comunicar com o serviço MariaDB. O ntpdate e o libdate-manip-perl são usados pelo ERPNext para a sincronização de tempo do servidor.

      Em seguida, adicione uma camada básica de segurança ao servidor MariaDB executando o script mysql_secure_installation:

      • sudo mysql_secure_installation

      O script mysql_secure_installation solicitará que você responda a várias perguntas:

      • O primeiro prompt irá perguntar-lhe sobre a senha do root. Como ainda não existe nenhuma senha configurada, pressione ENTER.
      • Em seguida, você terá que decidir usar a autenticação do Unix ou não. Responda Y para aceitar este método de autenticação.
      • Quando perguntado sobre a alteração da senha do root do MariaDB, responda N. Usar a senha padrão juntamente com a autenticação do Unix é a configuração recomendada para sistemas baseados no Ubuntu, pois a conta root está intimamente relacionada com tarefas de manutenção automatizadas do sistema.
      • As perguntas restantes têm a ver com remover o usuário anônimo do banco de dados, restringir a conta root para fazer login remotamente no localhost, remover o banco de dados de teste e recarregar as tabelas de privilégio. É seguro responder Y a todas essas perguntas.

      Depois de completar o script mysql_secure_installation, o MariaDB será iniciado usando sua configuração padrão. A instalação padrão do ERPNext usa o usuário root do MariaDB’s para todas as operações de banco de dados. Embora essa abordagem possa ser conveniente em configurações com um único servidor, ela não é considerada uma boa prática de segurança. Dessa forma,na próxima seção, você irá aprender como evitar este problema criando um novo usuário com privilégios especiais.

      Como criar um usuário super administrador do MariaDB

      O ERPNext espera usar o usuário root do MariaDB para o gerenciamento de conexões de banco de dados, mas isso nem sempre é ideal. Para superar essa limitação e deixar um usuário não-root gerenciar o MariaDB, você terá que criar manualmente um banco de dados com o nome do usuário. Depois disso, será capaz de atribuir privilégios especiais ao novo usuário para que ele conduza as operações de banco de dados do ERPNext.

      Abra o prompt do MariaDB:

      Agora, crie um novo banco de dados com o nome do usuário que você deseja atribuir para as conexões do MariaDB. Este tutorial irá usar sammy, mas você está livre para escolher seu próprio nome:

      Confirme se o banco de dados foi criado usando esta declaração SQL:

      Você verá um resultado parecido com este:

      Output

      +--------------------+ | Database | +--------------------+ | information_schema | | mysql | | performance_schema | | sammy | +--------------------+

      Agora, crie o usuário sammy do MariaDB com privilégios semelhantes ao root e então dê a ele uma senha forte da sua escolha. Mantenha a senha em um lugar seguro; você precisará dela mais tarde:

      • GRANT ALL PRIVILEGES ON *.* TO 'sammy'@'%' IDENTIFIED BY 'mariadb_password' WITH GRANT OPTION;

      Agora, confirme tanto a criação do usuário quanto dos privilégios do novo usuário:

      • SELECT host, user, Super_priv FROM mysql.user;

      Você verá uma saída como esta:

      Output

      +-----------+-------+------------+ | Host | User | Super_priv | +-----------+-------+------------+ | localhost | root | Y | | localhost | mysql | Y | | % | sammy | Y | +-----------+-------+------------+ 3 rows in set (0.001 sec)

      Em seguida, libere os privilégios para aplicar todas as alterações:

      Depois de terminar, saia da sessão:

      Agora que você criou um usuário do banco de dados, precisa apenas ajustar o MariaDB para garantir uma operação adequada do ERPNext 12. Felizmente, a equipe do ERPNext fornece um excelente modelo de configuração que será usado como um ponto de partida para sua implementação. Na próxima seção, você irá aprender como configurar corretamente o banco de dados do MariaDB usando esse modelo.

      Passo 4 — Configurando o MariaDB para o ERPNext

      Com o MariaDB instalado e protegido, é hora de ajustá-lo para as conexões do ERPNext.

      Primeiro, interrompa o mariadb.service:

      • sudo systemctl stop mariadb

      Agora, use o nano ou seu editor de texto favorito para criar um arquivo de configuração do MariaDB chamado settings.cnf:

      • sudo nano /etc/mysql/conf.d/settings.cnf

      Agora, adicione o modelo de configuração do ERPNext:

      /etc/mysql/conf.d/settings.cnf

      [mysqld]
      
      # GENERAL #
      user                           = mysql
      default-storage-engine         = InnoDB
      socket                         = /var/lib/mysql/mysql.sock
      pid-file                       = /var/lib/mysql/mysql.pid
      
      # MyISAM #
      key-buffer-size                = 32M
      myisam-recover                 = FORCE,BACKUP
      
      # SAFETY #
      max-allowed-packet             = 256M
      max-connect-errors             = 1000000
      innodb                         = FORCE
      
      # DATA STORAGE #
      datadir                        = /var/lib/mysql/
      
      # BINARY LOGGING #
      log-bin                        = /var/lib/mysql/mysql-bin
      expire-logs-days               = 14
      sync-binlog                    = 1
      
      # REPLICATION #
      server-id                      = 1
      
      # CACHES AND LIMITS #
      tmp-table-size                 = 32M
      max-heap-table-size            = 32M
      query-cache-type               = 0
      query-cache-size               = 0
      max-connections                = 500
      thread-cache-size              = 50
      open-files-limit               = 65535
      table-definition-cache         = 4096
      table-open-cache               = 10240
      
      # INNODB #
      innodb-flush-method            = O_DIRECT
      innodb-log-files-in-group      = 2
      innodb-log-file-size           = 512M
      innodb-flush-log-at-trx-commit = 1
      innodb-file-per-table          = 1
      innodb-buffer-pool-size        = 5462M
      innodb-file-format             = barracuda
      innodb-large-prefix            = 1
      collation-server               = utf8mb4_unicode_ci
      character-set-server           = utf8mb4
      character-set-client-handshake = FALSE
      max_allowed_packet             = 256M
      
      # LOGGING #
      log-error                      = /var/lib/mysql/mysql-error.log
      log-queries-not-using-indexes  = 0
      slow-query-log                 = 1
      slow-query-log-file            = /var/lib/mysql/mysql-slow.log
      
      [mysql]
      default-character-set = utf8mb4
      
      [mysqldump]
      max_allowed_packet=256M
      
      !includedir /etc/mysql/mariadb.conf.d/
      

      Salve e feche o arquivo. Para obter informações mais detalhadas sobre essas configurações, revise este arquivo modelo no repositório Github do ERPNext. Ele é um ponto de partida útil para explorar essas opções.

      Em seguida, crie outro arquivo chamado erpnext.cnf:

      • sudo nano /etc/mysql/mariadb.conf.d/erpnext.cnf

      Adicione o conteúdo a seguir ao arquivo:

      /etc/mysql/mariadb.conf.d/erpnext.cnf

      [mysqld]
      pid-file        = /var/run/mysqld/mysqld.pid
      socket          = /var/run/mysqld/mysqld.sock
      bind-address    = 0.0.0.0
      

      O primeiro arquivo, /etc/mysql/conf.d/settings.cnf complementa e também sobrepõe alguns valores incluídos na configuração padrão do MariaDB localizada em /etc/mysql/my.cnf. Este arquivo oferece um modelo curado que melhora muito o desempenho de banco de dados para o ERPNext. No entanto, tenha em mente que, embora esse modelo seja um ótimo ponto de partida, nada impede que você melhore o desempenho do MariaDB ainda mais ajustando esses parâmetros para atender às suas necessidades.

      O segundo arquivo, o /etc/mysql/mariadb.conf.d/erpnext.cnf, também sobrepõe alguns valores introduzindo informações específicas sobre a sua conexão de banco de dados.

      Testando a conexão do MariaDB

      Como o ERPNext depende da conexão de banco de dados para quase todas as suas operações internas, é uma boa ideia testar a conexão antes de continuar.

      Inicie o mariadb.service:

      • sudo systemctl start mariadb

      Para testar a conexão, use o seguinte comando. Lembre-se de substituir sammy e mariadb_password por suas próprias credenciais:

      • mysql --user sammy --password mariadb_password --host=localhost --protocol=tcp --port=3306 test

      Você verá um resultado mostrando o conteúdo básico de ajuda do MariaDB, bem como diversos parâmetros. Isso significa que sua conexão foi bem sucedida:

      Output

      mysql Ver 15.1 Distrib 10.4.13-MariaDB, for debian-linux-gnu (x86_64) using readline 5.2 Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others. Usage: mysql [OPTIONS] [database] Default options are read from the following files in the given order: /etc/my.cnf /etc/mysql/my.cnf ~/.my.cnf ... --ssl-verify-server-cert Verify server's "Common Name" in its cert against hostname used when connecting. This option is disabled by default. -t, --table Output in table format. --tee=name Append everything into outfile. See interactive help (h) also. Does not work in batch mode. Disable with --disable-tee. This option is disabled by default. -u, --user=name User for login if not current user. -U, --safe-updates Only allow UPDATE and DELETE that uses keys. -U, --i-am-a-dummy Synonym for option --safe-updates, -U. -v, --verbose Write more. (-v -v -v gives the table output format). ... max-join-size 1000000 secure-auth FALSE show-warnings FALSE plugin-dir (No default value) default-auth (No default value) binary-mode FALSE connect-expired-password FALSE

      Se precisar fazer qualquer ajuste nas configurações do MariaDB, ou corrigir qualquer erro, lembre-se de recarregar o serviço usando o seguinte comando:

      • sudo systemctl restart mariadb

      Depois de terminar, ative o MariaDB:

      • sudo systemctl enable mariadb

      Agora que você testou a conexão do banco de dados, continue com a instalação do seu aplicativo ERPNext.

      Passo 5 — Configurando o ERPNext 12

      Agora que o banco de dados está pronto, continue configurando seu aplicativo Web ERPNext. Nesta seção, você irá aprender como instalar e configurar todos os componentes necessários pelo ERPNext 12 e então instalar o próprio aplicativo.

      Comece preparando o servidor com todos os pacotes de sistema exigidos pelo ERPNext 12. Instale as dependências do sistema usando o seguinte comando:

      • sudo DEBIAN_FRONTEND=noninteractive apt install -y curl build-essential mariadb-client python3-setuptools python3-dev libffi-dev python3-pip libcurl4 dnsmasq fontconfig git htop libcrypto++-dev libfreetype6-dev liblcms2-dev libwebp-dev libxext6 libxrender1 libxslt1-dev libxslt1.1 libffi-dev ntpdate postfix python3-dev python-tk screen vim xfonts-75dpi xfonts-base zlib1g-dev apt-transport-https libsasl2-dev libldap2-dev libcups2-dev pv libjpeg8-dev libtiff5-dev tcl8.6-dev tk8.6-dev libssl1.0-dev python3-mysqldb libdate-manip-perl logwatch

      A variável DEBIAN_FRONTEND=noninteractive foi passada para o comando de instalação para evitar os prompts do Postfix. Para informações detalhadas sobre a configuração do Postfix, leia nosso guia How To Install and Configure Postfix on Ubuntu 18.04.

      Em seguida, atualize o pip3 e então, instale as versões mais recentes de três módulos Python adicionais exigidos pelo ERPNext:

      • sudo -H python3 -m pip install --upgrade setuptools cryptography psutil

      Agora que você instalou todas as dependências globais necessárias, irá instalar todos os serviços e bibliotecas exigidos pelo ERPNext 12.

      Configurando o Node.js e o Yarn

      O ERPNext 12 pode trabalhar com a versão 8+ do ambiente de servidor Node.js. Na verdade, no momento da escrita deste artigo, o script oficial easy_install do ERPNext usa o Node 8. No entanto, do ponto de vista da segurança, é aconselhável instalar uma versão mais recente porque o Node 8 atingiu seu End Of Life (EOL) em 2020 e, portanto, não receberá mais nenhum patch de segurança. Para os fins deste guia, o Node.js versão 12 LTS será instalado juntamente com os gerenciadores de pacotes correspondentes, npm e o yarn. Note que o framework Frappe usa o yarn para instalar dependências. Se você decidir usar um método alternativo de instalação, certifique-se de que você tenha a versão 1.12+ do yarn em execução no seu sistema.

      Adicione o repositório NodeSource ao seu sistema:

      • curl -sL https://deb.nodesource.com/setup_12.x -o nodesource_setup.sh

      Agora, você pode inspecionar o conteúdo do script baixado:

      • sudo nano nodesurce_setup.sh

      Quando estiver satisfeito, execute o script:

      • sudo bash nodesource_setup.sh

      Esse script irá atualizar automaticamente a lista apt. Agora, instale o nodejs em seu servidor:

      Em seguida, instale o yarn globalmente usando o pacote npm incluído:

      Agora que você instalou o Node, siga adiante para configurar o wkhtmltopdf para sua plataforma.

      O ERPNext usa a ferramenta wkhtmltopdf de código aberto para converter conteúdo HTML em PDF usando o mecanismo de renderização Qt WebKit. Esse recurso é usado principalmente para imprimir faturas, cotações e outros relatórios. No caso do ERPNext 12, uma versão específica do wkhtmltopdf é necessária, a 0.12.5 com o Qt implementado.

      Para instalar o wkhtmltopdf, comece indo para um diretório adequado para baixar o pacote. Neste caso, o /tmp:

      Baixe a versão e o pacote apropriados do wkhtmltopdf para o Ubuntu 18.04 da página do projeto:

      • wget https://github.com/wkhtmltopdf/wkhtmltopdf/releases/download/0.12.5/wkhtmltox_0.12.5-1.bionic_amd64.deb

      Agora, instale o pacote usando a ferramenta dpkg:

      • sudo dpkg -i wkhtmltox_0.12.5-1.bionic_amd64.deb

      Em seguida, copie todos os executáveis relevantes para seu diretório /usr/bin/:

      • sudo cp /usr/local/bin/wkhtmlto* /usr/bin/

      Assim que os arquivos estiverem no lugar, mude suas permissões para torná-los executáveis:

      • sudo chmod a+x /usr/bin/wk*

      Agora que o wkhtmltopdf está instalado corretamente, adicionaremos o Redis à pilha do nosso banco de dados.

      Instalando o Redis

      O ERPNext 12 usa o Redis para melhorar o desempenho do MariaDB. Especificamente, ele ajuda com o cache.

      Primeiro, instale o Redis a partir do repositório oficial do Ubuntu 18.04:

      • sudo apt install redis-server

      Em seguida, ative o Redis na inicialização:

      • sudo systemctl enable redis-server

      Agora que você adicionou o Redis à sua pilha, vamos dedicar um momento para resumir o que você fez até agora. Até este ponto, você instalou todos os componentes principais necessários para o ERPNext 12, que incluem:

      • Um backend de banco de dados MariaDB
      • O ambiente de servidor JavaScript Node.js
      • O gerenciador de pacotes Yarn
      • Um cache banco de dados Redis
      • O gerador de documentos PDF wkhtmltopdf

      Se você estiver instalando o sistema ERP para o desenvolvimento ou para a produção, agora está pronto para o próximo passo, que é a instalação do framework full-stack Frappe e o aplicativo Web ERPNext 12 em si.

      Passo 6 — Instalando o Bench CLI do Frappe

      Agora que você instalou todos os requisitos de pilha do ERPNext, libere a flexibilidade do utilitário de linha de comando bench do Frappe. O bench CLI foi projetado com o propósito de ajudar os usuários no processo de instalar, configurar e gerenciar aplicativos como o ERPNext que são baseados no Frappe Framework. Nas próximas seções, você irá instalar o CLI bench e então usá-lo para completar o processo de configuração do ERPNext 12.

      Certifique-se de que o usuário do Frappe (neste caso sammy) tenha os direitos adequados em seu diretório home:

      • sudo chown sammy -R /home/sammy

      Agora, clone o repositório frappe/bench para seu diretório home. Lembre-se de substituir sammy pelo nome de usuário do seu sistema:

      • git clone https://github.com/frappe/bench /home/sammy/.bench --depth 1 --branch master

      Instale o bench CLI:

      • sudo pip3 install -e /home/sammy/.bench

      Este guia assume que você esteja instalando o ERPNext 12 para cenários de teste/produção e, consequentemente,que você esteja usando a ramificação master. Mas se a sua intenção for desenvolver aplicativos ou módulos do ERPNext personalizados, a ramificação develop pode ser uma opção mais adequada. Para ambos os casos, você está agora preparado para instalar o Frappe Framework. Esse será o passo final antes de instalar o próprio ERPNext.

      Configurando o ambiente do Frappe Framework

      Nesta seção, você irá criar um ambiente do Frappe usando o bench CLI.

      Durante a instalação do Frappe, você pode exceder o limite de inspeção de arquivos do Ubuntu, que por padrão é definido como 8192. Para evitar este problema, defina um limite superior usando o seguinte comando:

      • echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

      Em seguida, inicialize o Frappe Framework 12. Substitua Sammy pelo nome de usuário do seu sistema:

      • bench init /home/sammy/frappe-bench --frappe-path https://github.com/frappe/frappe --frappe-branch version-12 --python python3

      Durante a execução, um erro sobre seu caminho pode aparecer, juntamente com vários avisos. Deixe o processo continuar até o fim. Depois que ele for finalizado, você verá um resultado semelhante ao seguinte, indicando que seu ambiente foi criado com sucesso:

      Output

      ... Done in 82.23s. INFO:bench.utils:setting up backups no crontab for sammy SUCCESS: Bench /home/sammy/frappe-bench initialized

      Nota: o processo bench init pode ser interrompido se um erro spawn ENOMEM for encontrado. Esse erro é causado quando seu sistema fica sem memória. Você deve corrigir o problema antes de continuar, seja instalando mais memória física ou alocando um espaço SWAP.

      Vamos dar uma olhada no comando usado para criar o ambiente:

      • /home/sammy/frappe-bench é o caminho onde o Frappe Framework, os sites e aplicativos associados serão instalados. Um novo diretório, chamado frappe-bench neste exemplo, será criado para acomodar todos os arquivos necessários.
      • --frappe-path aponta para o repositório do Frappe, que neste caso é o repositório oficial do Github.
      • --frappe-branch é a versão do Frappe a ser instalada. Como você quer instalar o ERPNext 12, a versão escolhida é o Frappe 12.
      • --python é a versão do Python que será usada. O ERPNext 12 requer o Python 3.6+. No entanto, as versões anteriores ainda usam o Python 2.7.

      Para obter mais informações sobre comandos bench CLI, consulte o Manual dos comandos bench.

      A flexibilidade oferecida pelo Frappe Framework vai muito além do uso de ambientes isolados. Você também pode criar sites diferentes e instalar aplicativos neles.

      Passo 7 — Instalando o aplicativo Web ERPNext 12

      Nesta seção, você irá construir um site baseado no Frappe, e então instalar o aplicativo ERPNext 12 nele.

      Vá para o diretório onde o Frappe foi inicializado.

      • cd /home/sammy/frappe-bench

      Agora, faça o download do ERPNext 12 a partir do seu repositório usando o bench CLI:

      • bench get-app erpnext https://github.com/frappe/erpnext --branch version-12

      Em seguida, crie o novo site, substituindo your_domain pelo domínio que você associou ao IP deste servidor:

      • bench new-site your_domain --admin-password 'erpnext_admin_password' --mariadb-root-username sammy --mariadb-root-password 'mariadb_password'

      Vamos reservar um momento para revisar as opções usadas no comando acima:

      • bench new-site cria um novo site baseado no Frappe Framework.
      • your_domain é o nome para o novo site. Certifique-se de que o DNS do seu domínio tenha um registro A apontando para o IP do seu servidor.
      • erpnext_admin_password é a senha desejada para o usuário Administrator do ERPNext. Mantenha essa senha em um lugar seguro — você precisará dela em breve.
      • mariadb_password é a senha que você criou no início do guia para o usuário sammy do MariaDB.

      Depois disso, instale o aplicativo ERPNext no site:

      • bench --site your_domain install-app erpnext

      Assim que a instalação for concluída, você terá uma aplicação ERPNext 12 funcionando. Agora, vamos testá-lo usando um comando bench:

      O comando acima irá iniciar um console de monitoramento em tempo real mostrando várias mensagens sobre o servidor Web e outros serviços. Abra um navegador Web e vá até localhost:8000 (para instalações locais) ou your_domain:8000 (se você estiver usando um servidor remoto). Você verá a tela de login do ERPNext (abordaremos o login e a configuração em um passo posterior, assim que fizermos nosso site ficar pronto para a produção).

      Depois de visitar sua implantação teste, retorne ao seu terminal e pressione CTRL+C. Isso irá parar o ERPNext e sair do console de monitoramento.

      Se seu objetivo principal for criar módulos ou modificar o ERPNext 12, então pode parar aqui. Não há mais componentes necessários para fins de desenvolvimento. No entanto, se o que você precisa é um sistema pronto para a produção que não requer uma inicialização manual, então será necessário instalar e configurar alguns componentes adicionais. Esse é o seu próximo passo.

      Passo 8 — Configurando o ERPNext 12 para a produção

      Embora a aplicação ERPNext 12 esteja pronta, o sistema como um todo ainda não está completamente preparado para a produção. Para garantir a confiabilidade e a segurança do ERPNext, será necessário habilitar alguns serviços adicionais:

      • O Fail2ban fornece uma camada extra de proteção contra tentativas de força bruta de usuários e bots maliciosos.
      • O Nginx será usado principalmente como um proxy Web, redirecionando todo o tráfego da porta 8000 para a porta 80 (HTTP) ou porta 443 (HTTPS)
      • Supervisor este serviço garante que os processos chave do ERPNext estejam em funcionamento constante, reiniciando-os conforme necessário.

      Até este ponto, você instalou e configurou o ERPNext 12 manualmente, o que lhe permitiu personalizar o processo para funcionar em qualquer caso de uso particular. No entanto, para o resto da configuração de produção, aproveite a conveniência do bench CLI e deixe-o automatizar a instalação e configuração desses serviços restantes.

      Certifique-se de estar no diretório de trabalho do Frappe:

      • cd /home/sammy/frappe-bench

      Agora, use o seguinte comando para terminar a configuração do ERPNext 12 para produção:

      • sudo bench setup production sammy --yes

      O comando acima irá instalar e configurar o Nginx, Supervisor e Fail2Ban e definir sammy como proprietário do ambiente de produção.

      Os arquivos de configuração criados pelo comando bench são:

      • Dois arquivos de configuração do Nginx localizados em /etc/nginx/nginx.conf e /etc/nginx/conf.d/frappe-bench.conf
      • Uma prisão de proxy do Fail2Ban localizada em /etc/fail2ban/jail.d/nginx-proxy.conf e um filtro localizado em /etc/fail2ban/filter.d/nginx-proxy.conf

      Essas configurações padrão serão suficientes para este tutorial, mas é possível explorar e ajustar esses arquivos para atender às suas necessidades. Pare todos os serviços executando:

      • sudo supervisorctl stop all

      Assim que tudo estiver pronto, reinicie seus serviços:

      • sudo supervisorctl start all

      Agora, você está pronto para testar sua instalação.

      Testando sua instalação do ERPNext 12

      Em primeiro lugar, verifique se os principais serviços de produção estão em execução usando o seguinte comando systemctl e então fazendo pipe dele para o grep:

      • systemctl list-unit-files | grep 'fail2ban|nginx|supervisor'

      Você verá uma saída como esta:

      Output

      fail2ban.service enabled nginx.service enabled supervisor.service enabled

      Depois de confirmar que tudo está funcionando como esperado, você pode testar o ERPNext 12 ao vivo em seu servidor. Abra seu navegador favorito e navegue até o domínio onde você está hospedando sua aplicação ERPNext 12.

      Depois de alguns segundos, a tela de login do ERPNext 12 deve aparecer. Use Administrator para o nome de usuário e erpnext_admin_password que você criou anteriormente para a senha.

      Tela de login do ERPNext

      Na próxima tela, você verá um menu suspenso onde pode selecionar o idioma da interface do usuário para o aplicativo:

      Seleção de idiomas

      Após a seleção de idiomas, o ERPNext irá questioná-lo sobre seu país, fuso horário e moeda:

      Selecione sua região

      Depois de completar as informações sobre a sua região, você será capaz de criar o primeiro usuário do ERPNext. As informações que você fornecer serão usadas como as credenciais de login do usuário.

      Primeiro usuário do ERPNext

      Na próxima tela, você será questionado sobre o que o ERPNext chama de Domains (domínios). Se não tiver certeza sobre qual é o seu domínio, selecione Distribution e clique no botão Next.

      Selecionar seus domínios

      Em seguida, será necessário fornecer um nome e abreviação da empresa.

      Nome da empresa

      Na última tela, o ERPNext irá perguntar o que sua empresa faz, o nome do seu banco, o tipo de gráficos de contas e o período do ano fiscal. Você será capaz de inserir bancos adicionais mais tarde. Por enquanto, preencha todos os campos como quiser e clique no botão Complete Setup.

      Informações financeiras

      Em seguida, você verá uma barra de progresso.

      Configurando o ERPNext

      Assim que o processo de configuração for concluído, o painel principal do ERPNext 12 será exibido.

      Painel do ERPNext 12

      Agora, você terminou de instalar e configurar totalmente um aplicativo ERPNext 12.

      Conclusão

      Agora que você instalou corretamente seu aplicativo ERPNext 12, pode ser desejável iniciar a implementação do sistema para as necessidades do seu negócio. Um bom ponto de partida é clicando no botão Getting Started no painel do ERPNext. O ERPNext irá então ajudá-lo a configurar a plataforma para todas as suas necessidades de negócios e e-commerce.

      Getting Started

      Pode ser que você também queira aumentar a velocidade do ERPNext. Se for esse o caso, então você pode ler sobre Ajuste de Desempenho do ERPNext, que irá guiá-lo pelas práticas recomendadas e em como depurar problemas relacionados ao desempenho.



      Source link