SwiftUI iOS 16 Crash Course : Emoji Quote App in SwiftUI

Free Courses : SwiftUI iOS 16 Crash Course : Emoji Quote App in SwiftUI

The goal of this course is to cover as many features as possible 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 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.

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 mode. 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 an 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 depend 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

1. Belajar database dengan Room di Android
2. Membuat sortable list seperti Trello
3. Membuat halaman depan homepage facebook
4. Google Search Console: How to use it to increase SEO traffic
5. Membuat blog dengan PHP