SECRET OF CSS

Create an End-to-End SwiftUI Application With Swift Playgrounds on iPad | by Sam Proctor | Sep, 2022


How to add a server-side backend

1* PYzMFF3CL86YDdaHc5S g
dPhoto by Daniel Korpai on Unsplash

For some inexplicable reason, it has been a bit of a goal of mine to be able to program iPad apps on an iPad. Why? Well, nobody can really say. I think the idea of not being tied down to a MacBook. I can grab my tablet and write some code anywhere.

Last December looked like this may be a reality with the release of Swift Playgrounds 4. This release allowed users to create basic apps, compile them, view the console, and, when ready, even submit them to the App Store. This alone is a big leap forward. However, some of the most fundamental functionality required for apps was missing.

After a thorough review, I concluded that a user could create an iPad app entirely on the iPad, but the app itself would have to be fairly basic.

Swift Package support in Playgrounds was a game-changing move. The ability to simply add a package to a project, and instantly you have access to all the functionality that a framework brings with it. Take Lottie. By adding this one framework, I can grab animations into my app, and instantly as a non-designer, I have an app that looks professional and inviting.

After more experiments, I discovered that packages would only load in playgrounds if all their encompassed files were Swift files. If an Objective-C file was contained in the package, the package loading would fail. This immediately cut down the number of compatible packages that could be used with Swift Playgrounds. The most problematic of all: There is no package for supporting a backend server.

BAAS (Backend as a service) is often used to handle user sign-up, authentication, and user management, storing data in a database or running server-side code and analytics. With this run on a server, the user simply has to write what is known as a ‘client app’ — effectively an app with permissions that can search the server for some information and return it for display. This can be extended to editing values.

This makes the base of most apps out there, but until now, this was not possible in Swift Playgrounds.

What is the answer? Pass! (No, Parse).

Parse server is an open source server used primarily for this type of application. Users can host their parse servers, or these can be hosted for you using services such as back4app (which I will use for this demonstration).

Moreover, a dedicated parse Swift package called ParseSwift enables communication with the parse server and is compatible with Swift Playgrounds!

For the first time, users stand a shot of being able to create native apps on iPad with full server integration.

Create the parse server

Firstly, you need a place to host the Parse server. I will conveniently skip this part and use a service called back4app. There is a free tier that is perfect for development and learning/experimenting. The paid tiers come into play when you have many more users and many requests per month.

Head to www.Back4app.com and sign up. (I am not affiliated, you could google parse server and use any of these services or host your own). After this, follow the instructions to create an app.

Create a Swift playground app and add the ParseSwift package

As the title says, open Swift Playgrounds and create a new app. Click on the new file icon, and select ‘Swift package.’

Add Swift Package from the new file menu
Add Swift Package from the new file menu

In the following window, enter the address to the ParseSwift Package: https://github.com/parse-community/Parse-Swift

Initialise ParseSwift (Tell the app where the server is and what keys to use)

Navigate to the GitHub address for Parse-Swift (see the previous step), and you will see a brief summary of how to use the framework. The only key thing to do is point your client app towards the server with the correct keys.

This is achieved with the following code. The documentation states to place this within AppDelegate (for traditional apps build on Xcode), but for Playgrounds this is different. Place this code somewhere at the very top level so that this exists for the app’s lifespan.

ParseSwift.initialize(applicationId: "xxxxxxxxxx", clientKey: "xxxxxxxxxx", serverURL: URL(string: "https://example.com")!)

For now, I will just place it in a function that is performed when the initial view appears:

We need to feed three pieces of information here to communicate with the server: applicationId, clientKey , and serverURL. These can be found in the app’s settings in Back4app.com.

Back4App Keys
Back4App Keys

On the dashboard for your app, click the menu, navigate to ‘App Settings’ and click ‘Security & Keys.’ In the window displayed, copy the applicationId and clientKey into the initialise code in Swift Playgrounds.

After this, you just need the serverURL. For Back4app, this is https://parseapi.back4app.com/. If you have hosted this, it will be the address hosted.

That’s it. Steps over. You now have a client app that can communicate with a server! If you head back to the GitHub page for ParseSwift, click on view code, look in the ParseSwift.playground folder, and click on pages. You will see 23 different categories of functions to use with a parse server. You can start with the sign-up for users, authentication, and then create queries and viewing results.

To conclude this article, we will create a user to prove that we have communication. This can be found with playground number 3 on GitHub ‘3 — User — Sign Up.’

This gives us two things, first, a struct defining what a user is. Here’s the code:

The second is the function to sign up a user. I place this in a function called userSignUp.

Now call the function userSignUp by pressing a button in your app. The final code should look like this:

Running the app gives me a blank screen with my sign-up button. Pressing the button creates the new account and prints to the console so I can see the return confirmation.

1*82L0oiniL1HF0dTFy9rTfQ

We can now check on our parse serve to confirm that the account was created.

My added user
My added user

The possibilities are endless. Personally, this was the last big hurdle towards programming solely on iPad to create a native app. Now you can start securing data on a server. Or run server-side code that will fetch and update its data ready for your client app to display.

Thanks for reading!



News Credit

%d bloggers like this: