En esta ocasión veremos cómo crear una aplicación web con ClojureScript.
Requisitos:
- Tener instalado Node (Npm).
- Tener conocimientos de HTML, Javascript y un poco de CSS.
- Tener conocimientos de Clojure.
La aplicación será una sencilla calculadora de pulsaciones. Fórmulas:
No. pulsaciones masculina = (220 - edad) No. pulsaciones femenina = (226 - edad)
El formulario pedirá tres datos:
- Nombre.
- Edad y
- Género (masculino y femenino).
Comenzamos creando el directorio del proyecto y nos posicionamos en el:
1 2 | $ mkdir pulsaciones-cljs $ cd pulsaciones-cljs |
Iniciamos un proyecto con Npm:
1 | $ npm init -y
|
Deberemos instalar éstas dependencias:
1 2 3 | $ npm install shadow-cljs $ npm install reagent $ npm install react react-dom create-react-class |
Instalar también ``http-server``, esto para ejecutar la aplicación (al final):
1 | $ npm install http-server
|
La estructura de carpetas será la siguiente:
1 2 3 4 5 6 7 8 | pulsaciones-cljs/
src/
pulsaciones/
core.cljs
public/
index.html
package.json
shadow-cljs.edn
|
Creamos el archivo ``shadow-cljs.edn``. Deberá tener esto:
1 2 3 4 5 6 7 8 9 10 11 | {:source-paths ["src"] :dependencies [[reagent "1.2.0"] [cljsjs/react "17.0.2-0"] [cljsjs/react-dom "17.0.2-0"]] :builds {:app {:target :browser :output-dir "public/js" :asset-path "/js" :modules {:main {:init-fn pulsaciones.core/init}}}}} |
El programa principal ``core.cljs``
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | (ns pulsaciones.core (:require [reagent.core :as r] [reagent.dom :as rdom])) (defonce state (r/atom {:nombre "" :edad "" :genero "" :resultado nil})) (defn calcular-pulsaciones [edad genero] (let [e (js/parseInt edad)] (if (= genero "Femenino") (- 226 e) (- 220 e)))) (defn form-input [label key type] [:div [:label label] [:input {:type type :value (get @state key) :on-change #(swap! state assoc key (.. % -target -value))}]]) (defn genero-select [] [:div [:label "Género: "] [:select {:value (:genero @state) :on-change #(swap! state assoc :genero (.. % -target -value))} [:option {:value ""} "-- Selecciona --"] [:option {:value "Masculino"} "Masculino"] [:option {:value "Femenino"} "Femenino"]]]) (defn calcular-btn [] [:button {:style {:background-color "lightgray" :border "2px solid black"} :on-click #(let [{:keys [edad genero]} @state resultado (calcular-pulsaciones edad genero)] (swap! state assoc :resultado resultado))} "Calcular"]) (defn resultado [] (when-let [res (:resultado @state)] [:div {:style {:border "4px solid purple" :margin-top "20px" :padding "10px"}} [:h3 "Resultados"] [:p [:strong "Número de pulsaciones obtenidas: "] [:span {:style {:color "red"}} (str res " pulsaciones")]]])) (defn app [] [:div {:style {:font-family "Arial" :margin "40px"}} [:h2 [:span {:style {:color "skyblue"}} "Pulsaciones"] " " [:span {:style {:color "brown"}} "Calculator"]] [form-input "Nombre: " :nombre "text"] [form-input "Edad: " :edad "number"] [genero-select] [:br] [calcular-btn] [resultado]]) (defn init [] (rdom/render [app] (.getElementById js/document "app"))) |
Compilamos:
1 | $ npx shadow-cljs watch app |
Esto creará un programa Javascript. Deberemos tener una página HTML para incrustrarlo:
index.html
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html"> <title>Pulsaciones Calculator</title> </head> <body> <div id="app"></div> <script src="js/main.js"></script> </body> </html> |
Ahora abrir una nueva terminal y ejecutar ``http-server`` de la siguiente forma:
1 | $ http-server public
|
Si todo va bien, abriremos un navegador en la dirección:
http://192.168.1.68:8081
¡Hemos creado nuestra aplicación web para cálculo de pulsaciones!
Enlaces:
https://shadow-cljs.github.io/docs/UsersGuide.htmlhttps://clojurescript.org/tools/shadow-cljs
https://www.npmjs.com/package/shadow-cljs
https://github.com/shadow-cljs/quickstart-browser
Comentarios
Publicar un comentario