Enzzo Cavallo

Olá Clojurescript!

2019-12-23T00:00:00+00:00

Ao final desse tutorial você deve ter um projeto clojurescript

Vou supor que o leitor:

Que é entendido como utilizar a linha de comando de um sistema operacional tipo-unix
Que há java e node instalados em sua maquina

Mapa geral

DICA: Quando digo que algo deve ser "commitado", entenda que é algo importante que deve ser salvo.
Quando digo "não commitado", entenda que vc pode deletar aquele arquivo e ele será baixado/gerado sozinho novamente.

O projeto vai se chamar ola-mundo.

Vamos usar o npm para rodar o shadow-cljs

O npm é configurado via arquivo package.json

O npm install gera o arquivo package-lock.json que deve ser commitado e a pasta node_modules, que não deve ser commitada.

shadow-cljs é responsavel por “compilar” seu clojurescript

O shadow-cljs vai gerar milhares de arquivos na pasta target. Esses arquivos podem ser deletados e não devem ser commitados

Para configurar o shadow-cljs precisamos de dois arquivos:

O shadow-cljs.edn, que contem informações sobre “o que vc quer que eu compile”

O shadow-cljs também aproveita dependencias diretamente do package.json

Apesar do shadow-cljs rodar via npm (node), ele precisará chamar o compilador de clojurescript, que precisa do java.

Conferindo os requisitos

Vamos conferir se há node, npm e java instalados. Para isso digite os seguintes comandos no terminal.

$ node --version
v13.4.0
$ npm --version
6.12.1
$ java -version
openjdk version "1.8.0_232"
OpenJDK Runtime Environment (build 1.8.0_232-b09)
OpenJDK 64-Bit Server VM (build 25.232-b09, mixed mode)

Criando projeto

Crie uma pasta chamada ola-mundo.
Crie o arquivo shadow-cljs.edn dentro da pasta ola-mundo. Neste arquivo configuramos o shadow-cljs para compilar o clojurescript, subir um servidor HTTP e servir o HTML que vamos criar.

{:source-paths ["src" "resources"]
 :dependencies [[reagent/reagent "0.8.1"]]
 :dev-http     {8080 ["target/public" "classpath:public"]}
 :builds       {:ola-mundo {:target     :browser
                            :output-dir "target/public"
                            :asset-path "/"
                            :modules    {:main {:init-fn ola-mundo.client/main}}
                            :devtools   {:after-load ola-mundo.client/after-load}}}}

Crie o arquivo package.json. Neste arquivo configuramos o npm para baixar as dependencias que vamos usar

{
  "scripts": {
    "start": "shadow-cljs watch ola-mundo"
  },
  "dependencies": {
    "create-react-class": "15.6.3",
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "shadow-cljs": "2.8.83"
  }
}

Crie as patas necessárias para criar o arquivo resources/public/index.html. Nele temos um HTML minimo para uma aplicação tipo-react

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Olá mundo!</title>
</head>
<body>
<div id="app"></div>
<script src="/ola-mundo/main.js"></script>
</body>
</html>

Crie o arquivo src/ola_mundo/client.cljs. Repare que o ola_mundo no nome da pasta está com _ enqunto em todos outros lugares está com -. Este é o modo correto. Caso tenha curiosidade no motivo disso, procure sobre munge.

(ns ola-mundo.client
  (:require [reagent.core :as r]))

(defn main
  [] 
  (r/render
    [:div "Olá mundo!"]
    (.getElementById js/document "app")))

(defn after-load
  []
  (main))

Após criar estes rquivos, vc deve ter exatamente essa estrutura de diretórios:

.
├── package.json
├── package-lock.json
├── resources
│   └── public
│       └── index.html
├── shadow-cljs.edn
└── src
    └── ola_mundo
        └── client.cljs

Iniciando o shadow-cljs

