Constructing a Textual content-to-speech App on iPad

In WWDC 21, one of many bulletins that caught my consideration was the large modifications of Swift Playgrounds. Not solely are you able to be taught Swift utilizing Playgrounds, the brand new replace permits builders to create apps completely on iPad and submit them to App Retailer immediately.

Swift Playgrounds is an effective way to be taught to code proper on a Mac or iPad. With Swift Playgrounds 4, coming later this 12 months, customers will be capable to create the visible design of an app with SwiftUI. App tasks may be opened and edited in Swift Playgrounds or in Xcode, and after they’re prepared, customers can construct an actual app and submit it on to the App Retailer proper from their iPad.

I’ve been ready for its launch for a number of months. A pair weeks in the past, Apple lastly launched Swift Playgrounds 4 permitting us to construct each iPhone and iPad apps proper on iPad.

In the event you already personal a Mac, it’s possible you’ll surprise why it’s an enormous step for Apple to convey iOS app improvement to iPad. Aside from publishing on-line programs and ebooks, I additionally arrange varied in-person workshops for absolute newcomers to expertise iOS app improvement. One of the frequent questions is: Can I write code and develop apps on iPad as a result of I don’t have a Mac? Previously, the reply is clearly no. Now, with the model 4 launch of Swift Playgrounds, newcomers can begin studying Swift & SwiftUI and not using a Mac.

Let’s check out Swift Playgrounds 4 and see how we will develop a easy text-to-speech app on iPad.

Making a New Venture Utilizing Swift Playgrounds

Assuming you’ve downloaded and put in Swift Playgrounds 4 in your iPad, it is best to see the next display whenever you first launch the app.

It now comes with a brand new venture template known as App. To develop an app on iPad, select the App template on the decrease left nook. Swift Playgrounds then create a brand new venture for you. You may faucet and maintain the venture icon to rename the venture. For me, I rename it to HelloWorld.

Tapping the venture icon will convey you to code editor. Proper subsequent to the code editor, it’s the preview pane, which renders an on the spot preview on your code. By default, it already generates a code snippet that shows an icon and a Hey, world message.

Let’s Write Some Code

You could be skeptical about easy methods to sort code utilizing the software program keyboard of iPad. In truth, the highly effective Xcode-like code completion makes the entire coding expertise so gratifying, even in the event you use the software program keyboard.

Let’s attempt to write some code and you’ll perceive what I imply. We’ll modify the code of ContentView to create a button. First, we have to take away the generated code in physique. To take away the VStack and its embedded views. You may merely faucet the opening curly bracket and Playgrounds routinely selects the block of code. Select Delete or hit the delete button to take away the code block.

Subsequent, attempt to add a button to the app UI. While you begin typing Button(ac, Playgrounds instantly reveals you some code options. You may hit return to decide on the default choice.

After that, you possibly can hit the return key once more. Playgrounds will generate the code skeleton of the Button view for you. It’s precisely the identical because the auto completion characteristic of Xcode.

You may proceed to jot down the code like this:

The auto completion characteristic may be very responsive. When you sort the dot (.) key, the app immediately shows all of the out there modifiers of the view for you. Simply faucet the one you want. This could prevent fairly numerous key strokes.

After the change, Playgrounds ought to render a purple button within the preview pane.

Including a Stack View and Textual content Area

Subsequent, we’ll add a textual content area proper above the Communicate button. Earlier than including the textual content area, we’ll first embed the button in a VStack view. Not like Xcode, it doesn’t include a context menu for embedding a view in a stack view.

On iPad’s Playgrounds, you possibly can sort VStack to create a vertical stack view. To wrap the Button view within the VStack, you faucet and maintain the shut curly bracket (}) of the stack view. Then drag it till the VStack view embeds the entire Button view.

So as to add the textual content area, declare a state variable for holding the consumer enter in ContentView like this:

Then insert the next code earlier than the Button view:

When you made the modifications, it is best to see the textual content area with a placeholder.

Implementing the Textual content to Speech Function

The iOS SDK has built-in APIs for builders to include the text-to-speech options in iOS apps. All you want is to import the AVFoundation framework:

Within the closure of Button, insert the next code:

To synthesize speech, we create an AVSpeechUtterance occasion with the textual content enter. We then specify the voice sort and create an AVSpeechSynthesizer occasion to talk the textual content.

Now it’s prepared to check the app. Within the preview pane, sort some textual content within the textual content area and faucet Communicate. The app ought to rework the textual content into speech. Please ensure you disable the silent mode throughout your testing.

Including Photographs

The app already works completely. Nonetheless, to make the app look higher, let’s add a picture above the textual content area. On the highest left nook, faucet the navigator icon to open the venture navigator. Then faucet the Add new file icon to convey up the choice menu.

If you wish to add photographs from Photograph library, select Photograph. Alternatively, you possibly can select Insert from… to pick out a picture from iCloud drive. When you added the picture, you will note the Property part within the venture navigator.

In the event you’re including the picture from Photograph library, the default picture identify is ready to Picture Asset. You may faucet and maintain the file to convey up the Rename possibility. Rename the file to hellocat.

Now swap over to ContentView. Insert the next code earlier than TextField:

Optionally, you possibly can add a heading earlier than the Picture view like this:

Your last deliverable ought to seem like this:

Operating Your App Venture

Not like Xcode, the app preview on Swift Playgrounds is at all times interactive. You may already take a look at the app within the preview pane. That stated, if you wish to run the app and see the way it appears to be like on iPad, you possibly can faucet the Play button.

Swift Playgrounds will launch the app and run it in full display mode. To cease the app and swap it again to the code editor, you possibly can faucet the Swift icon within the standing bar. Then you possibly can faucet the Cease button to terminate the app.

Abstract

Swift Playgrounds 4 delivers an enormous enchancment for aspiring builders who’re excited by studying iOS improvement however and not using a Mac. As you possibly can see on this tutorial, we will construct an iOS app completely utilizing an iPad. The built-in code editor and the auto full characteristic present a pleasant coding expertise.

For many who personal a Mac, there’s most likely no cause why you’ll develop apps utilizing Swift Playgrounds. Nonetheless, for newcomers who solely obtained an iPad and never able to put money into a brand new Mac, this new replace of Swift Playgrounds opens up a number of alternatives for them.

If you already know any iPad customers who wish to be taught to code, be at liberty to share this tutorial to them. I’m excited to jot down extra tutorials and present them easy methods to construct apps completely on iPad.

To be taught extra about SwiftUI, you possibly can additional try our Mastering SwiftUI guide.