Code Together: Let's make iPhone app in an hour

Thank you for visiting our account. We are going to make an iMessenger sticker app in an hour. If would you like to study yourself before hands-on, or review what you have learned in the session, please use the following material.

Meetup

We are providing free hands-on on a monthly basis

https://www.meetup.com/iOS-Development-Meetup-for-Beginner/

Development Environment

Xcode 9 / Swift 3

・What is Xcode?

Full procedure

0, Create your project

0-1. Open Xcode
0-2. Select "Create a new Xcode project"
0-3. Select "Sticker Pack App" and then tap "Next"
0-4. Fill "Product name" and then tap "Next"
0-5. Select the place for saving your project and then tap "Create"

View Gif

1, 🗂 Create Sticker

1-1. Under Sticker Pack right click on the "Sticker Pack" field. Hover over "Add Assets" and click "New Sticker".

View Gif

1-2, Download resources from resource folder in GitHub

1-3, From the downloaded resources drag and drop the skull image which is in .PNG (very important) to the Sticker.

View Gif

1-4, Run the app, and it will crash. The hacky way to fix this issue is to open simulator and go to the messenger app. Select a conversation and on the bottom of the page click on the ... to add more stickers. Then on the top right click on "Edit" and enable our newly created app. Now you should be able to send this sticker or attach it to any conversation bubble you like.

View Gif

2, 🗂 Creating animated sticker (Sticker Sequence)

2-1, Same as the sticker under Sticker Pack right click on the "Sticker Pack" field. Hover over "Add Assets" and click "New Sticker Sequence". From the downloaded resources select all the cloud images and drop them on the Sticker Sequence. You can set the "Timing" to 8 frames per seconds in the Attributes Inspector.

View Gif

2-2, Run your app and enjoy the stickers you made by adding them to the bubbles or sending them by themselves.

View Gif