SwiftUI iOS 16 Crash Course : Emoji Quote App in SwiftUI

SwiftUI iOS 16 Crash Course : Emoji Quote App in SwiftUI, SwiftUI in Two hours.

The goal of this course is to cover as many features as possible in iOS 16 programming using SwiftUI within a limited time frame.

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. App Icon. We learn how to create an App icon based on pexels and figma.
3. SVG to PNG. We disassemble an SVG image and convert it 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.
4. Speech Bubble Shape. We use Shape and Path to create a speech bubble. Moreover, we learn how to add text to the speech bubble.
5. Light and Dark mode. We learn how to create a color palette that will support light and dark modes. Moreover, this is easily customizable. If you decided you prefer a different color scheme then the necessary changes are minimal.
6. Quote Model. We create a model of a quote based on a free quote API that we will be using in the course.
7. Quote View Model. This is part of the MVVM (Model, View-Model, View design pattern). The View-Model can be roughly thought of as the glue connecting the view that we see and interact with and the model behind the scenes that models our data.
8. 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.
9. Grid images. We create a grid of images. The number of columns depends on using an iPad or iPhone. Throughout the project, we address adapting to both the iPhone and iPad.
10. 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.
11. 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.
12. 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. Hopefully, it will whet your appetite to further your exploration of iOS 16 programming using SwiftUI.

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.

Happy programming and have a Great day

Ron