WatchConnectivity Using SwiftUI 2 - Learn SwiftUI for iOS

all right so today what we're going to do is we're going to be we're going to learn how to build a watch connectivity app where we're going to learn to send data from our iphone to our apple watch now the beauty of this is that we don't need to have physical devices to do this our simulators will serve the purpose just fine and also furthermore the the xcode software has apple watch simulators so you don't have to worry about having a physical watch to do this sort of thing and they will talk to each other and send data between each other using a framework called watch connectivity so that's our goal for today and we're going to be using these simulators in front of us now the thing is with newer versions of xcode you're going to have to create your own pairing so you may not want to go with the two devices i have in front of you the iphone 12 pro and the apple watch series six you might go with your own pairing and i'll show you how to do that as well so first things first we're going to do is we're going to create a brand new project now i haven't been creating fresh projects for you guys in a while because i figured you know how to make projects by now but i wanted to show you how we're going to be approaching this so when you do a brand new project you're going to watch os now and you're going to choose ios app with watch app all right you can do a standalone watch app now but we're going to do choose ios app with watch app so we can get the connectivity going between the two devices we set them emulate this manually but we want to have both want to have all the files we need for everything all together in one project so i'm going to hit next i'm going to go ahead and give it a home i'm going to call it uh m9 watch connectivity and we're going to be using swift ui i'm going to stick to the watch kit app delegate for now and i'm going to use language swift of course uh you don't need to include a notification scene but i'll leave it in there you can have a look at what the files are all about there in case maybe interested in adding something more to this application hit next and give it a home all right so the first thing you're going to notice is there's a lot of a lot more files here than you've been seeing for your other uh for the for your other projects right your ios projects you just saw like content view and a couple other files and that was it now we see a ton of other files all right now one thing i'm going to point out here is that we have actually two projects in one all right so starting with this folder m9 watch connectivity down to the info.plist file here this is one project dedicated to the iphone itself alright so the phone itself this folder m9 watch connectivity watch extension this down to the down to the i would say push notification payload file is all dedicated to the watch so the any files you want to have for the watch go in this grouping any any file you want to have for the phone goes in this grouping and and they don't talk to each other it's think of it as like an invisible wall right where my mouse pointer is right there's an invisible wall here so any files you create on one side don't exist on the other side until you actually go into the compiler settings which we're going to do today and make it available all right so first thing we're going to do is we're going to organize we're going to start with our our phone all right so i'm going to organize things a bit i'm going to create a new folder or a new group here i'm going to call this views i'm just going to drag my contentview.swift into here i'm going to create a new folder as well this will be called classes we're going to create a few classes here to do some of the work for us starting with content view i'm going to create a new a new file and this will be ios swift ui view and i'm going to call this program view now we're going to be doing is we're going to create a little mini fictitious conference program app companion app just to list out all of the sessions for our our conference today and so uh we're going to be listing those out here in the content view but before that what we're going to be doing is we're going to have to understand in our conference app what data will be sending between the phone and the watch so we're going to start by creating a model that'll take care of that so under classes i'm going to say new file it'll be ios coco touch class and i'm going to call this program object right subclass of ns object is perfectly fine hit next give it a home all right i'm going to start by coding up this program object now it's class program object i need to make it a public class to make it visible to anybody that wants it so public class program object extends ns object now i'm going to make it an observable object and i'm also going to bring in ns secure coding all right so observable object just so that it allows for uh this object to be visible on both the watch and the and the phone and a secure coding because what's going to happen is is that any data within this object is going to be converted to a set of bytes called data or ns data and it can be sent over a over a bluetooth connection to the phone or sorry to the watch and be deserialized on the watch side of things so it's actually an object that can be shared between both the phone and the watch the phone will be doing the encoding the watch between the decoding all right and so don't worry about the error right now because it's it's basically saying that we have a few missing methods we're going to get to that eventually so we're going to be doing is first off to make ns secure coding happy we'll be saying public static var supports secure coding and i'm just going to hard code it to true right so i'll make get rid of one error eventually that'll hit now what we're going to do is we're going to define out our our object here so because it's going to be displayed in a list it needs a uuid object so we'll say let id equal uuid instantiated now the object itself is going to have var title which will be a string but in order to make this visible to swift ui we have to make it a published object so i'm going to say at published all right so i published var title string we'll do the same for the other features so add published var speaker is a string so title and speaker and then we'll say published we'll save var from so the start date and time i'm just going to use string i'm not going to use date just keep it simple of course you can change this over to a date object to really play with this after after the fact we'll say published var 2 is a string and finally so till the end time that's what 2 is all about and then finally published uh var details which will be like the details about the session that that is in question here all right so now we have here our uh our our uh our data model we need to add some support methods this time around so normally data models this would be good enough but because we're doing some some special work with this we'll be sending this data over a connection between watch and form we have to add a few extra things first off i'm going to create a little mini constructor here so let's say funk init with data we will pass in title string pass in speaker string we'll pass in from string to string details straight i'm just going to pass them in and just set them so we'll say self dot title equals title self dot speaker equal speaker self.from goes from self.2 equals two and self.details equals details all right now we need a couple of more support methods here to enable encoding and decoding this data so i'm going to see if my my friend xcode here will add these methods for me hit fix and actually it does so these are the two methods we need they got pushed to the top i don't like things at the top so i'm more organized with like that i'm just going to cut and paste them so i'm going to get rid of the word code first of all it's going to cut these methods and paste them to the bottom of the met the the class just for organizational purposes when they already have they actually duplicated the support secure coding it's going to take that out because we already have it it's going to push it down here to the bottom so sorry about that i actually want to do a knit first i'm just going to move this above so i'm very particular my code here just wanted to have it organized so okay so now init is going to decode this data all right so i'm going to start with encode so encode will actually convert this code over to a set of bytes and these set of bytes will have a will will start will be formed in the in the form of key value pairs so what i'm going to do is so there's an argument passing called coder it's going to be encoding this data so i'm going to say coder dot encode we'll say self.title give it a key so for key i'm going to call it title all right coder.ncode will say self.speaker and for key speaker say coder dot encode and we'll say self.from for key from coder.encode self.2 for key to coder dot encode we'll say self.details four key details all right so whenever we're ready to actually serialize this data and send it over from the phone to the watch and code is going to be running in the background automatically for us we're not calling in code at all it's going to be running the background for us and we'll see at that line i'll point it out at that point where it's running now if we're on the watch side of things and we're receiving this data as a set of bytes we need to convert these bytes into basically back into this object this program object and that's the purpose of this method init right so it has a it has a coder called well where it's it's called uh a coder here it's really decoding so what are we doing is checking to see if it has title speaker from two in details all right it needs to have all of these to be the proper object so i'm going to say guard let which is like a reverse if statement we're checking for failure all right so let's say title equals decode sorry coder dot decode object inside of it it's actually four key title so make sure your your keys line up as string comma let speaker equal coder dot decode object for key speaker as string all right so we got title and speaker and then we'll move on to let from equal coder dot decode object for key from as string let 2 equal coder.decodeobject for key 2 as string and finally let details equal coder.decodeobject for key details as string all right and then on a new line it's going to say else and curly's will say return now all right this is our error checking here otherwise we have our we have our data here so what we're doing is we'll do a self.init just to call the superconstructor then we'll do a self.init with data passing in title as string speaker as string from as string to as string details as string all right so otherwise assuming that this all worked then then things should be working okay here all right and don't worry about the errors that you're getting here it's a quick fix let's just go and let xcode take care of it for us it wants the word convenience just hit fix it's gonna make everything go away all right so just wants that extra keyword in there which i don't know why i didn't add in itself but that's okay all right so this is our object our program object its purpose is to essentially is to essentially be sort of a data object that's going to house the title speaker from two details but also serialize and deserialize the data going from watch to phone so it's going to handle all of those things for us so now let's move on to making a connection all right and actually getting a connection to work here so what are we doing is we're adding a new object to handle all of our watch connectivity and to actually do our data transfer so i'm going to actually add a new file i'm going to right click on classes i'm going to say new file and again ios coco touch class and i'm going to call this connection provider right it's also going to be a subclass of ns object hit next give it a home right so i have this thing called class connection provider implement as is an extension of ns object uh we have to jump to project settings for a moment and we we're going to be using a framework called watch connectivity but we have to bring that into our project so i'm just going to hit over to my project settings and under general here you'll notice that there's a few targets here so under general i'm going to scroll down to the bottom and under frameworks libraries and embedded contents going to add watch connectivity so if i search for watch there's watchconnectivity.framework hit add and it's there all right now i can jump back to connection provider and what i'm going to do is i'm going to now add in we'll first have to import watch connectivity and i'm going to implement so class connection provider extends ns object comma wc session delegate i'm going to implement wc session delegate it's going to get upset because it wants to have some extra support methods if i hit yes or to fix it's going to add these protocol stubs it's going to get rid of the word code leave them empty for now i'm going to push them down all right so wc session delegate requires these methods these support methods what are they about well they're about the connection between the watch and the phone so this first one action did complete with it's like a method that allows us to execute some code right off the bat when we have a connection between watch and phone then their session did become inactive which uh which could happen you know so for example like maybe your watch temporarily moved away from your phone right it's too far away to have a connection you could have some maybe temporary saving going on or you know some temporary work go on just to protect the the data that might be lost between a temporary loss of connection and then there's session to deactivate which could happen where you know like you know you basically dropped a connection you're not going to get it back right so that's sort of scenario maybe you've uninstalled the watch or something maybe you want to take whatever data there is and and protect it and save it and flush it to some sort of database or something whatever the reason right but you have these methods here to to support you and protect you in that manner all right so we're going to do is we're going to implement a few class variables here we're going to say private let session extend wc session right this is going to be the object that will manage our connection and our session uh between the two between the two devices talk about the error we'll come back to those in a bit i'm going to say var programs extends an array of program objects so we just created the program object class above i'm going to set it equal to an empty array now that's this is okay what we're going to be doing here is we'll be hard coding our data here in programs all right but i'm going to create one more i'm going to say var received programs it's also an array of program objects set it equal to an empty array i'm going to be doing this because my hard-coded data is going to be under the programs variable and this object this class itself this connector connection provider is going to be shared between both the phone and the watch so the watch side of things won't see the programs right because we're not going to initialize it on the watch side of things on the phone side of things we'll initialize it all right now on the watch side of things we'll be receiving our program data from the phone so it's going to be reading the receive programs variable so that's why i actually have two variables here all right we'll say var last message will be of type c f absolute time set it equal to zero this is sort of like a a timer variable for our for us to brute force uh brute force and uh push the data from phone to watch as needed all right now what i'm going to do is i'm going to start with implementing a constructor so init and we'll say session which is a type wc session was defaulted to dot default so if nothing is provided it'll just initialize itself here now to initialize our connection here we're going to say self.session equal session we're going to do a super dot init to initialize super constructor we'll say self.session.delegate equals self so it basically means there's some support methods in this class look within that that session needs to look with itself look within this class for those support methods now i'm going to add a couple of debug statements here just purely for debug purposes now we'll say pound if os is ios so on the iphone side of things we'll just do a print statement to say connection provider initialized on phone we'll do a pound end endif here and i'll do something similar for the watch as well so let's say pound if os is watch os we'll just do a print here saying connection provider initialized on watch all right and then an end if but the most important line of code at the end of this now is self dot connect all right but we have to implement a self.connect method so that's still coming don't worry we'll do that right now we're going to create a method right here we'll say funk connect and inside of this we'll do a guard statement to say wc session dot is supported else we'll do a simple print statement wc session is not supported we'll do a return otherwise we'll do a session.activate what's going on here well basically we are initializing we're trying to initial well first off we're trying to see if this is watch os 1.0 and not one and not 2.0 above because watch connectivity didn't exist for watch to watch os 2.2 1.0 so so we're checking here to see if that's the case like this is an old old watch which now is getting less and less likely otherwise you know as long as watch 2.0 and above activate your session go ahead and activate your connection between the watch and the phone and the phone of the watch all right so that's the purpose of this right now now let's do this let's implement a method to send a message all right so what we're going to do is i'm going to add another method here for sending a message so say funk send message will be colon any right and returning a void all right we'll just do a session dot send message all right and message will just be message reply handlers we're not going to worry about any reply handler right now so we'll say nil i'm going to actually dump the error handler portion and rewrite it this way as a completion handler and inside of it we'll just say print error.localized description and let's just clean up any issues here there there do one too many there there we go all right so that's our basic send message right there so now what we're gonna do is so i need to point something out here with the basic methods that that were auto generated here so these three methods are for the phone on the watch it only wants this method it doesn't want these two so what i'm going to do is i'm going to make these two methods only visible to the iphone side of things by doing a pound if os's ios and doing a pound end if for these two methods all right now let's initialize our let's initialize our data i'm going to do it in here i could do it anywhere i want but i'm going to do it in here so i create a method func init fake details all right and i'm going to empty out my array so i'll say programs dot remove all right now i'm going to say we'll say let prog obj equal program object all right instantiate it and then we'll say prog obj dot init with data so it's got a hard code i'm just going to say that the life of a banana speaker is monkey from we'll say uh you know like friday october uh let's say 31st at uh 10 all right and then 2 11 and we'll say monkey will teach us the life of a banana you can see i'm getting really creative here with with my details and then we'll say programs dot append for prog obj now let's say let prog obj2 initialize or instantiate a program object and we'll say prog obj2 dot init with data and so this will be the life of the donkey speaker is dunkey and we'll say friday october 31st at 11 a.m to 12. and we'll say donkey will bore us with his life story and we'll say programs dot append for prog obj2 all right now the third one will be we'll say let prog obj3 equal program object instantiated and we'll say prog obj3.init with data and so we'll say the hunt for food by yoti say from friday october 31st at 12. to we'll use 1300 hours details yoti will enlighten us with his search for prey and finally do one more we'll say let prague obj4 equal program object instantiated and we'll say prog obj4 dot init with data and we'll say uh walla in his life as a koala let's say of course speaker is walla and from friday october 31st at 1300 hours to 1400 hours we'll say walla will actually his spelling is that so let's fix that will show us how his life is better than a sloths now i'm just being silly with all of these different programs but let's just add this so we'll say oh i forgot to do the one above as well so we'll say programs dot append for prog obj3 and also programs dot append for prog obj4 all right so we have all of our stuff here now we're going to do is we want to fire off this data to the watch the moment that this data has been created let's fire it off to the watch so now we're going to take advantage of encoding and decoding the the two methods we added to our program object class so the first thing we're going to do is we're going to say ns keyed archiver dot set class name to program object for and then program object dot self what this does is it tells nskeed archiver that when the the data we're about to encode basically this entire array of strings that we just have above in this method we're going to give it we're going to specify that the data structure for this object is basically the program object class and here's a label to associate it with now let's go ahead and archive our data and convert it to bytes so we're going to say let program data equal try for nskeed archiver dot archived data we'll say with root object programs all right require secure coding true and then finally let's send this off to the watch by saying send watch message for program data now this method hasn't been created yet this gave us an error because we're about to create it right now okay so we're going to create a method this is our last method for this class and we're done for this particular class that is so we're going to say func send watch message passing in the argument msg data of type data now this is going to fire it off but so long as it has just gonna put a little underscore here there we go that should get rid of the error so now we're gonna say let current time equal cf absolute time get current all right we'll say if last message plus half a second is greater than current time then return meaning we need to have a little bit more of a gap between attempts to send this message so now let's go ahead and send this message we'll say if wc session actually really session dot is reachable let's do a little print statement for debugging purposes so print sending watch message don't have to but i'm going to do for debug purposes we'll say let message equal square bracket now my key will be prog data my value will be msg data and we'll say session dot send a message it will be message reply handler nil and i'm going to omit the error handler as well there all right and we'll just do a last message equals cf absolute time get current okay so this method for sending our watch message is going to try and brute force send this message now it's going to wrap our program data right which has been converted to bytes into a key value pair and the key for this data will be prog data so now on the watch side of things it needs to be able to receive this data and and be able to do work with it all right so at this point we're done with connection provider all right it has everything we need all right now what we're going to do is we're going to be working on the watch side of things to get this done at this point but we still have a couple more things to do to finish off the phone side of things here so we're going to do is we're going to implement a new class so i'm going to right click and say new file we're going to say ios google touch class and this will be called program view model it's a sub it's a sub class of ns object give it a home all right now we're going to do is we're going to implement an observable object for basically its main purpose is to handle the connection provider that we just created so i'm going to replace ns object with observable object all right and it's going to be a final so nobody can reinstantiate so final class program view model extends observable object and we're going to say private set var connectivity provider extends connection provider all right now we need an init we'll say connectivity provider extends connection provider we'll say self.connectivity provider equals connectivity provider and we'll say self.connectivityprovider.connect to initialize the connection all right now we're done with our third mod or the third class support class here so now we can do is actually build up this app on the iphone side at least so now we're going to move over to content view and start doing some of these things here so move over to content view dot swift and we're going to change things up a bit we're not going to use the basic hello world i'm going to add a couple of class variables here so first thing i'm going to say is let view model equal program view model passing in connectivity provider colon connection provider instantiated there and we'll say let connect equal connection provider instantiate all right now it's going to create a basic home page so instead of so i'm going to replace hello world with a the text conference planner and this will be a navigation view all right inside we'll have a v stack i'll just put a tab on our text there just for readability keep the padding and i'm going to add a navigation link destination will be program view now right now we have an implemented program view so i'm going to be setting it up so i'm passing the view model over all right so i'm going to do that it's going to give an error and on up here so for navigation view i'm going to add a dot on up here and here we'll say connect dot connect all right so we've written a lot of code we still haven't ran a single line of code yet but fear not we will get too soon okay now in the program view page the subpage here we're going to implement having a list view to display all of our stuff so first off we have here struck program view what i'm going to do is i'm going to create a custom cell first off so we'll say struct prog view extends view and we'll say var prog extends program object all right we'll say var body extends some view right and now all we'll do is we'll add a v stack in here i'm just going to stack all the items so we'll say text just the text which will just be slash prog.title its font will be dot headline it's foreground color will be dot blue and i want it to be its dot frame so i want it to be like left justified i don't like the center justified default of it so dot frame i'm just going to hard code it with like a width of 200 height of 30 and dot leading also it wants the exclamation mark for title now i'm just going to copy and paste for the others so the second will be prog.speaker this will be sub headline i'm going to change its text to be green and keep the keep the frame there and we'll do another paste this will be prog.from and it'll also be sub headline this one will be red and keep the same frame and finally two and the sub headline as well and this will be black and keep the same dimensions all right now let's let's set up our list so inside program view we're going to have an observed object right var viewmodel extends program viewmodel and at state of the state bar for our our array of data so var programs extends an array of program objects we'll start off with an empty array okay and i'm going to get rid of this preview provider i don't really care for it now inside body going to have a v stack and we'll say text i will say conference program and after that i'll put a list programs id colon slash dot self p in and we'll just instantiate a prog view passing in prog p all right so that's our list to polish it off we need to retrieve data so for vstack we'll do a vstack.on up here so first thing we'll say is view model dot connectivity provider dot connect so launch a connection and view model dot connectivity provider dot init fake details and finally self dot programs is equal to view model dot connectivity provider dot programs all right so we have enough to run and see this thing in action and of course silly me i got a little excited here i forgot that we didn't really do our navigation link properly so we have to add in a text to say uh program or something to click on you click command b to build there build succeeded i'm going to choose the iphone 12 pro just on its own for now let's just see this in action verify that we have our data hard coded all right so there we have our iphone app on and program there's our basic list of data so we know that this thing works now the purpose is to get this onto our apple watch all right so i'm just going to hit stop i'm going to actually kill this simulator because we're going to do is we're going to create a pairing for simulators so now we're going to be moving into the apple watch side of things so we need an apple watch simulator here so we need to have it set up so that the phone and the watch are paired as a new simulator now to do that what you're going to do is you're going to click on your simulators and go add additional simulators i actually already have two pairings here i have i called it iphone 12p max plus watch iphone 12 pro plus watch so i've already created a couple i'm gonna use the second one the pro plus watch but i'm going to teach you how to create your own so i'm going to say add additional simulators and what will happen is that this will pop up this window here and you're going to hit the plus sign so make sure you're under simulators and not devices first of all you can see a ton of simulators here i'm going to say plus and what it's going to do is ask you to give it a name first thing you do is check off paired apple watch you choose the latest os version that you want i'm going with 14 4 but of course this applies to ios 15 as well i'm going to call it iphone [Music] 12 actually no i'm gonna create an 11. you do 12. i'm going to create 11 because i already got a couple of 12s i'm happy with them iphone 11 pro plus watch so i'm going to call it and i'm going to choose an iphone 11 pro okay so my device will be iphone 11 pro if you change your device notice that the check box goes away make sure you check the check box paired apple watch you hit next now it's asking you to choose your apple watch i'm going to choose an apple watch 6 series 6 40 mil and call it [Music] we'll say iphone 11 pro actually i'm going to reverse the name i'm going to say watch s 6 plus i phone 11 pro watch us 7.2 is good enough hit create right and so now you should see and you see it here in this list 11 pro plus watch and you're good so notice that when you go to your simulator choices 11 pro plus watch right it's there now so now you can start using this simulator instead all right and you'll notice that under watch kit you'll see you'll see watch as six plus eleven pro as well all right so you're good now i'm going to be using my simulator which is iphone 12 pro plus watch all right and if i hit run again i should see this app over here it's not going to launch anything for the for the apple watch yet because nothing's done there yet but basically i have my entire confis program up and running right here okay so now we're ready to do things for the apple watch side of things and to do that we're gonna have to do uh we're gonna have to actually well we're gonna need the three objects that you see here i'm just going to point them out again so program object connection provider and program view model need to be visible to the apple watch right so i try and start using these these guys right now uh it's going to complain it's not it's not going to say these these objects don't exist so i have to go to my project settings and i'm going to click on the target here for the watch kit app all right and go to build phases sorry yeah actually build phases what i want actually it's the third one there extension so this is what i'm looking for compile sources and you notice that it has all the files here these are the same files listed here under my watch app all right let's get the plus sign i'm going to add these three items here program object hit add plus again connection provider hit add i'm going to hit plus sign again program view model hit add so now i have my three objects that i created on the iphone side of things i'm going to be able to reuse them here instead of having to create them from scratch which will just be a duplicate anyway so we're just duplicating things but this is a key thing here because in order to do things on the apple watch side of things we need to have these files available on both the watch and the phone so now that i have this in play i can go ahead and start building out my apple watch app all right so you'll notice here that on the apple watch side of things we already have a content view so in swift ui things work very similar to on the watch as to the phone so i can continue on with what i have here so what i'm going to do is i'm going to add another content view i'm going to right click on this folder i'm going to say new file and this will be a swift ui view i'm going to call this prog content view all right hit create so now i have here both of my pro my content views that i need i'm actually just going to drag prog content view be next to content view it's in the same spot i could create a folder i'm going to leave that for now and i'm going to start with my content view all right and i'm just going to implement a view model program view model object so i'm going to say let view model equal program view model its connectivity provider will be just instantiating connection provider all right now inside here i'm going to set up a navigation view now notice we're on the watch side of things now all right so to keep track of where you are now in the project so now i'm on the watch side of things i'm going to put a v stack in as well all right and the text will just be watch planner all right and it's going to have a navigation link and destination will be i'm going to drop the label from it so destination will be prog content view i'm going to pass in a view model type of viewmodel and we'll come back and fix this it'll probably give an error that's okay we'll say text program give it a padding of 50. all right it's going to complain that's okay just do command s to save the file we're going to move over to our prod content view it's going to be another list view again as well so switching over to prog content view and you could basically copy and paste your prog view from program view here program.swift if you want to i'll just retype it so i'm going to say struct prog view extends view i'm going to pass in a var prog as a program object all right do a var body extend some view it'll be a v stack and within it we'll do a text for slash prog.title dot font headline dot foreground color i forgot my closing round there there foreground color will be dot blue and dot frame will be width of 200 height of 30 alignment.leading and then just copy and paste it for the other three items so the second one will be prog.speaker sub headline this color will be [Music] green and then we'll say this will be prog.from another sub headline this will be red and finally prog.2 sub headline and this will be black okay so we have our prog view identical to what we had in our phone side of things i wasn't going to change things up there yet now we're running something very similar here to what we did in our uh in our in our in our in our photo phone side of things so scrolling down to prog content view i'm just going to dump this right here we don't need the previews it's going to say observed object save var let's say view model is program view model we'll do another state we'll say state basically the very it's almost the same thing basically the same thing as we did before so state of our programs extends an array of program objects set it equal to an empty array all right now inside our body we'll do a v-stack our title here will be conference program and we'll have a list right below it programs comma id colon slash dot self p in and we'll just do another prog view for prog p alright we'll do an on up here for the v stack again so we'll do viewmodel.connectivityprovider.connect we'll do self.programs equals view model dot connectivity provider now this time dot received programs all right so let's save everything let's build it make sure no errors fix all the errors that pop up looks like build succeeded all right so now we still have one more method to implement it's very important we got to jump back to connection provider all right and so inside connection provider we have here a method called send watch message so it's sending the message to the watch but though but we don't have a method here to receive the message and process the message and that's key so we're going to implement a method called did receive message it receive message i gotta make sure i get the correct overload this looks like it's the one hit enter just gonna double check so we got session wc session did receive message message string any this is exactly what we need drop the word code it's going to do a print debug statement so print will say entered did receive message all right and of course i can't spell receive so fix that just for my own personal debugging purposes now what's going to happen is that this is a delegate method part of w the watch connectivity protocol so whenever a set message is received whether whether whichever side it's on it's going to fire this method all right now if you look above here actually we still have a visible here under send watch message we embedded our message with a label called prog data so i'm going to check to see if this is the message we got we'll say if message of prog data make sure you spell it correctly does not equal nil all right we can go ahead we'll enter i'll just do another debug statement well first off before i do let's just actually grab the data so say let loaded data equal message of prog data all right now i'll just do a little print statement now just for debug purposes just in case this crashes so we'll say print prog data you don't need these print statements i'm just doing it for my own debug purposes in case things go wrong no reply handler so i know this is the one because there's another overload for the older version of this that actually had a reply handler we don't need it for this implementation so if i scroll up actually i'll come back to did receive messages a moment now and actually here this is init with detail and at fake details right we did an ns key archive where we set the class name and then we called ns keyed archive or archive data this encoded the data and is sending the data off to the watch now we're in the opposite of it now we're receiving the data here and did receive message so we're going to first off say nskeed unarchiver so unarchiver which is the opposite of archiver dot set class to program object dot self comma four class name program object make sure you spell it the exact same way you spelt it above init fake details and now let's go ahead and grab this data we're going to say let loaded person equal try for ns keyed unarchiver now this is going to call the decode method in our program object so actually it's nskeed unarchiver dot unarchived array of objects of classes and we'll just put an array of program object dot self that goes inside there we go from loaded data as data right and outside of it as an array of program objects all right now that we have this at this point we should have our data so now we're going to say self dot received programs is equal to loaded person i'm just going to put a little print statement print program received just for myself all right let's do a command b to build make sure everything's okay there we go build 6a succeeded all right now it's time to run this thing so final product here is how do we run this together all right so first things first we have here our iphone 12 pro plus watch this is under our m9 watch connectivity target right so i just chose iphone 12 pro plus watch i'm going to hit run all right it's going to load up we're going to see this thing it'll come to the home page in a moment all right you're seeing little debug messages about already activated good now i want to run the watch so i'm going to hit my target here i'm going to choose my watch now you'll choose whichever one you want so i'm going with apple watch 6 40 millimeter and i'm gonna hit run again i'm not hitting stop hit run again all right and now it's going to install this thing on the apple watch so now i have the now i have my program on both my phone and my watch here i'm going to hit program let it load this screen notice it says program received hit program and there we go and there you go and that's watch connectivity now you notice in this application there was a lot of typing a lot very little running and you may find that you might be running into problems here with with the connectivity so it's just a matter of just starting and stopping it again just trying to figure out where things went wrong but i'll tell you in these newer versions of ios and watch os they've really really fixed up the bugs in terms of watch connectivity so you shouldn't really have too many issues getting this thing up and running all right so that's it until the next tutorial take care have a good one and i'll see you in the next tutorial take care bye for now you

Channel: Jawaad Sheikh

Views: 244

Keywords: iOS, watchOS, watch connectivity, learn to code, tutorial, app development, swift, SwiftUI, Apple, mobile

Id: i3_6m0a5ovw

Length: 70min 7sec (4207 seconds)

Published: Mon Nov 01 2021