Cocktail Mobile App with Ionic and Vue 3 - Part 2 Drinks By Ingredient

hey what is going on everybody it is rob aka the diligent dev and welcome to part two of our ionic cocktail app using vue.js now in part one we implemented a random cocktail tab and i'll leave a link to that in the video description below and in this part we're going to be implementing search by ingredient so let's go ahead and jump over to the computer and get right into it okay so here we are over the computer and i have our project all loaded up on the left hand side and on the right hand side i have our app running and all i did to do that was go down to the terminal and run ionic serve now since we want to start working on this second tab for the search by ingredient i want to change the tab icon and also the tab name so what i'm going to do is head to src views and tabs and down here at the bottom we see our imports for our icon and what we're going to go ahead and do is get rid of the circle or ellipses and replace it with pint and then we're going to come up here we're going to find that we're going to say pints and then i'm going to change tab 2 in the label to buy ingredient and go ahead and save everything and you'll see now we have a pint and by ingredient as our label the next thing we're going to do is work on our ingredients list so we're going to head over to tab two and what i'm going to do is get rid of this explorer container we're also going to get rid of the import and the component registration and then up here at the top of the script tag we're going to import some things we're going to import reactive from view so we can set up our states we're also going to import axios from axios so we can make our ajax call and then actually above here we're going to import use router from view router because we're going to be using the router in our template to navigate to the next page when someone clicks on an ingredient underneath our imports we're going to declare an interface and this is not something i did in the last video and it's something i should have done but after we're all completely done with our app we're going to go through a refactor video and refactor a lot of the logic so don't worry about that but we're going to create an interface for our api so we're going to call it ingredient and we're going to say str ingredient 1 and set that to a string next down in our export default we'll do our setup function the first thing we're going to do is get access to the router so we're going to say const router equals use router and then we'll set up our state so we'll say con states equals reactive and we're going to pass in an object and we'll do lst ingredients and we're going to set that equal to an array and we're going to make it as ingredient array and then we're going to do loading for our loader and set that to false next we're going to create our method to grab our ingredients so i'm going to say const fetch ingredients we're going to set this equal to an async function i'm going to say state dot loading or loader actually we're going to change this to loading state.loading equals true const res equals axios dot gets we'll head over to the cocktail dp api and we see to fetch a list of ingredients we're going to choose this one right here it has an i in it so i'm going to go ahead and copy that and we're going to go ahead and paste that right in here it'll scroll up a little bit so we can see better and we'll say if res.data state dot lst ingredients equals res dot data we'll do a question mark to check to see if it's null and then dot drinks now it is kind of weird that it is dot drinks because we're getting ingredients and you'll see we're getting a little red squiggly here and that's because we have to await this axios call now our ingredients do not come back in alphabetical order and i would like them to so we're going to do a little sorting on this so we'll say states dot lst ingredients dot sort and we're going to pass it a function we'll say a and b and we're going to return a dot str ingredient dot local compare b dot str ingredient one and that will go ahead and sort our array in alphabetical order and then down here at the bottom outside of our if statement we're just going to set loading back to false now i'd like to display an image of the ingredient beside it in the list so if we go back here and we look we see we get these ingredient thumbnails and what i'm going to do is just go ahead and copy this one and you'll see that it has the ingredient name right there and then we're going to grab the small png so in order to do this we're going to create a new method so we'll go outside of this fetch ingredient and we'll say const ingredient image and we're going to pass it an ingredient and it'll be type of string and we're going to return we'll do a back tick for text interpolation we're going to go ahead and copy or paste that url in and all we're going to need to do is replace the ingredient name so i'm going to go ahead and delete that put a dollar sign and two brackets and we're going to say encode uri and then pass it the ingredients and you'll see we're getting some red squigglies and that's because i did not set this to an arrow function and then the last thing we need to do down here at the bottom is call our fetch ingredient so we're going to say fetch ingredients and then we're going to return what we need in the template so we're going to return router states and ingredient image then we'll go up to the template we will change the ion title to search by ingredient i'm gonna go ahead and get rid of everything inside of this ion content we're going to copy the ion contents and make another one up here i'm going to hit alt shift f2 format everything i'm going to get rid of this full screen and what we're going to have in here is our spinner so i'm going to say v if state dot loading we'll do a div with a class of loading center and then we'll do our ion spinner and we'll give it a color equal to primary on this ion content we will do a v else we're going to do an ion list inside of the ion list we're going to do an ion item and on this ion item we're going to do a v4 and we'll say ingredient in lst ingredients and we'll set the key equal to ingredient dots str ingredient one i'm going to hit alt shift f so we can see this a little bit better we're going to bind to the click event and when we click on it we're going to set this equal to an arrow function and we're going to say router dot push we're going to do some text interpolation i'm going to say drinks by ingredient and we need to put a forward slash here and then do another slash we're going to do some text interpolation and we're going to say ingredients dot str ingredient 1 and then we're going to go ahead and add a paren to close that inside of our ion item we're going to do an ion avatar we're going to give it a slot of start and inside of here we're going to do an image and bind to the source set that equal to ingredient image and pass ingredients dot str ingredient one i'm going to go ahead and get rid of the alt and close this then we're going to do an ion label and inside of the lion label we'll do an h2 and do some text interpolation this ingredient dot str ingredient 1. i'm going to hit alt shift f to format everything and then i'm going to go ahead and save and then we'll go ahead and click on our ingredients and we see we're not getting anything at the moment so what i'm going to do is open up my dev tools and after looking around at the dev tools i figured out that on my v4 up here instead of state.lst ingredients i just had lst ingredients so once i put state in front of that you'll see that our page loaded up just fine and we're getting all of our ingredients and the ingredient images now the last thing we're going to do on this page is our loader is not centered right now so i'm going to go back to tab one and we're just going to copy the style we put in here because it'll be exactly the same so we'll head back to tab 2 we'll scroll down and we'll just go ahead and paste that in now if we scroll up to the template you'll see that we're going to be pushing to a new page called drinks by ingredient and also passing the ingredient to that page through the route so the first thing we need to do is create that page so we'll go to views we'll add a new file and we'll go we'll call this drinks by ingredients dot view now this is going to be very similar to our tab two so what i'm actually going to do is we're going to come in here i'm going to hit control or command a and see we're going to come back to our drinks by ingredient and we're just going to paste that in there then we're going to head to our router i'm going to go to the index.ts i'm just going to go ahead and copy this first path and we're going to come down outside of this second path and paste that in if we head back and look at tab 2 this is the path that we're looking at so i'm just going to go ahead and copy this first part i'm going to head back to our router and then we'll just go ahead and paste that in here and then i'm gonna put then i'm just gonna put a colon and ingredients and that way we can pass it to that now what we're gonna do is take this we're gonna copy it and paste it in there and we're gonna change this tab or this view to drinks by ingredient so we have our path all set up and we're pointing at the correct components now back in our drinks by ingredient we will start inside of the script tag so what we're going to need is we'll still need reactive we're still going to need axios and we're still going to use the router but we need access to the route now so i'm going to add use route to this now when we're getting drinks by ingredient from the api we're going to need a different interface so i'm going to just say drink and then we're going to replace this with str drink we're going to add another property and call it str drink thumb and that is also a string and then we also have id drink and that is also a string down in our export default we will change the name of this to drink by actually ingredient call it drinks by ingredients we're still going to use the router but we're also going to need the route so i'm going to say cons to route equals use route and then we're going to grab the ingredient from the route so we're going to say const ingredient equals route dot params dot ingredient and that is a string so we're going to say as string now our state is going to be very similar but instead of lst ingredients we'll say lst drinks and we'll say as drink array and now instead of fetching ingredients we're going to be fetching drinks by ingredients so we'll change this to fetch drinks by ingredient we need to pass in an ingredient and that will be a string if we head back over to the cocktail db api we're going to scroll up here and it says you can search by ingredient by just passing in the ingredient at the end as a query parameter so we're going to go ahead and copy this head back here and replace this url and then we're going to do some backticks and go ahead and replace this with ingredient down here we need to change lst ingredients to lst drinks and these will come back in alphabetical order so there's no reason to sort them also since the thumbnail is included we do not need an extra method to grab the thumbnail and then all we need to do is replace this so it's called when the view is loaded and we just need to pass our ingredients to it now what we need to return here is we're going to return router state and we're also going to turn return ingredient to the template so that we can use it in our header so i'm going to scroll back up and now we need to work on our template so up here at the top for our title we're going to go ahead and remove this and we're going to add ingredients and drinks so that way we have whatever our ingredient is let's say vodka we can it'll save vodka drinks in the title now inside of our toolbar we're going to add a back button so we're going to say ion buttons and then inside of our ion buttons tag we're going to put an ion back button and on our ion buttons we're going to give it a slot equal to start now up until now we haven't imported any of the ionic components into our component files and i was going to save this for the refactor video but the ionic back button does not work unless you import it so we're going to go down to the bottom here and we're just going to import a couple we're going to say ion buttons and ion back button and then now that we've imported it we also need to register it as a components and then we'll go back to the top here to our template now we do need our spinner when the state is loading so we'll keep that but inside of here we're going to keep the exact same ion list but we need to change what we're looping through so in our v4 we'll say drink in state dot lst drinks and then we'll make it drink dot id drink for our key when someone clicks on this now what we're going to do is send them to a drink page that we have not yet created and we're going to pass in the drink dot id drink for our ion avatar we can go ahead and delete this we don't even have this method anymore and we can say drink dot str drink thumb and then for our label we're just gonna say drink dots str drink i'm gonna go ahead and save everything and we see now we have our loader coming i have a debugger for when i was having an issue with the ingredients but we see it's nice and loaded in the screen we see all of our ingredients and if we scroll down let's pick a popular one let's say bourbon and we click on it we see we now get our loader i've still got the debugger since we copy and pasted but we see now we have all of our bourbon drinks that are in the api and we have our nice back button that we can go back and the next thing we're going to do is implement our actual drink page but before we do that let's go ahead and remove these pesky debugger so i'm just going to go to the blanket search type in debugger and we'll go here and delete that one and we'll also delete this one the next thing we're going to do is head back we're going to go to our views and we'll create a new file called drink dot view and then before we put anything in here let's just go ahead and go to the router and we'll just copy this and we'll paste it down here and we'll just say that the path is drank and we will pass in an id of the drink and then we'll just do the drink dot view next we'll head back to our drink dot view we'll add a template tag we'll also add our script tag and we're gonna do typescript but the way it does it is for version two so we're gonna go ahead and delete everything out of there next we'll import a couple things we're gonna import reactive from view to hold our states also import use route because we're going to grab that id we pass in and we do that from the view router and then we're going to import axios axios from axios to make our ajax call we're also going to be implementing an interface and it is a quite a large interface so all i'm going to do is copy and paste it i will leave it in the video description and there'll also be a link to a bitbucket repo for this but i'm going to go ahead and paste that in and we're going to call the interface drink you'll see that some of them are wrapped in quotations and that's because they have a dash in them and typescript is not like that inside of an interface so i've gone ahead and wrapped those in quotes but like i said you can find this in the description and in the bitbucket repo linked in the description next we'll set up our export default inside of here we'll give it a name equal to drink i'll scroll down a little bit we'll also need some components and what i'm going to do for the components is go back to tab two we're just going to grab these for now go back to our drink and paste those in and actually we'll paste them in above the interface scroll back down we'll actually we'll copy these and then we'll scroll back down and i'll put these in components hit alt shift f2 format and it looks like i missed a comma and then we're going to do our setup inside of setup we're going to need the route so i'm going to say constrout equals use route and then we're going to grab the drink id out of here so we'll say cons drink id equals routes dot params dot id as string and then we'll add our states equal to reactive and pass in an object and we'll do drink and we'll set that to an object as drink and then we'll also do loading and set that to false next we'll make our method and we're going to call it const fetch drink by id it's going to be an async method we'll pass in the drink id and that will be a string we'll say state.loading equals true then we'll make our request so cons res equals axios dot gets and we'll do a back tick and we'll head back over to the cocktail db api and search for drink by id and we see we have it right here so i'm going to copy this come back we will put it in here and then for the id prime we're just going to do a dollar sign and curly braces and pass in the drink id and it looks like i forgot to set this to an arrow function we'll come back in we will put a semicolon there and we'll say if res.data we'll set state dot drink equal to res dot data we'll check for null dot drinks and we'll pull the first drink out of the array and we see if we're getting the squigglies again so i need to await this and the last thing we're going to do inside of our setup method let me close this down is i've got to go outside of the function we'll call our fetch drink by id and we will pass it the drink id and then we'll return and the only thing we're going to return is our state and i'll go ahead and save everything and we're going to get error and that's because we don't have anything inside of our template tag yet so what i'm going to do is i'm going to just put an h1 in here for now and we'll just say drink and i'll go ahead and save it now since ionic has lost our navigation because we've refreshed the page we have to go back to our original page and essentially what i want our drink page to look like is exactly what our random cocktail page looks like so what we should do is we should export this drink card to its own component so that we can reuse it for the random drink and the drink by ingredient functionality so to do that let's head over to file explorer let's go to components we will create a new file and call it drink card dot view and we'll give it a template tag and we'll also give it a script tag and just like before this is for view two so we'll go ahead and delete that we'll do an export default we'll give it a name and we'll set this equal to drink card and we're going to pass in some props and we'll pass in drink and set that equal to an object then we're going to go back to tab 1 and we're going to find our ion card which is right here and we're going to go ahead and just copy everything in here i'm going to do control x to cut it i'm going to come back to our drink card and we're going to paste this into the template i'm going to hit alt shift f and then what i'm going to do is hit command f or control f if you are on a windows machine i'm going to search for states dot random cocktail and all i'm gonna do is do this drop down and i'm gonna replace it with drink and i'm gonna do replace all and save that and now we see on our random cocktail page that it's displaying nothing so if we go back to tab one and at the top of the script tag we're going to import drink card from at slash components slash drink card and then we will register it as a component and we will use it right here and we will pass in our drink prop which needs to be binded to and set that equal to state dot random cocktail let me go ahead and self close this and go ahead and save everything and i'm getting some sort of an error even though it's displaying behind the error so once i figure this out i will be right back and i've come to find the reason that it did not like that was because i did not have dot view tacked on to the end of this import now that we have that we can go back to our drink dot view up here at the top of the script tag i'm going to import drink card from at slash components slash drink card dot view we'll go ahead and register this as a component down here and then up in the top all we're going to do is remove this h1 i'm going to go back to tab 2 and i'm going to go ahead and copy everything inside of this ion page we'll go back to drink we'll paste it in and in here we're going to display the title of the drink so we're going to say state dot drink dot str drink we will go ahead and keep the loader so we'll keep this ion content inside of our other ion content let's go ahead and remove this ion list and all we're going to do is set this equal to drink card and pass in our drink and that's going to be equal to states dot drink and we'll go ahead and self close this and save so now we can head over to buy ingredients tab our ingredients load up we will go select bourbon and our drinks load up and then we'll go select this old fashioned and it's not doing anything so we must be getting an error let me go to my console and see what we have here and after searching around there were actually two errors the first was in the export default of drink.view i didn't put an s on components and the second one was that we need to set state.loading equal to false inside of our fetch drink by id so once we do that we can head over to buy ingredient it loads up our ingredients let's go ahead and select bourbon we get our list of drinks and then if i click on one of these we see it takes us to our page now one thing we forgot to implement inside of here is the back button for navigation so let's go up to the top and inside of our ion toolbar we're going to do ion buttons and inside of ion buttons we're going to do an ion back button and then like i said earlier we need to import these down here so we'll do ion buttons and the ion back button and we'll copy these out of here and we will paste them inside of our components and since we've lost our navigation because the page keeps reloading we have to go back to the start so if we go to buy ingredients let's just select absolute citron nine and a half weeks we see we get all of the same things that we get on the random cocktail we're gonna get what glass it's served in the name the ingredients and the instructions and the back button works on all of these so we can go through and look at something else let's look at cognac adam and eve and everything's looking really good so it's going to go ahead and wrap it up for part two in part three we're going to be looking at this third tab we're just going to be implementing a drink search because so someone could go there and type in something like margarita and we would display a list of margaritas if we found any like i said earlier there's going to be a part 4 where we're going to do a refactor and fix some bugs and some unoptimized code so make sure you smash that subscribe button and enable notifications so you're notified when these videos come out if you have any questions comments or concerns about this video go ahead and drop a line in the comment section below and until next time happy coding

Channel: Diligent Dev

Views: 728

Keywords: vue js, vue js 3, vue js tutorial, vue js project, vuejs router, vue js slots, vuejs props, vuejs composition api, ionic framework tutorial, ionic framework tutorial for beginners, ionic framework mobile app, ionic framework introduction, ionic framework vue, ionic framework vuejs, ionic framework vue js, ionic vue, thecocktaildb, vue ionic, ionic framework, ionic vue js tutorial

Id: B-AIUbqxD4k

Length: 31min 29sec (1889 seconds)

Published: Tue Dec 01 2020