Desarrollar Aplicaciones Móviles con SvelteKit y Capacitor

En este tutorial, comenzaremos con una nueva aplicación de SvelteKit y transitaremos a un desarrollo móvil nativo utilizando Capacitor. De manera opcional, también puede integrar Konsta UI para una interfaz de usuario móvil mejorada de Tailwind CSS.

Capacitor te permite convertir fácilmente tu aplicación web de SvelteKit en una aplicación móvil nativa sin necesidad de realizar modificaciones significativas o aprender una nueva habilidad como React Native.

Sigue este guía paso a paso para transformar tu aplicación SvelteKit en una aplicación móvil utilizando Capacitor y, si lo deseas, mejora tu interfaz de usuario móvil con Konsta UI.

Sobre Capacitor

CapacitorJS es un cambio de juego! Puede integrarse fácilmente en cualquier proyecto web, envolviendo tu aplicación en una vista web nativa y generando proyectos de Xcode y Android Studio nativos para ti. Sus plugins te proporcionan acceso a características de dispositivo nativo como la cámara a través de un puente de JavaScript.

Capacitor te permite crear una fantástica aplicación móvil nativa sin ninguna configuración complicada o curva de aprendizaje empinada. Su API y funcionalidad simplificada lo hacen fácil de integrar en tu proyecto. Te sorprenderá la simplicidad de lograr una aplicación nativa completamente funcional con Capacitor!

Preparando tu aplicación SvelteKit

Para crear una nueva aplicación SvelteKit, ejecuta el siguiente comando:

npm create svelte@latest my-app
cd my-app
npm install
npm run build

Después de ejecutar el build comando, deberías ver un nuevo dist carpeta en la raíz de tu proyecto.

Esta carpeta se utilizará por Capacitor más adelante, pero por ahora, necesitamos configurarla correctamente.

Agregar Capacitor a su aplicación SvelteKit

Para empaquetar cualquier aplicación web en un contenedor móvil nativo, debemos seguir unos pocos pasos inicialmente. Luego, es tan simple como ejecutar un comando único. sync Primero, instale el

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Capacitor CLI A continuación, instale el paquete principal y los paquetes relevantes para las plataformas iOS y Android.

Finalmente, agregue las plataformas, y __CAPGO_KEEP_0__ creará carpetas para cada plataforma en la raíz de su proyecto:

Finally, add the platforms, and Capacitor will create folders for each platform at the root of your project:

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your SvelteKit project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

ios y android At this point, you should see new folders for iOS and Android platforms. carpetas en tu proyecto SvelteKit.

Estos son proyectos nativos reales!

Para acceder al proyecto de Android más tarde, necesitas instalar Android StudioPara iOS, necesitas un Mac y debes instalar Xcode.

Además, debes encontrar un archivo capacitor.config.ts que contiene algunas configuraciones básicas Capacitor utilizadas durante la sincronización. La única cosa a la que debes prestar atención es el webDir, que debe apuntar al resultado de tu comando de compilación. Actualmente, está incorrecto.

Para solucionar esto, abre el capacitor.config.ts archivo y actualice el webDir:

import { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'build',
}

export default config

Ahora que hemos actualizado nuestras configuraciones de Capacitor, vamos a cambiar nuestro proyecto de Sveltekit a una aplicación estática descargando el paquete de adaptador estático adecuado:

npm i -D @sveltejs/adapter-static

Después de instalar el paquete, necesitaremos alterar svelte.config.js archivo desde el adaptador automático a estático:

import adapter from '@sveltejs/adapter-static'
import { vitePreprocess } from '@sveltejs/kit/vite'

/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
  preprocess: vitePreprocess(),

  kit: {
    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
    adapter: adapter({
      // default options are shown. On some platforms
      // these options are set automatically — see below
      pages: 'build',
      assets: 'build',
      fallback: null,
      precompress: false,
      strict: true
    })
  }
}

export default config

Con el svelte.config.js actualizado, necesitaremos agregar una opción de pre-renderizado creando un +layout.js a la página src/rutas y solo agrega la siguiente exportación a Después de agregar y actualizar el:

export const prerender = true

+layout.js La página, necesitaremos agregar nuestras plataformas móviles, volver a construir nuestro proyecto para crear el carpeta de build Puedes hacerlo ejecutando los siguientes comandos: El primer comando

La carpeta de build

npm run build
npx cap sync

Puedes hacerlo ejecutando los siguientes comandos: npm run build construirá su proyecto SvelteKit y copiará la compilación estática, mientras que la segunda orden npx cap sync sincronizará todos los web code en los lugares adecuados de las plataformas nativas para que puedan ser mostrados en una aplicación.

Además, la orden de sincronización podría actualizar las plataformas nativas e instalar plugins, por lo que cuando instale nuevos Capacitor plugins, es hora de ejecutar npx cap sync de nuevo.

Sin darse cuenta, ha completado el proceso, así que veamos la aplicación en un dispositivo!

Desarrollar y Desplegar Aplicaciones Nativas

Para desarrollar aplicaciones iOS, necesita tener Xcode instalado, y para aplicaciones Android, necesita tener Android Studio instalado. Además, si planeas distribuir tu aplicación en la tienda de aplicaciones, debes inscribirte en el Programa de Desarrolladores de Apple para iOS y en el Console de Google Play para Android.

Si eres nuevo en el desarrollo móvil nativo, puedes utilizar el Capacitor CLI para abrir fácilmente ambos proyectos nativos:

npx cap open ios
npx cap open android

Una vez que hayas configurado tus proyectos nativos, desplegar tu aplicación en un dispositivo conectado es fácil. En Android Studio, solo necesitas esperar a que todo esté listo, y puedes desplegar tu aplicación en un dispositivo conectado sin cambiar ninguna configuración. Aquí tienes un ejemplo:

En Xcode, debes configurar tu cuenta de firma para desplegar tu aplicación en un dispositivo real en lugar del simulador. Si no lo has hecho antes, Xcode te guía a través del proceso (pero, una vez más, debes estar inscrito en el Programa de Desarrolladores). Una vez hecho esto, solo debes pulsar play para ejecutar la aplicación en tu dispositivo conectado, que puedes seleccionar en la parte superior. Aquí tienes un ejemplo:

¡Felicidades! Has desplegado con éxito tu aplicación web SvelteKit en un dispositivo móvil. Aquí tienes un ejemplo:

Pero espera, hay una forma más rápida de hacer esto durante el desarrollo…

Capacitor Live Reload

Por ahora, probablemente estás acostumbrado a tener hot reload con todas las marcos modernas, y la buena noticia es que puedes tener la misma funcionalidad en un dispositivo móvil con mínimo esfuerzo!

Habilite el acceso a su aplicación alojada localmente con recarga en vivo en su red al tener la aplicación Capacitor cargar el contenido desde la URL específica.

El primer paso es determinar la dirección IP local. Si está utilizando un Mac, puede encontrar esto ejecutando el comando siguiente en la terminal:

ipconfig getifaddr en0

En Windows, ejecuta:

ipconfig

Luego busque la dirección IPv4.

Podemos instruir a Capacitor a cargar la aplicación directamente desde el servidor agregando otra entrada a nuestro archivo: capacitor.config.ts Asegúrese de utilizar

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:3000',
    cleartext: true
  }
};

export default config;

la dirección IP y el puerto correctos como se muestra en el ejemplo anterior.file:

Ahora, podemos aplicar estos cambios copiándolos a nuestro proyecto nativo:

npx cap copy

El copy comando es similar a sync, pero solo copiará los cambios realizados en la carpeta web y la configuración, sin actualizar el proyecto nativo.

Puede desplegar su aplicación una vez más a través de Android Studio o Xcode. Después de eso, si cambia algo en su aplicación Svelte, la aplicación se recargará automáticamente y mostrará los cambios!

Ten en cuenta que si instala nuevos plugins como la cámara, todavía requiere una reconstrucción de su proyecto nativo. Esto se debe a que los archivos nativos se han cambiado, y no se puede hacer en tiempo real.

Nota que debe utilizar la IP y el puerto correctos en su configuración. El bloque code anterior muestra el puerto por defecto de SvelteKit con fines de demostración.

Usando Capacitor Plugins

Vamos a ver cómo usar un Capacitor plugin en acción, que mencionamos antes. Para hacer esto, podemos instalar un plugin simple ejecutando:

npm i @capacitor/share

No hay nada sofisticado en el Share plugin, pero muestra el diálogo de compartir nativo. Para esto, ahora solo necesitamos importar el paquete y llamar al share() función desde nuestra aplicación, así que cambiemos el src/routes/index.svelte a esto:

<script>
  import { Share } from '@capacitor/share';

  async function share() {
    await Share.share({
      title: 'Open Youtube',
      text: 'Check new video on youtube',
      url: 'https://www.youtube.com',
      dialogTitle: 'Share with friends'
    });
  }
</script>

<h1>Welcome to SvelteKit and Capacitor!</h1>
<button on:click={share}>Share now!</button>

Como se mencionó anteriormente, cuando instalamos nuevos plugins, debemos realizar una operación de sincronización y luego volver a desplegar la aplicación en nuestro dispositivo. Para hacer esto, ejecute el siguiente comando:

npx cap sync

Después de pulsar el botón, puede ver el hermoso diálogo de compartir nativo en acción!

Agregar Konsta UI

Para usar Konsta UI en su aplicación Nuxt 3, necesita tener tailwind ya está instalado y para instalar el paquete:

npm i konsta

Además, necesitas modificar tu tailwind.config.js archivo:

// import konstaConfig config
const konstaConfig = require('konsta/config')

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: [
    './src/routes/**/*.{svelte}',
    './src/components/**/*.{svelte}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfig extenderá la configuración de Tailwind CSS predeterminada (o la tuya personalizada) con algunas variantes y utilidades adicionales requeridas para Konsta UI.

Ahora necesitamos configurar el componente principal de la aplicación para poder establecer algunos parámetros globales (como theme).

Necesitamos envolver toda la aplicación con App en el src/routes/+layout.svelte:

<script>
  import { App } from 'konsta/svelte';
</script>

<App theme="ios">
  <slot />
</App>

Página de ejemplo

Ahora que todo está configurado, podemos utilizar componentes de Konsta UI Svelte en nuestras páginas SvelteKit.

Por ejemplo, abramos src/routes/index.svelte y cambiémoslo a lo siguiente:

<script>
  import {
    Page,
    Navbar,
    Block,
    Button,
    List,
    ListItem,
    Link,
    BlockTitle,
  } from 'konsta/svelte';
</script>

<Page>
  <Navbar title="My App" />

  <Block strong>
    <p>
      Here is your SvelteKit & Konsta UI app. Let's see what we have here.
    </p>
  </Block>
  <BlockTitle>Navigation</BlockTitle>
  <List>
    <ListItem href="/about/" title="About" />
    <ListItem href="/form/" title="Form" />
  </List>

  <Block strong class="flex space-x-4">
    <Button>Button 1</Button>
    <Button>Button 2</Button>
  </Block>
</Page>

Si el recarga en vivo está fuera de sincronía después de instalar todos los componentes necesarios, intenta reiniciar todo. Una vez que hayas hecho eso, deberías ver una aplicación móvil con un aspecto nativo algo similar, construida con SvelteKit y Capacitor!

Deberías ver la siguiente página como resultado:

Conclusión

Capacitor es una excelente opción para construir aplicaciones nativas basadas en un proyecto web existente, ofreciendo una forma sencilla de compartir code y mantener una interfaz de usuario consistente.

Y con la adición de Capgo, es aún más fácil agregar actualizaciones en vivo a tu aplicación, asegurando que tus usuarios siempre tengan acceso a las últimas características y correcciones de errores.

Si deseas aprender a agregar Capgo a tu aplicación de SvelteKit, mira el siguiente artículo:

Aprende cómo Capgo puede ayudarte a construir aplicaciones mejoradas más rápido, registrarse para una cuenta gratuita hoy.

Sigue adelante desde Construyendo Aplicaciones Móviles con SvelteKit y Capacitor

Si estás utilizando Construyendo Aplicaciones Móviles con SvelteKit y Capacitor para planificar la automatización de CI/CD, conecta con Capgo CI/CD para el flujo de trabajo del producto en Capgo CI/CD, Capgo Compilaciones Nativas para el flujo de trabajo del producto en Capgo Compilaciones Nativas, Capgo Integraciones para el flujo de trabajo del producto en Capgo Integraciones, Integración CI/CD para los detalles de implementación en la Integración CI/CD, y GitHub Integración de Acciones para los detalles de implementación en GitHub Integración de Acciones.