Execute npm install && npm start. Esse processo deve demorar MUITO na primeira vez (5 min talvez). Da segunda vez em diante (incluindo novos projetos) esse tempo já deve cair para 1min.

$ npm start

Uma vez o shadow-cljs rodando, conecte em localhost:8080. Daí para frente vc já pode editar o arquivo src/ola_mundo/client.cljs e ver o resultado das alterções enquanto edita.

Graphql API com clojure

2019-03-08T00:00:00+00:00

Esse post é uma edição comemorativa da criação da comunidade graphql-brasil, que já conta com

slack (convites)
github

O fonte final está disponivel em github.com/souenzzo/clj-graphql-tutorial

Criando projeto

Confira se há uma versão recente do clojure instalado na sua maquina

$ clj -Sdescribe
{:version "1.10.0.408"
 :config-files ["/usr/share/clojure/deps.edn" "/home/souenzzo/.clojure/deps.edn" ]
 :install-dir "/usr/share/clojure"
 :config-dir "/home/souenzzo/.clojure"
 :cache-dir "/home/souenzzo/.clojure/.cpcache"
 :force false
 :repro false
 :resolve-aliases ""
 :classpath-aliases ""
 :jvm-aliases ""
 :main-aliases ""
 :all-aliases ""}

Em um diretório vazio, crie um arquivo deps.edn

{:paths   ["src" "resources"]
 :deps    {org.clojure/clojure              {:mvn/version "1.10.0"}
           com.walmartlabs/lacinia          {:mvn/version "0.32.0"}
           com.walmartlabs/lacinia-pedestal {:mvn/version "0.11.0"}
           io.pedestal/pedestal.service     {:mvn/version "0.5.5"}
           io.pedestal/pedestal.jetty       {:mvn/version "0.5.5"}
           org.clojure/java.jdbc            {:mvn/version "0.7.9"}
           org.postgresql/postgresql        {:mvn/version "42.2.5"}}
 :aliases {:dev {:extra-paths ["test"]
                 :extra-deps  {org.clojure/test.check {:mvn/version "0.10.0-alpha3"}}}}}

Neste arquivo, configuramos das dependencias do projeto.

No path colocamos src, onde ficará o códio e resources, onde ficarão nossos schemas

No deps temos:

org.clojure/clojure Clojure é apenas uma biblioteca. Podemos escolher sua versão aqui
com.walmartlabs/lacinia Implementação do graphql para clojure. Ela que nos da a função (execute schema "{hello}" vars ctx) ;;=> {:data {:hello "world"}}
com.walmartlabs/lacinia-pedestal Ajuda a adaptar o lacinia a funcionar via HTTP, usando o servidor HTTP pedestal. Também traz o graphiql
io.pedestal/pedestal.service Servidor HTTP pedestal. Usaremos algumas funcionalidades dele diretamente, principalmente para teste
io.pedestal/pedestal.jetty O pedestal permite vários backends. Usaremos o jetty, mas poderia ser immutant, tomcat ou mesmo aws lambda.
org.clojure/java.jdbc Adaptador para usar JDBC sem ter que instanciar 200 classes
org.postgresql/postgresql Backend usado no jdbc.

Crimos também em aliases um alias chamado dev, que adiciona a pasta de testes test e a dependencia de testes.

Neste momento, já podemos abrir o REPL para nunca mais fechar

$ clj -A:dev
Clojure 1.10.0
user=>

Depois de baixar algumas dependencias, deve aparecer um REPL para vc.

Agora vamos ao SQL. Caso você não tenha um postgres rodando na sua porta 5432, execute:

$ docker run --name my-postgres --rm -p 5432:5432 postgres:alpine

Irá iniciar um postgres, que será destruido (incluindo dados) quando vc apetar ctrl-c no terminal.

Interagindo com o SQL

Definiremos o schema do SQL oo arquivo resources/schema.sql.

CREATE TABLE usuario
(
  id   SERIAL NOT NULL UNIQUE PRIMARY KEY,
  nome TEXT   NOT NULL UNIQUE
);

