Building an Ionic 4 Pokédex with Search & Infinite Scroll

[Music] hey Boone what's up this is sign from deaf dekhti today with a slightly different tutorial because over the time I encountered a lot of problems people had with just the regular topics of ionic so today we want to build a full application not just a specific part and this application will be a cool pokedex based on the poky api so we're gonna use API calls we're gonna use JSON data we're gonna use the routing we're gonna use infinite scroll skeleton text search bus so a lot of components that all of your apps might need and that you might still have problems with or you're just getting started so just follow along to build a cool pokedex I've already created my a blank new application as always and then I also generated a page in a service for our application but right now that's actually the poky API we will maybe take another look at this later right now the application is still completely empty and the first thing we're gonna do so if you don't know it if you're completely new of course ionic serve runs the application on our browser for now first step is to include in our app module the HTTP client module which comes from and angular and angular common HTTP so we need this to make any API call at all put it to the import and then we're good next thing is to go to the App routing actually ionic automatically creates this new route for our details page which is okay but normally if you go to something like a details page you're gonna pass an ID to that page so the page can load the information in our case we will move from the home page to this page and let's call this maybe index because we will pass the index of the Pokemon so we can then retrieve the information on that page one more thing I also did actually was to change the styling so therefore simply go to the theme variables file and in here you can change all the colors and I will just apply a little red color to the primary block so that looks a bit more like the Polka Dix in the real world and who's spamming me on my device all the time please stop it anyhow save the routing save the CSS and then let's continue with the pocus service so first of all of course we want to make API calls therefore inject HTTP HTTP client module and of course this is wrong interesting hey Siri somehow was triggered in Gaelic um an HTTP just like the other one but the other one was the module and this is just the implementation we need in here then I created two base URLs so the first one comes directly from simply checking out the poky API so there we go that's it and that's the base URL for making your calls and when you make some calls whatever this is you will see that it's some position in the JSON response there sprites and they contain the image and the image is actually always the same pet so you can copy this put it in here and see that's 132 whatever but you can also use like five PNG so what is this we can simply use that URL as well and so I've put it here and then we will append the number and the or the index of the pokemon that we want to retrieve so let's start with the first one to get a Pokemon list let's set the offset to zero so this has something to do with our loading more information later with our infinite scroll so basically we return this to http get the URL and I will format it a bit better so this base URL and after the base URL we can add some query param we also have to apply which wrote we wanna query so in this case in the general case you go for slash Pokemon this will give you a list of normally 20 elements but you can change this so you can change where it starts that's the offset and in the default case we will just start at zero and we can also add a limit and let's set this limit to 25 pokemon for now so to see some more of what I do let's actually go to our home page and inject the service we just created which is the polkas service pokemon service and then let's do this right in the init so let's say implements on in it from angular core and then ng on in it but perhaps we will also move this to another function so we can call it later from another spot as well which might be a good idea in most cases when you load some API data so then poke a service focus service dot get Pokemon we actually don't have any offset right now let's just create this and set it to zero so we will have a bit easier later subscribe to the result which will come back of our as in call and then let's just lock out the result so now we should see the first data because in our uninit we call the service the service makes the is poker service get Pokemon is not a function yeah does not exist on Pokemon service yeah it definitely does exist sometimes the ionic serve is a bit out of sync I think simply hit restart in that case what we now need to do is work a bit with rxjs so we're gonna have to transform the data a bit because you will see or notice something now what we get back is a result count next call we could actually also use that URL but let's just stick to the offset and limit and here we finally get the result of our call the problem at this point is we only get the name we don't have the image so we need to transform this response so that we only get the results and also that each of the results contains the image and now thanks get interesting so we're gonna open a pipe lock which is basically working a bit with the response that we get here and then we can map the result of our call which is let's call this one result to something else and you can import the map operator from rxjs operators so that's pretty easy so in the map block we can now change the result this means we don't want all of this we just want results so we can simply say return result and the position results the result of this it's a lot of result right but the result of this is that we don't have this information here anymore and also that we directly get back an array now so that looks a lot cooler but we of course don't want to stop here we want to also get a Pokemon image so let me bring in one helper function using the image URL you've seen before and appending the index for a Pokemon and now in the pipe lob we can do a lot more so there's really a lot you can do with our XJS we're just touching like really the surface we're only using a bit of map in here so in here we got an array of Pokemon remember this one step returns the results and now for each Pokemon in that result pokemons we wanna again map this one Pokemon and we will also use the index of that Pokemon in that array so I hope you can follow me that's like a full loop on each of the elements in that array and we want to set the poker image so that key doesn't exist but that's no problem we're just setting it you see there's only name and URL yet so we set pokey image to this get poker image and now the index is interesting because if we lay to make a request then the index of this array will always be 0 to 90 so we also have to use the index plus the offset that we passed to this function and also plus 1 because it starts at 0 and the images starts at 1 also to make this a bit more easy in other places we will use the pokey index in here as well so that's also offset plus index plus 1 you might see that it's the same and then don't forget to return poker because otherwise you won't get any information so now this might look tricky but we've gone through this step by step and the result is now that we make one call and get undefined as a result yeah of course we also need to return the general stuff this is just the return in this one mid part but of course the outer map also expects a return ok now i've completely messed up everything yeah so of course in here we return the one item and outside we return everything else now the result is image name poker in next SC this continues now up until the end we're right now in the service so let's maybe just and now let's not do this let's continue with the homepage and the actual results so let's have an array of Pokemon and then this third Pokemon equals our result of the call and for the view I will actually use a list and copy in some code color primary that's the one I find up front def deck take poke Dix and in here let's use a little list so we get to rate overall the Pokemon well let's skip this for second we have an avatar using the image so that makes it real easy if we make the transformation of the data in the service up front at this point otherwise we would have to make another function call here to get the real image URL and then we got the poker name in the pokey index which is not also easily accessible and also this will help us to get to the details page because this will simply append the poke index to our URL and because we've set it up to be home slash index we will land on the details page so let's see that looks pretty great so far 25 pokemon and we can go to the details page but that's not implemented yet what do we need as well we might have or might want to use a real out logic so to do so we're gonna have to get back to all-out pokemon and let's implement load more equals false so we can call this function now in two ways the standard way which is just like it is before that if lot more is set then we want to set our offset to 25 plus and then this would get a different result from our API also the question now is if this stud offset if this the offset is bigger than zero because in that case we're not setting the Pokemon we just do this in the very first case but in that case we said this Pokemon to be actually we can do it in a different way as well but what I want to tell you is then in that case we have to conk out the array and just conquer I won't refresh the view so you have to replace the current array that's a very common problem you can do this by using everything from a current Pokemon array and then also using everything from the result but I just thought that actually in the 0 case we could do the same as the first array is empty and we're using stuff from the second array so hmm um you could use this also for the infinite scroll we have to add a reference to the infinite scroll so we will pass in this event and if event is set we will see event that target complete that's actually copied from the ionic documentation but that's also a way to use it a different style let me bring in the actual HTML snippet because all this HTML stuff isn't that interesting so that's just the standard markup of the iron infinite scroll once it is triggered we will call load Pokemon this time true remember we want to load more and this will pass in a reference to our component so we can also access the ion infinite scroll by saying add view child ion infinite scroll and I don't know what we want to call it let's use infinite infinite scroll so then you also got another reference to the infinite scroll and you can use this to let's say this start off said is equal to 125 we don't want to alert after 115 we can say they start Infinite disabled true and then it won't be or we can trigger it anymore so let's see if what I just said is true we can scroll down it loads more it appends all in your Pokemon to the list and you see 25 fresh results and normally they would have the wrong Enix or the ID but we'd set it using the offset in our service so everything is fine and let's scroll down 125 and then 150 and it is over images okay they're still loading so everything's still fine and from the small URL coming up in that left corner you can also see all the different links to our details page that we will have to implement in a second as well so far so good I think we are already 20 minutes in the video so let's hurry a bit up we want to have search functionality as well so let's add a search bar place our simple eye on change and on search ange or on eye on change we call a function so let's use this function to make another request to our API actually we have to or we could get the value directly from this so we don't need any ng model or form control really don't have to use this but if the value is equal to an empty string we will simply reset our offset and call load Pokemon again and return because in that case the search doesn't really make sense otherwise we're gonna have to search and for that let's jump back to the service so our service takes play takes care of all the important things just like find pokemon with a given value or I think let's call this search makes more sense perhaps for this beginning because we're already quite long into the video let me bring in the logic again we're just making a get request to the standard API if the search matches we will get a result so we will not get a result for just like B or B u we have to type the real name or the real index of the Pokemon and once we get that Pokemon we perform the same steps like before we get the Pokemon image and we set the poky index in that case it's actually a bit different because can we can we get this like if we call this for one Pokemon we actually get back a lot of data in here there should be some ID yeah that's actually then an ID field which is not included in the initial list so we can simply use that field in this case to wrap this up so we can close and forget about the service let's just add another function which is once we hit the details page as I said we can get the for poked details with this route maybe we could have just used find Pokemon as well in that case hmm could work as well hmm yeah well let's just have another function so what we need in that case is a bit more tricky because can we see the sprite object so the sprite object contains not an array but come on can I see this more structured somewhere no I can't I'll just comment this out for now so we can see it on the details page in a second what we were talking about the search right I just wanted to finish the service bird I'm sorry for that so let's jump back one last time to our coca homepage and simply call our find Pokemon the problem is that if there is not really anything found we enter an Arab block and in that case we should set our list to have no results otherwise we would see the old results and that wouldn't make sense but if we find something normally there's just one name for a Pokemon or ID so we can set our whole array to this and what happens now is that once we trigger the search we will call this functionality and then let's search for an ID okay we get Golduck and if I search for Golduck we will actually also see it if I search for bulb we see an error and an empty array and if I search now for the correct name we again see the result because we're already quite long in this video I will just trigger a small information about the skeleton text you can also read more about this in the according a tutorial link below this video for apps like Facebook and many other mmm okay interesting fair enough then I say I don't know they have something called like a skeleton tick so when there are no results and they're waiting for the API data they display something in place and we can do this as well I came up with something which basically mimics the behavior of the real list and which would be displayed if the Pokemon length is zero this case basically never happens because the API is so fast but we can do this by doing a run search and then we see this cool skeleton text effect which looks a bit like the entry so the user thinks there's something loading if you have performance problems or just one the general better user experience skeleton texts are really awesome and easy to implement ok I think we're actually done with the home page because we got the search we got the infinite scroll really a powerful pokedex so far but let's quickly over to our index page which is still a bit empty so because we're long in this video let me check 22 minutes okay not sure if you are still with me I hope you're still with me if you are please already leave a comment in the like below and follow the channel and everything else because there's a lot more about ionic in this channel and also about development in general so on the details page we first have to implement button at the top so we can actually move back because right now we can just use the browser to go back which is maybe not the best behavior then I've also entered the title and this class which is actually a helper class from ionic to make a text capitalized previously you could also or you can still actually use it like this it's basically the same but I'm not completely sure if at any point they might remove like it is in this case so I will use it like this just to be sure because that's a new way they recommend for us and now we need a way to find out which Pokemon we got by getting the ID from here that's also standard thing we'll angular you just go ahead and inject the activated route so from the angular router and on in it what is read why why read and then you can get the index simply by saying this start route snapshot param map get index and once you've done this you can call the poker service so private focus service focus service this stud poker service get poke details with the given index subscribe get pick some details and for now let's just lock them out details details that's how it should be called and we can already set it to our own details so we can later use it in the page but for now let's check if we actually get back the data and there we go all the information about the Pokemon with the data we are now able to display different information basically and you can just look at the Jason that you got and simply go over the keys that you want to display so for example the sprites as I said in the beginning this is just right now an object so that makes it ur ating the image is really tricky and therefore we already were implementing this so let me comment this in and explain it what this does is basically first of all transforming what we've seen here into an array so then we got an area of all the keys and then we again map all the keys from that array and use the actual object at that key so that's a bit tricky also this filter in the end simply checks if the image is now you might have seen that some of the images head and now for the value and then we set it to the images key which is not yet defined and then you see a nice array of images so because the video is already pretty long let's just do something real quickly so ng-if detailed so only if we got the detail this makes it a bit easier and safer to use all the values let's start with a simple eye on slides for all the sprites of details images again because we've done only data transformation in the service we can now easily use it in our view and you can also assign some options to the slides let's just keep them empty for a second and reload also you see because we've defined for the route home 1 how the page works we can easily reload on that page and don't have to navigate forth and back all the time so there we got the nice images also if we never go to Charminar we see all the other images and within the slide options now you got a lot of things you can define you can check out the swipe our API which is the underlying component for this case I just brought in something called autoplay which does exactly what you might think it will simply automatically play the slides and with a little delay going through all the slides so I'm not clicking right now but the slides are moving also disabled on interaction falls is simply if I now scroll normally it stops but now it continues immediately for the rest of that page I think it's not super interesting so let me just bring it in in our ng-if don't be scared about all the stuff and let me show you what it looks like and then I'll also explain it so this is a nice handy explanation of our Pokemon let's see where all these components come from actually I can click this pretty cool so the card header is details ID and name and then I go simply through the types so always keep in mind this is our structure look at it if there are these brackets it is an array if it looks like this it is an object so only arrays can iterate it pretty easy with the ng 4 so we go over all the types and then you just have to dig into the information so if you go over all the types then at the first position you would have this object and then to get the real name of the type you have to use type dot name so that's just the JSON structure let you need to follow as you can see we go over all the types T type name and this is an ion chip pretty nice component that looks cool let's see if there's some Pokemon yeah this one got to looking cool so the weight is pretty simple also like this and then again just on I own card list items that's just the basic structure of most ionic stuff and you can really go crazy with the ng for let's say you go over all the abilities then check out the abilities first if you got one ability you have to get ability name so ability name and also if you want to separate it with a comma you might want to prevent that there's a comma after the last entry so you can also add this to your ng 4 iterations in check if it is the last item and also for the stats that's actually not super interesting that names their base dead all the information contained in the Jason so that's the tutorial on creating a full pokedex application with ionic I hope you enjoyed this type of tutorial if you want more like this or got any api's that you would like to see an action please leave a comment below of course make sure to subscribe check out my ionic academy which is the place to show you the best possible way to get started and learn how to build great ionic apps I would love to see you in there in the next video where I hope you enjoyed it have a great day and take care [Music]

Channel: Simon Grimm

Views: 9,975

Keywords: ionic, ionic framework, cordova, angular, javascript, html, css, hybrid app, cross platform, ios, android, typescript, web development, ionic 4, ionic 4 tutorial, ionic 4 course, ionic 4 app, ionic 4 for beginners, learn ionic 4, ionic 4 angular, ionic4, angular 7, angular 7 tutorial, learn ionic, ionic for beginners, ionic tutorial, ionic angular, ionic guide, ionic course, ionic api, ionic 4 api, ionic 4 pokemon, ionic 4 api call

Id: Nc1RqvDY-B8

Length: 30min 36sec (1836 seconds)

Published: Tue Aug 06 2019