iOS Swift 4 Tutorial JSON Downloading into TableView ft iPhone X in Xcode 9

what's up guys the Sheldon will come back to ours tutorials this meanwhile I was not able to upload videos and I really sorry about that so today let's do something awesome as you guys can see in that hideout today I'm going to talk about something related to Jason downloading into tableview we're gonna use sweet 4 so in this video I will also explain to you guys little bit about the iPhone 10 or iPhone X design which is basically taught by WWDC video that has released in this form after this iPhone 10 review so after that I will also show you guys something I mean I will also show you guys my teaching plan since this all new as call 9 and Suite 4 is already released we should most likely spend like 90% more time on the Swift 4 as well as exco 9 from know so let's get started and start programming so here we are at is called the whole new Xcode 9 as you guys can see that default deployment target is already said to be iOS 11 check have a whole new simulator for Xcode 10 and I'm quite excited I don't know about you guys but this will be the first peek of the new S cone 9 so starting from today which is September 20th and 2017 you guys can already start downloading or update your existing ice cold in directly from the App Store so you don't need to worry about using developer account to download this software so it's already ready for you to download and I have just the create empty single page or single view controller application and less do something so first let's go to our main story board and we're gonna have a whole new view controller here looks like they have separate the banner of the view controller apart from the main view okay it doesn't matter that's because we're gonna do something related to table view let's drag and drop a table view here and let's define the table view with the hole size from edge to edge okay this is a whole new property that is related to the ax to the iPhone 10 whisk which is called incest to safe area I will explain to you guys later called safe area but for now that's just a uncheck this box okay so we have our table view right we're gonna need our cell and let's drag a table view so here so we don't do some JSON downloading so I prepare the link just like what I did for I went to the JSON downloading for the Swift 3 tutorial we're gonna have an actor's array so actually let's copy and paste this response yeah unlined recent viewer and if we paste data here we can see oh we're getting an array of actors the first guy is called rapid everybody should know that just some detailed information include avatar for Brad Pitt so if you open this link we can actually can actually get the exact image for Pepe Will Smith I guess copy and paste the whole Jason data the last one and should be Will Smith okay so that's what we're gonna parts to our table view and let's start doing it okay switch back to our table view we're gonna have our cell and let's actually put an image view there to show the ammeter less 0 0 zero unless have the weight to be fifty that makes sense and let's make two labels so yeah let's let's do the label as well so we're gonna have eight on top edge left 15 and right zero okay and height 21 and for the second guy the second label we're gonna have left 15 right zero bottom eight height 21 yeah it's already updated cool so we're gonna put the name here and probably the do be here okay so now let's create a cell class new file cocoa touch UI tableview cell and just let's call it actor cell okay actor cell is creating and is actually an you are table view cell as you guys can see here and let's go to Minister for tomorrow and hope an actor and hold option and hit actor this way you can directly select actor here and then hold control we forgot to set the class for the cell yes this cell will be factor so and we're gonna have a reuse white in the fire let's call it cell if now we open this we can find actor hold command or hold option actually and then we hold ctrl and drag the name label the tlb label as well as the image I am view coke so we're having ourselves we are having our table properly set so we are good with the UI elements and let's first download our data right so let's copy and paste the link okay so it is worth noting that this innate with string is actually optional so we better to put some a-flat later to check it so let's first make some function to download our data download Jason we are done the download whatever we are planned to download okay so I'm gonna use URL session dot shared session dot data task with URL right but we're gonna need some completion block so we're gonna use this one download data with URL which will take this URL so we're gonna need to input a URL here but like a mission in the beginning this URL is actually an optional URL so let's define card let download URL a sequel to URLs with just a return right so we are making sure this download URL exists otherwise we will just simply return and do nothing and now we cannot put our download URL here and we will use our completion handler that includes data URL response and error right so we're gonna have a tuple that contains data you are response an error and at the end we can I use resume so this downloading is like a continuous so if you don't put this resume here it will just try to start downloading we're in the very beginning and at the end of the day nothing will be returned so make sure you don't forget to add resume here and so here we're gonna download something let's actually train something if we are able to download anything okay and let's put this function download Jason into our viewdidload and let's remove this and less simply run it in iPhone 7 let's see just escape iPhone 10 for now cool we're having our two simulator lunch but there will be an error that says we are requesting on HTTP instead of HTTP so a boss thinks it's not safe at all so we're gonna do something as we did in the info.plist so we're gonna add one row and let's call les scroll up a little bit turn ad transport settings and inside of it we said a low attribute load and we always said yes so in this case it will also load HTTP as well I mean this is not a safe solution because HTTP is actually much safer than HTTP but as you guys can see we are changing the download which means we fund the data which is quite good okay so first let us come back to our cell class probably yeah let's change the name right we don't want mix actor actually we we want to name it like make more sense like actors cell but for now we need to go back to our storyboard to change the cell to actor cell otherwise it will crash so why I'm changing this because I'm gonna create a file called actor and [Music] this will be the model of our downloaded data so we are we're gonna work with kind of MVC so we're gonna use a model for actor that will match all the names here takes everything okay so we're gonna have a name let's do that name which will be a string same thing for description okay so we have finished naming all the properties of this class and we need to put in a function that takes name and image and we're gonna innate how the values like soft on name is equal to name so what you wanna do actually so nothing seems different from Swift three except we're gonna confirm to the new protocol which is called codable code boy is like where the magic will happen and it will help us to make our JSON it's so easily I mean make how the model so easily generated it directly from Jason okay so um if we switch back to view controller we can the guard let theta is equal to theta arrow is new and URL response is I mean this URL response is not named otherwise else we gonna just return in to nothing or we can we can print something like something is rough so by writing this line I mean we are trying to make sure we have got data error is new and also to your response it's not new so next I'm gonna use the data so stop crying and we're gonna put this line here and let's use data similar as what we did using an adjacent civilization we still need to do try and catch or if we're using an optional thing we don't need to catch but what we're gonna do is so first define the coder right this is the whole thing let's use JSON decoder and we will let first will be try decoder dot decode so we're gonna take data right we have downloaded this data but we also need to define a type what will it be we will need actor top so so the syntax might look later paid which is weird but this requires an protocol or struct that confirm to the code Bob protocol and actually we have our actor confirmed to the code code of all protocol and also we have a sequence that actually come confirming to the code web protocol if every element is confirming to it so we're actually making sense so that's also friend something wrong after downloading so if we run our project we're gonna see Oh something wrong after the load it means we're downloading the data but actually something is wrong so what could be the reason hmm yeah so I see what's going probably you guys also catch it we are having an actor's here that's the first very first layer so it's not like we are directly getting an array if we come back to the JSON viewer we are actually having one more layer which is on dictionary so it is fine let's define another class called actors which is codable of course we need that to be code whoa and we will have an array which is actors and which will be an actor away right and if we write an innate function it's gonna be actors actor array of actor and self dot actors or equal to actors okay so if we come back to our view controller this will not be actor array it will be actors and less donnelly now if we rerun on a project okay cool so it's printing out that Jason loadings waveform which is our project name dot actors right that means we successfully downloaded data but let's actually print something useful like actors dot actors first guy god name remember who's the first time I think Brad Pitt it will print Brad Pitt cool is printing out Brad Pitt which is nice cool so we almost there we just need to update our table view so before doing that let's define something bar actors an array of actors so what we are doing here is we are defining a local arrival called actors which will be an array of actors and after we download everything we gonna put let's rename this one had downloaded actors and we're gonna update our local actors is equal to downloaded actors dot actor right so what we're doing here is updating our actors yeah because it's inside of the block we need to put self here so we're updating this array right if you point here it will highlight the same array and it will use that unloaded data and now let's do something for our UI tableview and then let's do UI data source that might be enough ok so if you confirm to the United tableview datasource it will require you to include two more functions first one is called the table view member number of roles in section and the second one is called table view cell for row at index path so these two functions are required if you confirm to the UI tableview datasource so now let's set the data source to our view controller if we switch back we are able to find the number of rows in section we will return actors.com and next step we need to define our table view cell okay so to do this we need to define a cell is equal to a table view dot dig table view cell with identifier and remember we said this act himself at the ID of the table view cell I don't know if you guys remember it but we do set an actor actor cell as the ideal so we're making sure we're using the same one and we need to do a little a cast here as actor itself oh I mean we can use a card that else we can return UI tableview so we have to cast this one into actor so otherwise we cannot use the cell dot t-- o-- be laid off so we're gonna update the name dot text is equal to we are using index path doll row we will update the name and also we can use the Opie Lovato attacks in sequel to the actors and also index doll row and Dodd GOP and let's neglect the name I mean that the image for now and we're gonna return the cell that we just created okay oh that's wrong product ah looks like the table view doesn't take what we want we forgot to load our table I mean reload our table that's this stupid mistake that I made but let's open field controller and the last actually drag and off Ivo laid for the table view hey okay we come back to our view controller closely is one and we now are having our table view and let's actually put privately because we are gonna just use it inside our project okay so we're gonna have our table view we will need our table view so they will be reloaded date means we download this data but we didn't reload our table view to show it and we also will have some issue but I won't have you guys we don't notice the data we assign to the actor array and it will show some outfit layout engine issue cool the happy is not crashing but it shows Oh UI API call on a background thread means we are updating all amazing so as code compiler is actually helping us to identify this is where it went wrong a we are trying to update the UI in background thread and - so that you can use this fact dispatch q dot min acing so by using this patch Q dot men we are actually a switching no matter what current thread is we're switching the thread to the main thread and if that's the case we're gonna have our UI updated in the main thread anyways um everything looks fine except that our think of yourself is overlapping the reason we are overlapping on table yourself because we have this guy the table space set this guy bottom space set but we are now setting the space between these two guys so we're just giving a vertical space and it will be solved I mean the height for the table view is super trivial is handled by default if you don't do something special it will be giving the correct height I mean calculated height if that's the case cool everything works fine except for except for the images and actually let's do something now so as you guys can know we we will be able to access the image just like what we're doing here like actor in X actor is the index of index path on row and we can access the image URL and this will be an strength but we will be able to find the URL if if we define URL equal to URL strength we can use a flat to make sure this URL is able to be defined and we can use image that image is equal to the data we can use data or let's see we can define it here let theta is equal to theta actual as for this in two separate lines so if flat if like this guy is equal to this this guy is equal to theta contents of you image image right then we can use this data to to cut the image but the one thing to note is that this data is actually okay so that's it's like the syntax for the data in a new version now it's a little bit different from that previous one but now we're we're getting the data but we should make sure this thing happens in the background thread so remember we are using this first Q dot global now we should know we should not use man now so we're gonna put this in the background right and if that they exist if that data is encoded data we're gonna define the image with the data so now we find the data and we need to switch the thread back to the man to update the UI as you guys may remember otherwise it will come pain so we're gonna have our cell dot image IMG view dot image is equal to image so I mean the steps may looks confusing but I will explain you to God so where make sure we're a hundred percent sure we are knowing there will be a strain to get the that's the URL string for the image but because this URL I mean the compiler just went crazy the thing is this init function actually is is an optional in a function that will return either valid or invalid URL so we are adding an E flat to make sure this guy is valid otherwise we won't do the rest thing and next up we're gonna have our data generated but actually this data data I mean using contents of URL to generate data is actually taking long time if for example if the image is very big or large sized you cannot download instantly so we need to pick thing for this thing in the background thread but after you don't know that you need to switch back to the main thread because we want to update the UI again so it's like switching to the background thread and then switch back to the main thread and now let's run our project and I believe we will have all the images load a problem but as and also you guys can see it's like it's downloaded asynchronously it's not loaded right it's not waiting until the image loading and then load the whole tape of it so it's pretty cool and now we are actually making everything works fine and if we switch to different direction because we're setting the auto layout correctly we are able to get a perfect results and and I mean although the footer looks a little bit annoying so let's do something actually like table view dot table footer view is equal to UI view like this so in this case we can eliminate the table footer will yeah so there will not be any extra ropes so let's do a little bit of UI works so that I can demonstrate the whole new design for the iPhone 10 or the issue for the iPhone 10 now okay so let's do it what are we going to do is we will set the cell dot content view that background view is UI colored dark green okay so the whole cell content will will be having a dark red background color but that background color is UI color dot right okay so what I'm not doing here is like um I'm purposely set up some different color spectrum to illustrate one possible issue that will happen for your iOS I mean I think 10 this one looks fine nothing is we are everything slowly just like what we desire right so let's go to iPhone 10 simulator here we will find something interesting the first peak looks fine I mean I mean to suggest gesture is trying increasing how can I move this guy yeah so the first thing noting is that you have to note his is the status bar now the whole thing is the status bar compared to what we have or for other devices other than ours 10 on the alikum 10 the status for height will always be 20 so if you hard-code your status bar for this height to be 20 you don't you should use that status bar dot height or status view dot height to dynamically define the height of the status bar instead of hard-coded to be 20 that's the first thing to notice and but now if we rotate our app there you may notice some usually so first is automatically consider the table view it in a safe area how do we define a safe area because the first thing you need to notice is that the whole screen now having four wounded corner if you set your UI from edge to edge it will it may cause a visual I mean let's go back to our storyboard and I will show you guys so table view we are we are not using safe area layout and for this move cool I mean so what I did is I disabled the safe area layout guide which is the new internally introduced one for managing our layout after that you guys can see that usual if so by default every view controls view is using this safe really okay but for some case I mean a lot of case if you are designing a whole screen experience or host screen like gaming app you should definitely avoid that I think that will be the case you need to like disable or enable your safe annually out tired so if we don't if you don't do it for the portrait moment it may be fine right but if you do it you will notice like the images are just cut out and also the part of the cell is cut out so which is bad thing what we can do is we want to keep the whole screen having a good experience so remember we uncheck this mark actually let's put it back and we're gonna have this so first click the table view and then check is incest to safe area so so let's go through all the view hierarchies so now in the view which is the self or the view controller it'll be you that we have this if you click here this looks like a ruler and it will show you need initially it will have this severity margins and severely al-qaida automatically checked you don't need to worry about that but from the table view initially we uncheck this mark so let's put it back for now and if you scroll down a little you can see this safe area relative margins still exists so this means even though you were using safe area that margins for example the margins by default is 8 if you put 0 0 here and well you enable this margin it will be still additional like 8 points offset or like smaller than there's actually edge of it if you check this mark and next level if we go to the actors cell that we still keep this safe error left relative margin well we uncheck the safe area layout and if we come to the content view by default both the relative margin and safe every layout guide will be unchecked okay so it's bit complicated but this makes sure this content view is having the same size exactly as the cell size okay so let's quickly run our project with all these current settings like we only have safe area enabled for the table view cell so because last time we rotate our it'll be like this and it looks like something is wrong I mean I'm really not trusting the whole new - lay on thei 4x cold night as you guys can see if we disable the whole safe area layout go ahead and then put it back again it will give you a different answer or different result but my point is by default it will look like this okay so because we only have safe area for the whole video it's like the super view considering the safe layout guide or the safe area all the sub views will of course accommodate to the super view so that was the case but if we actually turned this the super views safe area okay off so what will happen it will show exactly full screen table view right so the table view will occupy the whole screen and in most case this one should be preferred because you don't want just leave those please explain right is also mentioned by the WWDC video that I will post in the video description that just make official guide for the iPhone X design so with that being said we if we tap the view or if if we tap that cell we can see oh we are actually typing the whole cell even if we type in the edge the whole cell is selected which is cool or which is desirey you may if the user tap the edge it should be selecting I mean you should be selecting the self but like a mission in the code we are actually setting a cell content view color and then we are setting a background color so cell background color so that's why the cell is having a light gray and the cell content view is having like darker gray so this guy should be these two guys should be consistent I mean - the only reason I make these two guys having different colors is actually to show you how is this layout thing happening so after we change the background color of the cell same as the background color of the cell that content view this whole thing will be consistent yeah we are having a full cell right and everything looks fine except for one more thing if you guys notice there will be a yet this separator for each cell looks like stop here because of the margin so we can actually easily set that thing up in the storyboard let's come here yeah you see the separator stops here we can eat the cell yes so separate her inset laughs at zero now so now we're setting the separator starting from a zero and cool so now we're having the whole separator [Music] splitting the cells from left to right so this pretty much about it I mean the coding part is done now let's talk about my plan of teaching so as you guys know ex-con is officially released along with us before so I have discussed I mean I have discovered some articles already and I've been watching the tablet up with these C videos all the time since I'm a full-time iOS developer that's kind of my job duty and I really would like to share to you guys for example this whole cool thing of the loading Jason it's just blowing up my mind just how can you make downloading so easy you can even delete the whole you need function it was to work it's like you don't need to innate every time with the name description' data birth everything what you just need to do is just adjacent take holder it's just like crazy so a lot of things are added I really would like to share to you guys so if you have any idea like or if you have any interesting topic you can tell me and if I think that's a good topic I will share to you guys or share to other viewers to benefit the whole OS developing community and yeah of course I will still help you guys on any question regarding the old or previous version of iOS like Swift 3-2 or swift one nobody is using Swift one I guess and if you have any issue with migrating your app to sway for or migrating your whole project into Xcode 9 you can ask me and probably I can answer that saving you a lot of time and also yeah don't hesitate if you still want to ask questions on objective-c since objective-c is still there and I think it will be there for a long time like always finished project will be uploading or the moment you saw this video probably is already there in the github repository that I will post a link down in the video description and please subscribe to the channel if you would like to receive notice every time when I upload the video please also enable notification for YouTube also follow me on the github hope you enjoy this video and don't hesitate to comment to hit that like button to smash that like button and I will see you soon in next tutorial see you guys bye

Channel: iOS eTutorials

Views: 55,557

Keywords: xcode 9, swift 4, ios tutorial, json parsing, uitableview, async, dispatchqueue, codable, protocol

Id: d9LtFtia4vc

Length: 41min 39sec (2499 seconds)

Published: Wed Sep 20 2017