SwiftUI iOS 16 Crash Course : Emoji Quote App in SwiftUI

SwiftUI iOS 16 Crash Course : Emoji Quote App in SwiftUI, Direct, no nonsense approach to iOS 16 Mobile Development with SwiftUI.

Welcome to iOS Development using SwiftUI. This is a crash course so let’s keep it short and sweet.

The goal of this course is to cover as many features as possible in iOS 16 development programming using SwiftUI and the Swift programming language. This is a crash course with a no b.s. approach.

After covering quite a lot of basics of SwiftUI (Stacks, Forms, Lists, ForEach, Buttons, Sliders, Pickers, Color Pickers, Scroll Views, Sheets, state, binding, animations, etc) we move on to the main app.

Roughly speaking this app has a blinking emoji with a speech bubble next to it (similar in style to Duolingo) and in the speech bubble a quote of the day appears. We learn how to grab a random quote from the internet. We are given a list of images with the quote inside. We can edit the text color, the text size, image size. We can save this quoted image to our photo album or share it using a share link.

Here is a list of the topics we will cover and the Apps we will create.

1. Basics. We begin with a very brief introduction to Text, modifiers, HStack, VStack, ZStack, state variables, animations, onAppear.
2. Beyond the basics. We cover slightly more advanced basics such as ForEach views, sheets, pickers, sliders, toggle switches, scroll views, buttons, etc.
3. The Main App. Henceforth we delve onto the main app.
   1. App Icon. We learn how to create an App icon based on pexels and figma.
   2. SVG to PNG. We disassemble a SVG image and convert to PNG using figma. In other words we take an SVG image of an emoji and separate the eyes from the rest of the image. That way at a later stage in the course we can animate the eyes as if they are blinking from time to time.
   3. Speech Bubble Shape. We use Shape and Path to create a speech bubble. Moreover, we learn how to add text to the speech bubble.
   4. Light and Dark mode. We learn how to create a color palette that will support light and dark mode. Moreover, this is easily customizable. If you decided you prefer a different color scheme then the necessary changes are minimal.
   5. Quote Model. We create a model of a quote based on a free quote API that we will be using in the course.
   6. Quote View Model. This is part of the MVVM (Model, View-Model, View design pattern) which works naturally with SwiftUI. The View-Model can be roughly thought of as the glue connecting the view that we see an interact with and the model behind the scenes that models our data.
   7. Emoji Ninja. At this point when we tap on the emoji a new quote is generated and in addition if we use a long press gesture on the quote then the quote is copied to the clipboard using a context menu.
   8. Grid images. We create a grid of images. The number of columns depend on using an iPad or iPhone. Throughout the project we address adapting to both the iPhone and iPad.
   9. Share Images View. We create a share sheet where we can customize the image and quote. For instance we can change the text color and size and we can also change the image size and share the image or save the image as a picture.
   10. Offline quote.  The quote API we are using is free, however the API does have an undefined restriction on how many quotes we can use daily. In case we exceed the limit then we create a function that randomly creates a quote based on an internal list of quotes.
   11. Testing the App. We run the App and test out the features. It is worthwhile to test the App on a real device and not just on the simulator.

We cover an impressive amount of material in a very short time span. Hence a crash course in SwiftUI and iOS Development.

Like all of my courses this course is dynamic and I will be adding content regularly. However the goal of the course is to have a succinct, terse yet fairly comprehensive taste of SwiftUI and iOS 16 Development. So I will keep the general flavor of the course, that is, to be direct and to the point.

I hope you enjoy this course as much as I enjoyed creating it. Also make the code your own. Experiment and be creative. Try to implement an App idea of your own using what you’ve learned from this course.

I am always available for questions and am highly responsive. I check the Q & A and direct messages twice a day.

Happy programming, have a Great day and I enjoy your programming journey !

Ron