Crea una app iOS desde un iPad en Swift Playgrounds 4
Crea una app iOS desde un iPad en Swift Playgrounds 4

Swift Playgrounds ¿Cómo crear tu primera app en un iPad?

Aprende a crear una app desde tu iPad. Swift Playgrounds 4 permite crear tu app desde un iPad. También podemos subir nuestra app desde el iPad al App Store.

SwiftBeta

Tabla de contenido

Crea una app desde tu iPad

Hoy en SwiftBeta vamos a aprender a cómo usar Swift Playgrounds en un iPad y vamos a crear nuestra primera app. Con la versión 4 de Swift Playgrounds (lanzada en diciembre 2021) ya podemos crear apps desde nuestro iPad y para quien no lo sepa esto son muy buenas noticicias 🤩.

Vamos a crear una app donde un user tendrá un Canvas y podrá dibujar. También podrá cambiar de colores y de del grosor del trazado.

A medida que vayamos creando nuestra app iremos viendo cómo está configurada la nueva interfaz.

Creamos nuestra app en Swift Playgrounds en un iPad

Lo primero de todo, debemos abrir la app de Playgrounds dentro de nuestra iPad, si no la tienes descargada te la puedes bajar de App Store

‎Swift Playgrounds
‎Swift Playgrounds makes it fun to learn to code and build real apps. You solve interactive puzzles in the guided “Get Started with Code” and learn the basics of building apps in “Get Started with Apps.” You experiment with a wide range of challenges and samples that let you explore unique coding ex…

Una vez abierta debemos ver todos nuestro Playgrounds.

Swift Playgrounds 4 en iPad
Swift Playgrounds 4 en iPad

Vamos a crear nuestra primera app. Para hacerlo nos vamos a la parte inferior donde hay una sección de More Playgrounds. Ahí podemos pulsar el que pone App. Al hacerlo automáticamente se creará una app nueva. Cuando creamos una app podemos cambiar su nombre, para hacerlo, solo debemos mantener pulsado en el icono y nos aparece el siguiente menu.
Voy a llamar a la nueva app PaintApp

Creamos nueva app en Swift Playgrounds 4 en iPad
Creamos nueva app en Swift Playgrounds 4 en iPad

Y el resultado sería el siguiente:

App renombrada en Swift Playgrounds 4 en iPad
App renombrada en Swift Playgrounds 4 en iPad

Una vez tenemos nuestra app creada, la pulsamos para abrirla. Y nada más abrirla nos aparece el siguiente código:

Código SwiftUI de una app creada en Swift Playgrounds 4
Código SwiftUI de una app creada en Swift Playgrounds 4

Fíjate que en la parte izquierda tenemos nuestro código en SwiftUI y a la derecha tenemos la preview del código, tal y cómo se vería en un dispositivo real. Es exactamente igual a como lo tenemos en Xcode. En Xcode tenemos el Canvas para ver en tiempo real lo cambios introducidos.

Vamos a cambiar el texto de nuestro Text, vamos a poner ¡Bienvenidos a SwiftBeta!. Al hacerlo, automáticamente el cambio se ve reflejado en la preview de la derecha.

Actualizamos el texto del Text para ver el cambio en la preview
Actualizamos el texto del Text para ver el cambio en la preview

Interfaz de Swift Playgrounds 4 en iPad

Ahora vamos a explorar un poco la interfaz, vamos a ver qué hacen los Buttons que aparecen por la pantalla. Vamos a empezar por la parte superior izquierda.

Cerrar App

Si pulsamos el Button X, lo que ocurre es que volvemos a la vista inicial de Swift Playgrounds, justo donde aparece todo el listado de nuestras app.

Button de cerrar App en Swift Playgrounds 4 en iPad
Button de cerrar App en Swift Playgrounds 4 en iPad

Listado de ficheros

Vamos a pulsar el siguiente Button. Al hacerlo nos aparece el listado de ficheros de nuestr app.

Listado de ficheros en Swift Playgrounds 4 en iPad
Listado de ficheros en Swift Playgrounds 4 en iPad

Aquí aparecen varios Buttons que son interesantes y que tienen propósitos diferentes.

Crear ficheros en Swift Playgrounds 4

El primero para añadir más ficheros a nuestra app, si pulsamos el Button aparece un menú para seleccionar qué queremos hacer:

Crear ficheros en Swift Playgrounds 4 en iPad
Crear ficheros en Swift Playgrounds 4 en iPad

App Settings de Swift Playground 4

Y el siguiente Button nos permite customizar nuestra app:

  • Cambiar el nombre de la app
  • Cambiar el color
  • Cambiar el icono
  • Y también hay una opción para añadir Capabilities (entraremos más en detalle en otros posts)
Cambiar settings de nuestra App en Swift Playgrounds 4 en iPad
Cambiar settings de nuestra App en Swift Playgrounds 4 en iPad

Y por último, podemos seleccionar los archivos que son Swift para cambiar su código, si pulsamos el fichero MyApp, podemos ver y cambiar su contenido.

Listado de ficheros de nuestra App en Swift Playgrounds 4 en iPad
Listado de ficheros de nuestra App en Swift Playgrounds 4 en iPad

Compilar nuestro código

Para compilar nuestro código solo debemos pulsar en el icono de compilar. Al hacerlo aparece en pantalla lo mismo que teníamos en la preview pero esta vez adaptado a la pantalla de nuestro iPad.

Compilar nuestro código en Swift Playgrounds 4 en iPad
Compilar nuestro código en Swift Playgrounds 4 en iPad
Pulsamos el Button naranja que aparece en la parte superior derecha para volver a nuestra app
Pulsamos el Button naranja que aparece en la parte superior derecha para volver a nuestra app

Si queremos volver a nuestro código, podemos pulsar en el icono de Swift Playgrounds que aparece en la parte superior derecha, al pulsar nos aparece la siguiente ventana:

Pantalla que aparece al pulsar el Button naranja, aquí podemos escoger la opción que queramos
Pantalla que aparece al pulsar el Button naranja, aquí podemos escoger la opción que queramos

Aquí aparecen varias opciones:

  • Restart, donde volveríamos a compilar nuestra app.
  • Stop, donde pararíamos la compilación y nos aparecería otra vez la pantalla con nuestro código para poder editar.
  • Show project, donde volveríamos otra vez al editor de código (sin parar nuestra app)

Busca las vistas SwiftUI más usadas

Al pulsar en el siguiente Button, se muestra una lista de vistas en SwiftUI. Puedes escoger la que quieras y al seleccionarla, automáticamente se crea el código de la vista donde tenías el cursor.

Añadir vistas de SwiftUI rápidamente en nuestra App en Swift Playgrounds 4 en iPad
Añadir vistas de SwiftUI rápidamente en nuestra App en Swift Playgrounds 4 en iPad

Muy útil si quieres ahorrar tiempo. Vamos a continuar.


Customizar Swift Playgrounds (Tamaño letra, ocultar líneas, etc)

Al seleccionar el siguiente Button aparece otro menú, aquí puedes personalizar tu experiencia con Swift Playgrounds. Por ejemplo, puedes acceder a la Documentación, Cambiar tamaño de letra de tu código, ocultar el número que aparece en cada línea, etc.

Customizar algunos atributos del editor de código en Swift Playgrounds 4
Customizar algunos atributos del editor de código en Swift Playgrounds 4

Y un detalle muy importante, hay una opción que aparece como Advanced. Esta opción permite poder subir tu app directamente al App Store 😱

Subir nuestra app al App Store desde nuestro iPad
Subir nuestra app al App Store desde nuestro iPad

Para poder subir tu app al App Store primero debes entrar en el programa de desarrolladores de Apple (lo único que necesitas es pagar una suscrición anual). Aquí puedes encontrar más información:

