DEV Community: Clerivaldo Junior

Um rápido Hello World com Haskell

Clerivaldo Junior — Wed, 04 Oct 2023 16:51:53 +0000

TLDR: O objetivo deste artigo é ser uma porta de entrada bem direto ao ponto, baseando-se na própria doc do Haskell, desde como configurar o ambiente de desenvolvimento até compilar e rodar seu primeiro código.

"Haskell é uma linguagem puramente funcional avançada. Um produto open source com mais de 20 anos de pesquisa de ponta, que permite um rápido desenvolvimento de programas robustos, concisos e corretos."
Haskell Wiki

1. Instalando

Instale o compilador ghc usando o comando curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh no Terminal. O procedimento padrão é pressionar a tecla enter sempre que questionado até a instalação finalizar.

PS.: Geralmente ao instalar o ghc, os pacotes necessários também são instalados, tornando o próximo passo desnecessário. Caso isso ocorra com sua instalação, simplesmente pule para o capítulo 2.

Após a instalação, abra uma nova janela/aba do Terminal e execute o comando ghcup tui para começarmos a instalar os pacotes restantes.
Seguindo a própria documentação do Haskell, precisamos de 4 pacotes:

GHC (Glasgow Haskell Compiler, a.k.a Compilador)
HLS (Haskell Language Server)
Cabal (Ferramenta para estruturar projetos Haskell, executá-los, definir dependências, etc)
Stack (Alternativa para o Cabal) Não há nenhum segredo sobre como instalar estes pacotes assim que a GUI for executada, basta navegar com as setas do teclado para escolher o pacote desejado, e instalar com i. Aconselho instalar os pacotes marcados como recommended.

2. Executando seu primeiro código

Com os pacotes instalados, estamos preparados para escrever nossos primeiros códigos em Haskell. Podemos usar ghci para iniciar uma CLI e rodar nosso código diretamente do terminal:

☁  ~  ghci     
GHCi, version 9.4.7: https://www.haskell.org/ghc/  :? for help
ghci> 6 + 3^2 * 4
42

Mas vamos usar o Vscode como IDE para escrever alguns arquivos. Vamos criar um arquivo com extensão .hs. Para nosso simples "Hello world" precisamos escrever o seguinte:

main = do
putStrLn "Hello World!"

Podemos ver que é bem parecido com varias outras langs que conhecemos(não tô falando de você Java).

Agora vamos compilar nosso arquivo usando ghc nome-do-arquivo.hs , isso irá nos gerar um executável para rodar nosso programa. Aqui meu arquivo se chama simplesmente hello-world:

☁  ~  ghc hello-world.hs                                  
[1 of 2] Compiling Main             ( hello-world.hs, hello-world.o )
[2 of 2] Linking hello-world

Depois disso, basta rodar nosso executável:

☁  ~  ./hello-world
Hello World!

E tá feito o programinha! Vale lembrar que o arquivo foi criado e compilado na mesma pasta.

3. Entendendo o que foi escrito

Tá mas o que é o main = do? É basicamente o ponto de entrada para a aplicação, necessário para um programa feito em Haskell. Fora de blocos iniciados com do as quebras de linha não fazem efeito ou diferença. Ao executar o programa, é necessário que a sequência de eventos esteja bem definida, logo usamos do para que dentro do seu bloco a quebra de linha seja 'respeitada' e assim definir as etapas do programa, isso deve ficar mais claro ao escrever um pouco mais de código.

Vamos adicionar mais uma linha, compilar e executar, deve rodar sem problema algum:

main = do
putStrLn "Hello World!"
putStrLn "Bye Bye World!"

Compilando e executando:

☁  ~  ./hello-world
Hello World!
Bye Bye World!

Agora vamos forçar um erro, podemos fazer isso de duas formas diferentes, desrespeitando a quebra de linha quando usando do:

main = do
putStrLn "Hello World!" putStrLn "Bye Bye World!"

Ou removendo o do

main = 
putStrLn "Hello World!"
putStrLn "Bye Bye World!"

Ao tentar compilar em ambos os casos temos o seguinte erro:

 ~ ghc hello-world.hs
[1 of 2] Compiling Main             ( hello-world.hs, hello-world.o ) [Source file changed]

hello-world.hs:2:5: error:
    • Couldn't match expected type: (String -> IO ()) -> String -> t
                  with actual type: IO ()
    • The function ‘putStrLn’ is applied to three value arguments,
        but its type ‘String -> IO ()’ has only one
      In a stmt of a 'do' block:
        putStrLn "Hello, World!" putStrLn "Second line of code"
      In the expression:
        do putStrLn "Hello, World!" putStrLn "Second line of code"
    • Relevant bindings include main :: t (bound at hello-world.hs:1:1)
  |
2 |     putStrLn "Hello, World!" putStrLn "Second line of code"
  |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Em resumo: nosso primeiro putStrLn está tentando printar a linha "Hello, World!" putStrLn "Second line of code". Conseguimos corrigir isso sem o do adicionando >> no que seria o final da primeira linha:

