Cómo crear una aplicación híbrida WPF + ASP.NET Core + Vue.js

En este tutorial, vamos a explorar cómo crear una aplicación híbrida de escritorio que combine WPF para la interfaz de escritorio, ASP.NET Core como backend, y Vue.js como frontend.

Si seguiste el artículo anterior, ya tienes una base sólida, ya que integrar Vue no es demasiado diferente de integrar React.

Hoy nos enfocaremos en Vue.js, un framework progresivo y flexible que se integra perfectamente con nuestra solución híbrida (y además es uno de mi frameworks web favoritos 😊).

Crear el proyecto Vue.js

Para comenzar, necesitamos crear nuestra aplicación web en Vue.js. Abrimos una terminal en la raíz de la solución y ejecutamos los siguientes comandos:

npm create vite@latest ClientVue --template vue
cd ClientVue
npm install

Configurar Vue.js para trabajar con el backend

Para que nuestra aplicación Vue.js se comunique correctamente con el backend de ASP.NET Core, debemos configurar correctamente nuestro entorno web.

Primero, creamos un archivo .env en la carpeta ClientVue con la siguiente línea:

VITE_API_URL=http://localhost:5000

Primero, creamos un archivo .env.production en la carpeta ClientVue con la siguiente línea:

VITE_API_URL=

Luego, modificamos el archivo vite.config.js para configurar el proxy:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    plugins: [vue()],
    server: {
        proxy: {
            "/api": "http://localhost:5000", // Redirige las peticiones a la API de C#
        },
    },
});

Crear la aplicación en Vie

Ahora, vamos a crear una aplicación Vue.js sencilla que demuestre cómo consumir la API de ASP.NET Core. Comenzamos por definir el componente principal App.vue:

<template>
  <div>
    <nav>
      <router-link to="/">Inicio</router-link>
      <router-link to="/about">Acerca de</router-link>
      <router-link to="/fetch">Fetch</router-link>
      <router-link to="/signalr">SignalR</router-link>
    </nav>
    <router-view />
  </div>
</template>

<script setup>
// Aquí puedes añadir lógica adicional si es necesario
</script>

<style scoped>
/* Estilos específicos para este componente */
</style>

Añadir el router

Para manejar las rutas en nuestra aplicación, necesitamos instalar vue-router:

npm install vue-router

Luego, creamos un archivo router.js que define las rutas de la aplicación:

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
import Fetch from './views/Fetch.vue';
import SignalR from './views/SignalR.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/fetch', component: Fetch },
  { path: '/signalr', component: SignalR },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Finalmente, modificamos main.js para usar el router:

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

Crear las vistas

Ahora crearemos las vistas de nuestra aplicación en la carpeta src/views. Nuestra Demo va a tener las siguientes vistas

<template>
  <div>
    <h1>Inicio</h1>
    <p>Bienvenido a la aplicación híbrida WPF + ASP.NET Core + Vue.js.</p>
  </div>
</template>

<template>
  <div>
    <h1>Acerca de</h1>
    <p>Esta es una aplicación híbrida que combina WPF, ASP.NET Core y Vue.js.</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const data = ref(null);
const forecasts = ref([]);
const files = ref([]);

onMounted(() => {
  fetch(`${import.meta.env.VITE_API_URL}/api/demo`)
    .then(res => res.json())
    .then(result => data.value = result);

  populateWeatherData();
  getFiles();
});

async function populateWeatherData() {
  const response = await fetch(`${import.meta.env.VITE_API_URL}/weatherforecast`);
  if (response.ok) {
    forecasts.value = await response.json();
  }
}

async function getFiles() {
  const response = await fetch(`${import.meta.env.VITE_API_URL}/files`);
  if (response.ok) {
    files.value = await response.json();
  }
}
</script>

<template>
  <div>
    <h1>{{ data?.message || 'Cargando...' }}</h1>
    <ul v-if="forecasts.length > 0 && files.length > 0">
      <li v-for="file in files" :key="file">{{ file }}</li>
    </ul>
    <p v-else>
      <em>Cargando... Por favor, espera a que el backend de ASP.NET se inicie.</em>
    </p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { HubConnectionBuilder } from '@microsoft/signalr';

const time = ref('');

onMounted(() => {
  const connection = new HubConnectionBuilder()
    .withUrl(`${import.meta.env.VITE_API_URL}/clockHub`)
    .build();

  connection.on('ReceiveTime', (currentTime) => {
    time.value = currentTime;
  });

  connection.start()
    .then(() => console.log('Conexión a SignalR establecida.'))
    .catch(err => console.error('Error al conectar con SignalR: ', err));
});
</script>

<template>
  <div>
    <h1>Hora Actual</h1>
    <p>{{ time || 'Sin conexión' }}</p>
  </div>
</template>

Añadir estilos básicos

Para darle un aspecto más profesional a nuestra aplicación, añadimos un poco de CSS. Aquí tienes un ejemplo básico:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f9;
  color: #333;
}

nav {
  background-color: #1f1d21;
  padding: 1rem;
  display: flex;
  gap: 1rem;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  text-decoration: underline;
}

.container {
  padding: 2rem;
}

h1 {
  color: #1f1d21;
}

Ejecutar la aplicación

Finalmente ejecutamos nuestra App, como hicimos en la entrada anterior. Y veremos un resultado muy similar (básicamente el mismo) pero esta vez con Vue bajo el capó.

Descarga el código

Todo el código de este tutorial está disponible en GitHub para que puedas explorarlo y adaptarlo a tus necesidades: