VasakOS

Setup del Proyecto | vasak-desktop

Mon, 01 Jan 0001 00:00:00 +0000

Setup del Proyecto - Vasak Desktop#

Guía completa para configurar tu entorno de desarrollo de Vasak Desktop.

Compilacion | vasak-desktop

Mon, 01 Jan 0001 00:00:00 +0000

Guía para compilar Vasak Desktop. Sobre la misma veremos como realizar compilaciones

Modo Producción#

Compilación Completa#

# Compilar todo para producción
bun run tauri build

# O con Tauri CLI
cargo tauri build

Nota: La compilación en producción toma 15-30 minutos la primera vez.

Dependencias de Desarrollo

Mon, 01 Jan 0001 00:00:00 +0000

A continuacion encontratas todas las dependencias que debera instalar en su entorno de desarrollo para construir o colaborar con el proyecto, lo mismo aplica para aplicaciones ya existentes o VAPPs propias…

Instalar VasakOS

Mon, 01 Jan 0001 00:00:00 +0000

Esta guía cubre la instalación desde cero. Si sólo querés las aplicaciones de VasakOS sobre un Arch Linux que ya tenés, saltá a repositorio de paquetes .

Gestion de dependencias | vasak-desktop

Mon, 01 Jan 0001 00:00:00 +0000

Guía completa para gestionar dependencias del proyecto.

Dependencias del Frontend (JavaScript/TypeScript)#

Archivo: `package.json`#

Las dependencias se definen en este archivo:

Repositorio de paquetes

Mon, 01 Jan 0001 00:00:00 +0000

VasakOS publica sus paquetes en un repositorio pacman propio llamado vasakos, firmado con GPG. Si instalaste desde la ISO ya lo tenés configurado y no necesitás hacer nada: sudo pacman -Syu actualiza todo.

Actualizar el sistema

Mon, 01 Jan 0001 00:00:00 +0000

VasakOS es rolling release: no hay versiones que se queden atrás ni una migración grande cada dos años. Las actualizaciones llegan continuamente desde los repositorios de Arch Linux y desde el repositorio de VasakOS.

Arquitectura General | vasak-desktop

Mon, 01 Jan 0001 00:00:00 +0000

Visión general de la arquitectura de Vasak Desktop y cómo se estructuran los componentes.

¿Qué es Vasak Desktop?#

Vasak Desktop NO es un entorno de escritorio completo (como GNOME o KDE). Es una interfaz de escritorio ligera que no cuenta con un WM propio pero que proporciona:

Preguntas frecuentes

Mon, 01 Jan 0001 00:00:00 +0000

Sistema de Carpetas | vasak-desktop

Mon, 01 Jan 0001 00:00:00 +0000

Guía detallada sobre la estructura de carpetas del proyecto.

Estructura Raíz#