main = 
putStrLn "Hello World!" >>
putStrLn "Bye Bye World!"

Isso dará uma estrutura e ordenação para nosso código, o informando para rodar primeiro putStrLn "Hello World!" e depois putStrLn "Bye Bye World!".

4. Dever de casa

Haskell é uma linguagem funcional, logo vale escrever diferentes funções e entender seus comportamentos.
Sugestão: Adicionar ainda mais linhas e criar suas próprias funções fora do bloco main.

Your first API with Bun, Express and Prisma

Clerivaldo Junior — Wed, 20 Sep 2023 17:07:23 +0000

Have you seen this new, cool, and fast runtime for JavaScript, and are wondering how to begin developing web applications? Maybe this article will help. I love to see new ways to create applications that bring innovation to the JS ecosystem, and Bun brings a little more to it. Here, without further libraries, you can create your API, test it, bundle it, and even use its own SQLite integration, all of that while being a fast and easy-to-use runtime. It even has some frameworks already, but it's content for the future.

Installation and Hello World

First of all, download and install bun using curl just like said in bun.sh

☁ ~ curl -fsSL 'https://bun.sh/install' | bash
######################################################################## 100,0%
bun was installed successfully to ~/.bun/bin/bun 
Run 'bun --help' to get started

Then, create a folder where you want your project to be, cd into it, and execute bun init , this will scaffold a new project, you'll have to choose the project's name and the entry point. By default the cli will use the name of your folder and start at index.ts.

☁  projects  mkdir bunApp  
☁  projects  cd bunApp  
☁  bunApp  bun init    
bun init helps you get started with a minimal project and tries to guess sensible defaults. Press ^C anytime to quit

package name (bunapp): 
entry point (index.ts): 

Done! A package.json file was saved in the current directory.
 + index.ts
 + .gitignore
 + tsconfig.json (for editor auto-complete)
 + README.md

To get started, run:
  bun run index.ts
☁  bunApp

After that, open your favorite ide(here im using vscode) and you'll see a very lean content, with some configuration files and a index.ts containing our Hello World!!

Almost all of those files are really common to every repository, but there's one called bun.lockb, its an auto-generated file similar to others .lock files and that's not of so much importance right now, but you can learn about it in the Bun documentation.
We already can run our index.ts file to start our little project,

☁  bunApp  bun index.ts
Hello via Bun!
☁  bunApp

Before we continue to the next topic, there's one more thing to do. If you're familiar with Node, you've probably used Nodemon to monitor the project and reload when the code is changed. Bun simply uses the --watch tag to run in this mode, so you don't need an external module.
Let's add two scripts to our package.json, one to start the project and one for the developer mode, including the --watch tag.

{
    "name": "bunapp",
    "module": "index.ts",
    "type": "module",
    "scripts": {
        "start": "bun run index.ts",
        "dev": "bun --watch run index.ts"
    },
    "devDependencies": {
        "bun-types": "latest"
    },
    "peerDependencies": {
        "typescript": "^5.0.0"
    },
}

Routes

To initiate our server we just use Bun.serve(). It can receive some parameters, but for now we only need the port to access our application and the fetch() handler which we're using to deal with our requests. Write the code below and run our script bun run dev

const server = Bun.serve({
    port: 8080,
    fetch(req) {
        return new Response("Bun!")
    }
})

console.log(`Listening on ${server.hostname}: ${server.port}...`)

That's our first http request. As we didn't specified the method, it will return the response Bun! to any request made for our endpoint, which should be localhost:8080. We will deal with it in the next topic, for now lets just add some more code following the documentation example to compose our routes.

const server = Bun.serve({
    port: 8080,
    fetch(req) {
        const url = new URL(req.url)
        if(url.pathname === "/") return new Response("Home Page!")
        if(url.pathname === "/blog") return new Response("Blog!")
        return new Response("404!")
    }
})

console.log(`Listening on ${server.hostname}: ${server.port}...`)

It's taking our url from the request object and parsing to a URL object using Node's API. It happens because Bun aims for Node full compatibility, so most of libs and packages used on Node works on Bun out of the box.

HTTP Requests

If you wish, use console.log(req) to view our request object, it looks like this:

Listening on localhost: 8080...
Request (0 KB) {
  method: "GET",
  url: "http://localhost:8080/",
  headers: Headers {
    "host": "localhost:8080",
    "connection": "keep-alive",
    "upgrade-insecure-requests": "1",
    "user-agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36",
    "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8",
    "accept-language": "en-US,en",
    "sec-fetch-mode": "navigate",
    "sec-fetch-dest": "document",
    "accept-encoding": "gzip, deflate, br",
    "if-none-match": "W/\"b-f4FzwVt2eK0ePdTZJcUnF/0T+Zw\"",
    "sec-ch-ua": "\"Brave\";v=\"117\", \"Not;A=Brand\";v=\"8\", \"Chromium\";v=\"117\"",
    "sec-ch-ua-mobile": "?0",
    "sec-ch-ua-platform": "\"Linux\"",
    "sec-gpc": "1",
    "sec-fetch-site": "none",
    "sec-fetch-user": "?1"
  }
}

