Skip to content

Commit 77fd749

Browse files
hall9zehahall9zeha
committed
versión de escritorio con electrón añadida, solo mostrar citas de veterinaria
1 parent f8d43d8 commit 77fd749

File tree

8 files changed

+180
-1
lines changed

8 files changed

+180
-1
lines changed

‎Project/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ API/node_modules
22
API/package-lock.json
33
frontend/node_modules
44
frontend/package-lock.json
5+
Desktop/node_modules
6+
Desktop/package-lock.json
57

68
# testing
79
/coverage

‎Project/Desktop/css/app.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
html {
2+
box-sizing: border-box;
3+
font-size: 62.5%;
4+
}
5+
*, *:before, *:after {
6+
box-sizing: inherit;
7+
}
8+
9+
body {
10+
background: #AA076B;
11+
background: -webkit-linear-gradient(to right, #61045F, #AA076B);
12+
background: linear-gradient(to right, #61045F, #AA076B);
13+
font-size: 1.6rem;
14+
}
15+
16+
17+
h1 {
18+
text-align: center;
19+
font-family: 'Staatliches', cursive;
20+
color: white;
21+
font-size: 4rem;
22+
}
23+
h2 {
24+
25+
}
26+
h3 {
27+
font-family: 'Staatliches', cursive;
28+
color:#AA076B;
29+
font-size: 2.4rem;
30+
}
31+
.btn {
32+
font-size:1.4rem;
33+
}
34+
.fecha-alta {
35+
font-family: 'Staatliches', cursive;
36+
color: #AA076B;
37+
font-weight: bold;
38+
font-size: 2rem;
39+
}
40+
.contacto p {
41+
font-size: 1.2rem;
42+
margin: 0;
43+
}
44+
.list-group-item:hover {
45+
background: white;
46+
}
47+
form {
48+
border-radius: .3rem;
49+
}

‎Project/Desktop/icon.png‎

18.1 KB
Loading

‎Project/Desktop/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="Content-Security-Policy" content="script-src 'self';">
8+
<meta http-equiv="X-UA-Compatible"FORM content="ie=edge">
9+
<title>Pacientes Veterinaria</title>
10+
<link href="https://fonts.googleapis.com/css?family=Roboto|Staatliches&display=swap" rel="stylesheet">
11+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
12+
<link rel="stylesheet" href="css/app.css">
13+
</head>
14+
15+
<body>
16+
<h1>Administrador de Pacientes Veterinaria</h1>
17+
<div class="container mt-5">
18+
<div class="row">
19+
<div class="col-md-8 mx-auto">
20+
<div id="meetings" class="list-group">
21+
<!-- AGREGAR CITAS AQUI -->
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
27+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
28+
<script src="js/app.js"></script>
29+
</body>
30+
31+
</html>

‎Project/Desktop/index.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
const {app, BrowserWindow} = require('electron');
2+
3+
let appWindow;
4+
5+
function createWindow(){
6+
appWindow = new BrowserWindow({
7+
//Podemos definir el tamaño de la ventana de la aplicación
8+
width: 1000,
9+
height:600,
10+
center:true,
11+
show:false,
12+
//le ponemos un ícono a la aplicación
13+
icon:'icon.png'
14+
//podriamos evitar que el usuario redimencione la pantalla con
15+
//resizable:false
16+
//También podemos limitar un mínimo redimensionable de altura y anchura
17+
//min-width:600,
18+
//min-height:700
19+
});
20+
21+
//Cuando la aplicación es cerrada liberamos los recursos de memoria
22+
appWindow.on('closed', () =>{
23+
appWindow=null;
24+
});
25+
26+
//Cargar html
27+
appWindow.loadFile('./index.html')
28+
29+
//Cuando la app esté lista, mostrar la ventana
30+
appWindow.once('ready-to-show', ()=>{
31+
appWindow.show();
32+
})
33+
}
34+
35+
app.on('ready',createWindow);

‎Project/Desktop/js/app.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
fetch ('http://localhost:4000/patients')
2+
.then(response => response.json())
3+
.then(data => showMeetings(data));
4+
5+
console.log('Hola ')
6+
function showMeetings(meetings){
7+
const contentMeetings = document.querySelector('#meetings');
8+
9+
let meetingsHtml = '';
10+
11+
meetings.forEach(meeting =>{
12+
meetingsHtml +=`
13+
<div class="p-5 list-group-item list-group-item-action flex-column align-items-start">
14+
<div class="d-flex w-100 justify-content-between mb-4">
15+
16+
<h3 class="mb-3">${meeting.name}</h3>
17+
<small class="fecha-alta">
18+
${meeting.date} - ${meeting.time}
19+
</small>
20+
21+
</div>
22+
<p class="mb-0">
23+
${meeting.signals}
24+
</p>
25+
<div class="contacto py-3">
26+
<p>Dueño: ${meeting.owner}</p>
27+
<p>Teléfono: ${meeting.phone}</p>
28+
</div>
29+
30+
</div>
31+
`;
32+
});
33+
34+
contentMeetings.innerHTML=meetingsHtml;
35+
}

‎Project/Desktop/package.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "fullstack_js_desktop",
3+
"version": "1.0.0",
4+
"description": "La misma aplicación pero desarrollada en electrón para escritorio",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "electron .",
8+
"dist": "electron-builder -l"
9+
},
10+
"author": "Barry Zea H.",
11+
"license": "ISC",
12+
"devDependencies": {
13+
"electron": "^20.0.3",
14+
"electron-builder": "^23.3.3"
15+
}
16+
}

‎Project/README.md‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,15 @@
2020

2121
- ``` npm install react-router-dom ```
2222
- ``` npm install cors ```
23-
- ``` npm install sweetalert2 ```
23+
- ``` npm install sweetalert2 ```
24+
25+
# Desktop
26+
27+
- Inicializamos ``` npm init ``` dentro de la carpeta "Desktop"
28+
- Luego instalamos electrón ``` npm i -D electron@latest ```
29+
- Instalamos una dependencia para crear los instalables en electrón
30+
-``` npm install --save-dev electron-builder ```
31+
- Luego en package.json añadir el script:
32+
- "dist": "electron-builder -l"
33+
- En mi caso crearé un instalable para linux con la bandera "-l", (para windows: "-w" y para Mac " -m")
34+
- Finalmente ejecutar ``` npm run dist ```

0 commit comments

Comments
 (0)