| Date post: | 20-Jan-2017 |
| Category: |
Technology |
| Upload: | kristina-thai |
| View: | 67 times |
| Download: | 1 times |
PowerPoint Presentation
Hello Watch!Build your First Apple Watch AppDownload project files:bit.ly/ghcwatch Mayuko InoueiOS Software Engineer@hellomayukoKristina ThaiiOS Software Engineer@kristinathai
#GHC162016
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY download the project filehave xcodeLAUNCH XCODE NAO
if wifi isn't working, use USB sticks
otherwise pair up with a neighbor1
Hi, Im Kristina!
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
2
Hi! Im Mayuko
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Workshop AgendaIntro to Apple Watch DevelopmentHello Watch! AppCounter App with iPhone Companion AppResources and Q&A
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY slightly more complicated Counter App with iPhone companion app4
Apple Watch
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Apple Watch
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Introduced in 2014 Most personal wearable device apple has ever createdUse cases for this are much different than any mobile device created beforeApplications of health & fitness, tracking, etc. Only the beginning6
Apple Watch Architecture
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Hello Watch! App
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Hello Watch Application
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
9
Choose App Type
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Name Your Project
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Press Next, and save where ever youd like to save the project. Once you choose that location, press Create11
Youre In!
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
12
Build the Interface
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY On left side bar, Click on Hello Watch WatchKit App
Blank watch face13
Drag the Label
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY On the bottom half of the right sidebar, click on icon in the shape of a Circle with a square inside it (3rd from the left)14
Pick a Schemeand Run!
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Once you click run, itll take a while before you see the app come up. Ignore phone app (nothing will happen there)15
Launch the App!
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY We'll pause here and walk around to see that everyone is up to speed16
Watch Counter App(with iPhone Companion App)
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Final Product
Increment
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY iPhone app already done, were just going to work on the watch part18
Counter ApplicationOpen the Xcode project that we gave you (Counter.xcodeproj)
bit.ly/ghcwatch
On left sidebar, navigate to Counter WatchKit App > Interface.storyboard
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
19
Setup the Counter Label
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Look for the bookmark arrow second from the right20
Add the buttons
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Go into split view
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Connect the counter label outlet
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Connect the button actions
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Time to code!On the left sidebar, go to the Counter WatchKit Extension folder and click on CodeSnippets.swift
Hold down the Option key and click on InterfaceController.swift
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
25
1 Create a variable for your counter
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY 2 Import Watch Connectivity framework
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY 3 Add WCSessionDelegate to class definition
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Delegate allows us to say were supporting Watch Connectivity in this file
Dont worry if you see an error pop up, well fix this in the next step28
4 Setup Watch Connectivity
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY opens up the connection between the watch and the phone
Notice that the error goes away now that weve set up the necessary function for the WCSession delegate29
5 Setup your incrementCounter() function
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY copy and paste the code INTO the saveCounter function30
6 Setup your saveCounter() function
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY copy and paste the code INTO the incrementCounter function 31
Choose Your Schemeand Run!
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Remember, iPhone app is already done so it should just work for you now if youve done the watch correctly32
Open the Counter app on the iPhone
Swipe left to getto the 2nd page
Click on the Counter app
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Your watch app will launch by itself. You need to manually launch the phone app33
Counter Application
Increment
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY It will take a long time for your watch & iPhone apps to loadWatch Connectivity may not work very fast either make sure you dont have any error messages in your console34
Final Project Codehttps://github.com/kristinathai/watchOS3Counter
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Resources and Q&A
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Kristinas iOS & watchOS Blog
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY ResourcesApp Programming Guide for Apple Watch Apple Watch Human Interface Guidelines Ray WenderlichNatasha the Robot
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Thanks!Kristina [email protected]@kristinathaiMayuko [email protected]@hellomayuko
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Rate and review the session on our mobile app
@kristinathai @hellomayuko
Thank you
Feedback?Download at http://bit.ly/ghc16app or search GHC 16 in the app store
PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16 | @kristinathai | @hellomayukoPRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
