Testing, JSON serialization, and immutables - The Boring Flutter Development Show, Ep. 2

Hey. Welcome, back to the boring show the. Roughly hour-long show, in. Which you get to see two engineers, coding, an app basically from scratch, making. Mistakes, looking, things up arguing, about what to do and. So forth this, is our development show it's not actually a flutter tutorial, per se we, do have a bunch of those you, can find them on the Google developer Channel and also some at flutter do so, if that's your jam you can find those there also, there's. A bunch of community, ones so, like if you just search, YouTube for a flutter tutorial, you'll find, a lot of amazing tutorials also, true all. Right so. This is our second episode in our first episode it was kind of you know we kind of did that as an experiment, just to see if anybody would want to watch us code for. An hour, and. We got about 12,000, views as of right now we, got a bunch of comments seem, to be seem to be some good interest there so we're gonna do some more of these so. This is our second episode, and. One. Other thing to mention we. Read, through the comments on the first one we got we got almost 100 something, comments. I think on the first one we actually read through them and we wanted to call one out right, now, yeah. Someone, actually found a buck so. Forgive. The name Mihai. Mihai. Manola, found. It back in our code so. We want to address that first and then obviously. That there's been a lot, of other comments, mostly, kind of pushing us to the more advanced, topics, oh. But. But first let's let's, fix the back right so, the back post about this. If. You. Look, at the app so this is exactly the state of the app that we left it when we, stopped, developing. Last time and. So we have this app you. Can open the tile and and, then you know click on stuff and get somewhere, if. And we also implemented, like. Fake, reloading. So if you drag to reload this. This. So. First, of all if you reload it will just like remove. The first. Article. From the top right so. Where's. The code for that. Here, so articles. Remove add zero right, so that's great but like watch, what. The tiles. That. Are open, would they do so, when I when. I reload, again the. Open, one, is the. Next one in the so so basically the the. The ListView only, remembers. Which. Number. Was, opened, and. It, doesn't, like, it still has, that number open, which, is not what you want right you. Probably want to if someone actually reloads, things you, want to collapse these. Things or, maybe, keep. The the one open that you, had. Open before. And. That's a so. Thank you Mihai for putting, this out I didn't see, that until. He. Put. It out the. The fix is simple. It's. Basically, you. Have. To tell the ListView. Kind. Of the identity. Of each, of its children. Right so. Normally. You don't care or the ListView doesn't care but, if you somehow. Mutate. The. Items. Of the list then, you want to say. Okay, so this item is X, and if. Even if you. Put it somewhere else it's, still that same, item right otherwise. It will just like say okay so this item number three is item. Number three even though we changed the. View so anyway so so, that's why most widgets, or probably, all widgets have the key argument. And, you, can add a. Key, to, it now. The. Key takes, a string which. Should be something, that, is unique. To this particular, ListView.

Right So, in, our case it's pretty simple, we can do article, URL. Which we don't have and that, this then this will. Get to this but, let's. Just use stacks let's assume. That all, the. Articles are unique by the text, of the article. And so. Now if we do this and we. Open. That it, should just clear, that, the. Opened think. And that's. Probably what what you want if, you wanted, this to be open, then we would need to do, some. Other stuff but we don't we don't have the time. And I think we don't want to do that this. Show, is about. Jason. And Jason, Jason. Yes. So that's what we're gonna cover today, we. Got a lot of requests in the comments, to do something. A little bit more advanced and so we thought JSON parsing, is. On. The way to advanced but still something you're gonna see in almost every app that's using that's using real data everybody, uses JSON these days to pass things around. And. So, we're also going to talk about testing a little bit also, something, that almost everybody's, gonna run into at some point I, don't know a lot about testing because I just do everything perfect, the first time yes hey but. Philip knows a good bit about it yeah yeah I have to as, you can see I do a lot of facts oh so I have to test everything, so, fortunately. For me for it has a pretty, good testing. Framework there's. Like three different ways to test right that's right so so. I mean. Dart. Itself has a testing framework called. Package test which. I think is pretty sweet. And, then, further. Builds on that with. You. Know flutter test justing framework which, lets you basically, do. Kind. Of headless flutter, and i'll show you that in a moment. And then it has like, a flutter driver, thing, like full-on full-on, like I know yes, yes so if you if you were like familiar with selenium on the web that is basically that do you want to pull up the testing guide real quick just to show it to me. So. Yeah, we have we have a dock on the on fluttered at i/o that actually goes into yes. A lot of these details as well so that's a resource that's, yeah, fluttered io / testing, mmhmm, yeah. Oh that yeah I forgot. About this but they even have like unit versus, which it with it was a situation so so, here's. A widget test and. Basically. This is a smoke test and the, fun thing about the, this this, gets. Included, whenever. You create a new app you have this test with it, since. Then we totally change the app so this should fail. Okay. So let's, try it who's, this bill for the counter example, yes and so this this basically says like oh. You. Know pump, widget so all. Everything. In father is a widget so even your app is widget so you say, to the tester they you know add this widget and. Then, I. Expect. To find one, widget that, says. Zero and, no, which this is one and then, I want to tap the I the. Thing, which, has an icon. Which. Is this one that icon. And. If, you know the, that. App you you know what I mean that there's, an acronym that lets. You tap it or fact. Fab. How, is it called, bottom. It's this is the default app that we're talking about so just go new project, and flutter and then, so you tap it and then you say. Tester. Pump which which tells, to the testing framework hey. Do. Things like. The. Loop does yeah. And. Then it, expects. One. One. Widget to say one and zero, which is to say zero right and so. That. Already sighs. So. This fell, very. Soon it felt, on, number.

18 Which is the very first expect. Because. There's no widget, anywhere, here that says just zero right so. We want to change. This test. We. Still want to do my app. Donate. New now and. What. What I'm gonna test is simply. Just that. If I click on the tile it. Will open and. Now, how I'm gonna so, the. King of towel opens it I. Don't. Think I've ever done a widget test this is actually good for me. As well so, you. Do, it's. All a synchronous, obviously, so you to do so first let's. Expect, that. You. Get this nice. Object. That lets you find things so. Find. By. Type. And. That's, gonna be an expansion, tile. And. That. Should be. Way. What no, no. No what would I want to do so okay so let, me walk you through what, I have in mind I you. We, expect that there is no. Launcher. Icon here. Right. We, work we, first we need to make sure that we're not actually like. Having a. False. Positive. But. So, so we want to know that there's no none of these at. First which there isn't right, and. Then, we click, and then we, find. Out that there is right. So. So. We want to find by out icon, I guess so, fine by, icon, and it. Should, be the launch. Icon. Which. Is helpful. Yes. So nice to get those previews the icons in the color and finds. Nothing, right. And then. We do a. Way, to tester. Pad. And. Again. We find. By. Type, this while this time and it's. Gonna be the expansion tablets, that's what I was gonna do. Next and this. Will find many things. So. We want to say like. Either just. Click on the first one let's. Just click on the first one and. Yeah. That's it and, then. We need to do tester. Pump. I'll. Get, to pumping cells soon, and then. We. Want to expect. That. This. Finds. Exactly, one, widget. And. Now we can run, it and so, you see this. Doesn't run this on the emulator it's it just like creates its own kind of flutter framework, and this, past right. So. And that that, flower framework, kind of like so it's it has everything in it it's it, should be the exact same thing as what. You run in the emulator or. In, an actual device. What, I'm gonna do is. We. Can actually so you can do flutter test which I just did and so, most, of this this. Is just waiting for the testing, framework to go on and then the actual test, runs in like milliseconds. We. Should have that fun oh yes. There. We go maybe. Not yeah that's alright we're just looking at this bit anyway yeah. So. But. You can do flutter, run. Test. Which. It test and, look what happens mmm. I hope well. Another. Thing here so I don't want we'll. See it's, actually running it on device now yes before it was not yes. So. This is syncing files. I'm not look. What happens, when I really. Need to do this. Now. I'll hop, fill out or hot restart. And. It's gonna do. It's. Gonna it, made, the test right so so it was let, me show it again. That. Subtle look making the noise by the way that is not part of water, flooded. Yet I'm. Enjoying these like unescape, color codes yeah. That's. Obvious. That's. Not what you normally run it this is for you to to make sure that it this does put exactly you want this 2d so, so one, thing that why. It's so fast is that it's it's. It's. A tap, and then. You, know run, further runs one frame basically and, then, but. By, the time because we don't have any fancy animation, that will like create. The state, that we want to see, after, some time but it will instantly, create the state and then it will animate to it. So we can use pump and it's very fast if. You, have and, you will often have something. Like oh I, click, here and then there's animation. And then after, that animation. Something. Gets, created, and I want to to do that you, do pump and settle which, will like, kind of run more fluidly. So so if okay, so so, flutter has it's a single threaded dart single threaded right let make sure got all this so, we have you run your flutter app you have one. Thread that's doing an event loop waiting, for events from the outside and you also have a micro task queue I think which I sort of understand, but you mainly have one thread so. Every time you hit pump it's, gonna do one go, round and process. Like the topmost event, I guess yes but if you do pump and settle it'll, start and then it keeps going until there's no more events, go, through and then it'll stop yes okay, let me show you how that so, so now we. Still are our, test. Still, runs and should. Just. Finish with. A success. Right. It might. Take if it was a lot of pump and settles it might take a little more time because it does these things. Well. And for. So for. Our testing we don't need this but, for our like. For. You to see, what's actually happening, now if, I perform, a start you, should see that did, you see you. Should see the whole. Interaction. Because it actually waits for. This to. Complete right and you can even, if you're very good. At this you. Can see a little target where. It tapped right.

