Crea una web usando SOLO SwiftUI 😱

Hoy en SwiftBeta te voy a enseñar un proyecto experimental para poder crear webs usando solo SwiftUI. Es a modo de práctica y para pasarlo bien, vamos a explorar en qué punto nos encontramos ahora mismo en referencia a crear páginas webs usando solo SwiftUI.

Vamos a crear una web muy sencilla, va a ser una Landing Page, en ella vamos hacer una petición HTTP y vamos a extraer videos del canal de SwiftBeta de Youtube. Al recuperar los datos los mostraremos como hemos visto en varios cursos y videos del canal usando SwiftUI. La verdad que impresiona ver que todo está hecho con SwiftUI, y en este video vamos a verlo paso por paso. También vamos a ver como pulsar un button para navegar a diferentes webs, en este caso un button para ir al video en Youtube, y otro button que si lo pulsamos nos crear un tweet. El tutorial estará creado en 2 partes, de esta manera también te servirá para probar cosas por tu cuenta, y si me lo pedís mucho y veo interés, podemos hacer hasta una tercera parte para deployar nuestra web en Vercel (Vercel es una plataforma brutal para deployar webs entre muchas otras cosas), de esta manera cualquier puede acceder a ella y puede ser un buen curriculum para vosotros, imagínate llegar a una entrevista de trabajo y decir que habéis creado una web en SwiftUI 🤩

Antes de continuar, si quieres apoyar el contenido que subo cada semana, suscríbete. De esta manera seguiré publicando contenido completamente grautito en Youtube.

Creamos Library en Xcode

Vamos a empezar por el principio, lo primero de todo es abrir Xcode, y esta vez vamos a crear un Package. Seleccionamos en el menu de Xcode, File -> New -> Package. Aquí marcamos la opción Library y le damos a Next. En este caso vamos a  llamar a nuestra Librería SwiftBetaWeb. Y una vez hechos estos pasos le damos a Create.

Modificamos Package.swift

Ya tenemos la base de nuestro proyecto, ahora tenemos que modificar el fichero Package para añadir la dependencia que nos va a permitir poder usar SwiftUI y así crear nuestra web. Este fichero nos va a servir para configurar nuestro proyecto, nuestra librería. Así que lo siguiente que vamos hacer es cambiar un par de cosas de este fichero.

Justo debajo de name, vamos a añadir la plataforma donde queremos que se ejecute y su versión mínima. En nuestro caso queremos que sea macOS 13, pues vamos a especificarlo:

name: "SwiftUI-Web",
platforms: [.macOS(.v13)],

Lo siguiente es eliminar la parte de product, y vamos a añadir las dependencias que queremos usar dentro de nuestra librería. En este caso para que ocurra toda la magia de poder crear código SwiftUI y que éste se transforme en una web, debemos usar esta dependencia llamada VercelUI https://github.com/swift-cloud/VercelUI

GitHub - swift-cloud/VercelUI: Build server side rendered webpages in SwiftUI

Build server side rendered webpages in SwiftUI. Contribute to swift-cloud/VercelUI development by creating an account on GitHub.

GitHubswift-cloud

Si te fijas en su README hay un pequeño ejemplo de como usar esta dependencia para obtener un resultado básico, es decir al entrar en nuestra web se vería esta vista en SwiftUI. Aquí puedes investigar y ver como está estructurado este proyecto, código, dependencias, etc. Es importante que sepas que hay vistas de SwiftUI que no están disponibles a la hora de crear tu web, esto es debido a que esta dependencia tiene que mapear las vistas que hay en SwiftUI a algo entendible por nuestros navegadores, y solo hay unas pocas vistas compatibles, como: Link, Stacks, ScrollView, Text, Spacer, ect. Pero no te preocupes que te voy a explicar todo lo que necesitas en los próximos minutos.

Una vez hemos analizado la dependencia que queremos añadir, vamos a especificarlo en nuestro Package.swift

platforms: [.macOS(.v13)],
dependencies: [
    .package(url: "https://github.com/swift-cloud/VercelUI", from: "1.1.0"),
],

Y finalmente, vamos a modificar el target para que sea ejecutable. Queremos que de todos los ficheros de la carpeta Sources, los compile y genere un paquete. Queremos que el target sea ejecutable en lugar de una Library.

let package = Package(
    name: "SwiftBetaWeb",
    platforms: [.macOS(.v13)],
    dependencies: [
        .package(url: "https://github.com/swift-cloud/VercelUI", from: "1.1.0"),
    ],
    targets: [
        // Targets are the basic building blocks of a package, defining a module or a test suite.
        // Targets can depend on other targets in this package and products from dependencies.
        .executableTarget(
            name: "SwiftBetaWeb",
            dependencies: ["VercelUI"],
            path: "Sources")
    ]
)

