Eae galera! Neste artigo irei explicar um pouco sobre o pattern matching no elixir!

## Afinal o que é o pattern matching?

O pattern matching é uma forma de desestruturar facilmente os tipos de dados, tuplas e listas. Támbem é um dos fundamentos da recursividade no Elixir.

## Váriaveis no Elixir

> Ao longo do artigo iremos ver sobre o pattern matching e para entender os códigos escritos entenda um pouco sobre as váriaveis no elixir.

No elixir as variaveis não são atribuidas por um valor.

Para explicar melhor aqui está um exemplo:

``variavel = 1``

Para a variavel ser igual a 1, na matemática se, por exemplo ``x = 1`` o que o x tem que valer para ser equivalente a 1? Ele tem que ser 1

E acontece a mesma coisa no elixir, por isso as váriaveis são imutaveis.

E acabamos de ver pattern matching nas váriaveis do elixir.

---

## Rodando projetos elixir

Para rodar o nosso projeto iremos entrar no modo interativo do elixir(mesmo ele sendo uma lang compilada, ele tem um modo interativo).

```bash
iex -S mix
```

E depois

Vai digitar o nome do módulo(no nosso caso ``PatternMatchingArtigo``) e também o nome da função que você quer executar.

```bash
iex> PatternMatchingArtigo.<nome da função>(<parametros>)
```

E é só trocar esses <> pelo nome da função e os parametros.

---

## Utilizando o pattern matching na prática!

Pré-requesitos: 
    
* [Elixir](https://elixir-lang.org/install.html)



Primeiro nós vamos criar o projeto em elixir com o mix:
```bash 
mix new pattern_matching_artigo 
```



Em `lib/pattern_matching_artigo.ex`,
vamos apagar todas as funções deixando apenas o defmodule
```elixir
defmodule PatternMatchingArtigo do

end
```

Depois de apagarmos todas as funções, vamos criar uma função chamada `call()` que vai ter um parametro que vai ser uma lista:

```elixir
defmodule PatternMatchingArtigo do
    def call(list) do
    
    end
end
```

No elixir não é possivel pegar o valor de uma lista com ``lista[1]``, por isso vamos ver como funciona o pattern matching com as listas.


Para percorrer a lista vamos criar uma função chamada ``count_length`` com um paremetro chamado ``[head | tail]``:

```elixir
    def count_length([head | tail]) do

    end
```

> O que seria esse ``[head | tail]``?

Em elixir uma forma de pegar os elementos de uma lista é utilizando essa forma. O head é o primeiro elemento da lista, e o tail é o corpo da lista, ou seja, todos os outros elementos da lista.

Por exemplo:

```elixir
    def count_length([head | tail]) do
        IO.inspect(head)

        IO.inspect(tail)
    end
```

Se a gente rodar esta função passando uma lista ``[1,2,3]`` 

```bash
iex -S mix

iex> PatternMatchingArtigo.count_length([1,2,3])
```

vai retornar:

```bash
1
[2,3]
```

Sabendo disso podemos continuar nosso projeto:

Para contar a quantidade de uma lista temos que ter um contador, então vamos passar ele como parametro:

```elixir
def count_length([head | tail], count) do
    IO.inspect(head)

    IO.inspect(tail)
end
```

Já que não iremos usar o head para fazer a contagem podemos colocar um _ na frente dessa váriavel. Isso indica que iremos receber essa variavel como parametro mas não vamos utiliza-lo.

E também vamos incrementar a contagem.

```elixir
def count_length([_head | tail], count) do
    count = count + 1
end
```

Mas como estamos atribuindo um valor ao uma váriavel, sendo que no elixir as váriaveis são imutaveis?

Na verdade não estamos reatribuindo um valor a uma variavel e sim estamos criando uma nova variavel chamada count.

Se executarmos esse código com o iex, passando como parametro o count que vai ser o número que vai iniciar a contagem da lista.

```bash
iex> PatternMatchingArtigo.count_length([1,2,3], 0)
```

Ele vai retornar:

```bash
1
```

Agora vamos aplicar recursividade nesta função:

```elixir
def count_length([head | tail], count) do
    count = count + 1

    # Passando tail e a contagem como parametro.
    count_length(tail, count)
end
```

> Se rodarmos essa função novamente ele vai dar um erro que está passando uma lista vazia

Podemos resolver adicionando outra função ``filter_length()``

```elixir
def count_length([], count), do: count
```
E o que esta função faz? 

Esta função verifica se a lista está vazia, e se estiver vai retornar a contagem total da lista. 

Caso esteja com valores nesta lista   ele vai adicionar 1 na contagem e vai executar denovo a função até acabar de percorrer a lista.

E também acabamos de ver Pattern Matching com funções!


E por fim na função ``call()``, vamos adicionar um paremetro chamado ``list`` e executar a função ``count_length``.

```elixir
def call(list) do
    count_length(list, 0)
end
```

Assim, finalizamos nosso mini projeto de contar o tamanho das listas com Pattern Matching e também utilizando recursão!

---

O Pattern Matching funciona também com tuplas

Por exemplo:

```elixir
defp print_content_file({:ok, content}), do: content

defp print_content_file({:error, reason}), do: reason
```

Nesta função privada(``função privada no elixir é defp e uma função pública é def``) ele vai pegar uma tupla que retorna :ok, e algum conteudo e vai retornar esse conteudo.

Se retornar um erro vai retornar um erro.

E assim utilizamos pattern matching com listas, tuplas, funções e também tratamos de erros.

---

Caso tenha alguma duvida do código feito durante o artigo acesse o [repositório](https://github.com/jpbrab0/pattern-matching-artigo) que contem o projeto feito durante esse artigo.

---

Esse artigo foi um pouco longo mas espero que você tenha gostado!

Se gostou do artigo deixe o like, compartilhe com os amigos e comente o que achou do artigo!

Até a proxima!

Neste artigo irei explicar um pouco sobre o pattern matching no elixir!

Entendendo Pattern Matching no elixir

Fala galera! No primeiro artigo do ano de 2021 irei mostrar um pouco do Vue.js 3, fazendo uma todo list.

---

Pré-requisitos:
- Ter o [Node.js](https://nodejs.org/) instalado no pc;
- Conhecimento básico de HTML, Css e Javascript.

---

Para criar o projeto com vuejs já configurado precisamos do Vue CLI.

O Vue CLI é um ferramenta para auxiliar no desenvolvimento nos projetos Vue.js.

Existe duas formas de instala-lo:

Com npm:
```bash
npm install -g @vue/cli
```
Ou com yarn:
```bash
yarn global add @vue/cli
```

Com o Vue CLI já instalado podemos criar o nosso projeto vue.

```bash
vue create <nomedoprojeto>
```

Vamos nomear este projeto como ``todolist-vuejs``.

Quando você rodar esse comando vai aparecer essas 3 opções:

![Opções](https://dev-to-uploads.s3.amazonaws.com/i/8qgtg9rkstdnkxe076ni.png)

Neste artigo vamos usar a versão 3 do Vue.js.

---

Depois do Vue CLI criar o projeto, já podemos ver a estrutura de arquivos básica de um projeto vue.

![Estrutura de arquivos Vuejs 3](https://dev-to-uploads.s3.amazonaws.com/i/38vdhusyooo2kpsk3dyh.png)

---

No terminal se você rodar o comando:

```
npm run serve
```
Ou

```
yarn serve
```

Você estará rodando localmente o projeto vue.

---

Para começar o projeto vamos criar a lógica basica de uma todo list, adicionar uma tarefa.

No arquivo ``HelloWorld.vue`` vamos apagar todo o conteudo do bloco ``<template>`` e todo o conteudo do bloco ``<style>``

No bloco ``<template`` vamos fazer a estrutura html do projeto:

```html
<div class="app">
    <ol>
      <li >
        <p>Aprender Vue</p>
      </li>
    </ol>
    <div class="inputs">
      <input placeholder="Todo"/>
      <div class="buttons">
        <button >Adicionar Tarefa</button>
        <button>Remover Todas as tarefas</button>
      </div>
    </div>
  </div>
```
No javascript vamos implementar a lógica da todo list:

Antes de tudo no export default vamos adicionar a função ``data`` responsavel por renderizar os dados do projeto:

```js
data() {
    return {
      todos: [{ id: 1, text: "Aprender VueJs" }],
    };
}
```
No return criamos um objeto chamado ``todos`` que armazena as tarefas cadastradas.

Novamente no export default vamos adicionar um objeto chamado ``methods``:
```js
methods: {
    
},
```

Nele vamos criar os métodos da aplicação como remover tarefas e adicionar tarefas.

Vamos criar o nosso primeiro metodo o de adicionar tarefas:

```js
addTodo(text) {
    if (text !== " ") {
        this.todos.push({
           id: this.todos.length + 1,
           text,
        });
    }
}
```

E tambem de remover tarefas:

```js
removeTodos() {
      this.todos = [];
},
```

--- 

Para fazer tudo funcionar vamos adicionar atributos nas tags html:

1. No li vamos adicionar um atributo para renderizar todas as tarefas cadastradas, com o v-for:

```html
<ol>
    <li v-for="todo in todos" v-bind:key="todo.id">
        <p>{{ todo.text }}</p>
    </li>
</ol>
```
O ``v-bind:key="todo.id"`` é para cada li tem um id unico.

O ``{{ todo.text }}`` vai fazer o ``<p></p>`` renderizar o texto da tarefa.

---

Vamos fazer a lógica de adicionar tarefas no html com os atributos ``v-model`` e ``v-on:click``:

```html
<div class="inputs">
      <input placeholder="Todo" v-model="text" />
      <div class="buttons">
        <button v-on:click="addTodo(text)">Adicionar Tarefa</button>
        <button v-on:click="removeTodos()">Remover Todas as tarefas</button>
      </div>
</div>
```

O ``v-model`` vai nos auxiliar a pegar o dado do input de adicionar tarefa, guardando em uma variavel.

O ``v-on:click`` vai executar uma função caso o botão seja clicado.

---


Por fim vamos renomear o arquivo ``HelloWorld.vue`` para ``TodoList.vue``.

E também no arquivo ``App.vue`` vamos fazer as seguintes alterações:

No bloco ``<template>``:

Vamos Criar a tag da todo list:

```html
<template>
  <h1>TodoList com Vue.js 3!</h1>
  <TodoList/>
</template>
```

E no Javascript vamos renomear o import do componente:

```js
<script>
import TodoList from './components/TodoList.vue'

export default {
  name: 'App',
  components: {
    TodoList
  }
}
</script>
```
---

Depois de muito código é só rodar ``npm run serve``, para ver o resultado final!

---

Se este artigo realmente te ajudou compartilhe com seus amigos e amigas deixe o gostei(se tiver) e até a próxima!

Caso tenha alguma dúvida, confira o repositório no github que contem o todo código desenvolvido neste artigo!

[Link para o repositório](https://github.com/jpbrab0/artigo-vuejs3).


Neste artigo, irei mostrar um pouco do Vue.js 3, fazendo uma todo list.

Fazendo uma todo list com VueJS.

Olá, pessoal! Sou o João Pedro e hoje por meio deste artigo venho falar sobre uma tecnologia que utilizo muito, o nunjucks, e também fazer um CRUD com ele!

# Mas o que é uma template engine?

Template engine é basicamente para você deixar o seu html mais "dinâmico", por exemplo:

No back-end eu passo uma variável de valor "x" e para eu acessar essa variável através do html, eu posso utilizar uma template engine.

# Utilizando o nunjucks na prática!


O primeiro passo é criar um projeto node.js

> Mas como eu crio um projeto node.js?

É bem simples!!

Abra seu terminal, entre no diretório do projeto e digite:

__É necessário ter o node e o npm instalado!__
```bash
npm init -y
```
O "-y" serve para criar sem fazer nenhuma pergunta o arquivo package.json. Neste arquivos tem as informações deste projeto.

---

Depois que fizermos isso você pode abrir o diretório do projeto em um editor de sua preferência. No meu caso estarei usando o Vscode.

Depois vamos criar o arquivo server.js na raiz do projeto, neste arquivo vai ficar as rotas do projeto.

Para criar as rotas vamos precisar instalar o Express

O Express é um framework node.js para a criação de aplicações web e api's

Para instalar ele você deve rodar o seguinte comando no seu terminal.

```bash
npm install express
```

Após a instalação, no arquivo package.json,vai ter todas as dependências do seu projeto e também foi criada a pasta node_modules que é onde fica o código das dependências. 

![package.json](https://dev-to-uploads.s3.amazonaws.com/i/lrairc032r4mqkaqbzy6.PNG)
---

No arquivo server.js vamos escrever as nossas rotas!

```js
const express = require("express")
const server = express()

server.get("/", (request , response) => {
    return response.send("Está rota está funcionando!")
})
```

No código acima:

* Importamos o express no nosso projeto
* Criamos a variável "server" ela vai conter todas as nossas rotas.
* Fizemos uma rota do tipo GET que ao ser acessada ela nos retorna: "Está rota está funcionando!"

![editando o arquivo server.js](https://dev-to-uploads.s3.amazonaws.com/i/6id109ghiw1v6zy0um3n.PNG)

---

Agora podemos criar uma pasta chamada "views" nela vai conter todo o html do projeto.  

Na pasta views crie o arquivo "home.html" e digite:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
</head>
<body>
    <h1>CRUD com nunjucks</h1>
    <form action="/post" method="post">
        <input type="text" placeholder="Seu nome." name="name">
        <input type="email" name="email" placeholder="Seu email.">
        <button type="submit">Enviar!</button>
    </form>
    
</body>
</html>
```
---

No arquivo server.js, vamos importar o nunjucks mas primeiro precisamos ter ele instalado.

```bash
npm install nunjucks
```

Após a instalação vamos configurá-lo.

```js
const express = require("express")
const server = express()
const nunjucks = require("nunjucks")

// Configurando a pasta public.
server.use(express.static("public"))

// Configurando para receber dados do request.body.
server.use(express.urlencoded({extended:true}))
server.use(express.json());

// Config da template engine.
server.set("view engine", "njk")
nunjucks.configure("views", {
    express:server,
    autoescape:false,
    noCache:true,
})

server.get("/", (request , response) => {
    return response.render("home")
})

// Adicionando uma porta para o projeto.
server.listen(3333)
```
Repare que configuramos uma pasta chamada "public", mas por quê?

Caso você queira adicionar arquivos css você pode criar a pasta "styles", arquivos js você pode criar a pasta "scripts" e para imagens você pode criar a pasta "assets". Mas essas 3 pastas tem que estar dentro da pasta "public" e a "public" na raiz do projeto.E o nunjucks vai reconhecer ela.

---

Após tudo configurado renomeie o arquivo "home.html" para "home.njk".

No terminal rode:

```bash
node server.js
```

Abra o seu navegador e na barra de pesquisa digite:
> http://localhost:3333

Pronto! Conseguimos utilizar o nunjucks e o node para renderizar um arquivo html! 

Agora vamos fazer este CRUD! Mas antes vamos conhecer o nodemon!

---

# Nodemon

Caso você não queira escrever "node server.js" a cada alteração, você pode instalar o nodemon.

```bash
npm install nodemon -D
```
Após a instalação repare que no comando para instalar o nodemon tem o "-D".

> Para que ele serve?

O "-D" serve para que o nodemon só possa ser usado no ambiente de desenvolvimento.

Agora para startar o server digite "nodemon server.js" e pronto! O server será reestartado a cada alteração.

---

# CRUD com nunjucks

Na raiz do projeto vamos criar o arquivo "data.json" um arquivo onde vai ficar os dados que serão enviados, como se fosse um banco de dados e escrever o seguinte:

```json
{
    "dados":[]
}
```

---

No arquivo server.js vamos fazer a rota "/post" do tipo POST e importar o fs para escrever os dados no arquivo data.json .

```js
const data = require("./data.json")
const fs = require("fs")
const express = require("express")
const server = express()
const nunjucks = require("nunjucks")

server.use(express.static("public"))
server.use(express.urlencoded({extended:true}))
server.use(express.json());
server.set("view engine", "njk")
nunjucks.configure("views", {
    express:server,
    autoescape:false,
    noCache:true,
})

server.get("/", (request , response) => {
    return response.render("home")
})
server.post("/post", (request, response) => {
    const keys = Object.keys(request.body)
    // Vendo se nenhum dado está vazio.
    for (key of keys) {
        if (request.body[key] == '') {
            return response.send("Please, fill all fields")
        }
    }
    // Desestruturando o request.body e pegando os dados dele.
    let { name, email } = request.body
    
    // A Variável do ID.
    const id = Number(data.dados.length + 1)
    // Inserindo no json os dados.
    data.dados.push({
        id,
        name,
        email,
    })
    // Escrevendo no json as alterações.
    fs.writeFile("data.json", JSON.stringify(data, null, 2), (err) => {
        if (err) {
            return response.send("White file error... :(")
        }
        return response.redirect("/")
    })
})
server.listen(3333)
```
---

Na rota GET do arquivo server.js vamos altera-la para também retornar uma variável.

```js

const data = require("./data.json")
const fs = require("fs")
const express = require("express")
const server = express()
const nunjucks = require("nunjucks")

server.use(express.static("public"))
server.use(express.urlencoded({extended:true}))
server.use(express.json());
server.set("view engine", "njk")
nunjucks.configure("views", {
    express:server,
    autoescape:false,
    noCache:true,
})

server.get("/", (request , response) => {
    // Retornando uma variável para o frontend.
    return response.render("home",{data: data.dados})
})
server.post("/post", (request, response) => {
    const keys = Object.keys(request.body)

    for (key of keys) {
        if (request.body[key] == '') {
            return response.send("Please, fill all fields")
        }
    }
    let { name, email } = request.body

    const id = Number(data.dados.length + 1)

    data.dados.push({
        id,
        name,
        email,
    })
    fs.writeFile("data.json", JSON.stringify(data, null, 2), (err) => {
        if (err) {
            return response.send("White file error... :(")
        }
        return response.redirect("/")
    })
})
server.listen(3333)
```

---

Para finalizar, no arquivo "home.njk" vamos escrever:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
</head>
<body>
    <h1>CRUD com nunjucks</h1>
    <form action="/post" method="post">
        <input type="text" placeholder="Seu nome." name="name">
        <input type="email" name="email" placeholder="Seu email.">
        <button type="submit">Enviar!</button>
    </form>
    <div class="dados">
        <ul>
            <h1>Dados</h1>
             
            {% for dados in data %}
                <ul>
                    <li>Nome:{{dados.name}}</li>
                    <li>Email:{{dados.email}}</li>
                </ul>
            {% endfor %}
            
        </ul>
    </div>
</body>
</html>


```
Repare que neste código acima temos um for, mas para que ele?

O for foi utilizado para percorrer a variável data que passamos no back-end e agora ele retorna outra variável com o nome dados

Ou seja

A cada dado ele vai retornar:

```html
<ul>
    <li>Nome:"o nome"</li>
    <li>Email:"o email"</li>
</ul>
```

---

Projeto Final com alguns dados:
![foto projeto final](https://dev-to-uploads.s3.amazonaws.com/i/416bcsbl3gk88hw1q2nl.PNG)

__Não se esqueça que a cada alteração rode "node server.js"__

Se este artigo realmente te ajudou compartilhe com seus amigos deixe o gostei se tiver e até a próxima!

Caso tenha alguma dúvida, confira o repositório no github que contem o todo código desenvolvido neste artigo!

[Link para o repositório.](https://github.com/jpbrab0/artigo-nunjucks)

Neste artigo, vamos entender um pouco do nunjucks!