Building real-time data application using Swift and SwiftUI: Part 0

Learn networking, JSON parsing, MVVM, combine, core data, and much more while building an app.

Hi folks! Knowing about building a Mobile Application using Flutter and Android, I thought of giving it a shot to learn about Native iOS development. So, recently, I have been learning iOS development using Swift and SwiftUI. Got some good tutorials on the internet and I think YouTube is still the best place to learn anything. After asking for help on Twitter about the best resources to learn Native iOS Development, I got some good tutorials. I started learning the basics of Swift using LinkedIn Learning courses and to learn SwiftUI I watched the SwiftUI playlist of SwiftfulThinking (the best SwiftUI tutorials to date).

P.S. Learning UIKit or SwiftUI as a beginner I had a question, so, started with SwiftUI first.

So far I have learned the basics of iOS Development and was building the Crypto Currency app with real-time data. So thought of sharing what I have learned with the community. I hope the series articles help anyone who's going to start or who's already an indie iOS developer.

What are we building?

We are going to make a Crypto Coins application where a user can see the price, ups & downs of a market, a line chart that shows the trends of a coin, descriptions, and much more about a crypto coin. Users can also buy and see their holdings. Regarding the buying cryptos feature, we ain't gonna make it a real transaction we will just dummy it, just to show how to use CoreData.

An animation in an application is like a cherry on top of the cake so, we are also going to have a look few animations for a good user experience. Overall, the app we are going to build uses the MVVM pattern, a Combine framework, and the API we are going to use is provided by CoinGecko which is free and doesn't require any API key and sign in which comes in a very handful way.

Okay enough of talking, let's make our hands dirty.

Setting up the project

Head over to the Xcode and create an ios application, give a name to the application, I will go with the simple name "CryptoCoin" (couldn't think of anything good :') ) select Swift as a language, and SwfitUI as making our UI. Uncheck the "include test" and "include core data" boxes if you have checked the box. I know we are going to make use of Core Data in our application but I don't want the pre-code given by Apple, so simply uncheck the box because we are going to make our custom classes use Core Data in our application.

Theming the application

Before moving into code let's define some colors that can work in both, the light and dark modes of our application. So head over to the Assets folder, inside the assets folder create a folder called "ThemeColors". Inside the ThemeColors folder, create a color set. Create five different color sets and name them as AccentColor, BackgroundColor, RedColor, GreenColor, and SecondaryTextColor.

Click on AccentColor color set, click on Any Appearance, and from the right-hand side of the panel select "show attribute inspector" click on a color and select the black color. For dark mode appearance, we are going to use a lightish pink color.

In BackgroundColor set, for Any Appearance keep it white, and for dark keep it black. For red, green, and secondary text colors we will keep any appearance color to darker color and for dark mode, we will use a light color. For example, for the green color set, any appearance will be darker green and for dark mode, we will keep the light green color and this goes on for the rest of the color sets.

Don't worry if the above things sound complicated. Head over to my Github repo and copy and paste the Theme Color folder inside your Xcode Assets folder. I have explained the above things for beginners who are just getting started and don't know how to theme our application. If you feel not doing the above things, feel free to clone the Github repo and make the necessary changes.

Moving ahead create an "Extension" folder inside that creates a Swift file called Color.swift.

Create a struct called ColorTheme

struct ColorTheme{
    let accent = Color("AccentColor")
    let background = Color("BackgroundColor")
    let green = Color("GreenColor")
    let red = Color("RedColor")
    let secondaryText = Color("SecondaryTextColor")
}

What we are doing here is, we created the Color sets and our app knows that these are the color sets we are going to use but how we are going to use them inside our application? Using the above code.

Now, create an extension on the Color class.

extension Color{
    static let theme = ColorTheme()
}

If you don't know what an extension is let me explain you. An extension extends the functionality for any provided class/struct. The main aim of the extension is to add your custom functionality to the existing code. In the above example, we are extending the functionality for a Color class provided by SwiftUI.

We are creating the "Singleton" of a ColorTheme struct which means we are going to make only a single object our ColorTheme class in our whole application. Singleton is creating a single instance and using it all over the project.

Let's check if the theme which we have set up is working properly or not.

Create a SwiftUI file and name it anything. I will name it a test.swift. Save wherever you want in the folder hierarchy.

import SwiftUI

struct test: View {
    var body: some View {
        VStack{

            Text("Accent Color")
                .foregroundColor(Color.theme.accent)

            Text("Background Color")
                .foregroundColor(Color.theme.background)

            Text("Secondary Text Color")
                .foregroundColor(Color.theme.secondaryText)

            Text("Red Color")
                .foregroundColor(Color.theme.red)

            Text("Green Color")
                .foregroundColor(Color.theme.green)
        }

    }
}

You can run the code on the simulator and check the theming works well both in light mode as well as in dark mode.

Feel free to clone the GitHub repo for the above code.

Well, that's it for this article. More articles are coming on the way. I hope you guys like this article. If you have any doubts, feel free to contact me on Twitter, Instagram, or LinkedIn. To see my other projects visit my GitHub.

Note: I am referring to the SwiftfulThinking video tutorial for making this app. If you prefer video tutorials, definitely go check.

Thank you and Happy coding :)