Ya tenemos el proyecto listo para crear nuestra web

Creamos nuestra vista en SwiftUI

Ahora ya podemos crear un fichero, y ahí crear la vista en SwiftUI que se transformará en nuestra web.

Vamos al fichero SwiftBetaWeb y lo primero de todo es importar VercelUI:

import VercelUI

Al hacerlo vemos que aparece un error, ves al selector de devices de Xcode y asegúrate de que esté un dispositivo mac, en mi caso voy a añadir "My Mac". Y una vez hecho este paso, vamos a crear una vista como haríamso en SwiftUI, en mi caso creo un simple Text que muestre "¡Suscríbete a SwiftBeta! 🚀"

import VercelUI
    
struct LandingPage: View {
    var body: some View {
        VStack {
            Text("¡Suscribete a SwiftBeta! 🚀")
            Text("Aprende a programar en cualquier entorno de Apple")
        }
    }
}

Y ahora, nos faltaría un último paso antes de probar este código. Hemos visto en muchos otros videos y posts del canal, que nuestra app en SwiftUI siempre tiene un punto de entrada que está especificado por la keyword main. Pero si te fijas, nosotros en ningún momento hemos creado esta parte, aún, ya que es lo que vamos a crear a continuación. Necesitamos especificar cuándo queremos mostrar esta vista, y para hacerlo es muy sencillo, vamos a crear una struct llamada App con la keyword main, justo debajo de nuestra vista, y también vamos a conformar el protocolo ExpressHandler:

@main
struct App: ExpressHandler {
	// TODO
}

Dentro de esta Struct vamos a usar un método estático llamado configure, de esta manera podremos saber la ruta a la que estamos accediendo en nuestra web para presentar una vista u otra. Es decir si creamos una web y añadimos la ruta login, nosotros queremos mostrar la vista login, en cambio si añadimos la ruta contact-us, queremos mostrar la vista contact us.

Y para hacer esto es muy sencillo, voy a poner el modo rápido:

@main
struct App: ExpressHandler {
    static func configure(router: Router) async throws {
        router
            .get("/", { _, _ in
                return LandingPage()
            })
    }
}

Lo que acabamos de hacer es que si la ruta de nuestra web es /, retornamos la vista llamada LandingPage que hemos creado aquí arriba. Aquí podríamos comprobar lo que te mencionaba hace un momento, si la ruta es login entonces retornar otra vista.

Perfecto, llegados a este punto vamos a ver como podemos ver que nuestra Landing Page, que la web que estamos creando se muestra correctamente, y para hacerlo hay que compilarla, pero ¿cómo la compilamos? muy sencillo, nos vamos a la ruta de nuestro proyecto usando la terminal.

Compilamos nuestra web para probarla

Una vez estamos en la raíz de nuestro proyecto (en mi caso el proyecto lo he creado en el escritorio)

cd ~/Desktop/SwiftBetaWeb/

y una vez estamos en la ruta ejecutamos el siguiente comando:

swift package --disable-sandbox vercel dev

La primera vez tarda un poco más, después por cada cambio que hagamos es mucho más rápido.

Esperamos a que compile todos los ficheros, y normalmente al acabar nos muestra la siguiente ruta (http://localhost:7676). Si tienes algún error solo debes instalar la dependencia que falte en tu ordenador y volver a ejecutar el comando de compilar.

Si todo va bien copiamos la URL que se ha generado al compilar y la pegamos en Safari, y aquí está nuestra vista en SwiftUI! pero hay algunos errores visuales, en el próximo video continuaremos y te explicaré a como solucionar este problema y también a como hacer peticiones HTTP para obtener información y mostrarla en tu web, haremos el ejemplo práctico que te mostraba al inicio del video con una petición para extraer los videos de mi canal y mostrarlo en un listado.

¿qué te ha parecido?

Conclusión

Hoy hemos aprendido a cómo crear una ejecutable que compile nuestra vista en SwiftUI y esa vista sea visible desde nuestro explorador web favorito. Hemos usado una dependencia llamada VercelUI en nuestro proyecto, hemos aprendido a como integrarla y a como compilarla para poder compilar todos sus ficheros.

En la parte 2 crearemos una web mucho más atractiva y que muestra información nueva al hacer una petición HTTP.

Y hasta aquí el video de hoy!