Criando aplicação node com yarn

Recentemente comecei a estudar node para o desenvolvimento de API e notei que a curva de aprendizado é muito rápida, se souber quais bibliotecas utilizar o desenvolvimento fica extremamente rápido. Nesse artigo vou mostrar como iniciar um projeto node usando o yarn e como criar uma rota com o express.

Vantagens de se usar o yarn:

O yarn funciona que nem o npm, ou seja é um gerenciador de pacotes. Mas ele tem um diferencial, ele armazena o cache do que já foi baixado, ao meu ver pra quem baixa muitas dependências, isso agiliza muito o processo e por isso eu vejo como vantajoso, mas essa é minha opinião, claro.

Para começar vamos instalar o node e o yarn baixando:

Feito a instalação, vamos testar para ver se tudo foi instalado corretamente. Para isso abra o terminal se estiver em sistemas baseados em unix ou o bom e velho CMD se estiver no Windows e digite os seguintes comandos:

node -v
yarn -v

O resultado deve ser igual o da foto mostrando a versão de ambos. Feito isso vamos começar a brincadeira iniciando o projeto, para isso cria uma pasta com o nome de sua escolha, a minha será “iniciando_com_node” lembre-se: evite usar espaços de preferencia a “spider case” ou a “camelcase”. Depois, acesse a pasta criada via linha de comando e dentro dela execute o seguinte comando:

touch index.js

Esse comando cria um arquivo.

yarn init -y

O comando “yarn init -y” inicia o yarn e aceita todas as opções dele, as mesmas podem ser alteradas depois.

Quando iniciarmos o yarn, podemos acessar a pasta criada no editor de texto de sua preferencia. Eu recomendo o VSCode.

Abrir o arquivo “package.json”, que é o arquivo que o comando anterior criou. Nele contém todas as informações que concordamos em aceitar sem nem ler, e nesse arquivo em formato json, elas podem ser editadas sem nenhum problema.

Vamos instalar o express na linha de comando. Execute o comando:

yarn add express

Após a instalação, vamos colar a mão na massa.

Com isso, nosso arquivo index.js ficará igual ao da foto abaixo:

Depois, para saber se nosso servidor express funcionou, basta executar o comando:

node index.js

Bom, agora vamos criar uma rota para ser acessada via navegador.

Ao final do arquivo adicione o seguinte código:

 app.get('/', (req, res) =>{
    res.send("Essa é a primeira rota criada com o express")
})

Vou explicar o que ele faz. Estou chamando o express para escutar tudo que vier de requisição com o get na roda / ou seja na rota raiz da aplicação, em seguida cria uma função anônima passando os parâmetros req e res que são esperados pelo express, pode ser qualquer nome mas para ser intuitivo usei req=request e res=response, no retorno dessa função pego o response e peço para ele deixar uma mensagem no navegador.

Pare  o servidor e execute o comando para subir ele de novo, para visualizarmos os resultados.

Bom espero que tenham gostado desse passo-a-passo de node, para criticas e sugestões entrem em contato no twitter: https://twitter.com/tinho361

Referência: Renato Rebouças

Vue Native

Recentemente pesquisando sobre vue.js notei o vue-native que nada mais é que um react-native mas usando o vue, oque na minha opinião é bem mais simples que o react, pois o mesmo conta com estrutura do vue.js o que é extremamente simples, ficou mais ainda mais simples fazer apps para android e ios.

 

Bom vamos a instalação, vou listar a baixo oque é preciso ter instalado para podermos instalar o vue-native:

  • Node >= 6.0 ( https://nodejs.org/en/download/ )
  • npm >= 4.0 (já vem instalado com o nede )
  • react native CLI (npm install -g expo-cli)
  • expo CLI (npm install -g expo-cli)
  • vue-native (npm install -g vue-native-cli)

 

Deixei apenas os comandos dos do react-native e expo pois o node pode ser instalado com um instalador independente do sistema operacional lembre-se de instalar os mesmos na ordem listada.

Vamos ao que interessa a criação do nosso app para isso utilizaremos o seguinte comando: “vue-native init nomeDoProjeto” lembre-se de tirar as aspas para executar o comando.

Se você se deparou com isso também na name dentro so expo pasta digitar o nome do seu projeto e sem seguida pode dar “yes” quando aparecer.

Com nosso app já criado vamos acessar ele via terminal e rodar o chamando para inicializar ele “npm start”, assim que o comando funcionar ele irá abrir seu navegador na seguinte pagina:

Já nessa pagina podemos decidir como iremos usar nosso app, por emulador de android ou ios ou até mesmo pelo nosso celular baixando o app do expo

Expo android https://play.google.com/store/apps/details?id=host.exp.exponent

Expo ios https://itunes.apple.com/br/app/expo-client/id982107779?mt=8

No meu caso vou iniciar ele pelo emulador IOS.

Bom note que esse é o nosso código com a estrutura do vue.js o mesmo cria uma variável com o texto o e exibe na tela do app no emulador.