Now here's the thing, we can use a LOT of conditionals to check the method and/or the endpoint. It becomes painfully polluted and doesn't look good to read

const server = Bun.serve({
    port: 8080,
    fetch(req) {
        const url = new URL(req.url)
        if(url.pathname === "/") return new Response("Home Page!")
        if(url.pathname === "/blog") {
        switch (req.method) {
            case "GET":
            // handle with GET
            case "POST":
            // handle with POST
            case "PUT":
            // handle with PUT
            case "DELETE":
            // handle with DELETE
            }
            // any other routes and methods...  
        }
        return new Response("404!")
    }
})

console.log(`Listening on ${server.hostname}: ${server.port}...`)

Remember that most Node packages runs on Bun as well? Let's use Express to ease our development process, we can view details in Bun's documentation. Let's start by stopping our application with CTRL + C and running bun add express

Listening on localhost: 8080...
^C
☁  bunApp  bun add express
bun add v1.0.2 (37edd5a6)

 installed express@4.18.2


 58 packages installed [1200.00ms]
☁  bunApp

and rewrite our index.ts using a Express template with some routes

import express, { Request, Response } from "express";

const app = express();
const port = 8080;
app.use(express.json());

app.post("/blog", (req: Request, res: Response) => {
//create new blog post
});

app.get("/", (req: Request, res: Response) => {
res.send("Api running");
});

app.get("/blog", (req: Request, res: Response) => {
//get all posts
});

app.get("/blog/:post", (req: Request, res: Response) => {
//get a specific post
});

app.delete("/blog/:post", (req: Request, res: Response) => {
//delete a post
});

app.listen(port, () => {
console.log(`Listening on port ${port}...`);
});

Adding a database

One last thing for our CRUD is to implement Database connections. Bun already has its own SQLite3 driver, but we're using Prisma since dealing with an ORM is easier. Let's follow the guide from Bun documentation and start by adding Prisma with bun add prisma and initializing it with bunx prisma init --datasource-provider sqlite. Then navigate to our new schema.prisma file and insert a new model.

☁  bunApp  bun add prisma                               
bun add v1.0.2 (37edd5a6)

 installed prisma@5.3.1 with binaries:
  - prisma


 2 packages installed [113.00ms]
☁  bunApp  bunx prisma init --datasource-provider sqlite

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

warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.

Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started
2. Run prisma db pull to turn your database schema into a Prisma schema.
3. Run prisma generate to generate the Prisma Client. You can then start querying your database.

More information in our documentation:
https://pris.ly/d/getting-started

☁  bunApp

After that, run bunx prisma generate and then bunx prisma migrate dev --name init. Now we got what we need to our little API. Go back to our index.ts, import and initialize the Prisma client, then we're ready to finish our routes.

import { PrismaClient } from "@prisma/client";

/* Config database */
const prisma = new PrismaClient();

The final index.ts file should look like this in the end:

import express, { Request, Response } from "express";
import { PrismaClient } from "@prisma/client";

/* Config database */
const prisma = new PrismaClient();

/* Config server */
const app = express();
const port = 8080;
app.use(express.json());

app.post("/blog", async (req: Request, res: Response) => {
    try {
        const { title, content } = req.body;

        await prisma.post.create({
            data: {
            title: title,
            content: content,
            },
        });
        res.status(201).json({ message: `Post created!` });
    } catch (error) {
        console.error(`Something went wrong while create a new post: `, error);
    }
});

app.get("/", (req: Request, res: Response) => {
    res.send("Api running");
});

app.get("/blog", async (req: Request, res: Response) => {
    try {
        const posts = await prisma.post.findMany();
        res.json(posts);
    } catch (error) {
        console.error(`Something went wrong while fetching all posts: `, error);
    }
});

app.get("/blog/:postId", async (req: Request, res: Response) => {
    try {
        const postId = parseInt(req.params.postId, 10);

        const post = await prisma.post.findUnique({
            where: {
                id: postId,
            },
        });
        if (!post) res.status(404).json({ message: "Post not found" });
        res.json(post);
    } catch (error) {
        console.error(`Something went wrong while fetching the post: `, error);
    }
});

app.delete("/blog/:postId", async (req: Request, res: Response) => {
    try {
        const postId = parseInt(req.params.postId, 10);
        await prisma.post.delete({
            where: {
            id: postId,
            },
        });
        res.send(`Post deleted!`);
    } catch (error) {
        return res.status(404).json({ message: "Post not found" });
    }
});

app.listen(port, () => {
    console.log(`Listening on port ${port}...`);
});

Conclusion

Finally our API is done! From here on you can implement a bunch of other things such as: adding more models, creating a frontend and, of course, writing some tests(try do that next). You can see that Bun provides some quality of life while being compatible with most of Node packages, making our developer lives easier.