Display downloaded data in grid format with reusable components | SwiftUI Crypto App #20

[Music] one i'm nick this is swivel thinking where we cover all things swift and swift ui related and in the last video we downloaded this additional coin information from the internet we're not using it yet so in this video we're going to take that new data we're going to convert it to a bunch of statistic models which we already have set up from previous videos in this course and then we're going to display all these new coin data statistics on our detail view and it's going to look really cool because we're going to be using lazy v grids and this is yet another swift ui feature that is so incredibly handy and efficient and i did cover it in the swiftly boot camp so if you don't know what i'm talking about i go i would recommend going to watch that and then coming on back but by the end of this video we're gonna have most of the detail view in our app set up all right what's up everyone uh so in the last exciting video we connected our app to a new api where we are downloading some additional detail information for each coin and now we are on this detail view and this is when i click on any coin here and of course we have all this data but we have not put it onto the screen so we're going to start building out this screen and i think it's going to take us like two or three videos to complete this screen because we're going to do some customization but let's start by building out at least the easy stuff first all right so i'm going to get rid of this initializing print here in our detail view let's make it a scroll view open the brackets i'll put a fake text inside for a second and we're going to add a navigation title and we want this to be the title of the coin so we need a reference to the coin and i just noticed that we passed in the coin but we actually haven't set it anywhere i think even in the detail view model we haven't set it so uh in the detail view model let's say uh let coin of typecoin model and in here in our initializer we'll set self.coin equal to the coin so now we can just reference this coin inside the model so let's go back navigation title is going to be vm.coin i'm going to command shift k to clean and rebuild it's going to be vm.coin.name yeah that looks like it builds i'm going to close the simulator quick and let's actually open up the canvas let's click resume on the canvas so we can see what we're doing here let's add a v stack open the brackets let's give it spacing of 20. we need some text here we don't see the navigation title actually because we're going to be in a navigation view already but the preview instance is not in a navigation view so let's make the preview environment the same by adding a navigation view put our detail view inside and now we can see all right we got bitcoin coming here and we're going to add a top section that we don't have yet so for now let's just make it a blank text let's give it a frame with a height of maybe 150. just to add like a blank space here just so we can see how our app is going to look and we're going to have two main sections in the bottom part of our app we're going to have a text that says overview let's give it a font of title let's make it bold let's give it a foreground color of color.theme dot accent our accent color and let's give it a frame with a max width of infinity so it's totally as wide as possible and let's align it to the left side the leading side all right and i want to line it up with this bitcoin word so let's add some padding around the v stack so that should be aligned we actually have and below that let's add a divider so like a little line below that we're gonna have a grid here and then we're gonna have another section so i'm just gonna copy this overview and divider paste it below and we'll say additional details and between the divider and this we're going to add a grid here so let's add a lazy v grid these are awesome if you haven't used them i did cover them in the swift ui boot camp let's open it and use the alignment column spacing here so i'm going to put each of these parameters on a different line and okay and we need to add how we want our columns to be set up here so i'm going to actually make these columns a variable at the top so we'll say private let we should actually make this state object private as well so here we'll say privately columns and it'll be a of type array of grid item array of grid item which we can see we need grid items here and we'll set it equal to uh we're gonna add two grid items here we're gonna say grid item and if we open close parentheses and press the period here we can make it fixed flexible or adaptive and i covered these in the swift ui boot camp playlist my favorite is flexible because it will automatically resize so if we put one it's going to adapt one size to the entire width of the screen but if we put two it'll be two columns basically that are going to be half of the screen each which is exactly what we want here so let's take those columns and put that into our lazy v grid all right click resume quick just to get it to be connected we can see that they're now in two separate columns all right and um we're gonna put the spacing let's actually make that a variable as well private for let spacing of type cg float let's set it equal to 30. take that spacing and put it in here um pin views we're not going to use we'll leave it as blank and then the content is actually going to be we're going to reuse a component that we already have in our app which is the statistic view so we put that on our home page so for now we don't actually have this data set up but let's put a for each here let's loop on the range we'll do zero dot dot less than six so that will be six items this will be the index but we actually don't need it so let's do underscore here and let's add a statistic view and we need to include a stat and we don't have a stat yet so let's just create a fake statistic model and give it a title and value we'll just put it as title and value let's click resume just to see what it's going to look like just building out the template here this looks good let's align it to the leading so they're aligned to the left side of the column that looks a little bit better to me and we're gonna actually have one more lazy v grid so i'm going to copy it and put it in the additional detail section as well so our screen is going to have like two separate sections here and we're going to fill it all in with some really cool data now all right so for our data we basically just needed an array of statistic model that we can loop on and then we can just throw them all in the statistic view this is going to be super efficient because we can add as many or as few statistic model as we want to this array and it will just update our view dynamically which is the power of swift ui and is so cool so let's jump into our detail view model and in here we need to create an array so so in our detail view model we need to create an array of statistic model but we actually need to create two arrays one for this loop and then one for this loop down here so let's jump in to the detail view model let's create uh let's do an at published var we'll call this overview statistics of type array of statistic model and we'll set it equal to a blank array and then we'll just do another one we'll copy and paste it and this will be called additional statistics an array of statistic model and now when we get these returned coin details we just want to convert these coin details into array of statistic model all right so before we call sync let's actually call dot map and let's transform the coin detail model into some type here so this will be the uh coin detail model and we wanted to return and we actually wanted to return two separate arrays so normally we just put in an array of statistic model here but this is just one array and how can we include two arrays here so we can't just put a comma this is gonna throw us an error what we could do is create basically a mini model within here so we'll open the parentheses and in here we'll call the first one overview of type array of statistic model and then we'll add a comma and we'll do additional of type array of statistic model all right so we're going to convert the coin detail into two separate arrays and we're going to get here is actually a single model that includes the overview as well as the additional so here we'll call this returned arrays and we can then call [Music] dot returnedarrays.overview.overview as well as return to raise dot additional but before we get into that let's actually just let's do some mapping here and i just realized as we're about to do this is we're going to actually need the coin data here as well so let's also uh dot combine latest and we'll combine it with the coin the coin is not a publisher so let's actually make it an ad published uh var coin and we can then subscribe with the money sign this is going to give us coin detail model as well as uh coin model and now we can take this and convert these to arrays and just to get rid of this error quickly let's just return to blank arrays so we'll do return open the parentheses we'll do blank array comma blank array just to get rid of the error quickly and let's set up our overview statistic model first so we're going to create a blank array so say var overview array of type array of statistic model and we'll set it equal to a blank array and then we'll start appending to it so the first thing we're gonna do is the price we'll say let price equals the coin model dot price current price and we need to convert to a string so we'll say dot as currency with six decimals we'll say let price change equals the coin model dot price price change 24 hour price change percentage 24 hour and then let's create our stat we'll say let price stat equals a statistic model and we'll use the title value percentage change title will say current price value will be the price and then percentage change will be the price change next let's do the let's say let market cap equals coin model dot market cap market cap and we'll call dot formatted with abbreviations so that it gets formatted with like the m k or bn for billion and i believe this is optional so if we can't get it let's unwrap it to a blank string and let's put this in parentheses and then i actually want to add the money sign in front of it so we'll do a string with the money sign and then plus so we'll concoct nate it will add the string with the market cap let's say market cap change equals coin model dot market cap change 24 hour percent change 24 hour finally let's say let market cap stat equals statistic model open the parentheses let's use the title we'll say market capitalization we'll pass in the market cap as well as the market cap change third we're going to do the rank we'll say let rank we'll set it equal to coin model dot rank and we need to make this a string so let's actually put it in a string backslash open close parenthesis and then let's say let rank stat equal the statistic model open the parentheses and we don't have a percentage here so we're just going to use the title we'll say rank and it will be the rank finally let's do let volume we'll set this equal to coin model dot volume dot formatted with abbreviations and just like we did up here for the market cap let's so let's do two question marks with a blank string let's put it in parentheses and i want to add the money sign in front of it the plus and then let's say let volume stat equals equals statistic model with the title we'll say volume and the value will say volume as well finally let's append all these to the array and we can actually just instead of creating this blank right up here let's uh down here we'll say let overview array of type array of statistic model and we'll just set it equal to so let's get rid of this at the top here and we'll just set it equal to uh price that comma market caps that comma ranks that comma volume stat hopefully some of these yellow bars go away now now we have our overview array we can pass that into the first array that we're going to return here that's going to be the overview and then we have one more we want to do the additional array so let's uh put a comment here this is the overview and then we'll put a comma here this is the additional and basically do the same thing create a bunch of statistic models all right let's say let high equals coin model dot uh high 24 hour dot as currency with six decimals and it is optional so we will if we can't get it let's just put n a and we'll say let high stat equals statistic model and we'll use the title we'll say 24h high 24 hour high passing the high and we're gonna do the same thing for the low we'll say low equals coinmodel.low24hour.as currency six decimals otherwise n a let low stat equals coin equals sorry statistic model uh 24h low pass in the low we'll say let price change equals coin model dot price change 24 hour and we'll do that as currency we'll make this with two decimals because this is the price change say otherwise n a actually we should do this with six decimals as well i think we're getting this error because it conflicts with the previous value so up here this price change is actually the price percent change so that's what we should put here and then this should be the price change and then down here we're going to say let price percent change to and we're going to set it equal to same thing that we did up here and then we'll create a let price change stat equals a statistic model with the title value percentage title will say 24h price change we'll pass in the price change as well as the price change percentage two price percent change too sorry and then uh we're going to do let market cap change equals coin model dot market cap change 24 hour and we'll call dot formatted with abbreviations otherwise a blank string let's put it in parentheses let's add the money sign in front of it let's do let market cap percent change equals coin model dot market cap change percentage 24 hour and again i have this issue because up here this is actually the market cap percent change i don't know why i did this and um down here this is the market percentage change to it's basically the same thing as that one finally let's do let market cap change stat equals statistic model title will say 24 h market cap change value will be market cap change percentage change we'll say market cap percentage change too i know this is not fun coding so we're only going to do two more um but we could go on for a while because there's so much data we're getting here so let's just do uh let block time and the block time we're actually going to get from the coin detail model so here we'll say coin detail model dot block time in minutes if we can't get it we'll do otherwise zero and this block time is actually a double so we want to make it a string so we'll say let block time string equals and we'll say if the block time is equal to zero question mark so if we couldn't actually get it and it was equal to zero let's make it an a otherwise let's make it a string with the block time inside let's create our stat let block stat equals statistic model we'll say block time and that will be the block time string and one final one we'll call let hashing equals dot coindetailmodel.hash algorithm which is already a string we can't get it we'll give it a blank string or we'll say n a and then we'll say let hashing stat equals and we'll set it equal to a statistic model we'll use the title of hashing algorithm algorithm and the value will be hashing finally let's create our array we'll say let additional array of type array of of statistic model and we'll set it equal to an array with all of our new stats here so we'll do basically everything that just popped up as yellow so we'll do high stat low stat price change that a market cap change that blocks that and blocks that and finally hashing stat cool now let's take this additional array also return it here so we're returning our two arrays that we're going to get from the sink call here and now let's just make the sinkhole week self and we can get rid of these print statements and we'll set self dot overview statistics equal to returned arrays dot overview and self dot additional statistics equal to return arrays dot additional sweet last thing we need to do is reference these two arrays in our view so go to the detail view let's click resume make sure we're still connected and instead of looping from zero to six let's group on the vm dot uh overview statistics this will be for each stat and then we will pass the stat into the statistic view here okay let's click resume make sure that works if it works we should get some pretty cool stats cool and it looks like it's all formatted perfectly and we're going to do one more down here so the 4h is going to loop on vm.additional statistics for each stat and we'll pass it in here let's resume this and it looks like the additional details has also set up and working we got our block times 10 i think those are 10 minutes we could probably customize that in a second the hashing algorithm we got our some percent changes um this is looking really cool let's do a little bit of cleanup before we end the video um so let's pull so this body is looking pretty long so let's pull some of this out so i'm going to take the overview title here i'm going to cut it let's go to the bottom let's create an extension of the detail view let's create a private var we'll say overview title of type sum view let's paste that in let's create another one private var additional title of type some view let's go up and get our additional title paste that in down here let's put those above the divider we'll do the overview title and above this divider we'll do the additional title see the same thing with our grid so i'll cut this grid and down here let's put a private var overview grid of type some view paste in our lazy v grid and then private var additional grid of type some view let's take our lazy v grid paste that in down here just to clean this up a little bit and underneath this divider is the overview grid underneath this one is the additional grid you guys should be used to all this by now and obviously it's pretty obvious why i do this i think at least because now this body is nice and readable click resume to make sure this still is connecting and working looks good the last thing and the last thing i want to do is in the detail view model let's jump into it this map function got really long and ugly so let's move some of this code outside of this map function so the function we need to make has parameters that takes in a detailed model as well as a coin model and then it returns this type here so i'm going to copy this type let's go down to the bottom we'll say private funk map data to statistics uh open close parentheses open the brackets let's have it return the that type that i just copied with two different arrays and let's have it input the input will be the details of type coin detail model and coin applied coin model all right so i'm going to go up and let's actually i'm going to copy all of this code here and let's paste that in down here so this should now get rid of our error and it looks like we actually changed the name of the coin so let's call this coin model and the details let's call it coin detail model like we had before sorry about that that should get rid of our errors and the coin detail model was actually optional so let's make it optional here as well all right gets rid of our errors and let's move back up first let's change out this map we'll call that map we'll call map data to statistics and we can get rid of these parameters let's get rid of this second map function so our subscriber code is nice and neat and now down here let's actually clean up this function a little bit further i want to separate the overview from the additional code so i'm going to create a function for the overview and then another one for the additional and so down here let's say funk create overview array um and open open those parentheses open the brackets and this array needs to return an array of coin model and let's go up here and we'll we will cut the overview here and i'll paste it in down here so this will be all the overview code at the bottom let's just return the overview array like we have and we need a coin model so let's pass in here coin model of type coin model and this error should go away i'm sorry we need to return statistic model here i'm losing it a little bit it is 3am so i'm a little bit tired and um probably the last video of the night for me and then let's do um one more so let's cut this additional array let's create a funk create additional array uh open close parenthesis this will return a array of statistic model and we'll open the brackets paste in the additional code and at the bottom we'll just return the additional array and we need to pass in the coin model as well as the coin detail model so i'm going to copy our inputs from up here from our map data to statistics let's just paste in the same inputs down here all these errors should go away and we actually don't need to call this price change 2 anymore so we'll just call it price change and we'll get rid of the 2 as well as down here we'll get rid of the two let's make this private because we're only going to access it from it in this class let's make this private we need to create these arrays so we'll say let overview array equals create overview array we'll pass in our coin model and additional array we'll say let additional array equals create additional array we'll pass in our coin detail model as well as our coin model and this code looks much more readable now the error should go away i just absolutely love how short our subscribers code is because if someone else came and looked at our code all they would have to do is look at this and they would understand what's going on we're taking our coin details we're taking our coin we are mapping them into statistics we're getting those returned arrays and then we're setting it up on our view so let's build and run this one final time for this video and hopefully everything is working all right so i got the app here i'm gonna click on bitcoin we have the bitcoin title we have our overview section we have the price market cap volume rank is number one and we scroll down we have additional details looks like they're all pulling in the block time let's just go to another screen quick maybe polka dot it's a good one current price additional details i guess the block times not pulling in for this one but it looks like but it looks like we are fetching our data from the database chain link another good one and i guess block time doesn't always pull in but but we are pulling in this data and it is looking pretty good i love our color scheme here in the dark mode i think it looks awesome that's it for this video we set up the bulk of this view uh and in the next video we're gonna actually set up the top section here all right guys so thank you for watching as always i'm nick this is swiffle thinking it is uh 3 am so i'm going to bed but then i will see you in the next [Music] video

Channel: Swiftful Thinking

Views: 1,093

Keywords: SwiftUI detail view, SwiftUI lazy v grid, LazyVGrid, SwiftUI LazyVGrid, SwiftUI display Data with publishers, SwiftUI display data with map, SwiftUI map, SwiftU combine map, SwiftUI reusable view

Id: R7kTiC86MKg

Length: 32min 12sec (1932 seconds)

Published: Sun Jun 13 2021