So. Anyway so so our tests are. Passing, and. So. Let. Me go back to, here, and, I. Don't need this oh and, by the way you can do things like I. Want, to wait. For, like a duration. Of nine, days for. This to finish and, it will still, finish you, know in milliseconds because, it's. All. It's. All fake no it'll--fake of clock to right yes yes yes. But yeah as, I said we only need this and we have a our widget test so. That's. Cool and, now obviously, we would you, know test even trip development, so what. We want to do is if. We're. Gonna focus, on JSON, and, parsing, in general and getting things from Network but let's comes later we. Want to start with the test and, and. Then. It'll, fail and then, you, will implement that and then we can do some coding and we can do some coding because we're very responsible people and we always code this way yes always. So. Jason. Test. This. Is, going, to be I. Think. Because. This, has nothing to do this leaf flower right we're just passing you're just rate a start so it's be a unit test right so this is going to be a. A. Unit. Test and. That. So. The test should. So. Parsis, do. We want to talk about the -, you're safe yeah oh yeah you want yeah yeah. So, you. Find folks in hacker news and firebase. This. Is their API mm-hmm, and so, there, are two calls here that were we're mostly concerned with so there's the way that hacker news does their API they basically just take all their end memory objects, which I assume were just sitting in a hash table a distributed. Hash table somewhere they just sort of dumped them into this API as is so. There are two calls that, were concerned about there's one that gets you the top stories. Yes. So something, like this and, actually click it and we can actually, see exactly what, it is there. We go so, right now those, are the IDS of the top I think 500 or so stories. On Hacker News uh-huh, so we would want to get that because, we're that's what we're displaying so, we get those IDs and then there's a second call if we back up one and. I. Think you had it up above there's. Like get, a story by, ID right. We go like this and so this is a single story and you. Can fetch that by you can see I think it's eight eight six three. Is. The ID for this one the URL and of course this is the famous hacker news post that announced Dropbox. Right. And. So. We need to get a list of intz that's. The first one and then we need to be able to get this object. Multiple. Times multiple different ones of these and then. Deserialize. That data into, off. The wire into, one of our article objects that we made in the first episode, so we'll, be focusing on that work I think, for the most of the rest of this episode and so. Those are the two things we need to do so we'll need a function, to, take. A string. Representation of a JSON list events mm-hmm, so, bosses how. Do they call it. They. Call this, top. Stories yeah I'm top stories. So. Testing. Framework it just takes a bunch of tests, that. Are done. By this and then it has expects, in that so, we. Want, to have something like. Let. Me actually take. Is. All. Right maybe I don't want to pretty. We. Have. Jason's. Drink yeah, just a generate string constant. So. That's that and then, we, have, we. Want to. Expect. Let's. Just say okay. We're. Gonna have to put a method somewhere yes. So parse. Top, stories. It's. Gonna be a method, that we don't have yet that takes the string, and, we. Want to expect, that. The. What. Are we actually testing, but. We, are, hopefully, testing, that it like for example the first one and, of these okay, so first, is. This. I know. It's not the best. Test but you know and. So. So. Now we need to implement this, okay. I'm. Gonna add date here, would you want to go ahead and add the test for the second case, the way you're gonna do them both at once okay. You're. Feeling adventurous so this is how we're gonna test out and then we can go to our other file and that's true, so. Item. Looks, like something. Like. This. Is, and. Again. I don't want to take a pretty printing off. And. So. The Jason strength is going to be uh.

And. This is break broken, because we're sure, I have this right the. Joy single quotes, are. There anything else, because if if now, there should be you. Know what so so now that triggers just to do, something. Like oh, that's. Right you can do the triple quote yep. And. For. The sake of, space. Right. And. This. Should be pass item, yeah, therefore Touma's items I think right because everything in this API like everything, is one of these objects like comments, and polls and stories they're all I wonder, if like if, in that if. In this function, we're going to assume that this is an article and not a comment we, should call, it parse article. And not item, so. Like. This and, and this should say something like Oh. Jo's. Not generate exemption. Listen. That's one but, like let's assume that. We. Will have a by maybe. Field on that so. That will it, will give us an article moon and the. By field should be D Houston, okay. Okay. So. Now. On. To a. New. Class I guess. Yes. Where you want to put these, so. I was, thinking about just, slip by, we could do well yeah I. Mean if we're just if we're just working out how, to do the JSON we're not really touching on appstate stuff, yet. We. Could just put these as top-level functions in some file sure yes yeah okay, but. Oh yeah. So. Jason fussing yeah, I mean, this this is actually a short-lived file anyway will rip this out once we we, on to, something more. Sand. I just want to make sure that, so. This. Should take, this. Should give you on a list of and, it's. Called top stories, and exercise, rink. Of chase on. This. Should throw now. There. Is and. Then. Oh. And. The next one should have. An article, which. We're gonna be an import for that yeah. Article, don't. Yep. So. Parse, article, gayness. Drink of JSON, and. And. When. You're doing for this oh, so. Now. I just want to run this test. And. So this will fail this will fail miserably. How. Do you catch an exception in a test like if you know it's gonna throw one oh yeah, it's a, expect, exception, or something yes throws, and you. Can say throw, something. Okay like, so, app. Whatever. Error I often throw cyclic, initialization. Errors in my code so that's that's, cool yeah do that all the time yes that's a feature so. Okay. Do. You want to take over I can we can switch okay, you want to or like an effect we could just like switch. That. Was that they. Can cut this part out would look awesome yeah. And. We're switched. All. Right so, now my job is to go back to JSON, parsing here and parse some JSON yes okay. So let's start with the list of and. So let's get rid of this. And. The, first thing I need to do is take, the string and parse it as JSON, mm-hmm, for that we need be handy-dandy. Dart. Convert library. Mm-hmm. Thank. God that's the first result here, we go it's. The dark convert library can do this for me. And this is this. Is built-in this is not a package I have to go get right yeah, okay, let. Me go back in here in. Porch. Oh. Cool. So now I can convert some stuff. And. So what, I'm going to use dark convert for is just to take.

The String and generate, that map, of, strings. To dynamics, it's a pretty popular pattern in a lot of languages where you get. You. Take a string a JSON give me a map with all the fields in it. So. Yeah, so what while. Andres. Is working. On this I think, what we want to do is first show you the most basic way to parse. These that's, a good point and, and, so that's, the, the, one that you get. With dart itself and and. Then if. We have time we. Want to show how, to do this in a more robust, way yeah. So that's a good point so yeah this is sort of the, quick. And easy roll your own conversion, logic, way of parsing JSON and dart once, we get this done and we should have I think we're about twenty minutes in now a little bit more we. Should have time to at least go on to talk, about built. Value, which, is a package. But. A guy named david morgan i think is the is the chief contributor on it's, obviously, open source dart package you can find it on github and the package manager pub and. That provides a. Couple, of things it provides immutable, objects, that use builders and it. Provides a, very flexible. Plug-in. Based. Serialization. And deserialization. Architecture. But. It is much more complicated to talk about then this one which is pretty like I'll, just write six lines of code and it's done kind of a deal. Okay. What we're stopped you want to talk about our hash tag now, might be a good time because we didn't do that yet yes we have a hash tag yeah. Mr.. Hash tag hash tag boring show, since. This is a little bit about having ongoing, communication. With you guys out in the community we wanted to make sure that you can. You. Can put comments on these videos we do look at the comments you, tweet about us using hashtag boring, show and things. Like that if you have questions about flutter or things, you'd like to see us covered, let, us know and we can look through these and like if we see a question we're like oh we know how to answer that and it would be good to talk about on the, boring show if, we have time we'll answer it right here this, is a good way for us to have a little a little back and forth yes, so hashtag. More Jeff alright. So. First, things first I'm, gonna use dart convert to take the string that's, got the JSON in it and get it into a map so, I'll do final parsed equals, and then I'll do I think it's JSON. Decode. That. Oh. So. Already messed up no, no just that oh we, have a we. Have a thing here so so either you import, the convert, with as, something. There we go. When. I get renamed as yes. JSON. Decode there we go right. I'm. Still not used to importing things by name like that oh, good. This is great so, there's. Gonna be times when. This. Happens to me all the time when we, have things that how. Do you call it naming conflicts, so. That's. How you do this right in dart you just. Import. With a prix. Fixe, mm-hmm. Cool. So we are we're, done now. So, we parse it into this should be a. Map. At this point I believe. That. Will contain my. Actually. This will be a list because I'm directing. A list but, you need to tell oh. Yeah. Oh you're scrolling redone like I do there. We go. And. So, now, that we have a list. Of intz at this point that. We've parsed out we need to convert it into a typed list. Events on how much we can do as. You, okay yeah. I'm. Just realizing how many, like. Custom. Thinks I have on my IDE that you will now have to fight and I'm sorry that's okay. Okay. So. Also I misspoke earlier when I said that we'd be decoding into a map if, if, the JSON decoder sees a list, of items you will get a list back rather than a map. And. So, I'm gonna get a dynamic, here and in that which means you know not considered. Strongly typed I'm, going to convert that dynamic. Which is holding a list events into a strongly, typed list events so that I can use it as one and, that's what I'm doing here. So. It's called a list of ID's mm-hmm. Equals. And I'm gonna make a copy that's, I'm gonna do that so I'm gonna do lists so, int.

I'm Gonna say from. My. Parse dynamic, list, like. That cool. And so now I'm taking that list that I got from dart, convert, and. I made a copy of it that is strongly typed that I can treat as a list of integers right, and, this. Is a bit verbose but I'm gonna return it sure the point. Just. Like that and, so let's put a breakpoint of that can we put breakpoints and tests we could do that right I think so yeah oh. Yeah. Sure, find, out all. Right. Well. Yeah let's just run it first, I think if, you run it it won't hit, the breakpoint but but it's okay I think you're you should pass the, one yes, okay, cool, so do you want to do still want to debug. It yeah. There. We go all right okay. So just step through this real quick I've got my JSON string up here let's, make this bigger, there. We go and. I'll step, so. Parsed and now is a global, list with, 347. Integers in it but. Because this is a dynamic we can't really treat, it as one in a reliable way, so. I step over that and, I, get parsed and, list of ID's this. Is a copy that, has strongly typed yeah, and then that gets returned so. There's, a. This. Is. Basically. So Jason, right untyped, very. Dynamic, we, want to consume, a basically. A string of things, and, the, this kind of dynamic blob, into, something, very much typed and. What. You're doing here is su. Or you're, saying to the compiler, and to, dart this, I'm sure this. Is a list of integers. This. Will fail if if there's something, in the string if we put something in the string that's not an integer this, will fail miserably. It's more to fail actually. Yeah. We, could even like have. A yes. Yes. Save. That. Yeah. Let's go in here okay, let's. Do you like that again I think there was a button for that and I missed it, they. Had work yeah I've, never used this so we'll pass parts, because this is just parsing to a dynamics, this will work right and then. We get a growable list with. A string in it but, then when we try to do this copy they should just choke and die right here right. Yes. So, now yeah. Deeply. In the dart code that's. Never good. So. Yeah so that that's what happens if we if we just play, it played, it and not to debug it and not, having breakpoints, it will just throw I, think, argument, or. If. We if you do the like. Debugging thing, and you actually have a break one you, will go very, deeply, into dart core and and, see all the things that, yeah. So and the type string is not a synthetic thing there we go. So. Cool. So so I mean, we. Would probably want to test for the add-ins as well but we won't. Do that now let's. Fix this now, and let's, let's, go I think. Actually why don't we keep, this like. Like. Just, using the, primitive. Parsing, of JSON and go to parse article, and do this yeah, sure oddly. So. Go ahead and keep doing this one with dark convert you mean yeah no, no no I meant let's, just keep this as it is because. It's. Three lines of code it, works. Or. Do, you want to because we haven't actually showed how, to do dark convert with an object so, we just used it for a list oh okay object, yet so that might be a good thing to show you can comment, these out and try something else yeah we're also gonna have to have a new like, article dart this. Is gonna have some changes in it too if, we're gonna use Bill value with it yes, yes you're right okay okay so. In parsing. Articles so we're gonna take the article, string. And. We'll have to rename this one to in the same name collision there so, now if we go back to our test we've got this. Bit. Here. That's the entire string for the article that we're gonna need to parse, so. Step one is gonna be the same, alright so, we're gonna we're, gonna do this and, say JSON. JSON. String. Okay. And in this case this actually is gonna get me a map so this will be a map of string two dynamic, because we're parsing a single object and, then. I. Could. New. Up an instance of article, and then just start trying to jam individual, fields into it but that's a bad idea. So. What, I would normally do here is go into article, and. I would make a new constructor. Can. You just use this one actually, I'm gonna use that one.

In. A second. Okay. Okay yeah so I'm gonna make a factory. Constructor. That's. A yes oh yeah. We're touching on all kinds of things that I almost know how to do so Sophie this will be fun for all of us. So. You want to talk about named constructors real quick yeah yeah so that's, early yes. So, so. Dot. Lets you do not, just one constructor, but map any constructor, which are named that, that, are like article. Dot from, JSON or article dot. Empty. And that. That's, convenient. What. Andrew. Is doing is that not only is it a named constructor, it's a factory constructor, and factory. Constructor is basically, a function but. It it seems, from the caller's perspective, as. A. Constructor. And that. That function will, just. Do whatever it needs to do and then we'll. Use. Another constructor. In that same class and return, a value. So. Like you with, this you can do things like Singleton's. You. Can do things like caching. And. A, a bunch, of other cool. Stuff so are, you showing it in I'm looking for that I know the factory keywords there uh-huh. Yeah I'm not, sure. All. Right. Let's. Go back to the. Let's. Go back to here so yeah the what, the keyword factor gets you is that you can return and you're not gonna make a new instance by default like up here if you do article like there's, a new instance of article that's made for. Your execution, of the constructor, and they use as this in. A factory you don't have that it's just a method that can be used. As a constructor, and can new. Up an instance itself, and return it or if you're doing object, pooling behind. The scenes it can go get an instance out of a pool and return that it can even return null, which. I'm going to do right now so. I'm. Just say if JSON equals null just to show how to do this. Return. Null. Deal. With that yeah yeah the thing that you can do by. The way as, you see the, yellow thing that's. That's already telling, us hey you have, this constructor, it doesn't return in, some cases it doesn't return anything and that's that's, that's, bad that's a problem. So. Let's make it return something so let's make a new, article, and we'll, fill it as we're making it with, this information that we're going to pull out of the JSON. So. Let's say return. Article. And. I'm not going to use the new keyword because this is dark 2.0, right so. We don't have to use new anymore if we don't want to just. Like that and let's put some properties, in here so. Let's. See text, we, can pull. Right. This. Could be null though so do we want in theory. I don't think it ever actually is but do want I have like a backup tax. Sure do you like that yeah. That's always just nice to see. Yes. Yeah yeah sure okay and. Then we have domain right. That's. Also a text field right thanks. Let's refer back to the API yeah. Oh. Domain. Is some something I I created, just because, I. Was lazy too, for saying okay so so. Yeah, it doesn't have to mean it has few RL URL, should. We go back to you or on we. Should yes okay a little bit so. We're gonna probably break some other stuff then but. Shift, of sex oh you. Have real function keys. Okay. Well, see you all will be JSON, round. And. You want to want an empty string or just leave it as no. Well.

Let's, Just leave things that don't like we've shown that you, can do like if, you. Know the Nala freighter like if this is null then, have. Something else but, we probably. At. This point with, one we'd rather this, to break. Spectacularly. Then then, not break and show now somewhere that we wouldn't. Expect yeah, yeah. We're not I'm not putting, any sophisticated checking, in here I'm just. Trusting. That this data will be roughly what I think it is score. Will be JSON. Actually, these I am gonna put you're, having a null for. I'm. Sure if it even so shows, H by the way I think it shows two states, them so, that that's why I'm. Really. Sorry about this, because this, class was basically just me you. Know copy pasting, Hacker, News and and. Then creating, something from, that. So. Let's look at our actual data that we're gonna yes so. There isn't even an age in here there is a score and. Time. What, does oh, there, is no age okay, no. No that was just me so uh. We. Want back, with you know no wrong phone there. We go, so. Do you want let's just take this out for now and. Put it back in or do you wanna put the timestamp in I. Wouldn't mind if we put the timestamp in I have to go figure how to parse dates. Just. Let's just use it as an answer for now. And that's. Okay you know what maybe instead. Of trying, to like. Change all this. Let's. Create, a new article, class. With the JSON parsing, and just, like at some point we'll just switch it around and, it's probably going to be easier because, now like there's gonna be a bunch of static. Errors everywhere. What. Do you want to call it. Um. Because, well the name collision if we use that yeah, or. What I meant was was just like Gordon embarrassing. Oh you means I have, a new worker here out there and then we'll figure. Out down with you yeah. Okay. Yeah. Take, all this out. The. Magic of the undo stack. Well. Yep. That was probably it wasn't. It. Okay. Now. It'll be my first thing that I add it's let's pull that out go. Back to JSON parsing and. Blow. A bunch of this in. Right. Yeah this is my face I gotta use the mouse you notices that oh.

These. Are your face okay, yes. We're. Gonna edit all this down so nobody has to watch it don't worry. There. We go okay I think. You're there. Oh wow, what. So. Let me then. Commence, can let me parse. This. Comment. It out see if I can format this now oh yeah, I think. You have a life a few dollars the summer yeah you confuse the formatter if you go back, up I think you had you, are just doing this dot something. And. That's. That's what threw it away so, you, have you, know this, detects, this URL. And. Just. I'm. Just redoing okay okay. Yeah. That's probably way, faster. I'm waking up your laptop here yeah. There. We go, okay. Okay. So. Now, I can go in here and screw. Around messing with these so this will be an int which, is the time stamp, mm-hmm. Let's. Go what do they call it times, time, yeah. Sure. Score. Okay you around we got comments count we don't. So. That's it's, actually kind of difficult to get I think yes you have to do a little work all. Right so let's pull that out then yeah. And. It's not a just became this done time. Everything. Should have a time yeah. I. Just. Look length H yeah, okay, thanks. And. Scores so text URL by time, and score yeah I think that's that's good, okay. Magica, format I think. You're still maybe you're still importing, the article. From yes. You. Can just yeah cool. So. We're back on track, alright. And then I can go back to, let's. Say something. You know we got. Okay. Doesn't. Actually return one perfect okay so. Now I can get back to, we're. Back in parse article now so, I'm going to now take, the map that I got from JSON decode I'm, just gonna stick it I'm gonna stick, it in as the parameter to this constructor, and I'll get an article object, in return so. I can see return, actually. This. Way I can step through and see it equals. Article. From. Jason. Mm-hmm, and. I'll just give it the json.parse. Just. Like that uh-huh. And, then I could return the, article. There. And I can put a breakpoint in here so. We can step through this but that should be, that. Should be good okay, at that point right am I missing anything back here my toast. Let's. Find it let's let's see that's if it's precious then, now. What, was. The. Command you used to actually launch the test a second ago I, just. I. Added. This oh it's. Not just the top stories so I just. Right-click. On the test, yeah. Yeah. You can. Somebody. Hit my breakpoint. So. This is decoding, the JSON string into that map for me so I'll step here and then, if I look at variables, now got. JSON string. Where's. Parsed. Hmm. I should. Be able to look at you. Hmm. That's, very. Interesting. Are we are we on that are. We below that line already oh. There. We go first. What. In the world who I done. All. Right stop, it. Is. What, the boring show is about, looking. Puzzling, yeah. Can. You just run it, actually. See what. It. Did okay. Okay. Can we can we try again uh can. We debug. Gain. I. Just. Stepped through it. Okay. So that was something with a butcher I think, that was just temporary weirdness. Sometimes. Turning it off and on interesting. No no no I think I think I want, to get to the bottom of this okay can you run it again all right so. Stop yeah, ., and t-back. Do, you I mean. Correct. Me if I'm wrong we didn't change the code right we did not but we, added a watcher, so. Add. As, if you want take the water off. How. Did you edit all, right like right clicked here and said add two watches right. You know what probably. That's. Interesting but but I bet. That. Add. A washer. For article now, this. One here yeah. It. Will complain. Right. Yeah, and now. If you step, through it. Yeah. Well. As. Is. It down we work fine. Know. What so okay so the theory was that if, you add it to water it, will try to like create a thing, by. Observing it we're changing the outcome kind of yeah yeah well. It definitely is like that but anyway so our, tests, pass, I think somehow we, we, got we, got the IDE confused. About which version of the file it was running or I, think we are looking at a more recent copy of the file than the test suite was actually executing, and once we stopped and, started, again okay, we were good well so I'll get, to the bottom of this one, way we're under there and.

We'll. Report back in the next episode, this is interesting anyway, so the. Bottom, line is don't, use Watchers and just. Just run your tests please. Okay. Okay. Good so you implemented, this yes, um that. Took what that 20 15 minutes to yeah yeah and with a bunch of things but, what. Do we want to do now like so this. Is great you can do this and. It's, pretty simple but imagine, that the. Structure. That you're getting, from our API is way. Larger and, it, changes a lot and. You. Know what so so, you probably, don't want to write. These. Things by hand now, we, even showed this by example. When, you were trying to take the chase one of H which doesn't exist right and I I. Saw, that but normally I don't see it so, so, it's, probably, better to generate. These things. So. Therefore. We have source, generation, and those, value, yeah do you want talk about source generation, a little bit because that's the leads, in so built value is a library, that, well. Generate, uses. The source generation, tech, that's. Available in dart. To. Generate. Some code on your behalf, in what's called a part file so you'll have a main file that you use and, that will reference this other file. And you probably have more sophisticated things, to talk about yeah so so 4y, sores generation, and not something else right so the the thing I mean this is my personal opinion but but, I, like. Sauce generation, and socha generation means that, you're, saying okay I just write this kind. Of code and, you'll. See in the in a little bit what. It looks like it's, basically like I want a. Class, that. Kind of wraps around the article, and that class. Should, serialize, to json and deserialize, from json and. That's. And then, the source generation, will create, that, implementation. Of that class which, will do, that work for you and it will. Kind. Of in. Your case you just write that abstract, class that that is just, just saying like what I want this to do and then, you leave the restaurant, to the source generation, what's. Cool about that that you can still, look at the source generate, generated. Source so, you can. Step. Through it it's always code. That you can look at whereas. If, you. Know if there's kind, of some kind of magic, think, that, will. Somehow. Pass your app like like I remember this from other. Technologies. Where where things, kind of just worked, until. They didn't yeah and and then good luck and that yes exactly that you don't know, what's, happening here it's just like it's. Still dart code it's they're still. The same the, same thing that you would probably write it's, just. You. Just don't need to write it so similar. To dagger, in Java as far as I know that were you, know it's its, dependency, injection framework it's, it's. All generated and so, you, can again, look at the code. Yeah. One of the things I don't did you turn the word reflection at all no, okay so, and the reason he didn't mention the word reflection is there is no reflection and flutter, because. Flutter compiles, to a, completely. Native arm, binary. And so, you don't I don't I don't think you have the ability to do even if they wanted to code in reflection I don't think that that. Really works, why yeah, I don't know that but actually I know there is no reflection in flutter its, disallowed there's a dart mirror library and I believe that's the reason yeah. So. There we go just okay. So built value uses. Source Jen built value is itself a package. So. Yeah before we go to bulla so using. Source Jen you can actually. Write. Your own sauce, generation code, which. Is great and. One. Of you. Know our friend David Morgan did, just that he created, a bill source, generated, library, for, build. Value some what is a build value so, a built, value is a. Class. That. Is immutable, once it's built you. Build it using a builder function, so, you say make me a new built value here is this method to populate, it full of data when. You make it and then once you do that you can't mess with it it's immutable, you.

Can Pull you, can use getters to get the data out of it but, you can't change the contents. And. It's. Like data Clause or like value class basically, yes like, you know in a lot, of languages have you know a mutable map immutable lists immutable, this and that this, is an immutable value, type for. Dart why is it called built value, because, of the builder methods yeah yeah. So. This, is the package on pub you, can see it's already in version five this is a pretty popular. Package. That a lot of people use. David. Is also written a bunch of articles about it which are really great if you want to check this out I highly recommend them I've. Read through them both at least a couple times. So. Let's go. Look at his example. Get. This going I don't think I think our gonna run out of time here in about ten minutes but we can probably get it integrated, yeah, yes, the package itself yeah. There's. A readme here that I think. Will. Give me the. Imports now let's go look at his example. So. We. Need, okay. So we did dependency. For there's, some dependencies, here and there is we have dependencies, for running, it and dependencies. For the development, environment itself, for. When you're building it because there's actually dart, code that's going to be used to generate the, source so. Source gen, itself is Dart and so. I'm going to basically copy, these wholesale out. Of his example, and stick them in our example. So. May. Be a good point for me to talk about so, dependencies, versus dependency, dependency cell, phone sorry. Development, of appendices, so. Oh. You're. So. So. Dependencies. Are the things that your code, uses. And the. Libraries. That will probably, maybe use your package, will, want to use development. Dependencies, other things that you will need for development, so in, this case we, need the build value and build collection, to, action, for our even. The flutter app to work because, the. Build like our. Article. Will implement. Build. Value and. We. Won't. To. Add the, built, Runner and build value, generator dev, dependencies because. A we want to run the build Runner which we'll show. You in a second and then. We will also, need. To generate. That source, source. Code right which, is the built that a generator into a package is again. This. Will hopefully grab. All these me next one so, now if I were to go down into my external libraries, which. Are open here should start snares built collection, bill. Collection is the built value for collections, like lists so you can have a built list that. Is also immutable built, values down there I'm, so is, this. Should, it be like indentured labor yes yes probably let's, just we'll, just check on them. Well. Whoops there, we go I'm sorry did. I break it analyzer. Okay. That's up by the way this is a really. Or. Even bleeding edge of floater here, mmm. I don't think so uh. Flour. Taste from SDK, flutter, mm-hmm. And. Can. We just though okay, so. Can. We just remove, that line I don't know why why there's, SDK, just. Let me know we're, not gonna run tests without the, SDK its flora, just. Hope I don't. Say Annie or something okay it's, turning it. Depends. Afford us any which doesn't exist. Interesting. Okay. So, we, have a dependency, issue here, and we solve dependency, issues. Do. You that's not gonna get me where I want to go. So. Let's look at the pub spec for, built value itself. Where. Are you. That's. Five days ago. Hmm. Okay. Can I look at the what. Papa tells us so fill your generator look at the wrong time. What, did it actually say though so, it's complaining that we have a dependency, for the analyzer here 0.2. 0.3, 2.1. And. Flutter. Test itself. Let's. See i'm guessing that's github. Yeah. It's, if. We go look at the pub spec for this one. Analyzer, alpha 2 Oh. H. Which, is pinned right. This is not alright right. So. We. Might need to go back version. Maybe, I. Mean, build value. Listen. History of this what, did this last chance it's 25 days ago. So. Quick hack I have a quick hack can. We yeah sure ok go to pop spec mo of our class and just. Do any everywhere. In. The in, the ones that we wanted to pull and so this this. So any sense, hey I don't really care about the X I just can give me something, is. This gonna pull in the most recent one and that's still yes yes. Right. So so. That. Means that be probably, like 25 points of one version bad right now you. Might. Might work you. Actually right like I like, to write an e so because you shouldn't have that we already have it you know you are launcher.

One. One quick hack is to just say hey, like. Give. Me any and. Then. Then. Look, at top spec walk and. See what, exactly, you got and then pin it on that version right, so, you can see oh I actually. Got, me. To. Do. What. Build value like five five one that's fine and I also got five five one year and 5.0, okay, alright. So now go back and pin them, yes. And. But. You can start with the carrot the carrot says, anything. Can a still. Sender. Compatible. To. Five five one is about so five five x. And. Maybe. Even five, six X, and these, are the kinds of things you know when you've been on the team for more than two months I guess I. Look forward one day to having these you know like wow well, I. We shouldn't know this we, shouldn't have to know this better anyway okay. Yes we should point out this will get fixed this is just a this is a dependency. Yeah compatibility, issue, this will this will get fixed it, probably is fixed and master actually and, flutter test right, yeah. Okay. So, right we, know this now we. Have the we, have the packages, let's. Go okay, so, now, we do the packages, get right, now we can go look at how. To actually do something so. Let's go back into. This. Example cuz I like using examples uh-huh, and, look at bill value. Example. So. Let's take a look at some code that already exists. So. We have some values here uh-huh. So. Each of these classes inbuilt value actually write them as an abstract, class. Right. And then. The part file. Up. Here this is the part you can see the g4 generated, that's the naming conventions, that's. Going to contain an implementation. Of this class if. I'm not mistaken that has, a whole bunch of generated stuff in there for, making. It a built value so let's go look at that real quick and. So. It's got the serializers, in it. There's. A very simple value builder, uh-huh. Which is going to, write. So this all. This code is something, that you don't need to right now that will be generated by the, Jenner, source. Generator, source, gen source, Chen, but, you can still look. At this so, let me see I'm gonna go back to the. Docs. Real. Quick just. Wanna. Get another tab open here so. Thank you as an example for what your, class. Should look like yeah. Here's the live yeah actually the live template, for IntelliJ, hmm, so I actually have this in my IntelliJ, IDEA I'll go in Android studio as well actually. Would just. Do that right now yeah yeah let's let's edit Android, studio preferences. And. Live. Templates. Yep. I have a bunch of life that was oh yeah. You do. Yep, somebody. Put it it's not actually instead of. Okay. Nice. And then we'll define a context, this would be in Dart, does. It need to be top-level, I think I think so. And. Okay now we'll go back into our JSON, parsing. Here. And. Let's, let's, just comment this out for now uh-huh, you go away for now, get. Rid of that for now as well. You. Can return it all just to get rid of that error message, right. I don't know what. I'm, just getting rid of all this I. Replace it. Hey. Fun. Fun fact just so that you know you. Can just do this. And. It, will be casted. For me more yeah it will test it for you because it knows that your, meaningless, offend, there we go okay, so let me go back up here. And. I'll use my built there. We go yep. So. I'll call this article stone mmm-hmm. And. So. That. Is. Giving. Me the basics, now imports, package. Don't. Value. Uh-huh. And then, I need to do. My part file so this is something you would put in so. We. Should really be listen to its own file a second, yeah. That's fine just like that, I think. You know G. Yep thanks ah. So. Which doesn't, exist yet also, I think they're, the life template failed here you, won't. Understand. Son, and then article yes and. The. Maybe, not though. We. Keep on them I think, it's the first, one is I don't know it'll. Complain anyway so we'll. Find out okay now we need to run source, gen right mm-hmm. So. Bill. Value also gives you a little tip for this good, back to. You. So. If you're using flutter and here's the exact command which, I can just run from the root directory of this project, can. I kill this absolutely. Yes okay. And. This is our app right mm-hmm, so. Let's see what happens if I do then. It's. Good I think it'll give me an error about Dart UI that it gives you every time well, there. We go severe okay. Error and bull value generator so we did, not do it, right. Which. We know so, so, that's, that's, missing. So. The cool thing about bill value is it will actually tell, you hey you are missing this please. Add it, like. That and it actually will also, notice, though there it is yes. You're right we need that dollar sign in there yeah that's what it's complaining about, so. Is it that though I would be surprised, but let's, see oh you. Give a little favor huh I. Think. We'll still get the dart UI err.

