iOS App in 30 mins! — Part 1

5 min readJun 14, 2022

As demanding as it sounds, let’s go!

If you have more than an hour you can try going through Apple’s SwiftUI Tutorials.
Credits: this YouTube video by Code Palace was the birth child for this app idea.

Before you start!

Be on the latest and greatest version of Xcode. As of this article I’m on version 13.4.1. If you need time to upgrade, this tutorial is gonna take way longer than 1 hour… start the download.. watch a movie(or a few).. and come back when you’re done (:

The App

The APIs

Like any other ‘pro’ application we will need an api as a source for data for our app! We’ll be using PokéAPI for this app.

The endpoints we’ll be using:

GET: First 151 Pokémons (aka. the OG Pokémons)

curl --location --request GET 'https://pokeapi.co/api/v2/pokemon/?offset=0&limit=151'

2. GET: Pokémon by id (e.g this stats belong to Charmander)

curl --location --request GET 'https://pokeapi.co/api/v2/pokemon/4/'

Other Resources

Whats an app with out some pictures~~~

Pokémon Sprites

https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png

2. Pokémon Official Artwork

https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/4.png

Creating the project

Launch Xcode > Create a new Xcode project

2. iOS Tab > Select App (Remember iOS Tab not Multiplatform!!)

3. Fill the form up. make sure for Interface: SwiftUI

4. Press next and select where you would like to save the project and press Create

Run the App

Select iPhone 13 Pro Max cause you can.

2. ⌘ + R to run the app and you should be greeted with a Hello, world!

3. ⌘ + Shift + A to change from Light to Dark vice versa

Calling the API

hello hello anyone home?…

Create a new group under PokemonMaster called Services

Under Services create a Swift file called PokeAPIService.swift

To call the api we will use the URLSession class.

// find a URLSession tutorial

To test this we will use onAppear lifecycle events in PokemonMasterApp.swift like so.

Notice the @main annotation as well this file, this is also the entry point of the app.

Upon ⌘ + R you should see 10011 bytes print in the console

Parsing the response

Bytes ain’t much use to us. What we need to do now is parse the bytes we have into an object.

For that we have to create a model to based off the api response.

Create a new group “Model” under Services and a new class “GetPokemonsResponse”

Notice the conformance to the Codable protocol. This conformance allow the
JSON data (our bytes) to be decoded into a Swift struct.

Now let’s get our response!

Now ⌘ + R and you should see the GetPokemonsResponseobject print out in the console

Yay you’ve got the data!

We eventually want the data to be return to the caller so we would now need get our getPokemons() to return a completion once the response is back.

After which you will be able to use the data in the view

Now ⌘ + R and the data will be print in the console the same way.

Now Repeat for the GET: Pokémon by id.

How to easily create the model when it’s really big?

As you might have found out, the api response for GET: Pokémon by id is quite big and complex. We will be using a tool https://app.quicktype.io/ to generate a model for the response.

Time to open up the Postman App as we will be using it to fetch the api response for GET: Pokémon by id. First you can create a new workspace, and make a GET request for the URI

https://pokeapi.co/api/v2/pokemon/4/

Press send to submit your API request and you should receive a response in the body section. Copy and paste the entire response into the chalkboard at the left side of the quicktype tool and rename it as “GetPokemonResponse”

In the option bar on the left, select Make all properties optional . In any case where the some properties are not there we can still decode the model without error.