Before You Enroll - Apple Developer Program
Learn about what you will need to enroll in the Apple Developer Program.

Mostrar Preview en Swift Playgrounds

Si quieres volver a mostrar la preview de tu app (o de las vistas de tu app en SwiftUI), pulsa el último Button.

Mostrar la preview de nuestra App en Swift Playgrounds 4 en iPad
Mostrar la preview de nuestra App en Swift Playgrounds 4 en iPad

Creamos nuestra primera app para dibujar en Swift Playgrounds desde iPad

Lo primero que vamos hacer es ir a la app que acabamos de crear. Nos vamos al ContentView, es el único fichero que vamos a necesitas, vas a ver que con muy pocas líneas de código podemos crear un app que permita a un user crear dibujos.

Nuestra app solo va a tener dos modelos, dos struct llamadas Lines y Point:

struct Line {
    var points: [Point]
    var color: Color
    var width: Float
}

struct Point {
    let currentPoint: CGPoint
    let lastPoint: CGPoint
}
Dos modelos que usaremos en nuestra app creada en SwiftUI

Estas son las unidades mínimas que necesitamos, ¿por qué?:

  • Al dibujar tendremos varias líneas (de distinto tamaño y color).
  • Cada línea es un conjunto de puntos.
  • Cada punto es una coordenada, es la información más básica que necesitamos para trazar una línea.

Y el código de nuestro ContentView será el siguiente:

struct ContentView: View {
    @State var lines: [Line] = []
    @State var points: [Point] = []
    @State var currentLine: Int = 0
    @State var currentLineColor: Color = .black
    @State var currentLineWidth: Float = 1.0

    var body: some View {
        VStack {
            Form {
                ColorPicker("Color", selection: $currentLineColor)
                Slider(value: $currentLineWidth, in: 1...4, step: 1)
            }
            .frame(height: 120)
            Canvas { context, size in
                createNewPath(context: context, lines: lines)
            }
            .gesture(
                DragGesture()
                    .onChanged({ value in
                        let point = value.location
                        let lastPoint = points.isEmpty ? point : points.last!.currentPoint
                        let currentLinePoints = Point(currentPoint: point, lastPoint: lastPoint)
                        points.append(currentLinePoints)

                        if lines.isEmpty {
                            let line = Line(points: [currentLinePoints],
                                            color: currentLineColor,
                                            width: currentLineWidth)
                            lines.append(line)
                        } else {
                            var line: Line?

                            if currentLine >= lines.count {
                                line = Line(points: [currentLinePoints],
                                            color: currentLineColor,
                                            width: currentLineWidth)
                                lines.append(line!)
                            } else {
                                line = lines[currentLine]
                                line?.points = points
                                line?.color = currentLineColor
                            }

                            lines[currentLine] = line!
                        }
                    })
                    .onEnded({ value in
                        currentLine += 1
                        points.removeAll()
                    })
            )
            .background(.white)
        }
    }

    private func createNewPath(context: GraphicsContext,
                               lines: [Line]) {

        guard !lines.isEmpty else { return }

        for line in lines {
            var newPath = Path()
            for point in line.points {
                newPath.move(to: point.lastPoint)
                newPath.addLine(to: point.currentPoint)
            }
            context.stroke(newPath, with: .color(line.color), lineWidth: CGFloat(line.width))
        }
    }
}
Código para poder dibujar en nuestro Canvas

El resultado es el siguiente:

Resultado final de nuestra App en Swift Playgrounds 4 en iPad
Resultado final de nuestra App en Swift Playgrounds 4 en iPad

Conclusión

¡Ya es posible crear una app desde el iPad! en el post de hoy hemos usado Swift Playground 4 para crear una app muy sencilla pero entretenida. Si quisieramos también la podríamos subir al App Store para dejar que otros users la descargaran y la usaran.

Si quieres seguir aprendiendo sobre SwiftUI, Swift, Xcode, o cualquier tema relacionado con el ecosistema Apple



¡Únete al Discord de SwiftBeta!