Ir al contenido principal

Calculadora de pulsaciones con ClojureScript

Imagen
De Beta

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.html
https://clojurescript.org/tools/shadow-cljs
https://www.npmjs.com/package/shadow-cljs
https://github.com/shadow-cljs/quickstart-browser
Etiquetas:

Comentarios

Publicar un comentario

Entradas populares de este blog

Programación Windows Batch (CMD) parte 3

De Dr. Lang
Crear ciclos para efectuar operaciones tediosas nos ahorrará tiempo para realizar otras tareas. En está ocasión veremos ciclos con FOR . ¿Cuál es la síntaxis de bucle FOR en Windows Batch? Si está dentro de un archivo *.bat : FOR %%variable IN (seq) DO operaciones Si lo ejecutamos en una terminal: FOR %variable IN (seq) DO operaciones Ejemplo 1 . Recorrer una secuencia de números del 0 al 5: recorrer.bat @ echo off FOR %%i in ( 0 1 2 3 4 5 ) DO echo Hola no. %%i pause Nos imprimirá en pantalla: Hola no. 0 Hola no. 1 Hola no. 2 Hola no. 3 Hola no. 4 Hola no. 5 ¿Puedo usar contadores? Si, se pueden usar. Ejemplo 2 . Uso de contadores: contador.bat @ echo off set numeros = 1 2 3 4 5 6 7 8 9 10 set cont = 0 for %%a in ( %numeros% ) do ( echo Hola no. %%a :: Contador set /a cont+ = 1 ) echo Total: %cont% Este código nos imprimirá, además de los mensajes Hola no. 0 ..., el total de valores conta...
3 comentarios
Leer más

z/OS, ¿Qué es? y ¿Cuáles son sus herramientas?

De Beta
  En este post veremos las herramientas de z/OS de IBM. z/OS es un sistema operativo de mainframe desarrollado por IBM.  Es parte de la serie IBM z Systems (anteriormente conocida como System z), que se utiliza en los sistemas mainframe de IBM. z/OS es uno de los sistemas operativos más utilizados en el mundo empresarial para ejecutar aplicaciones críticas y procesar grandes volúmenes de datos. Características clave de z/OS: Escalabilidad : z/OS es conocido por su capacidad para manejar grandes cargas de trabajo y escalabilidad vertical, lo que permite agregar recursos de hardware para satisfacer las demandas de procesamiento. Confiabilidad y disponibilidad : z/OS está diseñado para ofrecer alta disponibilidad y confiabilidad. Incorpora características como redundancia y recuperación ante fallas para garantizar la continuidad de las operaciones. Seguridad : Proporciona una amplia gama de funciones de seguridad, como autenticación, autorización y auditoría, para proteger los...
Publicar un comentario
Leer más

Programación Windows Batch (CMD)

De Dr. Lang
En esta serie de post aprenderemos cómo crear nuestros propios archivos Windows Batch. 1. ¿Por qué aprender Batch en Windows? Una de las razones es que, queramos o no, algún día tendremos que trabajar usando sistemas operativos Windows. Crear scripts nos puede servir para realizar tareas que parecen sencillas en un principio, pero que pueden llegar a ser tediosas (ej. crear múltiples carpetas, comprobar la existencia de un archivo, realizar respaldos, etc.). 2. ¿Cómo puedo crear un archivo Batch en Windows? Los archivos batch en Windows pueden ser escritos con las extensiones *.bat o *.cmd. Pueden contener una serie de comandos y secuencias de instrucciones para realizar diversas tareas. Ejemplo 1. Conocer  el nombre del usuario. usuario.bat @ echo off echo Hola %USERNAME% pause GOTO Comentario -- esto es un comentario multi línea que no se interpretará en MS-DOS -- :Comentario En el anterior ejemplo podemos ver que la variable USERNAME conti...
Publicar un comentario
Leer más