CREATE TABLE todo
(
  id        SERIAL NOT NULL UNIQUE PRIMARY KEY,
  descricao TEXT
);

CREATE TABLE todos_do_usuario
(
  id      SERIAL NOT NULL UNIQUE PRIMARY KEY,
  usuario SERIAL NOT NULL REFERENCES usuario (id),
  todo    SERIAL NOT NULL UNIQUE REFERENCES todo (id)
);

De volta no seu REPL (você deixou aberto, né?), usaremos ele para instalar esse schema

Para isso, vamos usar a jdbc/execute!, que recebe 3 argumetnos:

um mapa com as configurações
Uma string com os comandos SQL
Um mapa de configurações extras.

Por padrão, o jdbc/execute! engloba seu comando numa transação, por isso passamos o terceiro parametro desabilitando essa funcionalidade

No mapa de configuração é necessário dizer o dbname, que ainda não existe. Colocamos uma string vazia.

Depois de criar o database, aproveitamos para instalar o schema (dessa vez com o dbname já setado)

user=> (require '[clojure.java.jdbc :as jdbc])
nil
user=> (jdbc/execute! {:dbtype "postgresql" :host "localhost" :user "postgres" :dbname ""} "CREATE DATABASE app;" {:transaction? false})
[0]
user=> (jdbc/execute! {:dbtype "postgresql" :host "localhost" :user "postgres" :dbname "app"} (slurp "resources/schema.sql"))
[0]

Essa tarefa que fizemos no REPL é util e provavelmente vamos querer ela algumas vezes. Por isso vou salvar ela num arquivo

src/app/core.clj

(ns app.core
  (:require [clojure.java.jdbc :as jdbc]
            [clojure.java.io :as io])
(defn init-db!
  [db]
  (jdbc/execute! (assoc db :dbname "")
                 (str "DROP DATABASE IF EXISTS " (:dbname db) ";")
                 {:transaction? false})
  (jdbc/execute! (assoc db :dbname "")
                 (str "CREATE DATABASE " (:dbname db) ";")
                 {:transaction? false})
  (jdbc/execute! db (slurp (io/resource "schema.sql"))))

(def app-db
  {:dbtype "postgresql"
   :dbname "app"
   :host   "localhost"
   :user   "postgres"})

Alguns detalhes:

Os arquivos clojure sempre devem declarar um namespace correspondente a sua posição
Não é uma boa pratica usar namespaces não qualificados (ns app ...)
Usamos ìo/resource para evitar a leitura de arquivos que não sejam recursos e para funcionar corretamente caso a aplicação esteja rodando em um .jar
Isso está longe de ser boas praticas de SQL ;)

De volta ao REPL, podemos brincar um pouco com o jdbc:

user=> (require 'app.core)
user=> (in-ns 'app.core)
app.core=> (jdbc/query app-db ["SELECT * FROM usuario"])
[]
app.core=> (jdbc/insert! app-db :usuario {:nome "me"})
{:id 1 :nome "me"}
app.core=> (jdbc/query app-db ["SELECT * FROM usuario"])
[{:id 1 :nome "me"}]

Interagindo com o GraphQL

Agora vamos ao graphql. Será que é possivel fazer um { hello } em uma linha de lacinia?

app.core=> (require '[com.walmartlabs.lacinia :as lacinia] '[com.walmartlabs.lacinia.schema :as schema])
app.core=> (lacinia/execute (schema/compile {:objects {:QueryRoot {:fields {:hello {:type 'String :resolve (constantly "mundo!")}}}}}) "{ hello }" {} {})
{:data #ordered/map ([:hello "mundo!"])}

Vamos entender:

lacinia/execute recebe 4 argumentos: o schema compilado, a string de query, um mapa com as variaveis, e um mapa de contexto
schema/compile gera um “schema compilado”, baseado numa descrição de EDN
No retorno, era esperado {:data {:hello "mundo!"}}, porém, como na especificação do GraphQL é dito que a ordem dos pares kv no mapa importam e devem ser respeitadas, e o mapa padrão do clojure é indiferente quanto ordem, o lacinia precisa usar esse tipo customizado, que se comporta como mapa 99% do tempo, porém na hora de serializar respeita a ordem.

Recomendo fortemente consultar os manuais e documentações do lacinia

O lacinia permite que vc escreva seu schema usando o GraphQL SDL, e faremos isso

app.core=> (require '[com.walmartlabs.lacinia.schema :as schema])
app.core=> (parser.schema/parse-schema "type QueryRoot { hello: String }" {:resolvers {:QueryRoot {:hello :look-at-me}}})
{:objects {:QueryRoot {:fields {:hello {:type String, :resolve :look-at-me}}}}}

Podemos observar que a parse-schema retorna uma estrutura de dados quase igual aquela que passamos como argumento para o schema/compile, a menos do :look-at-me, que eu deveria ter posto uma função no lugar da keyword.

Você pode tentar fazer o {hello} novamente: (-> (parse-schema "..." {...}) (compile) (execute ".." {} {}))

Vamos jogar nosso schema em resources/schema.graphql

type Todo {
    id: ID!
    descricao: String!
}
type Usuario {
    id: ID!
    nome: String!
    todos: [Todo!]
}
type MutationRoot {
    meCria(nome: String!): Usuario!
    novoTodo(descricao: String!, nome_usuario: String!): Usuario!
    deletaTodo(id: ID!): Usuario!
}
type QueryRoot {
    eu (nome: String!): Usuario!
}

Vale dizer que QueryRoot e MutationRoot é o nome padrão que o lacinia procura para seus roots. Outras implemntações podem usar outros nomes.

Já podemos fazer uma função que pega esse schema e retorna o schema compilado do lacinia.

(ns app.core
  (:require [com.walmartlabs.lacinia.schema :as schema]
            [com.walmartlabs.lacinia :as lacinia]
            [clojure.java.jdbc :as jdbc]
            [com.walmartlabs.lacinia.parser.schema :as parser.schema]
            [clojure.java.io :as io]))

(defn resolve-eu
  [_ args parent]
  (prn [:resolve-eu args parent])
  {:id 0 :nome "WIP"})

(defn me-cria
  [_ _ _]
  (comment
  ;; TODO
    []))

(defn novo-todo
  [_ _ _]
  (comment
  ;; TODO
    []))

(defn deleta-todo
  [_ _ _]
  (comment
  ;; TODO
    []))

(defn resolve-todos
  [_ args parent]
  (prn [:resolve-todos args parent])
  [])


(defn get-compiled-schema
  []
  (-> (io/resource "schema.graphql")
      (slurp)
      (parser.schema/parse-schema {:resolvers {:Usuario      {:todos resolve-todos}
                                               :QueryRoot    {:eu resolve-eu}
                                               :MutationRoot {:meCria     me-cria
                                                              :novoTodo   novo-todo
                                                              :deletaTodo deleta-todo}}})
      (schema/compile)))


(defn init-db!
  [db]
  (jdbc/execute! (assoc db :dbname "")
                 (str "DROP DATABASE IF EXISTS " (:dbname db) ";")
                 {:transaction? false})
  (jdbc/execute! (assoc db :dbname "")
                 (str "CREATE DATABASE " (:dbname db) ";")
                 {:transaction? false})
  (jdbc/execute! db (slurp (io/resource "schema.sql"))))

(def app-db
  {:dbtype "postgresql"
   :dbname "app"
   :host   "localhost"
   :user   "postgres"})

(def app-context
  {::jdbc/db app-db})

Os resolvers do lacinia: resolve-todos, resolve-eu, me-cria, novo-todo e deleta-todo recebem 3 argumentos:

O “contexto” da aplicação. Aquele que vem no ultimo argumento do lacinia/execute. Geralmente é um mapa, vc pode colocar qualquer coisa lá.
Os argumentos da query/mutation. Se a query é { hello (id: 1) }, no segundo argumento deve chegar {:id 1}
A entidade pai. Se temos a query { eu { id nome todos { id } } } e todos tem um resolver proprio, então ele recebe o resutado do resolve eu no terceiro argumento.

Coloquei alguns prn para tentar a ajudar a entender

Não fechou o REPL né? Ele deve ficar aberto para sempre!!!!!!

app.core=> (require 'app.core :reload) ;; carregando as novidades do arquivo
app.core=> (lacinia/execute (get-compiled-schema) "{ eu(nome: \"mesmo\") { id nome todos { id } } }" {} app-context)
[:resolve-eu {:nome "mesmo"} nil] ;; 1
[:resolve-todos nil {:id 0, :nome "WIP"}] ;; 2
{:data #ordered/map ([:eu #ordered/map ([:id "0"] [:nome "WIP"] [:todos ()])])}

O prn da resolve-eu, mostrando que recebeu no primeiro parametro os argumentos passados em eu na query
O prn da resolve-todos, mostrndo que não há argumentos, porém á um “parent”

API HTTP

Vamos aproveitar esse momento que temos uma query funcional e subir o servidor HTTP.

Faça o require de [io.pedestal.http :as http], [com.walmartlabs.lacinia.pedestal :as pedestal] e adicione no fim do src/app/core.clj o código:

(defonce runnable-service (atom nil))

(defn run-dev
  "Para chamar no repl, desenvolvimento"
  [& args]
  (swap! runnable-service (fn [srv]
                            (when srv
                              (http/stop srv))
                            (-> #(get-compiled-schema)
                                (pedestal/service-map {:env         :dev
                                                       :app-context app-context
                                                       :graphiql    true})
                                #_(http/dev-interceptors)
                                (http/create-server)
                                (http/start)))))

Agora vc pode chamar no REPL o (require app.core :reload) e iniciar o servidor via (run-dev).

Em http://localhost:8888 deve ter um playground graphiql onde vc pode tentar executar novamente nossa query { eu(nome: \"mesmo\") { id nome todos { id } } }

Implementando resolvers

Agora já pode tentar implementar essas funções.

Repare na variavel app-context, que é passada como “Contexto da aplicação” no execute. Ela coloca o db em ::jdbc/db. Para acessaar ela, precisamos pegar esse valor do contexto (primeiro argumento do resolver)

Exemplo de uma possivel implementação de “resolve-eu”

(defn resolve-eu
  [{::jdbc/keys [db]} {:keys [nome]} _]
  (-> (jdbc/query db ["SELECT id,nome FROM usuario WHERE nome = ?"
                      nome])
      first))

A implementação está no github!

Testes, testes, testes, testes

Na hora de implementar as funçoes, muitas vezes vc vai fazer reload, rodar novamente uma função e conferir o retorno. Essa tarefa chata e repetitiva pode ser vacilitada com TESTES.

No github tem testes. Após copiar o arquivo de teste (e algumas funções que ele requer da app.core), basta rodar no REPL

app.core=> (require '[clojure.test :refer [run-tests]])
app.core=> (run-tests 'app.core-test)

How to add react-native in a running cljs project

2019-03-01T00:00:00+00:00

This tutorial will cover how to add react-native in a running cljs project.

I will flow this repo: souenzzo/cljs-rn-tutorial

To run this app you need to start the repl with all profiles clj -A:dev:cljs then call (user/-main)

commit Add the react-native dependencie

yarn add react-native

commmit Generate react-native files

Createa a app.json file

{ "name":        "cljsrn"
, "displayName": "cljs+rn"}

Append this in your .gitignore

...
android/.gradle/
android/app/build/

run ./node_modules/.bin/react-native eject and git add ios app.json android

I also do not like to commit generated files, but it is necessary :'(

commit

Create a index.js this this template.

Then you can run ./node_modules/.bin/react-native start and ./node_modules/.bin/react-native run-android

To make a ./node_modules/.bin/react-native run-android, you need to get a emulator running or a phone in the cabble with android dev stuff configured.

Once you get the app running on android, you can edit the text, save, press r-r on the emulator and see the reload

commit Configure shadow-cljs This commit will configure shadow-cljs and move the hello from js to cljs.

After do this, you will need to restart the REPL. That shoud be the only one restart.

commit Start fulcro app

I started the fulcro. Coping the code from the web and moving the dom ns to react-native.

[WIP] - I need to get the remote working.

PHP + SQL docker setup

2019-03-01T00:00:00+00:00

Let’s say that it’s 2019 and for some odd reason you need to setup a PHP dev env

First, let’s start a postgres service.

docker run --name my-postgres --rm -p 5432:5432 postgres:alpine

This docker container has to have a name. my-postgres in this case. It will be used

To connect a client to postgres, we can run

docker run --link my-postgres --rm -it postgres:alpine psql -U postgres -h my-postgres

--link my-postgres will make my-postgres DNS points to the IP of my-postgres container.

Then we say to psql connect to my-postgres host.

Now we can run the php container.

First, go to your working dir

cd awesome-php-project

cat index.php
<!DOCTYPE html>
<html>
<head>
<title>PHP Hello!</title>
</head>
<body>
<?php
  $conn = pg_connect("host=my-postgres port=5432 user=postgres");
  $result = pg_query($conn, "select * from pg_stat_activity");
  var_dump(pg_fetch_all($result));

?>
</body>
</html>

See that we are connecting the pg_connect to mypostgres host.

docker run \
  --rm \
  --name  my-php \
  --link my-postgres:postgres \
  -p 8000:8000 \
  -v"$(pwd):/usr/src/myapp" \
  -w /usr/src/myapp \
  php:cli sh -c \
  'apt-get update && apt-get install -y libpq-dev && docker-php-ext-configure pgsql -with-pgsql=/usr/local/pgsql && docker-php-ext-install pdo pdo_pgsql pgsql && php -S 0.0.0.0:8000'

Now you can connect to http://localhost:8000 and see your awesome app.

For PHP reaons, PHP will not stop with ctrl+c nor ctrl+d

To stop this container, we need to run `docker kill my-php`

Conexao Postgres utilizndo pHP

<?php
  $bdcon4 = pg_connect("host=my-postgres dbname='nome_do_banco' port=5432 user=postgres");
// $**** define uma variavel de conexao
//coneta a um banco de dados chamado "nome_do_banco" na máquina "my-postgres" com um usuário e senha
if(!$bdcon4)
{ print "Falha deu ruim";
}
//avisa de a  conexao deu errado "!" é a negativa
?>

Insere um dado em uma tabela

<?php
include_once("conexao.php");
//inclui todos os dados de "conexao.php"

$nome = $_POST['nome'];
$email = $_POST['email'];
$profissao = $_POST['profissao'];
$sql =pg_query($bdcon4, "INSERT INTO usuarios(nome, email, profissao) VALUES('$nome','$email','$profissao')");
// insere dentro da tabela "usuarios" do banco de dados "nome_do_banco" que foi definido na conexao.php acima

pg_close($bdcon4);
?>

Enzzo Cavallo

Olá Clojurescript!

Mapa geral

Conferindo os requisitos

Criando projeto

Iniciando o shadow-cljs

Graphql API com clojure

Criando projeto

Interagindo com o SQL

Interagindo com o GraphQL

API HTTP

Implementando resolvers

Testes, testes, testes, testes

How to add react-native in a running cljs project

PHP + SQL docker setup

To stop this container, we need to run docker kill my-php

To stop this container, we need to run `docker kill my-php`