05 Emily Luo - molab-itp/content-2023-Fa GitHub Wiki
Week 1
1.1 Class Post
Excited to learn more about developing mobile apps & bringing prototypes to life. Favorite mobile experience: Spotify I love listening to music on the go, especially since it's nice to tune out the noise in such a busy city. It's a relatively user-friendly interface, and it's great for curating playlists.
1.2 Homework
Week 1 Demo I created this Xcode playground that generates text art of Hello Kitty using only special characters. I'm also currently working through Days 1-14 of 100 Days of SwiftUI. I got through the first four weeks. I haven't had too much trouble so far, everything I've learned has been pretty self-explanatory. I'm excited to put everything to use in mobile app development.
Week 2
Week 2 Demo This week I created an Xcode playground that makes an 1024x1024 image by playing around with the arrangement of different space-related emojis. I chose a galaxy emoji for the background, and implemented the rocket ship, astronaut, shooting star, and Saturn emojis to be randomly placed across the canvas. I'm pretty satisfied with the result, but I do think it needs a bit of troubleshooting since it takes so long to actually generate the image. I also continued to work through days 5-10 of 100 Days of SwiftUI. The content I learned about this week was a bit confusing than the previous days, but it was helpful nonetheless. I do feel like I need a bit more practice before proceeding to days 11-14.
Week 3
Week 3 Demo For the Week 3 assignment I created a single view SwiftUI app that produces an image that is composed of circles of random sizes and various colors including red, green, blue, orange, purple, and yellow. I worked through days 11-14 of the SwiftUI tutorial. I'm feeling a bit lost, but I think I just need to put my skills to use by writing some code.
Week 4
Week 4 Demo For Week 4 I created a multi-screen SwiftUI app that shows you different clocks from time zones across the world. I need to work on the styling to make the app a bit more aesthetically pleasing, but this definitely gets the point across.
Week 5
Week 5 Demo This week I edited the world clock app I created previously to be more organized and uniform by adding boxes around the content.
Week 6
Week 6 Demo Created a digital closet app where the user can upload pictures of pieces within their closet and categorize everything to their liking. Users can tap on the "Add Item" button which will then prompt them to add an image from their camera roll which they can then rename and categorize into tops, bottoms, shoes, and accessories.
Week 7
Week 7 Demo
I decided to challenge myself this week and create a clone of the app "Calmaria" that is currently offered in the App Store. The app is modeled to guide users through breathing techniques and exercises that are designed to bring your body to a deep relaxation state. The main technique exemplified in the app is the 4-7-8 method which is simply inhaling for 4 seconds, holding your breath for 7 seconds and exhaling for 8 seconds. I recreated the UI of the app by researching and using visual effects, specifically animation. In order to start the breathing exercise, the user taps the circle in the middle which will inflate like a balloon to mimic breathing patterns. I've linked the resources I utilized below.
https://developer.apple.com/documentation/swiftui/visualeffect
https://developer.apple.com/videos/play/wwdc2023/10156/
https://www.hackingwithswift.com/quick-start/swiftui/how-to-add-visual-effect-blurs
https://www.hackingwithswift.com/quick-start/swiftui/how-to-dynamically-adjust-the-appearance-of-a-view-based-on-its-size-and-location
https://swiftwithmajid.com/2023/11/07/visual-effects-in-swiftui/
Week 8
Week 8 Demo I'm currently working on an app where users can manage all of the tasks within their schedule down to the minute. They can access their personalized calendar and add different tasks with labels to complete by a certain time and date. They can also add the time and date of specific events. I used SwiftData for data storage here. Resources: https://developer.apple.com/xcode/swiftdata/ https://developer.apple.com/documentation/swiftdata https://www.hackingwithswift.com/quick-start/swiftdata https://www.hackingwithswift.com/quick-start/swiftdata/what-is-swiftdata https://medium.com/@rizal_hilman/building-a-simple-todo-list-app-with-swiftui-c603c9bad052
Week 9
Week 9 Demo I continued to develop my Week 8 Demo by adding the task management feature. Previously, I just worked on the scrolling calendar, but now users are able to add specific tasks and events which they can schedule within their calendar.
Week 10
Expanding on Week 6 Demo~ For my final project, I would like to develop a Figma app prototype called "StyleBook" that I created for selecting outfits digitally. StyleBook enables users to document every article of clothing they own, as well as any that they may purchase, to create a digital closet. All they have to do is either scan the clothing item or look it up in the app’s comprehensive database. From there, clothing items are automatically divided into categories like tops, bottoms, shoes, accessories, etc. When the time comes to choose an outfit for the day, users can simply open the app and scroll through their options until they find the right combination. StyleBook makes it incredibly easy to visualize all of your outfits without having to try on fifty different combinations. Link to the prototype I created previously: https://www.figma.com/proto/zCSxqcxNQhZj1ZBWRhiC0G/StyleBook-Prototype?type=design&t=02L92TdKneJa6wPg-1&scaling=scale-down&page-id=0%3A1&node-id=1-273&starting-point-node-id=1%3A273&mode=design
Week 11
Changed concept for final project to a snack app where the user can order snacks from around the world. Original concept was a bit too ambitious and would involve setting up a social media aspect. This new idea is based on a Figma prototype I created previously. I wanted to create this app because not everyone has the privilege of having multiple ethnic grocery stores in their area, so "Bitez" will make it easy for users to access snacks from various countries. I'm not sure if I'll have the time to fully develop a view for each country's snacks, but I'll see what I can do given the circumstances.

Week 12
Figuring out how to translate the styling of the Figma prototype I created, using different plugins to get different results. Experimenting with the layout, trying to stay true to the guidelines I set for myself. Used various Youtube tutorials and other online tools to see what I can accomplish.
Week 13
Developed the home page of the app with various online resources, namely using Hacking With Swift and Stack Overflow. I also created the page view with all of the snacks displayed in rows, rather than the sliding feature used in the homepage. Finding a clear png file of each snack bag certainly wasn't easy, but I scoured the internet so each of the snack cards would be uniform. I haven't quite figured out the cart feature, but I'll look into it and see if I can make it a popup at the bottom of the screen so users can easily see how many items they have in their cart.
Week 14
Bitez App
Resources:
https://www.youtube.com/watch?v=fwG1pDgytDc
https://developer.apple.com/documentation/swiftui/food_truck_building_a_swiftui_multiplatform_app
https://developer.apple.com/tutorials/swiftui/creating-and-combining-views
https://www.hackingwithswift.com/quick-start/swiftui/how-to-create-and-compose-custom-views
https://developer.apple.com/documentation/swiftui/building-layouts-with-stack-views
I created a logo for Bitez in Illustrator and further developed the cart feature of the app. If I were to develop this further, I'd like to make all of the tabs actually functional, such as the snacks of each individual country and the payment step. I'd like to figure out how to incorporate Apple pay into my app. I'd also like to make it a bit more cohesive with the styling and get rid of any unnecessary UI. Here's the final result:
