Category
📚
LearningTranscript
00:00Welcome back guys. I left you with a little coding challenge before we close
00:04off this section but I had some troubles testing and I realized that I
00:10inadvertently left some errors in there due to copying and pasting so you know
00:15to be always be careful when you're copying and pasting but as usual I point
00:20out my mistakes because in case you made the mistake or in case you're getting a
00:24certain error I want you to be aware of why right so let's go to the API so if
00:31you didn't have these errors kudos to you but I'm pointing them out regardless
00:34so for my API for the post I had inadvertently left in the int ID
00:41parameter here so when I was testing the I was getting an a 405 error or 400 bad
00:49request actually because then the API response basically was that I didn't
00:56form my request properly and it couldn't process it so when I looked it was
01:01expecting me to pass in an ID which of course we know if we're creating the
01:05card there is no ID to pass in so that ID parameter should not be there so if
01:10you have that ID parameter please remove it if you saw the mistake I made and you
01:15didn't make that mistake then more power to you you're on the right track so you
01:20can go ahead and remove that that should take care of any issues that you may
01:24have had with the post another issue or two other issues that I ran into were
01:31with the put and the delete now this one was peculiar because I had we had tested
01:37them when we ran it locally however when I deployed it and tried to run it with
01:42a mobile app I was getting a 405 method not allowed so 405 method not allowed
01:49pretty much means that you're trying to carry out an operation that is not
01:52supported or you're trying to carry out an operation against a verb that is not
01:58supported by the API you're trying to talk to so if you try to do a get
02:03operation with a parameter that you weren't expecting you get a 405 method
02:08not allowed because there's no get parameter that matches the request or
02:12there's no get endpoint that matches the request you're making so peculiarly
02:17enough I was getting that with the delete and the put it turns out that one
02:23is not code deep but that one had to do with one of the IIS features that I had
02:33enabled so I had shown you earlier what you could enable for your IIS and I'm
02:39going to show you again what you should disable for your IIS so go to your Windows
02:43features under internet information services you want to go to World Wide
02:49Web common HTTP features and then you want to make sure that webDAV is not
02:54enabled so interestingly enough this would actually limit some of the
02:59operations that we can carry out or cause at this point unnecessary
03:03complications so make sure that this webDAV publishing is disabled and that
03:11might require a PC restart but let it go ahead and do all of that and then if you
03:17were to test your API your deployed API even through swagger then you should be
03:24fine because even through swagger I was getting that 405 not allowed at first I
03:28thought it was a mobile app you know the way we formulated a request but it was
03:32just the deployed API just wouldn't work so that solves that problem if you
03:38were having it if not then no no problem now let us move on to our refactoring of
03:45our API service I left you with the well not the service the list view model I
03:51left you with the challenge to refactor everything else so we did the get
03:56carless together and we were supposed to refactor the rest of the view model
04:03now there are a number of things that I'm going to point out that I did and
04:08I'm sure we're going to be on pretty much the same page but of course we're
04:12just comparing notes and I'd love to see what your refactor looks like if you did
04:16something better than I did I'd love the feedback regardless now let us firstly
04:22take a look at this little line right here line 17 for me in the carless view
04:29model says network access access type is equal to connectivity dot current dot
04:33network access now the scenario that I'm going for which is why I'm invoking or
04:39implementing this object of type network access is I would like that when I am on
04:48the internet I use the API or if I'm not on the internet I use the local
04:53database now I've actually worked on projects in the past where the the
05:00solution needed to operate in a particular way for field field agents
05:05right so in my country there's a lot of agriculture where field agents who have
05:10to go to relatively remote places to interact with farmers and so on and have
05:15to collect data while they're out there they don't necessarily have access to
05:20the network because like I said it's very remote so they may not have access
05:24to high-speed mobile internet let alone Wi-Fi right so we build the app such
05:30that when they're out in the field with no connectivity when they take the data
05:35it would store locally to the phone however when they are within the cut
05:40within range of proper internet or a proper connectivity then we would
05:46actually download all the new data via the API and synchronize with the central
05:52database so that is just a scenario I'm sharing with you right but in this case
05:58that scenario might not necessarily exist but why not try it right so
06:04network access is an object that allows us to check what kind of network the
06:10phone is on and then we can make a decision based on that so I've included
06:16that new object I've also included a new variable called message which I'm just
06:21going to use to store the message that's coming back with the API or the database
06:26responses so that we can show our alert so let us take a look at the get car list
06:33and the quick refactor that I have done so here I am saying if access type is
06:40equivalent to internet then cars should be get cars from the API service
06:46otherwise you can use a local database and it's really that simple so if you
06:51need to make a decision whether you want to use a or B or whatever based on the
06:58network access that you have on the mobile device then you can use this
07:03enum so you see here you can say if there is no internet do this if it is
07:08local do that right so I'm saying if it is internet then use the API otherwise
07:14whatever else it is use local so if it is like you want to build an app that
07:19does something different over internet versus over local connectivity right
07:26then you can do all of that accordingly so that is the refactor for the car list
07:34now for the safe car I have implemented this method by the way called show alert
07:42right so show alert is really simple all I'm doing is just getting a message and
07:47then I'm just displaying the alert with that message on the ok button so we
07:51don't have to repeat this line all over we just call show alert and send what we
07:56want shown so with the safe car or even with our get car list I'm using show
08:05alert here instead of the shell dot show alert or display alert rather right so
08:12for safe car I'm going to show alert with the message right and then later on
08:17I'm going to say if car ID is not equal to zero then obviously we're doing an
08:23update and then I'm doing the same check if the network access is equal to
08:27internet and then we pass over the message afterwards or as I set the local
08:32message rather so whether it's internet or not we're going to get that status
08:37message set it and then at the end of all of that we just do the show alert so
08:43the only real difference here because we already know this if else if it's edit
08:48mode or if it is add mode pretty much we know that if statement so inside of
08:54those if statements I'm just adding the if internet then use API otherwise use
08:58database if internet use API to add otherwise add it to the database and
09:04then for the delete once again very similar we changed out the this the
09:09display alert to say show alert and then we have our access check and here's one
09:18thing that I need to modify which is to show alert with the message there we go
09:23all right and pretty much that's it for the refactor of the car list view model
09:29now let's jump over to the car details view model and page and look at the
09:35refactors that I have carried out so first of all I am injecting the car API
09:40service so we have the constructor that initializes a local copy of that and I'm
09:47also doing the same network access check right we have the same observable
09:53car and ID properties and we know that we were setting initially we're setting
09:58both on apply query attributes so I've modified that because our API service is
10:06going to want to make an asynchronous call so if I try to do that inside of
10:10this method then I would have to try to call it with the dot wait at the end of
10:15it so that would now look like car API service dot say get car with the ID and
10:24then I would have to say dot wait because it has to well actually dot
10:29result right and then that would kind of make it call synchronously or try to
10:35make it call synchronously which could cause problems right so I've removed
10:41that and when we come here and we initialize they are we retrieve the
10:46query properties we're just setting ID I've also made another method here I
10:53have made it I command but it's not really going to be a command so let me
10:56remove that it's not really a command within the concept of commands and
11:00notifiable properties and so on so what I'm doing here is I'm saying get car and
11:06then I'm doing the check to see if we're on the internet or not and we call the
11:10API versus the database so for the page itself I've made some modifications
11:18again so we know that we had our constructor already where we initialize
11:23components we set the binding context but I've also added the injection of the
11:27car details view model so I've initialized or set and initialize a
11:32local field for that right so initially we had it coming in and just sitting it
11:36as binding context so I've made sure to also do that field initialization then
11:43instead of doing on navigated to I'm doing on appearing and the reason I'm
11:49doing that is I'm overriding it and making it a sink so because I have no
11:54one asynchronous method on appearing when they when the page itself is
11:59appearing not when it's navigated to like last time because we already went
12:03through the flow of how things are a lot of things are null when it's
12:08navigated to but on appearing that means it has already been navigated to and now
12:12it's going to come up on the screen so when it is coming up on the screen go
12:17ahead and get the car data and get car data once again is just setting up our
12:22car object which is the observable property it's setting up that car object
12:27and so in our XAML file and I've just added a few more labels I've just added
12:33labels for make and model so it doesn't look so you know anemic like it did
12:39before but by the time it appears that binding context would have already been
12:45updated the car data would have already been set and that data is ready for
12:49display so let's take a look at that so from our list that refresh that quickly
12:55I can now click so I'm going to go down to one of those test ones when I was
13:00just adding so just to test that the adding works if I just put in some
13:05random stuff add car we get our insert successful and then the list would
13:12refresh when we scroll down we'll see that's the one I just entered if I tap
13:18it then there we go so DDD that's a make DDD GGG and the VIN GGG right
13:24there's some random stuff obviously that's garbage so let me just go ahead
13:28and delete that one delete was successful and there you can see it's
13:32gone so I'm just going to delete all of the rubbish records that I'd entered
13:38right and there we go so our data looks good again so if I tap one of these we
13:47see Honda stream ABC of course we can do a lot more to make it look better but
13:53for now our app works once again be creative