Yeah. One of the nice things about built, value being on, version, 5 point whatever is that they've really worked out a lot of the common errors and produce, nice, error messages, it's, something I like about working on flutter in general like E and on the team you. Screw up something in your in. Your code you get this paragraph long error message saying like here's what's wrong you probably did one of these three things here's. An article so, here's what I like about this so we it, work. It, knows that it's always the same thing so it actually created. A hash code that is like. It's. An actually constant, which. Which I just love and. And. It, also has, all these things that we don't use. Yet because. We don't have anything on the article, class yet so, how. About we go back to the common line and do build. Runner watch, instead, of built so. You can see the kind of the iterative, process so we can you. Can just go back to the command line do do watch instead, of belts so build run and watch well, watch the file system you know watch, the power system it will still take, its time to start, but. From now on changes. Get like. Get. There very fast, so. Okay. Now let's go back yeah, so. You know question how do we add the fields on here right yeah because they're gonna be getters they. Have to be getters because weren't this is now an immutable class, so. We can add. An, inch can't. I do you like that or, is it a final let's, go. Yeah. Into gate yeah yes. Yes so, so you're, saying on the on the kind. Of the, main class you're, just saying I want to be able to access ID, of something. Like that and so, did. It update already. It. Did okay so so the this probably so. It's. The. Sauce, generation, sure for, Bill fell you knows that okay so it, wants a ID, class. Yeah. And also, it. Will if, you go to article builder that's. The class that you will use for act like changing, things, which, you will probably not actually be using, but if you scroll down to article builder the. Article builder has, and getter and setter for ID so, so, you will like.

If You if, you. Provide. The article, class, itself, that's immutable, you can change it but, the. Article, has. Something. Something called I think to builder which. Will give, you the, builder class and then you can change anything about that so, so, that's really nice because like if you want to provide, just a mutable class, you, will just provide article, and in, our case we'll just do that but. But sometimes you want to, modify. The class and provide, another immutable. Article. That is different. But coming, strong and a woman yes right. Okay. So we are now at like an hour in ten minutes oh wow, okay do you want to call it now and we can finish this up in the next one. Because. I'm worried that this will take like ten minutes instead of two to just get the serialization stuff, working yes yes all right that so so we we've. Covered, a bunch of things we should recap, yeah, recap. All. Ready to listen to you alright, so, recap. We we, started with a buck we, fixed the buck we, look at which, is testing, we. Showed, you how to run. Your widget, test in an emulator so that you can see the engine working. We. Did. Did. We just oh we, we, wrote, some, failing. Unit tests for the JSON parsing then. We went, straight to implementing. It into like the manual add. Out convert, way which, worked. Then. We found a back of, weird IDE, thing. And. Then we. Started, playing around with build value and we, showed you how to like you know the starts, of having. A build value, think. Which. Is immutable and stuff like this and that's, where we yeah. So this is this we're talking about getting communication, going back for this would be a good thing if there's any part of what we just showed that you feel we skipped over or went too fast on and would like more information we. Can start with that next time and go into a little more detail so a comment, on that that would be great if. You'd like some more detail about anything that you just saw it sort of attempt. To cram into about. Sixty. Five minutes yeah yeah and also if you if if, a lot of people feel like this is just going like, too slow and we, should like, skip over things, or. Maybe just like for. The next time, we already have this built and, we just show you things, that's, also fine because you know next time mmm do this yeah that, n quit you undo the hashtag again yeah. Don't forget if you have questions about flutter in general or the show or whatever, hashtag. Boring show and. Well this one yeah, oh just, coming under the yeah, or comment on the video now, we responded, to a bunch of them as hopefully also okay.

Anything Else we good no yeah alright thank. You see you next time l.

2018-06-28 16:06

Other news