graph TD Root["📁 vasak-desktop/"] Root --> Src["📁 src/
Frontend Vue.js"] Root --> SrcTauri["📁 src-tauri/
Backend Rust"] Root --> IndexHTML["📄 index.html"] Root --> PackageJSON["📄 package.json"] Root --> TSConfig["📄 tsconfig.json"] Root --> ViteConfig["📄 vite.config.ts"] Root --> License["📄 LICENSE"] Root --> Readme["📄 README.md"] Root --> GitIgnore["📄 .gitignore"] style Root fill:#667eea,stroke:#764ba2,color:#fff style Src fill:#f093fb,stroke:#f5576c,color:#fff style SrcTauri fill:#4facfe,stroke:#00f2fe,color:#fff style IndexHTML fill:#fa709a,stroke:#fee140,color:#fff style PackageJSON fill:#30cfd0,stroke:#330867,color:#fff style TSConfig fill:#a8edea,stroke:#fed6e3,color:#333 style ViteConfig fill:#ffecd2,stroke:#fcb69f,color:#333 style License fill:#ff9a9e,stroke:#fecfef,color:#333 style Readme fill:#fbc2eb,stroke:#a6c1ee,color:#333 style GitIgnore fill:#fdcbf1,stroke:#e6dee9,color:#333

Frontend (`src/`)#

Raíz de Frontend#

graph TD SrcRoot["📁 src/"] SrcRoot --> AppVue["📄 App.vue
Componente raíz"] SrcRoot --> MainTs["📄 main.ts
Punto de entrada"] SrcRoot --> StyleCss["📄 style.css
Estilos globales"] SrcRoot --> ViteEnv["📄 vite-env.d.ts
Tipos Vite"] SrcRoot --> AssetsDir["📁 assets/
Recursos estáticos"] SrcRoot --> ComponentsDir["📁 components/
Componentes reutilizables"] SrcRoot --> InterfacesDir["📁 interfaces/
Interfaces TS"] SrcRoot --> LayoutsDir["📁 layouts/
Layouts/Plantillas"] SrcRoot --> RoutesDir["📁 routes/
Enrutamiento"] SrcRoot --> ToolsDir["📁 tools/
Controladores"] SrcRoot --> TypesDir["📁 types/
Tipos TS"] SrcRoot --> ViewsDir["📁 views/
Vistas/Páginas"] style SrcRoot fill:#667eea,stroke:#764ba2,color:#fff style AppVue fill:#f093fb,stroke:#f5576c,color:#fff style MainTs fill:#f093fb,stroke:#f5576c,color:#fff style StyleCss fill:#f093fb,stroke:#f5576c,color:#fff style ViteEnv fill:#f093fb,stroke:#f5576c,color:#fff style AssetsDir fill:#4facfe,stroke:#00f2fe,color:#fff style ComponentsDir fill:#4facfe,stroke:#00f2fe,color:#fff style InterfacesDir fill:#4facfe,stroke:#00f2fe,color:#fff style LayoutsDir fill:#4facfe,stroke:#00f2fe,color:#fff style RoutesDir fill:#4facfe,stroke:#00f2fe,color:#fff style ToolsDir fill:#4facfe,stroke:#00f2fe,color:#fff style TypesDir fill:#4facfe,stroke:#00f2fe,color:#fff style ViewsDir fill:#4facfe,stroke:#00f2fe,color:#fff

`src/assets/`#

Recursos estáticos (imágenes, vectores):

Componentes de VueJS | vasak-desktop

Mon, 01 Jan 0001 00:00:00 +0000

Guía para desarrollar componentes Vue en Vasak Desktop.

Estructura Base de un Componente#

<template>
  <div class="audio-control">
    <h2>{{ title }}</h2>
    <input
      v-model="volume"
      type="range"
      min="0"
      max="100"
      @change="handleVolumeChange"
    />
    <span>{{ volume }}%</span>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { invoke } from '@tauri-apps/api/tauri';
import { listen, UnlistenFn } from '@tauri-apps/api/event';

import type { Device } from '@/interfaces/device';

// Props
interface Props {
  title?: string;
  disabled?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  title: 'Audio Control',
  disabled: false,
});

// State
const volume = ref(0);
const devices = ref<Device[]>([]);
const isLoading = ref(false);

// Computed
const isActive = computed(() => !props.disabled && !isLoading.value);

// Métodos
async function loadVolume() {
  try {
    isLoading.value = true;
    volume.value = await invoke<number>('get_volume');
  } catch (error) {
    console.error('Error loading volume:', error);
  } finally {
    isLoading.value = false;
  }
}

async function handleVolumeChange() {
  try {
    await invoke('set_volume', { level: volume.value });
  } catch (error) {
    console.error('Error setting volume:', error);
  }
}

// Lifecycle
onMounted(() => {
  loadVolume();
  
  // Escuchar cambios del sistema
  listen('volume_changed', (event) => {
    volume.value = event.payload as number;
  });
});

onUnmounted(() => {
  // Cleanup si es necesario
});
</script>

<style scoped>
.audio-control {
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
}

.audio-control h2 {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
}

.audio-control input {
  width: 100%;
  margin-bottom: 0.5rem;
}

.audio-control span {
  display: block;
  text-align: center;
  color: #666;
}
</style>

Tipos de Componentes#

Componentes Presentacionales (Dumb)#

Solo reciben props y emiten eventos:

D-Bus - Integracion con el sistema | vasak-desktop

Mon, 01 Jan 0001 00:00:00 +0000

Guía completa sobre D-Bus y cómo Vasak Desktop se integra con el sistema Linux.

¿Qué es D-Bus?#

D-Bus (Desktop Bus) es un sistema de comunicación entre procesos (IPC) estándar en Linux.

Comandos de Rust | vasak-desktop

Mon, 01 Jan 0001 00:00:00 +0000

Guía para desarrollar comandos IPC (Tauri) en Rust.

Concepto: Comandos Tauri#

Los comandos son funciones Rust que se pueden llamar desde el frontend Vue.js a través de IPC.

Control | ActionButton

Mon, 01 Jan 0001 00:00:00 +0000

`ActionButton`#

Descripción

Componente de botón genérico con variantes (primary, secondary, danger), estados de carga y soporte para iconos.

Props

Control | ToggleControl

Mon, 01 Jan 0001 00:00:00 +0000

`ToggleControl`#

Descripción

Botón de acción con icono que muestra estados isActive e isLoading. Ideal para acciones rápidas (play/pause, encendido).

Props

Solución de problemas

Mon, 01 Jan 0001 00:00:00 +0000

Problemas de Inicio#

La aplicación no inicia#

Síntoma#

Ejecutas vasak-desktop pero nada sucede o se cierra inmediatamente.

Comandos del escritorio | vasak-desktop

Mon, 01 Jan 0001 00:00:00 +0000

Comandos implementados en vasak-desktop accesibles para nuevas funcionalidades dentro del escritorio

Audio#

get_audio_volume() - Obtener volumen actual
set_audio_volume(volume: u32) - Establecer volumen
toggle_audio_mute() - Alternar mute
get_audio_devices() - Listar dispositivos de audio
set_audio_device(device_id: String) - Cambiar dispositivo
toggle_audio_applet() - Mostrar/ocultar applet de audio

Brillo#

get_brightness_info() - Información de brillo actual
set_brightness_info(brightness: u32) - Establecer brillo

Notificaciones#

send_notify(notification: NotificationData) - Enviar notificación
clear_notifications() - Limpiar todas las notificaciones
get_all_notifications() - Obtener lista de notificaciones
delete_notification(id: String) - Eliminar notificación específica
invoke_notification_action(id: String, action: String) - Ejecutar acción

Red#

toggle_network_applet() - Mostrar/ocultar applet de red

Bluetooth#

toggle_bluetooth_applet() - Mostrar/ocultar applet de bluetooth

Música (MPRIS)#

music_play_pause() - Play/Pause
music_next_track() - Siguiente pista
music_previous_track() - Pista anterior
music_now_playing() - Información de pista actual

Búsqueda#

global_search(query: String) - Búsqueda global de aplicaciones
execute_search_result(result: SearchResult) - Ejecutar resultado
toggle_search() - Mostrar/ocultar búsqueda

Atajos de Teclado#

get_shortcuts() - Obtener todos los atajos
update_shortcut(id: String, new_keys: Vec<String>) - Actualizar atajo
add_custom_shortcut(shortcut: CustomShortcut) - Añadir atajo personalizado
delete_shortcut(id: String) - Eliminar atajo
execute_shortcut(command: String) - Ejecutar comando de atajo
check_shortcut_conflicts(keys: Vec<String>) - Verificar conflictos

Sistema#

get_system_info() - Información del sistema
get_cpu_usage_only() - Uso de CPU
get_memory_usage_only() - Uso de memoria
get_system_config() - Configuración del sistema
set_system_config(config: SystemConfig) - Establecer configuración
get_current_system_state() - Estado actual del sistema

Tema#

toggle_system_theme() - Alternar tema oscuro/claro
get_gtk_themes() - Listar temas GTK disponibles
get_cursor_themes() - Listar temas de cursor
get_icon_packs() - Listar packs de iconos

Sesión#

logout() - Cerrar sesión
shutdown() - Apagar sistema
reboot() - Reiniciar sistema
suspend() - Suspender sistema
detect_display_server() - Detectar X11/Wayland

Ubicación: Todos estos comandos están definidos en src-tauri/src/commands/ y registrados en src-tauri/src/lib.rs.

Debugging

Mon, 01 Jan 0001 00:00:00 +0000

Técnicas y herramientas para depurar código en cualquier VAPP el ejmplo utiliza vasak-desktop con el fin de tener un caso de uso amplio.

Formulario | FormGroup

Mon, 01 Jan 0001 00:00:00 +0000

`FormGroup`#

Descripción

Contenedor para etiquetas y campos de formulario. Provee espacio y estilos base para agrupar inputs.

Props

Formulario | SliderControl

Mon, 01 Jan 0001 00:00:00 +0000

`SliderControl`#

Descripción

Control deslizante personalizado con icono, porcentaje calculado y opción de boton lateral.

Props

VasakOS

Setup del Proyecto | vasak-desktop

Setup del Proyecto - Vasak Desktop#

Compilacion | vasak-desktop

Modo Producción#

Compilación Completa#

Dependencias de Desarrollo

Instalar VasakOS

Gestion de dependencias | vasak-desktop

Dependencias del Frontend (JavaScript/TypeScript)#

Archivo: package.json#

Repositorio de paquetes

Actualizar el sistema

Arquitectura General | vasak-desktop

¿Qué es Vasak Desktop?#

Preguntas frecuentes

Sistema de Carpetas | vasak-desktop

Estructura Raíz#

Frontend (src/)#

Raíz de Frontend#

src/assets/#

Componentes de VueJS | vasak-desktop

Estructura Base de un Componente#

Tipos de Componentes#

Componentes Presentacionales (Dumb)#

D-Bus - Integracion con el sistema | vasak-desktop

¿Qué es D-Bus?#

Comandos de Rust | vasak-desktop

Concepto: Comandos Tauri#

Control | ActionButton

ActionButton#

Control | ToggleControl

ToggleControl#

Solución de problemas

Problemas de Inicio#

La aplicación no inicia#

Síntoma#

Comandos del escritorio | vasak-desktop

Audio#

Brillo#

Notificaciones#

Red#

Bluetooth#

Música (MPRIS)#

Búsqueda#

Atajos de Teclado#

Sistema#

Tema#

Sesión#

Debugging

Formulario | FormGroup

FormGroup#

Formulario | SliderControl

SliderControl#

Archivo: `package.json`#

Frontend (`src/`)#

`src/assets/`#

`ActionButton`#

`ToggleControl`#

`FormGroup`#

`SliderControl`#