DEV Community: Renato Rebouças

Criando o primeiro app com expo router.

Renato Rebouças — Sun, 05 Mar 2023 22:20:30 +0000

Para iniciarmos, vamos começar criando nosso projeto expo da forma badrão selecionando a a opção de black page como na imagem a baixo.

OBS: estou ultilizando a versão 1.2.1 do react-router no momento que o tutorial foi escrito.

Projeto criado vamos iniciar a configuração do nosso projeto, abra ele no seu editor de preferência e seu terminal. No terminal executar os seguintes comandos:



npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar



npx expo install react-native-web@~0.18.10 react-dom@18.2.0

Enquanto o pacote é instalado vamos criar um arquivo chamado index.js ou index.ts caso seu projeto seja em typescript e ao abrir o arquivo colar o seguinte código.



import "expo-router/entry";

Agora no seu package.json alterar o main dele e apontar pro arquivo criado a cima.

No app.json colocar o codigo a baixo.



{
  "expo": {
    "scheme": "myapp",

    "web": {
      "bundler": "metro"
    }
  }
}

Na documentação oficial é dito para adicionar o resolutions caso use o yarn ou overrides caso use o npm, como nem sempre uso um padrão eu adicionei ambos.



"resolutions": {
    "metro": "0.73.7",
    "metro-resolver": "0.73.7"
  },
  "overrides": {
    "metro": "0.73.7",
    "metro-resolver": "0.73.7"
  },

Agora o ultimo passo antes de executarmos nosso projeto é alterar o babal.config,js.



module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      // NOTE: `expo-router/babel` is a temporary extension to `babel-preset-expo`.
      require.resolve("expo-router/babel"),
    ],
  };
};

Para executarmos a primeira vez vamos ultilizar o npm para podermos limpar o cache e ter mais segurança na execução:



npx expo start --clear

Se apareceu essa tela quer dizer que a configuração foi um sucesso.

Nesse ponto observe as pastras do seu projeto antes e depois de clicar no botão que a tela do app está pedindo para tocar.

Note que o proprio expo criou uma pasta chamada app e dentro dela o arquivo index.js.

Agora basta editar seu app/index.js e criar seu app com esse novo pacote que promete executar as rotas de um app como se fosse na web.

Referências:

Doc

Introdução ao NEO4J

Renato Rebouças — Sat, 28 Nov 2020 01:13:42 +0000

O que é o Neo4j?

O neo4j é um banco NoSql que utiliza a teoria de grafos e o cypher como sua linguagem oficial ao invés do sql, para poder criar um modelo menos genérico que os bancos relacionais, ou seja nele não precisamos de um design de tabelas para podermos popular o banco.

Definições

Nó (node)

É responsável por guardar os dados de uma entidade, podendo ter mais de uma propriedade, mas podendo ter apenas um label.

Relação (relationship)

A relação fica responsável de gravar a relação de um nó com o outro, por exemplo um autor pode ter uma relação com o livro.

Explicando principais comandos

MATCH: usado para dizer qual nó iremos buscar, pode se dizer que é o comando SELECT muito usado num banco relacional.
CREATE : responsável por criar nós e relacionamentos entre eles.
MERGE : utilizado para criar nós em relações quando eles não existem.
SET : muda as propriedades de uma relação ou nó.
RETURN: traz os resultados das consultas.
REMOVE: remove uma propriedade de um nó ou relação. Também serve para remover um label do nó.
WITH: serve para expor o resultado de um MATCH anterior para um próximo MATCH ou talvez, para um RETURN um pouco mais complexo. É a chave para quebrar patterns complexos em queries menores possivelmente mais rápidas.

Exemplos de uso dos comandos Cypher

Cria nó sem label

create()

Retorna todos os nós

match (no) 
return no

Cria nó com valor nome

create ({nome: "Doriana"})

Retorna nó com o valor especificado

match(no {nome: "Doriana"}  ) 
return no

Deleta o nó da variável, ou seja deleta tudo!

match (no)
delete no

Cria um label para um nó

create (:Pessoa {nome: "Asdrubal"})

Filtra pelo um label especifico

match (n:Pessoa) return n

Filtra pelo label pessoa e seta a quantidade de dados que se trás da consulta

match (n:Pessoa) 
return n 
limit 1

Criando um nó com uma aresta

A aresta é representada pelo sinal de --> dessa forma se cria uma aresta sem label,
no exemplo á baixo criamos uma aresta com label -[:Label]->

create(:Livro 
{titulo: "Alice"})
 -[:Autor]-> (:Pessoa {nome: "Lewis Caroll"})

Criando uma query para associar uma aresta

Na query a baixo criamos duas variáveis e associamos uma aresta a elas:

match (asd:Pessoa {nome: 'Asdrubal'}) 
match (al:Livro {titulo: 'Alice'})
create(asd) -[:Leu]-> (al)

Associando todas pessoas a um livro

match (p:Pessoa) 
match (cc:Livro {titulo: 'Crime e Castigo'})
create(p) -[:Leu]-> (cc)

create (:Pessoa {nome: "Lindaura"})
create (:Pessoa {nome: "Alcebiades"})
match (asd:Pessoa {nome: "Asdrubal"})
match (lind:Pessoa {nome: "Lindaura"})
match (guia:Livro {titulo: "Guia do mochileiro"})
match (hobit:Livro {titulo: "O Hobit"})
create (asd)-[:Leu]-> (guia)
create (asd)-[:Leu]-> (hobit)
create (lind)-[:Leu]-> (guia)
create (lind)-[:Leu]-> (hobit)

Filtra as pessoas que já leram um livro x

match (p:Pessoa)
-[:Leu]-> (g:Livro {titulo:"Guia do mochileiro"})
return p

Filtro com duas condições num mesmo `Match`

match (h:Livro{titulo: "O Hobit"})
<-[:Leu]-(p:Pessoa)
-[:Leu]-> (g:Livro {titulo:"Guia do mochileiro"})
return p

Pegando todo mundo que leu Lewis Caroll

match (p:Pessoa)
-[:Leu]->(:Livro)-[:Autor]->
(:Pessoa {nome: "Lewis Caroll"})
return p

Filtrando e trazendo livro e pessoa

match (p:Pessoa)-[:Leu]->
(l:Livro {titulo: "Crime e Castigo"})
return p,l

match (p:Pessoa)-[:Leu]->(l:Livro)
<-[:Autor]-(n:Pessoa {nome:"Alcebiades"})
return p,l

Usando um count na query

match (p:Pessoa)-[:Leu]->(l:Livro)
<-[:Autor]-(n:Pessoa {nome:"Alcebiades"})
return count(p)

match (p:Pessoa)-[:Leu]->(l:Livro)
<-[:Autor]-(n:Pessoa {nome:"Alcebiades"})
return count(distinct p)

Método merge

O merge verifica se a propriedade foi criada, se não foi criada ele cria, caso já exista você pode acrescentar o on e dizer oque le deve fazer:

match (p:Pessoa)-[:Leu]->(l:Livro)
<-[:Autor]-(n:Pessoa {nome:"Alcebiades"})
merge (p)-[lei:Leitor]->(n)
on create set lei.livros=1
on match set lei.livros=lei.livros+1

merge
   (l:Cidade {local: 'Cidade Ademar, São Paulo'})-[:Previsao]->(t:Tempo {data: '15/02/2021',
    hora: '13:16',
    infoAtual: 'Parcialmente nublado',
    infoTemp: 'Tempestades isoladas com raios e trovões',
    maxTemp: '28°C',
    minTemp: '18°C',
    temperatura: '28°C'})

Esse exemplo a baixo é um filtro trazendo a nova propriedade criada:

match (p:Pessoa)-[:Leu]->(l:Livro)
<-[:Autor]-(n:Pessoa {nome:"Alcebiades"})
match (p)-[lei:Leitor]->(d)
return p,l,lei,n

