Adding final optimizations | SwiftUI Crypto App #25

[Music] what's up everyone i'm nick this is swivel thinking and we're pretty much done with this course we only have three videos left and they're kind of just wrap up videos and in this video we're just going to quickly uh touch on some optimizations that we can do to our current code so the first thing we're going to do is update our code so that our app looks good on an ipad there's not gonna be much we have to do because we use swift ui we use adaptive formatting so most of our screens are gonna look good on ipad already but there are gonna be a couple minor tweaks that we have to do after that we're just gonna run through our code and make a couple small optimizations things that we again don't necessarily need to do but we're gonna do uh because we'll make our code a little bit better and we are learning to be professional expert developers so with that said let's jump into xcode and optimize our app all right welcome back everyone i'm back in our xcode project in the last video we set up this awesome loading animation so we open our app when we launch it we get this loading your profile it does this really cool animation and then we jump in to our view and we are pretty much done with our app at this point except in this video we're going to do a couple optimizations just to just kind of final touches on our app just to bring it full circle here so the first thing i want to do is uh just update our app for the ipad so if we look back in the first video we set up in the project navigator we set up our device for the iphone as well as the ipad and we made it so it's portrait only so we can't actually rotate the device if i rotate the device here it's not going to actually rotate and that's because i tested this out obviously before i made these videos and just realized that this app doesn't look very good in landscape mode but to be able to support the ipad is a definitely a big positive for your app so i think supporting ipad is definitely much more important than supporting landscape and of course we are supporting ipad so let's run our app on an ipad and see what we need to do to update it for the ipad so the top here i'm going to just switch the device to let's do an ipad pro 12.9 inch should doesn't really matter which ipad you do let's build it to that simulator and i'm sure there's a couple small things we're gonna have to do to update for the ipad but one of the big factors in swift ui is that most of the screens that we've made are going to automatically adapt to the ipad so because of that um we shouldn't have too much to do so you saw we had the loading animation it looked good and then we jumped into the app and obviously this does not look like the the iphone does right here so we have this back button here which is kind of strange and um then we have this also this strange view over here like a navigation view and a lot of people are probably freaking out right now but this is very common because a navigation view has actually a different hierarchy when it's on an ipad versus an iphone so typically on an iphone the the navigation view you have the first screen and then when you click the button you go to the second screen but on an ipad we have the navigation view like the first screen on the navigation view is actually just this left side here and then the screen that you click on so like this bitcoin screen is actually what would be kind of behind the navigation view on the right side here so um the colors are all off right now when we're doing this formatting but if i click on this first row um it should bring me to the bitcoin screen so we are very close but i want the ipad to just mimic the the navigation on the iphone of course so what we're going to do very simply we're going to jump into the swiftfulcryptoapp.swift file and on our navigation view we're just going to add the dot navigation style navigation view style and we're going to make it stacked stack navigation view style and that's just going to force the ipad to have the same styling as the iphone that we saw here so if we rerun it we should get our loading your portfolio and then hopefully the screen looks a little more familiar which i think it does i'm gonna put the ipad into dark mode quick just so that we have dark mode on both devices so let's go into the settings and you can see even in the settings on the ipad the the navigation view looks a little different but let's put the dark dark mode on jump back into our app here and our ipad looks good for the most part i mean we have our rows here clearly they're all loading we have our let's see let's press the button this works we don't have any data on the portfolio that's why this looks blank we're gonna actually fix that in one second but uh just looking at the formatting here for the ipad i would say that it looks pretty complete honestly we could add some updates to maybe make these rows a little bit bigger on the ipad um but i actually kind of like it how it is and let's go into a detail page here let's click on bitcoin and i love how just you know the animation looks good but also everything in our app is resizing to the device that's because when we built it out we based everything the graph uses a geometry reader that's why it's still going from end to end we have down here all these statistics are using the lazy v stacks with adaptable or flexible columns that's why these all look good let's click the lead more that works and maybe you could go in and maybe change like the font sizes for the ipad but for our purposes i'm not going to get into those minuscule details i think this looks pretty good let's click on the website see if that works looks like we're going to the bitcoin website so that's good and jump back into the app here let's uh let's click one more just to make sure that still works uh maybe we'll do uh solana this looks pretty good i noticed that solana doesn't have a description i guess we just didn't pull that from the internet or it's not on coingecko so that sections not here but we do still have the rest of the screen loading let's look at maybe one more file coin and yeah here we have the description it's back in uh it's not that long but we do have all the data so it's looking good we have our logo on the top right uh let's check out the settings view here and you'll notice that the settings view looks a little different between the ipad and the iphone and that's because the settings the sheets on an ipad pop up in the center but regardless of that everything in the sheet is still looking good we can still click on all these we can still read all these sections so i don't think there's actually anything we have to do there and let's look into the uh portfolio view so i'll jump into the portfolio view i'm gonna search for a coin here um maybe bnb we have bnb here let's add some on our ipad and i did notice unfortunately that when we click on the uh amount holding on the iphone it shows us this awesome number pad this decimal pad that we programmed in i don't think that the ipad has one of these by default so that's why unfortunately we're not seeing that same keyboard here if anyone knows how to get this decimal pad onto the ipad please let me know but for now let's just type in some numbers here so maybe we have like 12 uh let's click save see if it works we have the check mark we got the bnb is now in our portfolio it's got 12 on it and it's back on our screen portfolio value is updated let's add a couple more just to make sure everything is still working let's do uh some dot to add five save looks good let's change the bmb back down let's maybe make it 10 see if we can update the values in core data so we have 10 and 5. i'm going to close the app let's reopen the app loading your portfolio and uh those should be saving core data so just to make sure that they are saving core data here they are they're still here this is looking pretty good all right so we actually didn't have to do really that much to update for ipad we could maybe just change the fonts because they do look a little small but i think if we had the ipad in front of us these font sizes would be okay so i'm really not going to do anything else to update for the ipad you guys definitely can in your own time but i do want to just point out here that we didn't have to do much because when we programmed in swift ui you know we took everything into account and it did everything to be adaptable right and that's why all of our screens and our views kind of automatically updated all of our animations work perfectly we have the animation from the left to the right it's working on this device as well as this device and it looks awesome all right you guys can probably hear the fan on my computer then that's because i'm running these two simulators at the same time so i'm going to x out of the ipad and let's move on to a couple other small optimizations that we can make in our app all right guys so i folded up all my folders on the navigation view on the left side here and i noticed that we still have the content view in our hierarchy this was that first view we made in the first video just to check our colors we're actually not using this content view in our app so let's just right click and delete the content view it is definitely trash i'm going to click run just to make sure it still builds without the content view build succeeds and one other thing that i noticed while going through the code here i noticed it a while ago but i didn't want to make the app too confusing as we started building it but if we open up let's open up the utilities and services in our utilities we have our networking manager so every time we go to download data from the internet right now we are calling this download function and the download function is super handy because it's creating this data task publisher going on it's purposely going on to a background thread we are mapping the response making sure we have good data we're coming back onto the main thread and then we are returning this whole thing as any publisher back to the rest of our app so this is great but there's a couple optimizations here so i added this subscribe because i wanted to just purposely for those of you who are learning to understand that when we are going on to when we are making these url session calls we need to always do them on a background thread uh so that's why we explicitly put this line but in reality this url session dot datatash publisher is actually going on to a background thread automatically so with that we don't really need to subscribe to a background thread as well so i'm going to delete this and you can just comment it out if you want maybe just a reminder but this data test publisher will already be on a background thread so we don't need that extra line i'm going to switch my device back to an iphone 12 and build and run just to make sure that we are still going to get the data without that line all right data is still coming through and the next thing i noticed is that we called receive on right after we did the map so we downloaded the data on the background thread we handled the response calling this function here on a background thread and then we immediately jumped on to the main thread so if i look at where we call this download url and we call it a bunch of places in our app so i'm just copy this i'm going to command shift f to find and i'm going to just paste in the download url and we can call it and we see that we call it from basically all of our service files the coin data service going detail service going image service and if i look at the coin data service here um we are calling that download urls so when we call this download url as we just saw it goes on to the background and then returns onto the main thread and then the rest of the subscriber will run so this line of code will go to the background go back to the main thread and then it will continue the rest of this so what that actually means is that this decode operation is happening on the main thread and that's fine as we see in our app like it's still definitely working but it might be a little more optimal to do all this decoding because this is a fairly heavy process decoding that data on a background thread and then after we decode let's just sync on a main thread so what i'm going to do is actually just take out this receive call on the main thread here and in all of our services we're going to then switch onto the main thread after we decode the data and the reason i didn't want to do this earlier is because we just need to make sure that we are well aware of when we are on background threads and when we are on main threads because we never want to actually be updating the ui from background thread so for example if i delete this receive on the main thread here and i go back into our get coins and i don't update it yet this will then go on to the background thread and i will never switch back to a main thread so if i build and run it right now we're gonna get some errors in our app and it's not happening exactly right here right now but we can see these purple warnings that we get and it's basically it says publishing changes from background threads is not allowed and that's because you know some of our subscribers whichever subscriber calls this error first is showing these errors because we went on to the background thread to get data and then we never came back to a main thread so we get these warning messages and these warning messages are really important if you ever get them to address so what we're going to do is instead of going back onto the main thread immediately after we map we're going to just go on to the main thread after we decode so we'll call here dot receive on and we'll call dispatch queue dot main and the only thing that we need to now remember is that every time we call this download network manager.download it's going to that background thread so we need to find all the instances where we call this throughout our entire code and make sure we are receiving on a main thread before we are syncing anything so i'm going to go to the coin detail data service we have it here so let's do it after the decode i'm just gonna paste it in coin image service uh we have it here let's do it after the try map uh the market data service let's do it after the decode as well as the portfolio data service we actually don't need this one this is just going to core data so that should be it so we changed it four times i'm just going to copy this line of code and control f and just make sure we have it all four times so on this one we have receive on main queue we have receive on main queue we have receive on main queue and receive on main queue all right so i build it and run it one more time we should not get those error messages anymore hopefully those purple warning signs should be gone and it's we did the exact same thing in our code except all of our decoding is now being done on a background thread so that's a little bit more efficient if i look at the memory if i look at the cpu we should have actually seen we can see here thread four thread six a couple background threads opened up as we loaded the app and that was just a tiny bit more efficient obviously we did not need to do that because the as we can see the cpu in our app is so so super low that um we're not running into any errors or any ui issues but but generally speaking the app is super efficient now and when we start loading all these images we can see that some of these images are loading on background threads we can see them down here and that's really efficient as well we're doing as much as we can on background threads and then just jumping back to the main thread before we update our ui all these extra tasks down here on these background threads have been offloaded instead of being on the main thread the main thread is a little bit more faster it's a little more efficient it's a better user experience all right on that threading note i want to jump into the networking manager one more time and um there is a pretty cool call that we can do on pretty much any publisher specifically used on a url session data test publisher and it is called dot retry and here we can literally put the number of times we want to retry this function i'm going to put three and very simply what this line is going to do is we're going to go and try to download that data from the url and then we're going to take the response from that data and we're going to call this try map handle url response and if this url response fails so we have some logic here that it might fail if it fails when we get to this retry line it's going to know that the publisher failed and it's going to actually just restart and it's going to retry to download the data from the internet again and so this is kind of just a handy extra line we can add just in case maybe like we went to download the data and for some reason the server gave us a faulty response we can just tell our app to retry that three times so that if it fails we do it again we do it again and then after three tries it will just fail and jump back into our app we obviously don't need this line it hasn't been failing but if we rerun our app now it should do the exact same thing we're just giving the server maybe two extra tries to actually give us good data still works and the i guess the last thing i really want to touch on here is that if we go to the portfolio tab and if i remove all these coins from my portfolio so i'm gonna click on these coins and put them down to zero and let's do it for all these so if i just start the app at from scratch right i've never used the app before i would have zero coins in my portfolio and clearly we have zero coins here um but this looks pretty plain we don't have any message to the user it kind of looks like data just didn't load on the screen so i want to add just a quick little message here to the user that they need to add they need to click this plus icon to add coins to the portfolio let's jump into this view this is the home view so i'm going to jump into the the core section of our app into the home views home view click resume and i'm going to go down to where we have our portfolio coins list so instead of just adding this list let's add a z stack here let's align it to the top let's add let's add alignment of top let's open the brackets and then in the z stack let's first check if we have coins so we'll say uh vm dot portfolio coins is empty so if there are no coins and i'm also going to check if the user is searching so because if the user is searching we want to add search results so we'll say if portfolio coins is empty and vm dot search text dot is empty open the brackets so if there are no coins and there is no search text let's then put a text that says let's just put high for one second and then we'll say else and then we'll put the portfolio coins list if there of course are coins and we'll keep this transition just on the entire z stack here so if i click play and jump over uh we have our high message here because there are no coins in my portfolio right now so let's make this actually say um you haven't added any coins to your portfolio yet uh click the plus button to get started and then maybe let's do the control command spacebar and let's throw in maybe an emoji to the face with a monocle just because i think he's looking to the top left which is where our plus button is so that might be a nice little effect there i'm gonna put a period and exclamation point here um let's format this a little bit let's give it a font of call out let's give it a foreground color of color dot theme dot accent all right let's actually give it a dot font weight of medium let's give it a multi-line text alignment of center so it's aligned to the center and let's give it maybe padding of 50 just to make it a little more in the center of the screen so that looks a little better to me and let's just take this text cut it i'm gonna scroll down to i'm gonna jump to where we have the portfolio coins list and underneath it i'm gonna add private var portfolio empty uh text of type some view open brackets i'm just going to take our portfolio empty text and put that back up in our if statement at the top here all right i'm going to build and run this to my simulator which now has an empty portfolio and hopefully we can see in the dark mode this text all right we've got a loading screen it still looks pretty cool we open our app we have our data already loaded we jump to our portfolio and it is empty you haven't added any coins to your portfolio yet click the plus button to get started and if we add a coin uh hopefully that goes away so let's add maybe some bitcoin let's let's imagine we had one bitcoin let's click save and now that message goes away and our bitcoin is here so that was perfect the last and final thing that i noticed in this video is that the portfolio value section the percentage is a little bit off it's off by two decimal places so the average in this portfolio right now should be between 27 and 13 percent and if i look at the portfolio value up here uh it is 1 300 so i am in the home view model and i'm down in the map market data section here we have our percentage change and i think all we need to do is just take out this times 100 i'm not sure why i added that but let's run it one more time and hopefully our percentage is the correct percent now and now we're at almost 14 which makes much more sense and overall i'm really liking how this app has turned out so we have one more video in this series where we're gonna just touch on the color scheme that we're using and we're gonna do a little bit of review on kind of just what we've learned some of the features we've added so thank you guys for watching as always i'm nick this is swiffle thinking and i'll see you in the next [Music] video [Applause] you

Channel: Swiftful Thinking

Views: 894

Keywords:

Id: -uJI8IKAPPI

Length: 25min 31sec (1531 seconds)

Published: Sat Jun 19 2021