Cryptocurrency Web and Mobile App with Quasar and Vue.js

hey what is going on everybody it is rob aka the diligent dev and after a long break i've decided to shoot some more youtube videos so in this video what we're going to do is we're going to create a cryptocurrency app and we're going to be able to create our web app and our mobile apps at the exact same time utilizing quasar and vue.js so without any further ado let's jump over to the computer and get right into it okay so since this tutorial is an hour long i thought i'd show you exactly what we're going to be building so on the right hand side we have our web application and on the left hand side we have an ios simulator running our ios app if we look here we have some pagination going on we can also search so let's just say we search for dogecoin and we click to view it we can see that we get information about it we get the image the name the symbol we also get some social media icons or links we get a description about the cryptocurrency and then all the different exchanges and if you click one of the different exchanges you can see that it will take you to it and you can go ahead and trade it so we have the exact same thing going on since it's the exact same code in the app so we can search for dogecoin and if we scroll down a little bit see we have it here we can view it we get all the exact same information and all the exchanges that we can trade it on and we can even click on it in here and it will open up a browser and take us exactly to that page so like i said since this was an hour long i wanted you to know exactly what we're going to be building and exactly what you're getting into when we start coding this out so let's start coding first thing you want to do if you don't already have it installed is installed node.js so if you don't have it installed go ahead and pause the video here and come back once that's finished once you have it installed we're going to go ahead and install the quasar cli now to do that all you gotta do is open up a terminal and run npm install dash g for global at quasar slash cli now i already have installed so i'm not going to do it and also if you are on a mac since we are doing this globally you will have to put sudo in front of this and type in your password so like i said i already have this installed so i'm not going to run that so go ahead and pause the video here and wait for that to install once that's installed we're going to create our project now to do that i'm going to cd into my desktop directory because that's where i want the project to live and i'm going to run quasar create crypto dash app and then it's going to ask you what you want your project name to be you can just hit enter it's going to ask you the project product name so we're just going to say crypto do currencies it's going to ask you what author you want to put on this i'm just going to use myself and then it's going to ask you to pick your css processor i'm going to pick sas with scss syntax and then it's going to ask us what features we want to include inside of our project and all i'm going to do is choose axios and hit enter i'm going to choose prettier here for the eslint preset and then it's going to ask if you want to install dependencies and i'm just going to say yes with npm and once this is finished installing i will be right back and now that the project has finished building what i've done is opened it in visual studio code so the first thing we're going to do is start a development server and to do that i'm going to open a new terminal in visual studio code and run the following command quasar dev now that that's finished building it's opened up a new window inside of my browser and we see we have a boilerplate quasar application so it comes with a nav bar we've got a nav drawer and a basic page and a little button over here so what i'm going to do is i'm going to resize this and put this over here and the first thing we're going to do is adjust the layout here so if we go into src layouts and go to this main layout file we see that we have our q toolbar up here inside of the queue header and what i want to do is i want to get rid of this button we will keep the toolbar title and we will name it crypto currencies and then we're going to go ahead and get rid of this div over here which is displaying the quasar version i'm also going to go ahead and just get rid of this drawer we have here and we will leave the page container and since we got rid of the drawer we don't need the essential link anymore so we'll go ahead and get rid of this linked list and we'll also get rid of that essential link in the components and we can actually just delete the component straight out and this is using view 3's composition api we won't be using it in this tutorial so we can go ahead and get rid of the setup method and then what i want to do down here at the bottom we're gonna go ahead and save this first actually so now we see we just have our plain nav bar with no drawer and no button over here and then we have our quasar page and what i want to do is add some cool styling here i want to add like a frosted glass look so i'm going to create a style tag down here and i'm going to go ahead and paste some styling in here and we'll explain what it's doing let's go ahead and paste it in there so what this is doing is it's giving a backdrop filter that's going to blur things out a background color and a color for the text and it's going to mimic sort of like a frosted glass look so we're going to take this and copy it we're going to come up here to the header and i'm just going to give it that class and now we see that our header has changed colors now the last thing i want to do inside of the layout is give it a footer so right underneath this q page container we're going to create a another tag and call it q footer inside of the cue footer we're going to make a q toolbar and then inside of that we're going to make a div and we're going to give this div a class of flex flex center to center this text we're about to put in here and i'm just going to put in crypto app diligent dev and then up here on the q footer i am also going to give this a class of frosted glass go ahead and save that and we see we have that down here now but it's not exactly how i want it to look and that's because we need to give this a q toolbar title and then we're just going to take this stick that in there hit alt shift f to format that and i'm actually going to take this down on a new line because didn't format it how i wanted it to and save it and now we have a nice footer displaying on the page and now that we have our layout all set up what we can do is work on getting the actual data that we're going to display into our project and the way we're going to do that is by using the coin gecko api this is completely free and there's no keys required there are some plans but the free plan allows you to make 50 requests a minute so it should be more than enough so what we're going to do is go to explore the docs and what we're looking for is a call to get all cryptocurrencies so if we keep going down we see that there is this coins and a coins list so that's what we're going to be using to grab a list of all cryptocurrencies now when we first created our project we selected that we wanted to include axios so what it did or what quasar does is they create these things called boot files and they're basically files that get injected into the application when it's first built so if we go in here and we go to src boots we see we have this axios file now what i'm going to do is just go through here you can read through these comments it'll give you a good idea of exactly what's going on inside of these boot files but i'm just going to go ahead and remove all of this for now and i'm also going to remove this axios right here this global properties and what we're going to do is come up here to where we create our axios instance and we're going to replace that with the actual coin gecko api base url i'm just gonna go ahead and copy it from the docs and paste it right in there so we have api.coingecko.com api dash slash version three then if we look down here essentially what this is doing is it's injecting a plug-in called api so we can access this from any of our view files and it's setting it to our axios instance so that we can make our calls inside of our view files so now let's actually make the request to get all of the crypto currencies so what we'll do is we'll head into src we'll go to pages and we'll go to index.view in here to hold all of our coins we're going to make a data prop in the export default and we'll make a property inside of here called coins and we'll set it to an empty array underneath that we'll make a created property and this is a view life cycle hook we're going to make this asynchronous and this is a life cycle hook that fires when the page is created and this is where we'll make our request so inside of this we're going to do a try catch and inside of the try block we're going to say cons to res equals awaits this dots dollar sign api and that's what we just set up in that boot file get coins slash list and then we're going to check if the status is 200 so we'll say res dot status is equal to 200 300. and we'll do a ternary operator here and if that's true we'll say this dot coins is equal to res dot data or else we'll just display an alert and say there was an error fetching the coins hit alt shift f to format that and then i'm just going to copy this alert out of here and if there is an unexpected error we'll also display that so what i'm going to do is before we save it i'm going to open up the dev tools and i'm going to go to the network tab and then we'll go ahead and save this because i want to see the actual request fire off and see what kind of data we get back and looks we've got a 200 back and if we look at the response there is what looks like some good data in here we have an id a symbol and a name for each cryptocurrency that coin gecko has in their database so let's go ahead and close out of this and then what i'm gonna do is just remove this image out of here as well and then we can start on the display of all the cryptocurrencies now the coingeco api returns over 11 000 different cryptocurrencies so we can't and we shouldn't load those all into the dom at the same time because it'll lead to a bad user experience and it will really make the dom sluggish or the browser sluggish so what we're going to do is use a table a cue table from quasar and we're going to use their grid style to make some really nice looking cards so it doesn't particularly look like a standard table that you would have so in order to do this what i'm going to do is i'm just going to view source and i'm just going to copy everything inside of this template we'll come back and we're just going to go ahead and paste it in there now let's go ahead and change some things here the first thing we're going to need to change is the rows property and we're going to set that to our coins next we're going to make a columns prop down here inside of our data say columns and that's going to be set to an array and we'll add an object inside of here we're going to say name is set it to name align set to center label equal to name and field equal to name as well i'm going to hit alt shift f to format this i'm going to take this column down on another line and just copy it we're going to name this symbol keep the align center make the label symbol and also make the field simple so now if we scroll back up to the top you'll see that we have this filter and what we need to do here is this is going to give us some search functionality right out of the box so people can search for different cryptocurrencies without us having to really do anything except add a cue input to the table as well and to get this working all we need to do is come down here and right below columns i'm just going to set filter equal to a blank string and hit alt shift f to format everything and that should get rid of our arrows and i'm just going to hit save so we can see what it looks like and we see now we have some cryptocurrencies in here um 11 589 we have a nice records per page property that we can set um treats doesn't really make much sense so i'm just going to go ahead and get rid of the title and up here on the q page i'm just going to get rid of these classes so it's not centered directly and now if we take a look we have the name the symbol we can search for different cryptocurrencies so let's just say we search for like dogecoin and you can see we have those and we can determine how many records we want to display so if we wanted to do like 20 we could display 20 of them on here and everything's looking really good so far but even though it's looking really good i think we can make it look even better so what we're going to do is underneath this template we're going to create another template we're going to give it a v slot set to the item and props go ahead and close that inside of this template we're going to create a div we're going to give it a class of q p a q dash pa dash xs another class of c o l x s dash 12 another class of c o l s m six and one more class of c o l m d four and what those are gonna do is make sure that it looks good on every single screen size so what i'm doing is i'm setting some columns here if it's extra small we're going to take the full width if it's small we're going to take half width and if it's a medium screen we're going to take up 33 with each column inside of here we're going to add a cue card inside of this cue card we're going to do a q card section inside of here we're going to do a span and give it a class of text dash 86 and we will do some interpolation and we will do props dot row dot name and up on this cue card section we are going to give this a class of text center now below this cue card section we're going to add a cue separator below this we'll add another cue card section section and then inside of this cue card section it's like props dot row dot symbol and for this cue card section up here let's give it some classes we'll say class equals flex flex center and then we'll give it a style and we'll set the font size equal to 44 pixels below that we'll do some cue card actions we will also give this a class equal to flex flex center inside of here we'll do a q button that's btn we'll give it a size of large color equal to primary label will be view we need to get out of this label of view and on click let's set this to navigate or just nav to crypto details and we'll pass the props dot row dot id and then since we added that we need to make a method for that down here so underneath our created we'll make a methods property and we'll make that nav to crypto details and we'll give it the id and then what we're going to do is we're going to navigate to another page that we're going to create so we'll say this dot router dot push and we're going to put in an object here we'll say name is equal to crypto details and then we'll give it some params because we're gonna have to pass the id of the coin so we'll say id and that's it so if we go ahead and save this we see now we have our different cryptocurrencies in a nicer looking card we have the actual name the cryptocurrency and this looks a little big to me so what i'm gonna do is scroll up here let's do like 34 pixels and see what that looks like i think that looks a little bit better and now that we have that i want to set some properties here i don't think five is a great initial records per page so we'll scroll up here underneath this hide header i'm gonna add a pagination property we're gonna set this to an object and we'll say rows per page and we'll set that to 12. go ahead and save it and now we see that we have 12 items per page and that frosted glass look that we gave it you'll see it now it kind of looks like a little blurred out sort of like a frosted glass look to uh both of our header and our footer which looks really good to me and then i really don't want the user to be able to display all of them i don't even want them to be able to display 50 so we're going to set another property up here we're going to say rows per page options and we're also going to set this to an object and inside of here i'm sorry we're not going to set it to an object we're going to set it to an array inside of here we'll say 12 24 48 and i will let him do 96 and i'm going to go ahead and save that and if we scroll back down we see that the maximum amount of cryptocurrencies we're going to allow them to view on the page is 96. so we see here all the different cryptocurrencies if we put 96 on the page and it looks like some of them have really really long these are very very odd cryptocurrencies so i think we need to give this a class of text center to make it look a little bit better so we'll say text center here and let's see what those look like if we put 96 on the page again all right those look a lot better to me so now that we have our main page displaying all the cryptocurrencies let's go ahead and work on the crypto details page so to do that we're going to go to our file explorer src pages i'm going to create a new file and call this crypto details dot view i'm going to put the base view file code in here i like to also put the define component so i'm going to import that from view and i'm just going to wrap this right here now i'm going to add a data property and in here we're going to put details it looks like i made a typo up top and we're just going to set that to undefined next we're going to go we'll save that and then we'll go over to our router and into the routes file and underneath this children right here let's go ahead and just copy this put it down there we will change the path to crypto details and then we're going to pass in an id so do colon id and we will change the component that we're importing to our crypto details that view file and i'm also going to name this route i like to name routes and that way if you ever change the path it doesn't matter to the view router as long as you specify the name of the route instead of the actual path so we'll just call this crypto details if i can spell there we go we'll go ahead and save that then we'll head back over to our crypto details page and i'm going to tap into the created lifecycle hook so that we can make our call to grab the details about the specific coin when we first create the page so we'll make this async since we're going to be making a call and we'll say const id equals this dot route dot params dot id and then we're going to check to see if we have the id so i'm going to say if id is falsy we're going to alert no id specified please try again and we're just going to go ahead and return then below that we'll go ahead and make our call so we'll say const res equals weights this dot dollar sign api dot gets and we'll do a back tick so we can do some string interpolation and we'll say coins slash dollar sign brackets id that we passed in so that'll get the details of the specific coin and then we'll say res.status is equal to 200 299 and we're going to do a ternary operator we'll say this dot details equals res.data or else we'll just alert there well we have to make this a string there was an error fetching the coin and what i want to do is actually wrap this entire thing in a try catch just in case we get an error so we'll take all that code and we'll stick it up in the try block and then i'll take this alert and if we get an unexpected error we'll just put it there hold shift f2 format everything and then we'll go ahead and save now if we click on one of these buttons it should redirect us to the crypto details and doesn't look like it did so let's open up the console and see what kind of an error we got no matching route for crypto details so when we push into it let's go find that we actually did it with a capital c so let's save that and we'll close this down and go back and i'm gonna actually leave that open because i want to see the actual network request hit view we see that it went out and made the network request and inside of our response it looks like we're getting some good data back inside of here so i'm going to go ahead and close this down and next let's work on the crypto details layout so what we're going to do for this since there's going to be a lot going on on the screen we're going to create a couple different components that we can use to pass data into to keep our crypto details page looking pretty clean so to do that we're going to head over to our file explorer i'm going to come up to components we can get rid of this essential link since we're not using it anymore and i'm going to create a new component called crypto details header dot view and inside this file we're going to display the image of the cryptocurrency the name and the symbol so i'm going to type vbase and get all my boilerplate view code in here i'm also going to import define components so import define components from view and then i'm gonna take this and we're just gonna wrap this with it now we're gonna be passing in some props to this but first let's name it so we'll just name it crypto details header and then we'll pass in some props and the first one is going to be an image and we're going to make it a type of string and it's going to be required and then all i'm going to do is take this and paste it and the next thing we're going to pass in is the name and then we're also going to pass in the symbol up here in the template we will keep this div we'll give it a class of row then we'll come down here and we'll make another div we'll give it a class of col flex and flex center to center everything inside of this we will make a cue image and we will bind to the source and the source will be the image that we're passing in in the props and then well we'll give this a width of 50 pixels because we don't want it to take up a bunch of the screen and then we'll do a span and we'll give this span a class of text h3 q dash pt dash md that's going to give it some padding to the top and let me go back here and put a period there and then we'll also do q dash pb dash md and then we'll come in here and that's what that class is going to do is give it some padding on the bottom and then we'll pass in the name and dash symbol i'll shift f2 format everything and i'll get rid of that so we can take a good look at it and everything's looking good i'm gonna get rid of the style tag because we're not passing any custom styles to it so let's go to our crypto details page on this div we're going to say v if details so we don't try to render anything to the screen if we don't have the data for it and then close this down we're going to make a components prop above the data and pass in our crypto details heading and then what we need to do is put comma there and we need to import that so we're going to import i'll just copy and paste this dot dot take it to the root directory components slash crypto details heading dot view and we'll go ahead and put this up here we'll say crypto details heading [Music] and we'll pass in all of our props so we'll do the image and the image is going to be set to details dot image dot small we'll also pass in the name will be details name and symbol will be details dot symbol alt shift f2 format that i'm going to go ahead and save everything and what do we got here see what did we name that oh we named it header instead of heading so what i'm gonna do actually it looks like i just misspelled everything here or use the wrong naming that's that we'll do that and we'll change this to header now we'll go ahead and save everything i'm still failing so now and i see what happened i actually saved that view file inside of our css folder so let's just move that up there so we should be good now and let's find a good coin let's say like cardano that should have a bunch of good information and we see we have the image of the cryptocurrency the name and the symbol so the next thing we're going to work on is some social media link buttons that will display right underneath the title here so to do that we're going to create another component and we're going to call this crypto details social media links actually it's called buttons dot view i will type vbase to get all that good stuff in there and then i will import define components from view and i'm just going to wrap the export default object in it we will give it a name equal to crypto details social media buttons and then we will give it some props and what we're going to pass in here will be the facebook username that will be of type string and it will be required and what i'm going to do is just copy and paste this twice and this one will be twitter username and then reddit comes through as a link so we're just going to say reddit link then up here in the template we will give this a div class of row we're going to do another div we'll do col flex flex dash center to center everything very nicely and then we're gonna do a q button we're going to give this a type of a which will make it like a regular ahref link we're going to give it a color equal to primary we're going to give it a class and we're going to set this equal to q mr md so that will give it some margin on the right hand side we're going to set the href and we're gonna set this to https facebook.com forward slash dollar sign facebook username and what i need to do here is give this some back ticks so we get some text interpolation there we go and we're going to give it a target equal to underscore underscore blank and let's close this down so we get a better look at it and what i'm going to do is i'm just going to copy and paste this so we're going to give this a color of blue and we're gonna give this a color of black everything should stay the same except here we're gonna do twitter.com and give it the twitter username and then here we can just go ahead and back everything out since this is an actual link and just put reddit link in here and what we need to do now is inside of each of these buttons we'll put a cue icon we will give this one a class equal to q pr to give it some padding right small we're gonna give this a name equal to mdi dash facebook and if you're wondering where i'm getting these from these are material design icons and i will leave a link to it in the description below now in order to get these icons into our project we need to go to the file explorer let's go down to the quasar config and then right here in extras you see this mdi dash v5 we're going to comment that out or comment that back in so these are all the icons that come pre-loaded and you can determine whether or not you want to use them by uncommenting out each icon package so let's go back to our social media buttons so we've got our facebook icon and then we're just going to type facebook right here and what i'm going to do is i'm going to grab this and we're going to paste this into each button so for this one obviously we don't want to use facebook we're gonna use twitter and we'll do twitter here and then for this one we'll do reddit so we'll say reddit and reddit i'm going to go ahead and just save everything right now head back to crypto details and we need to import this component so all i'm going to do is just grab this and paste it down in here say crypto detail social media buttons put that there and we'll also import the components and then right below this i'm going to do a q separator if i can type there we go and then underneath that i'll do the crypto details buttons all right now we need to pass in the props so for this we're going to do the facebook username and that's going to be set equal to details dot links dots facebook underscore username do the twitter username equal to details dot links dot twitter screen name and then we'll do reddit link equal to details dot links dot subreddit underscore url so let's go ahead and save that and now we see we have all of our buttons here it looks like we need to put a little bit of a padding or margin up here so we'll come back to here and on this row i'll just do q padding top lg and i messed something up z there we go all right cool so now we have that and i'd like to get a little bit of padding more padding top on this so let's go back to the crypto heading and on this row we'll also do a q pt large all right cool that looks great so let's just test these links out and make sure that they work so we have that twitter and reddit so those all look great right now but before i forget we should probably go back to the social media icons or the buttons and put a vf on all of them so let's just say vf facebook username when these do come back without a link they just come back as null so doing a vf on each one of these should be fine and we see now that facebook is missing because cardano does not have an official facebook page so we're going to add a couple more things some things we're going to add straight to the crypto details page itself because there's no sense of making a component for something so small the first thing we're going to do is we're going to display the description underneath our social media buttons so down here we'll create a div i'm going to give it a class of row and padding top or we need to q p t large to give it some padding top then inside of this we're going to give it a div with a class of col and then we're going to make a paragraph tag we're going to give it a v html and we're going to set that to details dot description and i'm going to use the english description we're going to go ahead and save that and we see now we have the description for this details page what i'm going to do since you see this is going right up to the edge is we're going to wrap everything in a q page so we'll take everything inside of this div and put it up here and then we're going to put an attribute on this page called padding go ahead and save that and you see now everything looks a lot better it's not driven straight up to the edge of the screen the next thing we're going to do is display some exchanges that are returned so in order to do that i'm going to create another div underneath this one i'm going to give it a class of row then i'm going to do another div with a class of call and inside of that i'm going to give it an h4 and say exchanges so if we scroll down we see that now and what i want to do with this is display a bunch of exchanges underneath this where you can actually trade the selected cryptocurrency now in order to do that we're going to make some cards so we'll go over to our components folder and we're going to make a new file called crypto exchange card dot view i will type vbase to get the boilerplate in there and then i'm going to import the defined components we'll give this a name of crypto detail exchange card or not crypto detail just crypto exchange card and then we're going to pass in some props the props will be ticker we're going to make the type an object and required equal to true and then underneath that we'll also make another property so i'm just going to copy this one and paste it down here and we'll call this change in last 24 hours this will be a number and it will also be required up in the templates we're going to replace the div with a q card we're going to give it a class equal to q m a m d and q p a s m to give it some margin and padding around the card we're gonna do a cue card section inside the cue card section we're gonna do a div with a class of text h4 and inside of here we're gonna do ticker dot markets dot name let me go ahead and close this down so we can get a better look here we're also going to create another div we're going to have this one a class of text h6 in here we're going to say trust now the api does return some sort of a trust metrics on these different exchanges so we're going to just going to go ahead and display a q avatar we're going to give it a size equal to small and we're going to give it a color equal to ticker dot trust underscore it looks like i a little bit of a typo there so it looks good now what the avatar is going to do is going to give us a small circle and then the color will be the truss score and i believe it's either red orange or green underneath that we'll do a q separator we'll do another cue card section we'll give it a div with a class of column flex flex center inside of this we'll do another div with a class of text h4 we'll do a another q icon we will give it a name and the name will be equal to we'll do a ternary expression here and we'll say change in last 24 hours is greater than zero we will do a trending up icon else we'll do a trending down and we can't wrap this in double quotes and then we'll do a color on this as well and we'll also take a look at the last 24 hours it looks like i have some sort of a typo here ah because of this then we'll do a color and we'll do about the same scheme with this so i'll just paste that in there i'm going to format this and instead of trending up and trending down we're going to do green and red and we'll do a size equal to 24 pixels and we'll go ahead and close that and right below that we'll do dollar sign some text interpolation and we'll do ticker dot last then we'll do another div with a class equal to text h5 and q pt give us a padding top md and inside of here we'll say volume and we'll set that equal to ticker volume dot to fixed so it only goes out to two decimal places of two and then right below this cue card section we'll do q card actions and inside of here we'll do a q button we'll give it a type equal to a a color equal to primary size of large href equal to ticker dot trade underscore url targets equal to underscore underscore blank and we'll make it flat so there won't be much of a button it'll just be text and then we'll say trade i'll shift f2 format this we'll go ahead and save this we'll head back to our crypto details page now the tickers that i want to grab are going to be only the usd tickers so in order to do that what we're going to do is come down here on this details page and i'm going to create a computed property and inside of here i'm just going to say usd tickers i'm going to return this dot details dot tickers dot filter pass in the ticker and ticker dot target is equal to usd so basically what i'm doing is i'm creating an array and filtering that array just based on the ticker.target which is the target's fiat currency which is going to be usd so now we can do is we can head up here and right underneath this exchanges div we're going to say div we're going to give it a class of row and we're going to do another div we're going to give it a class of col md dash 4 col dash sm 6 and c o l x s dash in there of 12. so what this is going to do is if we have a medium size screen it's going to take up four columns of the 12 columns we have available a small screen will take up 6 of the 12 and an extra small screen will take up 12 of 12. then underneath that we're going to say v4 and i'm going to say ticker index in usd tickers and i'm going to give it a key equal to the index now in each one of these we're going to pass in a crypto details card or crypto exchange card we're going to give it a ticker equal to ticker and also change in last 24 hours or change last i forget what we've named that change in last 24 hours is going to be equal to details dot markets underscore data dot price change 24 h so it doesn't like this usd tickers and that's because i didn't put an s on the end of it so let's just go ahead and save this and see what happens all right so if we scroll down we are not getting our cards so that might be because i never imported the card so let's import crypto exchange card from and we'll just go ahead and copy and paste this so i don't make any typos okay let's see if they showed up all right so they do so we have each exchange that we could trade them on we have the trust score here and i believe that's tied to the exchange we have the current rate that it's going for the current volume i think this is in the last 24 hours and then we could go ahead and trade and if we do that we see that takes us to coinbase this would take us to kraken and everything's loading very slowly but there's kraken what i'd like to do is actually center this trade button so let's go back to the exchange card let's look we got here card actions i think if i give this a class of flex and flex center it should center that and it does so now if we go ahead and take a look we've got our image the name of the cryptocurrency the uh symbol we have our social media buttons we also have a nice description of it this is returned in html that's why we use the vhtml attribute on that if we click on that it looks like it's taking us to coin gecko ugh these things and sticking us to coingecko and a link from that so let's go ahead and head back unfortunately those are not going to open in a new tab but overall everything's looking good now one thing we're going to have to account for is that when we deploy this to a mobile app we're not going to have the convenience of just hitting the back button in the browser that would take us back to the different cryptocurrencies what we're going to need is a physical back button on the screen so right now i would not like it to display but if we were to dig into a specific cryptocurrency it would be nice if we had some sort of back button up here that looked like it would that we'd be able to navigate back so what we're going to do is we're going to go into our layout we're going to go to the main layout we're going to go to the queue toolbar and before the title we're going to add a cue button and this button is only going to display if we are on the details page so we're going to say vf route dot path dot includes details we're going to make it flat we're also going to make it round we're going to give it an icon equal to mdi dash chevron left and when we click on it all we're going to do is have the router dot go and we're just gonna go back one page so let's go ahead and take a look at that and you see now we have this nice little back button and if we click it it takes us back to the cryptocurrency screen and it disappears so if we go into another cryptocurrency like bitcoin and i don't see it let's just click into a random one here we see it comes back and allows us to get back to our main screen and the last thing i want to do before we actually create our mobile apps is i want to give it a nice animation for the page transitions so what we're going to do is i'm going to open up a new terminal and i'm going to install a package once it loads up here called animate.css so npmi animate dot css and now that's done we're going to come down here to our script and i'm just going to import it and then up here inside of our q page container we're going to wrap this in a transition so let's just go ahead and get the router in there on this transition we're going to give it a mode of in dash out i'm going to make an enter active class equal to animate double underscore animated animated or animate double underscore slide in left all i'm going to do is put this on a new line and then we're going to have an enter or leave active class i'm just going to paste this put it in here and instead of sliding left we're going to do slide out right and need to do that with a lowercase t let's go ahead and save that and now if we see if we crypt click on one it slides in and then that slides back in so it gives it more of like an animated feel like you're actually on a mobile phone so if we were to look at this on let's say like an iphone and we start clicking around and things it looks like it's sliding in sort of like an iphone slides in and slides back out to give it more of a polished look now that we have our web app all built out we can add the mobile version so we can deploy to the ios and android stores now to add these we're first going to add the ionic runtime called capacitor and this is going to allow you to build for a native device and also tap into native features to do this with the quasar cli open up a terminal and type quasar mode add capacitor and then it's going to ask you for an id now typically this is the reverse of your domain and then the name of your application so i'm going to do com.diligentdev dot crypto app and not a slash but a dot there we go and you'll see now it has started building out a new file called a new folder called src capacitor now in order to run this on an android phone we're going to run the following command in the terminal quasar dev dash m compacitor dash uppercase i spelled capacitor wrong dash uppercase t android and spelled android wrong so now it's installing all the android dependencies and it's going to do some other things and build the project and then it's going to open android studio and i will be right back once it's done doing that okay so after that built it went ahead and opened android studio once android studio opened i went ahead and ran the app you can run it up here you may have to set up a device with their avd manager but you'll be able to run it i'll leave some links that will help you out if you're having any issues with that so we take a look at it down here we see that we have our app everything is looking pretty good there are some issues with our styles up here but i'm not gonna go and try to fix those at the moment but you can see it's running on an android emulator if we click on a specific cryptocurrency it goes down into that cryptocurrency and then we can go back from it we can search for different ones like let's say dogecoin and we can go into that and i lost it there it is and we see that we have everything that we had set up in our web application but now it is running inside of an android device so now that we've run it on an android device let's try running it on an ios device so to do that we can run the same exact command quasar dev dash m capacitor t except instead of android we're going to run ios here so let's go ahead and run that and then what it's going to do is it's going to install all our ios dependencies build the project and then open xcode it is worth saying that you will need a mac to build an ios app you cannot do it on a windows machine and once this is done building i will be right back okay so it's built the ios project all we need to do is run it on an emulator so this is xcode that it has opened after it got done building and all we have to do is hit play and then what it's going to do is build in here okay so i had to cut the video because the build process was taking so long this is actually running on a 2015 macbook pro unfortunately the screen recording software is not compatible with the new m1 chip so i can't do it on my normal development machine but nonetheless we have a displayed here and you can see that the styling looks a lot better on this it's picking up on our frosted glass styling and it's running inside of a iphone 13 pro max and let's get rid of that and let's search for dogecoin again and we see we can get in there and we have all of the information and everything is looking really good now back in the web project i'm just going to close this down because it's taking up too many resources you'll see that we're getting an error to get rid of this error all we need to do is run npm install inside of a terminal and we'll go ahead and reload this and possibly what we need to do is just kill our server and then go ahead and launch it again and now we see that the error is gone it just needs to rebuild and know that capacitor has been added to the project so to recap we were able to build a web application an android app and also an ios app and get them running on emulators so that's going to go ahead and wrap it up if you have any questions comments or concerns about this video please leave a comment in the comment section below and be sure to subscribe and like the channel to see more content like this [Music] foreign

Channel: Diligent Dev

Views: 132

Keywords: vuejs, VueJS, Quasar, Quasar development, Quasar Framework, Software Development, Software Engineer, Programming

Id: v_h6f4TdBTY

Length: 64min 44sec (3884 seconds)

Published: Tue Dec 14 2021