Usando where e alterando dados de uma pessoa

match (p:Pessoa) where ID(p) = 10
set p.nome = 'João P'
return *

Referências:

NEO4J — Primeiros passos

Uma gentil introdução ao uso de banco de dados orientados a grafos com Neo4j

Documentação neo4j

Teste backend pokémon pt 2

Renato Rebouças — Mon, 23 Nov 2020 21:59:49 +0000

Teste back-end pokémon pt 2

Bom no ultimo artigo, finalizamos a estrutura padrão do nosso projeto, pra quem não viu vou deixar o link, pois é essencial ter lido ele para avançar nesse artigo.

Teste backend pokémon pt 1 - DEV

Vou partir do principio que você já leu o ultimo artigo e seu projeto está igual o meu, agora vamos iniciar nossa estrutura de rotas para podermos criar nossa primeira controler.

Na raiz do seu projeto crie um arquivo routes.js, nele vamos colocar o código a baixo:

const bodyParser = require("body-parser");

module.exports = (app) => {
  // usamos o body-parser para lidar com as requisiçoes json
  app.use(bodyParser.json());


   // o primeiro parametro fa função get é a rota que iremos 
   // chamar na url o segundo já é uma função anônima, mas
   // nada impede de ser passado uma função  já criada
  app.get("/", (req, res) => {
    res.status(200).send({ message: "boas-vindas a API Pokémon GO" });
  });

};

Vamos voltar agora para nosso primeiro arquivo criado o index.js nele vamos informar o express que iremos usar nosso arquivo de rotas

// infromamos o path do nosse arquivo de rotas
const routes = require("./routes");

//nosso arquivo ficara assim logo depois de instanciar as 
//depêndencias nele


app.use(cors());
app.use(express.json());

const port = 3333;

// disponibiliza as rotas no arquivo base
routes(app);

app.listen(port, () => {
  console.log(`Servidor rodando na porta: ${port}`);
});

Agora criaremos nossa primeira controller para isso crie uma pasta chamada controller e dentro dela um arquivo chamado CsvController.js.

Antes vamos instalar uma depencia para manipularmos arquivos csv ou xlsx, para isso digitamos em nosso terminal o seguinte comando:

npm i node-xlsx

Voltando na nossa controller vamos criar uma classe e importar a biblioteca instalada

const xlsx = require("node-xlsx");
class ApiController{

}

// nessa linha exportamos nossa classe como módulo para que 
// ela possa ser acessada de outros lugares
module.exports = ApiController;

Dentro da nossa classe iremos criar uma função chamada importCsv

static async importCsv(req, res) {
  // essa variavel indica o local que esta o arquivo csv, deixei
  // o meu de exemplo mais depois do ${__dirname} passe o seu caminho
  // vou deixar logo a baixo o repositório novamente com o xlsx
    const plan = xlsx.parse(`${__dirname}/../api/PokemonGo.xlsx`);

   // Agora que ja temos nosso arquivo mapeado basta percorrermos ele
   // com um map e criarmos um objeto novo pois os nomes no arquivo
   // contem espaços e caracteres especiais depios batas tertornar ele 
  // e termos acesso deles na variavel readPlan

    const readPlan = plan[0].data.map((data, index) => {

      let dados = {
        row: data[0],
        name: data[1],
        pokedexNumber: data[3],
        imgName: data[4],
        generation: data[5],
        evolutionStage: data[6],
        evolved: data[7],
        familyID: data[8],
        crossGen: data[9],
        type1: data[10],
        type2: data[11],
        weather1: data[12],
        weather2: data[13],
        staTotal: data[14],
        atk: data[15],
        def: data[16],
        sta: data[17],
        legendary: data[18],
        spawns: data[21],
        regional: data[22],
        raidable: data[23],
        hatchable: data[24],
        Shiny: data[25],
        nest: data[26],
        new: data[27],
        notGettable: data[28],
        futureEvolve: data[29],
        CP40: data[30],
        CP39: data[31],
      };
      return dados
    });
   // deletamos o primeir registro do objeto pois ele só 
   //contem o nome das colunas da planilha
    delete readPlan[0];

    // Agora finalmente retornamos os dados para api
    return res.status(200).send(readPlan);
  }

