Quasar & Vue 3: Design & Prototyping (Real World App #1)

in this series i'm going to document my journey creating a real world quasar framework app from scratch an app that will ultimately be deployed to the ios android mac and windows app stores and so in each episode of this series i'm going to give you a progress report of where i'm up to i'm going to talk about what i've learned talk about any problems i've encountered show you any interesting code and explain it and also let you know what i'm going to do next let me know down in the comments if you're interested in this kind of series make sure you subscribe so you don't miss any of the videos in this series and i'll also put a link to the whole playlist in the description [Music] so the app i'm going to be creating is called budget 2 and it's the sequel to my popular cross-platform app fudgit which is available for ios android mac and windows and so for years i've been receiving feature requests from my budget users and i've been storing them all in this spreadsheet keeping account of each feature and how many times each feature has been requested and this has enabled me to know exactly which features are most in demand and for a long time i was adding a lot of the most in demand features to the app but because of some of the old tech that budget is using as in jquery and web sql the code became such a mess and i reached a point where i just couldn't add any more features anymore so if you take a look at a couple of the main javascript files from the original budget this one here is just an endless javascript file with around over 5000 lines of code and then we have this other one which has about 4 000 lines of code and it just became unmanageable and also the fact that i have separate code bases for the mobile version and the desktop version has caused a ton of problems as well and since we now have the amazing quasar framework which allows us to cover all of these different platforms with a single code base i decided to recreate the app from scratch using quasar with all of the new features that budget users are asking for so ultimately i'll be deploying this app to ios android mac and windows and possibly a web-based pwa version as well uh the main thing that i'm going to be doing differently this time as well as adding all of these new features is that i'm going to use the subscription model this time so budget one just has a one-time in-app purchase which unlocks a number of different features but with budget two i'm going to use the subscription model so the app will be free to download on all the different platforms but then the user can sign up to a fudgit plus account and have live data sync across all of their devices and a load of other features as well [Music] so a quick progress report of where i am so far so basically i've designed the entire app i've designed all the main screens and pop-ups from all the main sections in the app for mobile so i've designed around 35 screens here and this has taken a really long time and i've also designed a couple of the screens for desktop as well but i'm not going to design every single screen for desktop because most of it's going to be the same as the mobile version and so we have four different sections in the app we have a budget section starred section a settings section and an account section and i've basically designed all the main pages and pop-ups from each of these sections and design wise i've tried to give it a more modern kind of flat and clean look than the first version of the app and i've also tried to add a bit more color to it and make it a little bit less orange because in fudge it one basically everything is orange so the headers orange the footers orange background is orange all of the buttons are orange and it was a little bit orange overload so in this version of the app i've got some blues in there got a nice beige background instead of an orange background we've also got some greens and reds in there and the way i've found a lot of these colors is by using the adobe color tool so if i just grab the color code for this orange which is my main kind of color and if we just search for adobe color i'll jump to color.adobe.com and paste that color code into this middle field here then we can use this tool to find colors which will match this color so for example if we go to complementary we'll see some colors which complement this orange color such as this blue color which is the blue color that i've used in these buttons and i've also redesigned the icon for the app as well and this is the original icon from fujit1 and you can see i've been through a number of different variations here so on this one i tried to do like a coin style design a sort of semi-realistic coin and that just didn't work at all and then i tried to do a kind of inverse design from the original icon where we have a white background and an orange outline instead of a white outline with an orange background and this looks kind of nice here but when i put it on a device it just didn't look good at all and that's one thing i'd recommend you do when you're designing your icon create a quick quasar project and use the icon genie tool to just quickly see how your icon will look on a real device as you're iterating because a lot of the time you find it looks good on your screen but then you get it on a device and it just doesn't look good at all and so then i've done a few iterations that are similar to the original icon and in the end i've settled on this one which is just a really minimal flat version of the original icon and if you're enjoying this video please do me a favor and smash the like button [Music] so there's a couple of things that i've learned so far number one is always design your app before you get started so i don't really enjoy design that much and i'm not the best designer in the world but i can make things look pretty decent but i decided it would be a great idea to just start coding fudgie without any design and you can see this version of the app running in the browser here but i ended up hitting a number of different brick walls and had to just scrap the whole thing so for example in fujit 2 i needed a way to display extra fields beyond this title and amount field and so i decided this little more button would be a good idea which when you click on it it shows those extra fields but then i realized this wasn't going to work for a number of different reasons and also i just don't think it looks that good so if you're creating your own app i would strongly recommend that you design every major page screen pop-up from your app before you get started coding or at least wireframe every major page using something like balsamiq and i know it's a major pain but it's definitely worth it for a number of reasons number one as you're designing you realize that certain things aren't going to work the way that you anticipated and you realize that certain things need to be moved around and although it's a pain to make these changes at the design stage it's a lot less painful than trying to make these changes at the development stage number two once you have the whole thing designed it's much easier to envisage how you're actually gonna build the app and what order you should do things in and it becomes much easier to put together a development plan and number three it's much more fun developing an app which actually looks good while you're developing it because the fact that it looks good helps to keep you motivated and it helps you to envisage how the finished app will look and the second thing i've learned so far which is just unbelievably handy is that you can actually create a prototype using sketch so you can for example click on a button on one of your artboards and then use this prototyping section over here to link that button to another artboard or you can draw a hotspot on the page and link that to another artboard by using this method you can create an entire prototype of your app and i've also found that you can do the same thing in figma as well which is a free online design tool and when you create an account with figma you actually get this prototyping in figma example which shows you how to get started with that and it gives you an example prototype which you can click around in and stuff like that and so i've done the same thing in sketch so if i click on this splash screen and then press command and p then it'll launch this little prototype because i've linked up all of the buttons and artboards we can click around the whole app so after the splash screen we see an empty budgets page with a little tool tip telling the user what to do so there's going to be a number of these tool tips the first time the user runs the app just to help them get started then if we click on this add budget button we get this popup where we can add a name for the budget and set the currency symbol and we have a couple more tooltips and when we click on create we've actually created our first budget then we can tap on that to open the budget and you can do some basic little animations with this prototype thing as well so then we have this empty budget screen where we can add income and expense items and we have a few more tool tips here and then we can see what the entries page looks like with some items on it and if we click on this title field we can see what the auto complete is going to look like and if we click on the amount field we can see this calculator pop up our numeric keypad because one of the most requested features was a numeric keypad for entering the amount because right now in budget one it just pops up the default keyboard and i thought since i'm doing this i might as well also add some calculator buttons as well so that users can do quick calculations and if we click on this button next to one of our entries we can see extra fields such as notes date a reminder field and partial payments and options to star an item which will add it to this starred section and start items are basically items that can be repeated from budget to budget usually month to month and we can also copy and move an entry or delete it and if we click on this button up here we can get options for the entries page with a bunch of different options so we can do a multiple selection where we can star a bunch of items or mark a bunch of items as paid or copy or move a bunch of items or delete a bunch of items and we could also add a carryover where we can basically add the final balance of a previous budget to the start of this budget which is really handy for monthly budgeting and stuff like that then we have a charts page which will give us a nice visual breakdown of all of our expenses or all of our income items and i'll probably use a quasar table for this bit down here and we can also show a search bar and a filter bar for searching and filtering our entries and we can also show a running balance and a date column as well so that's basically all of the screens from the budgets section and i'll jump to the start section so items that we add here can be automatically added to new budgets that we create but design wise this is basically the same as the entries page that we see here then we have a settings page with a bunch of different settings and one of the cool things with this prototype thing is that you can fix elements in place so i've fixed the header in place and the footer in place and we can actually scroll down our artboard like this which is pretty cool and i didn't actually design all of this page because i realized it would take me ages to design all of these check boxes and radio boxes and stuff like that so for the settings page what i did was actually just create a quasar project and build all of these items on this settings page and then i just took a screenshot of it using the awesome screenshot plugin for chrome and then just pasted the screenshot into my sketch design and then finally we have the account section where the user can log into their budget plus subscription account where they can have live data sync across their devices and all that good stuff and if they don't have a subscription they can click on this button to learn a bit more about what you get with budget plus and i'm also giving them an annual option and a monthly option with either a 14-day free trial or a seven-day free trial and if they subscribe to one of these then they'll be asked to create an account with an email and password and once they're registered they'll be signed in and they'll now have live data sync across all their devices and a number of other extra features as well so this prototype thing has really helped me out a lot it's made me realize certain things which i thought were intuitive at the design stage weren't as intuitive as i thought once i'd launched it in this prototype thing and started clicking around it so i'd highly recommend you create some kind of prototype like this either using sketch or figma or balsamic or something like that before you get started creating your app because you really learn a lot from it so here's what i'm going to do next so i've basically finished the design but there's a few little tweaks that i want to make and once i've made those tweaks i'm going to start with the quasar project i'm going to use quasar version 2 which is currently in beta because quasar version 2 uses view 3 and i want to use view 3 especially the composition api for state management a bit like i did in my composition api for state management video and i would rather use view x5 for state management because vue x5 is going to get rid of mutations and instead just have actions which are asynchronous and which can mutate the state which means we can get rid of tons of setter mutations and really simplify our state files however i've no idea when view x5 is going to be released but maybe when it is released i can convert my composition api state management over to view x5 if it's not too difficult and the way i generally do my projects is get all of the design done and then get all of the front end on and then get all of the back end on so to begin with i'm just going to work on the front end of the app and get all of the layout working and the layout is going to be quite tricky because on mobile this looks like a fairly standard kind of quasar app but if we look at the desktop design and we look at the budgets section of the app on desktop i'm actually showing the list of budgets and the list of entries for that budget on the screen at the same time so when we click on a budget over here it will actually load that budget in this section whereas on the mobile version we display the budgets on one screen and then click on a budget and then we load that budget on another screen so figuring out how to handle this layout is going to be an interesting challenge i think what i'm going to have to do instead of having a page for budgets and a page for entries is not have individual pages for these we'll just have view components which look like pages for each of these and then on the desktop version display both of these components on the page at once and then when the user clicks on a budget update this component over here whereas on mobile when the user clicks on a budget i'm going to have to load this entries component over the top of it so that it looks like a new page but anyway once i've figured out how i'm going to handle this responsive layout i'm just going to do all of the front end for all of the different pages basically just make sure we can see every page running in the app and looking like the design but at this point i'm going to avoid using data and logic as much as possible i might just have some simple data just for showing and hiding things but as much as possible i'm going to avoid using data and logic and only once i've got every screen looking nice in the app will i start working on the real guts of the app and adding all of the data and logic and figuring out how i'm going to manage all of the data so for free users of the app i'm just going to use local base to store their data on their device in an indexeddb database but then when a user subscribes to a budget plus account i'm going to move all of that data to firebase to a cloud firestore database so that they can have live data sync across devices which is one of the most requested features because i have a lot of couples which use this app who want to share the same data and what they really want is if one of them adds a new item they want the other person to see that item appear instantly which is the main reason i'm going to be using firebase because it has that option for live data sync across devices and so i'll probably get the app working with firebase first once everything is working with firebase i'll then figure out how to get it all working locally with local base for free users because i think getting firebase working optimally is critical i want to make sure i structure and access the database in a way that we only need to access the database when it's absolutely necessary and that we only ever grab the data that's absolutely necessary to make the app more maintainable and also to minimize charges that i get from firebase so i think it's better to use the way that i'm storing data on firebase to inform the way that i'm storing data locally using local base than to use the way i'm storing data locally to inform the way i'm storing data on firebase uh let me know do you think i should be using firebase for this project or do you know of a better solution that's cheaper which also allows live data sync across devices if so let me know in the comments and also let me know if there's anything else that you think i should be doing differently in this project and if you want to learn more about quasar i have tons of videos on this channel and please check out my quasar courses as well at danny's dot link slash courses i'll make sure you hover my face over there and click subscribe every subscription helps me to create more content for this channel thanks for watching and i'll see you in the next one

Channel: Make Apps with Danny

Views: 10,142

Keywords: android, app design, app development, app development process, app ideas, app success, building an app, cordova, create a real world app, create an app, creating an app, css, electron, firebase, firebase cloud firestore, how to create a successful app, how to launch an app, how to start an app business, html, ios, javascript, mac, make money with apps, quasar, quasar framework, quasar framework tutorial, real app, real world app, successful app launch, vue, vue.js, vuejs, windows

Id: OluD-GW8cRM

Length: 17min 17sec (1037 seconds)

Published: Wed Mar 31 2021