Repositótio do projeto

Nosso código ainda não esta funcionando pois não criamos uma rota para acessar ele, para isso vamos voltar no nosso arquivo que usamos para definilas routes.js

// dentro dele vamos importar nossa controller primeiro
// a minha está no caminho a baixo, mais subistitua por um a sua escolha

const CsvController = require('../Controller/CsvController')

// agora nosso arquivo de rotas ficara assim
module.exports = (app) => {
  app.use(bodyParser.json());
  app.get("/", (req, res) => {
    res.status(200).send({ message: "boas-vindas a API Pokémon GO" });
  });

  // nessa linha adicionaremos nossa nossa nova rota,
  // indicando que ela deverá usar a controller criada anteriormente
  app.get("/import", CsvController.importCsv);

};

Agora basta chamarmos nossa rota, bom como essa é uma rota do tipo get podemos chamar ela pelo navegador pelo endereço https://localhost:3333 , porem eu recomendo o uso do insomnia.

A imagem abaixo é o resultado da nossa requisição.

Teste backend pokémon pt 1

Renato Rebouças — Fri, 06 Nov 2020 13:58:16 +0000

Teste back-end pokémon pt 1

Depois de ter acompanhado toda a introdução sobre o método de estudo no ultimo artigo, que se consiste no desafio de criar uma API com dados de Pokémon, nós vamos colocar em prática o que aprendemos!

Nós vamos iniciar o teste criando o servidor, e para este processo nós vamos utilizar o express. Após este primeiro passo nós vamos criar uma pasta, você pode escolher o nome de sua preferência, eu vou chamar a minha de:

teste_backend_pokemon

Agora nós vamos acessar acessar a pasta criada pelo terminal, caso você não saiba basta fazer assim:

cd /home/projetos/....

O código acima é um exemplo da ultilização do comando cd

Agora que já estamos na raiz vamos iniciar o npm nela com o seguinte comando:

npm init ou npm init -y

O comando pode ser como o citado se você quiser preencher todas as perguntas ou podemos passar o -y assim aceitamos todas as solicitações e ele cria automaticamente.

Com isso ira aparecer um arquivo chamado package.json nele contem todas as informações sobre nossa aplicação, incluindo as dependências.

Após este passo vamos instalar as dependências nescessárias para o momento, então digite o comando abaixo:

npm i nodemon body-parse cors express

Agora podemos começar a parte mais importante que é codar 🔥

Para essa etapa crie um arquivo chamado index.js, dentro dele vamos colocar o seguinte código:

const express = require("express"); // importamos o express
const cors = require("cors"); // importamos o cors
const app = express(); // agora instanciamos o express na variável app 
app.use(cors()); // informamos que vamos usar o cors junto ao express

// aqui falamos que o express ira entender o formato json
app.use(express.json()); 

// criamos a variavel que ira receber a porta do nosso servidor
const port = 3333; 

// inicializamos nosso servidor
app.listen(port, () => {
  console.log(`Servidor rodando na porta: ${port}`);
});

Depois de criar o index.js e digitar o código acima vamos inicializar o nosso servidor com o comando a
seguir, para isso você deve estar com o seu terminal na raiz do projeto.

nodemon index.js

Assim, vamos ver o seguinte resultado:

E com isso já teremos a estrutura padrão do nosso projeto!! 😄🚀

Usando testes de vagas para estudar

Renato Rebouças — Tue, 03 Nov 2020 18:47:05 +0000

Bom recentemente venho buscando maneiras de estudar para me aprofundar mais nos meus conhecimentos e descobri um Github com vários repositórios de testes para vagas de emprego, de certa forma é bom estudar assim, pois você vê como seu nível está e ao mesmo tempo pratica vendo como estaria para o mercado de trabalho.

Pra mim em particular tem sido muito vantajoso de estudar assim além de me preparar para poder aplicar em vagas eu acabo me forçando a correr atrás de certo conteúdo para poder concluir os testes.

Por exemplo recentemente fiz um teste para react-native com firebase, vou resumir o teste era para criar um login usando firebase, eu nunca havia usado ele até o momento do teste, então fui forçado a garimpar a internet atrás de conteúdo sobre o banco da google.

Demorei um bom tempo para concluir o teste por conta de estar aprendendo algo novo mas no final eu conclui o teste e aprendi muito com isso, infelizmente não passei na vaga mais agreguei conhecimento em algo novo realizando o teste.

Por isso decidi estudar aplicando para vagas de emprego, depois de ver um repositório do m7he4rt no qual ela fazia um teste da RedFox no qual eu decidi realizar o mesmo teste para iniciar meus estudos, aos poucos vou escrevendo sobre o teste, mas caso queira acompanhar mais de perto confira o meu repositório, bom espero que a idéia seja útil para vocês.

Primeiros passos com o editor Vi parte: 1

Renato Rebouças — Sat, 21 Mar 2020 21:11:20 +0000

Recentemente, eu vi que tinha que aprender a usar o editor vi, pois estava editando arquivos grandes com o nano e como só tinha o bom e velho terminal para editar esses arquivos e estava com muitas dificuldades porque editar arquivos grandes ou o nano se torna mais difícil , entre outros problemas.

Vamos começar com a navegação no modo de edição de texto igual a qualquer editor de texto, utilizado como setas do teclado para isso.

Bom, vamos ao básico como eu faço para inserir coisas no arquivo? Isso é muito simples, basta abrir a tecla "i" e começar a digitar a partir de onde você estiver no texto.

E para sair da inserção de texto como eu faço? Basta abrir a tecla "esc" e vc voltara para uma navegação normal.

Também temos a tecla "a" que começa a inserir o texto na posição a seguir de onde você estiver.

Feito nossa alteração como salvamos o arquivo? Digitamos o ": w" e, em seguida, damos um valor para confirmar e pronto o arquivo salvo.

Mas e se você quiser sair e agora como fazer? É possível fazer isso sem desligar o computador?

É uma resposta simm, para isso usa o ": q", também pode combinar os comandos e executar várias ações em conjunto ou executar um combo com o kkk, vamos usar o exemplo de salvar e sair.

ex: :wq

Sim com o :wq podemos salvar e sair do arquivo.
chegamos ao fim da primeira parte do artigo, fazendo o proximo nos seguintes dias de quarentena. 😅

DEV Community: Renato Rebouças

Criando o primeiro app com expo router.

Referências:

Introdução ao NEO4J

O que é o Neo4j?

Definições

Nó (node)

Relação (relationship)

Explicando principais comandos

Exemplos de uso dos comandos Cypher

Cria nó sem label

Retorna todos os nós

Cria nó com valor nome

Retorna nó com o valor especificado

Deleta o nó da variável, ou seja deleta tudo!

Cria um label para um nó

Filtra pelo um label especifico

Filtra pelo label pessoa e seta a quantidade de dados que se trás da consulta

Criando um nó com uma aresta

Criando uma query para associar uma aresta

Associando todas pessoas a um livro

Filtra as pessoas que já leram um livro x

Filtro com duas condições num mesmo Match

Pegando todo mundo que leu Lewis Caroll

Filtrando e trazendo livro e pessoa

Usando um count na query

Método merge

Usando where e alterando dados de uma pessoa

Referências:

Teste backend pokémon pt 2

Teste backend pokémon pt 1

Usando testes de vagas para estudar

Primeiros passos com o editor Vi parte: 1

Filtro com duas condições num mesmo `Match`