Create a Point of Sale (POS) Web App using Google Sheets and Apps Script

hi everyone today i'm going to be making a application that connects to google sheets it's a point of sale apple application for a restaurant um you can see here it's connected to this sheet it's reading and writing to this sheet so in this sheet i have a some items um a table of items and i have a table of historical sales with a timestamp invoice number and line items each invoice can have multiple line items of course and then there's a table with payments and i'll show you how it uh works this is deployed as a web app so the um i can add items to this order and i can delete items or i can clear the entire order and then when the customer is ready to pay you choose either cash or credit card and let's say i choose cash and the comp the customer gives us thirty dollars i enter it that way um with the keypad and that displays the cash now if the customer is paying by credit card if they pay over the amount and not the exact amount this changes to tip because this is going into the bank so we assume if they overpay that's a tip and then as soon as the amount paid equals or exceeds the grand total this close sale button appears and you could say see when i close the sale it writes it to the google sheet and the payment is written to the google sheet now it's also reading a couple things from the sheet first off it's incrementing the invoice number from whatever the largest invoice number is here it's incrementing to the next invoice number and it's also reading the menu from this items table as you can see if i change the price of fries to 15 45 and then i refresh this the fries are changed so you can change anything the image the tax rate description so basically it's a crud uh program you're creating and uh reading um and you're not actually deleting in this example but you're reading and writing to a google sheet and it's written in google apps script but i won't be writing it i'll be writing it in a text editor until the end of the project because most of this is just html and css in javascript i can write it in a regular text editor without having to constantly refresh it from this type of apps script ide but you can follow along in the id and i'll show you how to just set it up before i switch over to the text editor let me get this back in there and i'll bring over a blank so here's an a blank um sheet to work with it's the exact same sheet uh format as the last one and uh so what i'll do is i will open the script editor so we got a blank script here i'm going to add some files first i'll name the project and i'm going to add some html files the first will just be called index and then i will add a css file but in this case in in apps script you're not actually creating a dot css file it's just another html file but we call it we'll call it styles dash css and then i'll add another one for the javascript again this is going to be this is just an html file but it has the name script hyphen js for these two i will enclose these since it's html i have to enclose them in a style tag so any css i write will be enclosed in that tag and for the javascript it'll just be script so any javascript is enclosed in that tag the html is the same but we're i'm going to show you how we're going to link to these two real quick before we switch over to the code editor so first off we're doing a web app so every web app needs a do get and in this do get i'll just do this to read the index html file so that will run the html and then i'm going to create this function called include and this will this is what we're going to use to link the css and javascript to the index.html file so we'll have a parameter file name and we'll get the content this should be output so create html output from file file name which will either be style css or script js and later i'll show you we will just create two functions to read and write from the sheet so it'll just be get data and set data we'll take care of those later and i'll just show you how we're going to run so to link um to the css and we use this tag to run that script we just created and then we'll create that so that's how we'll link the css it's a little different than regular linking for um in html and then at the bottom of the body we'll do the link to uh the javascript script js so if you want to follow along you can now follow along in the ide i'm going to be using vs code just because i find it easier you can follow along in the ide you can use vs code you can use vs code or text editor with clasp i'm not going to use clasp on this project clasp connects your text editor to the google apps script so i'll go back to this for now and i will grab i have a a vs code window open blank vs code um and i'll get started here so i'm creating the html css and javascript files and i'm using something called emmett which allows me to autofill the html and i'll just get a template going and i'm going to use something called live server which will enable me to have a window open that just automatically updates as i save the html file there's obviously nothing in there right yet um so a couple of things i'm going to import at the top um i'm going to import something called font awesome because i'm going to be using some icons from that and um i'm also going to import some fonts from google so font awesome we'll go to cdn js to get the uh the link to that and i'll just paste at the top here so there's the font awesome that'll let us use the fun awesome icons and then i'm going to add a couple fonts that i want to use i'm going to add roboto audio wide and barcode and i'm going to paste that in the top and i'm also going to link to the css and i'll link to the javascript i'll run a defer on this although later as you saw we'll be just putting at the bottom in the google apps script and i'll change the title and let's see okay so we have the start of our project here um and now i will go into the body and um we'll take a i'll just bring this over this the final projects just so we can reference it so basically as far as html goes on on the kind of top level we have a header and i'm going to put these two in a container and then this area will be called order and this area will be called menu hyphen payment because it's got an overlay i'm going to be using flexbox and grid depending on what's required this will be mainly this area will be mainly flexbox i'll use grid for this area just because i want to force this to overlay when it's overlaid it's covering all this and these are all unclickable so uh yeah so it'll be basically header main order menu payment and then this will be called receipt toolbar and payment overlay but we'll go through it step by step so within the body i'm going to start with a header and i'll do an h1 and so there's the header um i'll just put in the basic styling so asterix means applying to everything and uh box sizing will be border box that's how we'll just size based on the border not any margin or padding taken into consideration and i'll get rid of any margin by default and any padding by default and i'll set the font family there we go so that updates the padding and the margin it puts that as you can see there's no margin or padding and it changes it to rub auto um so below the header below the header we're going i'm going to do a tag called main and this main will have a class of um main container and another class of this will be a flex and i'm going to be using for the flex i'll be using classes to identify flex in css but this will be flex and then i'll call it flex row so flex row will be the direction will be row and within the within the flex row will be the order and the menu payment so i'll call order a section and the class will be order and the other class will be flex but this will be a column because it's going to be flowing in a column direction and then after that we will do the menu payment and that'll be another section so section menu payment and this will be grid because we'll be using css grid on that so the uh so we have the order side and the menu payment side so we have this order and menu payment now we'll do the html for the receipt so for the receipt i'll make the receipt an article it could be a div or whatever you want and it'll be called receipt and it'll be flex column and within the receipt um at the top of the receipt is the company info so the company info i'll just make it a div company info and the company info will be flex column and below the company info will be an area of the company info and then this area will be receipt details so um another div um receipt details and then below the receipt details will be the receipt summary and below the receipt summary will be the receipt footer and the receipt footer will make it a flex cone below this is the toolbar below the receipt is the toolbar with the payment types and the trash and that will be a div toolbar okay so let's do a little work here on this receipt uh we'll start with the company info and within this company info um i'm not going to make this dynamic or red from the google sheet but you may want to in the future so this will just be a bunch of ids but just in case you want to make it dynamic later you can use ids so you can grab it with um javascript so the awesome cafe that's the company name and one two three elm street and company city and company phone and then we do the invoice number now this will be dynamic so we will be using that id but right now i'm just going to plug in an arbitrary number so the invoice number and then so this is showing up here there's the company info and there's no styling obviously so receipt details is going to be a table um so table we'll call this details table and within the details table we'll have a tea head and a tea body below that within the t head um first off if you look at this one the final project i've got this kind of retro receipt dotted border uh to do this you can't just border this uh because of the columns it's all uneven so i'm going to do it a little differently i'm going to insert a separate row and call this row give it a class of dotted border and then i'll also do a call span of five because there's going to be five columns i want that dotted border to go all the way across i'm just going to close this off so we have more space so um later we'll style that to show as a dotted border and then i'm going to do another row and in this row is just going to be a blank empty border and that will just help us to make this border even it's just kind of a work around okay so that takes care of the border and now um we'll do the header uh the header of the receipt details and so it'll be a row and it'll be t h and these values will be fixed i'll abbreviate that abbreviate subtotal and this will be the column for the delete buttons but it will have a header on top and i'll abbreviate that too and then below this i will put another one of these which we will see later when i style it so there's the header of the receipt below the t head is going to be the t body and the t body um will be dynamic there's not going to be anything in there by default it'll be empty but i'm going to plug in some mock data just so we can see what it looks like and the mock data will match this except i want these to be td so i selected all those change them to td and let's plug in a mock item and for the delete let's get the icon for that so we'll go to font awesome and i'll search for a delete icon and i will plug that in there so there we go we have one line of mock data i'll be totally fully dynamic later um once we have data the javascript and we can read the data and so forth so that is the um top part of the receipt details now we want to move down to the receipt summary and the receipt summary is going to have two parts um there's the subtotal tax and grand total which is reading information from the receipt details and it's the and then there's the amount paid change slash tip and payment type which is reading from a payment paypal information so we will start with uh the summary the receipt summary and within the receipt summary we'll have a table and it'll be we'll call give it the class summary table and within this summary table i'll have a t body it doesn't need a head and actually i'm going to give this tbody class equals summary table and then an id this is just the top part the totals not the payment um so there's the class and the id of that t-body and then for the tr i'm going to do i want another dotted border so i'll do this same trick um and paste it here but this table will only have three columns so we'll change that okay so then we'll do another row and in this row we'll have a td subtotal and this is not dynamic we don't need to grab it or change it so we'll just have it as is and the value we will need to grab with javascript so subtotal summary and 0 and then i'm just going to have a blank column which will match up with that delete after we style it so there's the first one i'm going to copy this we need this for tax and grand total tax subtotal tax grand total and grand total summary so there's that and then we'll do another tea body we don't really need to separate these but we'll do a separate tea body for the payment summary actually i want to set the class for this class can be same as the one above for styling it a separate id in case we need it so there's the id within this t-body it's going to be similar to the above so i'll just copy this last one but this will say amount paid and the id this will be dynamic we need to grab it later amount paid and now this one will be dynamic as well i'm going to call this tip change title the default will be changed but it we may want to change it to tip depending on if it's a credit card amount and tip change amount because that will be definitely dynamic and then at the bottom we have payment type so there we go payment type by default is blank and then we want one more dotted border on the bottom so let's just do this payment type dotted border coil span three and then we just want this footer and in the footer later on you could make it dynamic but for now we'll just do a p um with an id thanks for your business and this is where we'll use that barcode font just to show what it looks like with a barcode so there we go that is that's pretty much the receipt um and we'll style that shortly first let's do the toolbar so toolbar has three icons and i'll grab those from font awesome so the icons in the toolbar are cache so we'll do this one cash card and trash so there's a toolbar down there and that should be it except for the styling and we can do some styling just so we can see what it looks like uh so i've got this asterisks that applies to the whole document just for styling i'll set 100 percent to the height here now some of the widths i'm just going to set to pixels that's because generally you know if you're you're gonna know the size of the devices you're working with in a restaurant uh so you can add media queries to go with all sorts of different uh sizes i'm not gonna do that in this on on the main height for my purposes here i found that the 92 percent worked well on that and i'll just fix change this header use that audio wide font we got earlier and put some space between the top so we can start styling it i'll put in the um so like i said before i just want an easy way to name a class so we can identify whether it's grid or flex so we have flex row so flex row the direction will be row and flex column will be column and i'm going around the order and we haven't created it yet or we haven't worked on it yet but the menu i'll just create a border so there's a border there's nothing in the menu payment so it just looks like a line and i'll make it a little curved and then just give it some margin and make the height a 100 but we don't want it to exceed so we'll set the max height to 100 so there we go we're just fitting into the screen nicely now now i will work on this order a little bit i just want to make a comment just so we can see it clearly so there's the order section and within the order um later as you remember we're going to be going with the dark theme so i just want to set the background to white because i always want the order and the receipt to be white um and i want to fix the width of the receipt like i said before the height is going to be dynamic but i want um the width to be fixed and i don't want to shrink or grow so i'm going to use the flex and the two zeros are indicating uh shrink and grow uh don't want it to shrink or and grow and then for my purposes i'm sizing it to 440 pixels and i'll do an overflow just so i get a scroll bar so there we have our receipt set uh the flex or the menu is the one that will grow and shrink um as the window gets larger you can't see that yet but and then the receipt itself is within the order section and the receipt i want to border but i just want to get uh square corners on that so there's the receipt inside but we need to set some margins to see it um so there we got some margins it's we can differentiate it a bit i'll do a box shadow so a little bit of a shadow and i don't want a user select like i don't want um users to be able to select text like that totally optional um and within this order is the receipt and the toolbar the toolbar i want to a fixed um size i don't want to get any higher or lower but i want this to grow so i'll set the flex grow to one so there you go it's um filling up any space that the toolbar isn't taking and it will be dynamic as you can see but we have to work on the toolbar within this we want to align these items okay so the contents are aligned in the middle and now let's start styling these um let's start styling the company info so we want the name to be a little larger than the rest but first we want a little margin on the top so company info margin on top 5 pixels make that a little bigger make the company phone a little bigger and the rest of the company info looks good now to the table um we'll start with the description description the description column and the details i want it to be wider than the other columns i will set it to 180 pixels and i'll i want the text to align in to the left unlike the other items i want them to align to the right so the text to align to the left and for the price i'll just set it to 70 pixels get this up a bit subtotal a little wider at this point we we don't have the ability to change the quantity so the subtotal will always be the same for the sake of time i probably won't add that functionality but you could add it on your own it's it's common in pos systems to be able to do that and now i will set the text align on these other items because i want all of these to be aligned to the right okay so that justifies all the contents to the right and then once again now within the receipt i want the receipt details to be the one that um shrinks and grows the other i the other areas the company info and the footer and the summary i want them to be fixed first i'll put a margin on the top there and so there that will make it so that the receipt details shrinks and grows not the other items and let's put in the dotted border okay there's the dotted border we haven't sized this so it doesn't look right yet but um looks pretty good on the top here um one thing i want to do is just on that this is the delete um the class on the delete and i want to set a hover so there we go we have a hover on that delete button just so we know when we're over it so now on to this table um we're going to take care of this table down here um the class is summary table and all the text i want to force it to align right so it's lying right and i'm going to approach the widths a little bit differently on this one i'm going to do the t-body summary table and then i'm going to use this nth child so that's basically the first column of this t body and i'll set it to i found this one worked for my screen again you might want to choose different widths for your devices and then i'm going to copy this because i have two more columns to do so for number two i'll do the 75 and then remember i have that there's that final column just to match up with the delete and so that's going to be number three the third column and the width on that i'll set to 25. again this is just working for my screen these are fixed widths you'll need to set it for your devices okay so that summary is looking good i think that's pretty much done uh let's take a look at the receipt footer the receipt footer i want some padding on top so padding on top and let's set the barcode id and we imported this from google fonts and that'll turn that into a barcode and now we just have to size it okay so that's looking pretty good um now let's work on the toolbar so the toolbar is um a flex or it's within the flex but we again the receipt is the one that we want to shrink and grow we don't want the toolbar to shrink or grow so i'm going to use this flex and i'm going to set it to 60 pixels so this is not going to grow the receipt's going to grow and shrink of course if we go too far it'll just collapse but this is pretty dynamic here and within the toolbar i want to use um the justify content to do space around those icons so it's even on the sides and in between them so space around and that just uh centers them uh spaces them horizontally and now i want to [Music] vertically center them and let's give them a border there's the border border radius and just make it match on the margins with the above and let's make the icons larger now i gotta check if i actually put that class in i didn't so let's add that class toolbar icon to these and the toolbar icon we're just setting that font size what's our two that gets them large and now i'm just gonna grab this transform because we're gonna use it for this one as well there we go so that's about it for the receipt and let's just do and your payment okay well actually first we have to um we have to finish the menu payment so within the menu payment um we have i'll just grab this here so this is the finished product um we have the menu which by default is displaying it's basically just a empty um div and dynamically adding these figures by javascript and then this overlay but first we'll take care of the menu so with the menu it's a menu payment grid and then a div and the div is just called menu and it'll be flex row because the menu items flow in a row and then i'll give it an idea menu too and again this is all going to be dynamically filled but i will put in some um just some mock data because when you look at the final item this is all totally dynamic so first off i will it's going to be a figure each one of those will be figure and the class will be menu item and within the figure will be the image and so it'll be image so image dot menu image and i want to grab a url we can use so we'll grab this url and put it in there so first it'll be the um image and then we'll do fig caption and we'll have a title and then basically another fig caption and we need to um set the size of this image style with okay so i'm going to plug in a few of these just so we get a feel of what it looks like with a few of these inside and that is not wrapping for some reason and i think i because i haven't set the um have not set the style to wrap so even though we have the direction we don't have the wrap defined so i'm going to do flex flow we've already said row but i'll say it again and then wrap there we go so the wrap flex wrap is what allows it to um do that to wrap um so now that we have this i may start adding the dark theme to this and to start that i'll go back up to the top and below this main i'll set body and a background color and this is just a off a kind of very dark gray and i'll set the header and we're going to take a white take a white and make it about a ten percent uh uh transparency and then i had this color it's kind of a pale blue for that and font size actually put this up here and let's get a little margin there so uh there we've got start with the dark theme and so we can go back to the menu payment section and we'll above this i'll just have menu payment and we'll do that a white overlay again but this time i'll do a little bit more transparent and uh the menu payment we want it to just grow it already is actually but um just in case do a flex grow and since we're doing an overlay i'll just put a make sure it's at the bottom of any anything that's overlaid over top uh so since we're doing within the menu payment we're overlaying the pay payment over the menu so we want to i want to force those to both that's why i use grid on this um i want them to be in the same column in row just to force an overlay and we already got the flex flow and we'll align the content to what's called flex start so it will just align to this edge here and again this we want to overlay payment overless so just in case i'll just set the z index to zero and the height will set it to 100 percent and we want a scroll bar if um it gets too big if the content gets too big and i just want to be able to see those captions now that it's okay we can see the caption now and we want to get back so the menu item is uh or each of these figures menu item so each of these items uh will be um flex and it'll flow in a column and then flex basis we don't want them to shrink and i'll do another transparency rgba and .05 and that'll make it a little bit stand out a little bit and the width we already set it for the image but we just want that to match let's make these um circles the images circles make them round circles and make the max width just in case um 100 and height auto to match the width and display lock and margin okay so that's looking pretty good and we got the fig captions done we can do a hover again menu image any item so just the image will hover but it'll hover no matter what part of the whole figure we touch okay that just about does it for the menu um now let's take a quick look at the finished product uh we have this overlay here so we need to do some html um to take care of this overlay so get this out of the way and within the um so we have the menu payment grid uh menu flex row and then so this is the menu and basically below this menu we want another div which will call the payment and it will also have a class of grid and we'll give it an id of payment overlay so payment the payment overlay consists of a div which is going to be a paypad and then a second div called close paypad and this one i'll just make it a flex so um within the paypal grid uh we got the payment overlay um i think we need to grab this so i'll make the id paypath as well and so um what i'll do here is i will hide the menu for now so that'll hide the menu so just so we can see this paypal as we build it so the the paypal is going to be a series of buttons um and sorry the class will be paypad button and for most of them it'll be number not all um and then it also i'll use this data id and then i'll input whatever number is in there um so the top corner is seven so if you remember how it goes across seven eight nine four five six one two three zero back clear and then at the bottom there's a closed sail so i'll select these seven yes that's eight that's nine that's four that's five that's six there we there's one two three zero back clear and this one will be closed sale all right so there they are they don't have any css to style them yet um but uh i'm gonna take out the numbers on these because these ones will not be numbers um but this one just gonna put a class in there to make it this one stretch across the bottom so that's about it for the html on the ppad and as you can see here um if we add something here and we get enough money this closed sale appears on the bottom so we're just doing this not the x yet that's the separate div so what we want to do let's style this paypal now so we'll do it down here below the menu stuff and first we'll do the payment overlay the default for this will be display none uh but for now we're displaying it just because we're working on it uh we want to force it to overlay the other if you remember so we're going to force its grid row and column and we want to force its we want to set its size so if you remember the payment overlay consists of two divs so we'll do the grid template columns which will set the size and the we're going to set the number pad to a fixed size for 330 pixel again do the width whatever works on your screen with 100 percent of the overall [Music] the payment overlay div and set the height to 100 and this is the one that's going over top the other one so let's just set the that index and we'll do another one of these white transparent overlays and that will when we overlay the menu you can just see it um so that it's indicating you can't click on the menu at that point and now let's work at the paypal itself actually pretty straightforward uh margin we'll just set some margins um and the align content we want it aligned in the center of the paypad are aligned vertically up and down and then grid column and then um the this is the paypal is in the first column there remember there's two within the payment overlay uh in closing div so grid template columns and i'm going to use this repeat which is something you can use in grid we want three of the same and i'm going to just set them to 100 pixels each so there we go we have them repeating three and it just kind of flows um sets it up automatically let's set up the rows and it's going to be the same repeat but this time it's five and we want them to be square so there we go but we want that bottom one and remember we set the span3 column class that's so we can do this span it across and the default if you remember this close sale we only want it to display when the payment is equal or exceeding the value of the receipt the grand total so we want it hidden and that why is that we must have an error ah we just need this we want this to be id okay there we go but this will have a date id in it um actually it'll be the same we need the idea of closed sale but also the data id of closed sale later for the javascript so that's all looking good and then remember this is one div and then over to the side is another div which is going to have the um x in it so let's close let's try a close icon okay so cl we're going to use the close icon um so it's closed pape pad flex um and let's close icon paypad close and let's set our id just in case and we can't see out it's up here but it's we have to style it so let's take a look at the menu we'll get rid of this none display and there we go it's underneath there and we just want to style so let's make the font buttons paypad btn number we don't need to change the font size on the other ones and make it big and give it some margins move it down and there we go and let's just add a whole bunch more of these just so we see what it looks like again this will all be dynamically loaded through javascript fill that up and as you can see they're flowing well and this overlay is going over top of it so that's all looking good and i think that we're pretty much done with the html and css so let's take a look at the javascript and we'll start by doing a to-do list i'll pull in the finished project here so when we're looking at a to-do list in javascript the first thing we want to do is load menu and so we're going to be loading the menu from data we lift from the google sheet uh right in this demo right now we're just going to load mock data and then i'll put it in so we can load from the google sheet so load the menu um add items to order slash receipt so that's uh another thing we want to be able to add orders to the order receipt we want to be able to delete items from order receipt uh that's this functionality here take those out we want to be able to clear the order so we want to clear the order actually before i'm just going to add update summary because every time we do this we need to update the summary as well and that goes for the deleting too so that's another extra step and then clear order and then we want to be able to open paypad and when we open the paypad we we are either choosing credit card or cash so we want to also assign payment type and then we want to be able to enter payment so input payment input payment buttons so that will include this and back and clear and then finally we want to be able to close sale and save slash send data so that should cover it for our to-do list um in this project i'm going to use classes in javascript um so we'll get started i'll get the finished product or the finished application out of the way and this is our current application so i'm going to use classes in javascript and i'm going to split this first i'll create a class called order and usually if we had the data right in the sheet i just load the data or write in the application i just load the data but we have to wait for the data so when i construct this i'm not going to take any parameters i'm just going to construct an empty instantiation of order whenever i construct it so when we think about order um within the order i'm going to load the menu i'm going to load the record of the previous sales that's so we get the invoice um this every order will have its own invoice number and every order will have its own order which is kind of confusing but it's just the collection of items that um that make up the order and then every order will also have a payment so i'll start with this menu and the menu will be an array this invoice number make it a string because we're plugging into the html this dot order and it's an array and this dot payment and i'll make payment an object because basically we're using payment to for sending to the google sheet when we close the sale and this makes it a little easier type and then change tip if there's a tip we want to record it because it's going to hit the bank that means it's a credit card so there's a constructor and i'll do some i'll just do some getters and setters real quick uh we'll need get menu return this menu i'm just using these underscore just to indicate a private um function just so you can't uh you're we're only accessing through the getters and setters and then set menu will be a little more complex because we're taking an array which will ultimately ultimately be from google sheets and i'll initialize empty but before i do this i want to down here get some mock data this is going to represent what kind of data we're going to be getting from google sheets now when i when you load google sheet data using get values you will be getting 2d arrays so i'm just going to paste i have some mock data ready here just so i don't have to type it all out so this will be what it looks like when we lift it from the sheets uh this is from the items tab and it's a 2d array and there's the sku and description price tax rate and the link previous sales this would be a time stamp it's empty in here i don't have any i don't have that data here invoice number sku quantity uh subtotal and tax and payments data we're not reading this this just so we have a reference to know how we're writing to it and um so we'll use this data i just wanted to put it in so we know what we're looking at when we do our first like this first setter um what we're going to do is we're basically going to be taking this array the same format so menu array for each array within this array and the 4-h we can't just say an arbitrary name for each of the items and then i'm going to do a for when you're loading the menu array you for production you'd want to do some kind of data validation i'm not going to do it in this just for the sake of time but obviously you're going to want to check is this positive the price is the tax positive are these numbers even uh you're when you're loading whenever you're loading data you want to do data validation this video is going to be long enough as it is so i'm not going to do it but you might you'll you will want to do a check on your data um but um that's kind of that i'm just trying to keep this length of the video reasonable so for each i'll initialize a current item now i'm we're reading this as a 2d array but i'm writing this into the class as an array of objects just so it's a little easier to read when we're getting those elements so i'll call it cur item sku equals menu item and that's the sku so i'm just setting properties for each of these objects we could just read them in as a 2d array again it just as we get deeper into this program it's going to be easier if we have if we can access them by name so that sets this current object each of these properties and then at the very end after we've read all of them we will push them to the menu and remember we've initialized the menu empty every time we read a new one we make sure it's empty and then we create a new array and then we're pushing this to the array okay so again you want to do data validation on this but um okay so we've got the get menu set menu and get previous sales and set previous sales this one's straightforward we don't need to change it into an object or anything we just so getters and setters on that um get invoice number and return this invoice number set invoice number we'll take it in as a number and remember this is going to be a string and get order i'm not going to have a set order because we're just going to be either clearing the order or just adding single lines uh we'll do a get payment and set payment okay so um that's all our getters and setters um now let's just go down below the mock data so we have the classes and the other classes i'm going to do i'm going to do a class called ui and this will not be instantiated it'll just have static classes that we can access and i'll have a class utilities and this will just be some utility functions against static um we won't we won't instantiate this um so we have the ui we have the utilities and we have the mock data i'm going to close this up for now and i'll just put in order instantiation and then at the bottom we'll do some event listeners we'll set those static event listeners and i'll explain that after so what it's going to look like is we'll have when the page loads it'll have a constant and we'll do new order without any data because there's no parameters in the constructor and then we will do order dot menu which is basically just setting the menu with the menu data and then order dot previous sales equal previous sales data so that's the setter for the previous sales and then um we'll use one of those static functions so in the ui i'll have a function called menu and it will pass in that instantiated um order so let's take a look at the ui and we want to create a static method so we can access it without instantiation called menu and it will take as a parameter the order instance and so within this we'll create the dynamic html so that we can load the menu depending on what's in the spreadsheet so first i'll create a fragment and create document fragment create an empty document fragment and we're taking the order instance the menu of that order instance and we're doing it for each loop through that and arbitrary name we'll just call them each item and so for each order instance menu for each item in the order instance um we'll create a new one of these um figure uh we'll create a new figure so but we're actually for each order instance we're going to create what's inside the figure and then later we'll create a node that's figure so order instance for each let menu element equal let's take that everything inside the figure i'm going to do a back tick so that'll allow us to do some dynamic variables in here so first variable is going to be the item dot image and this is where it comes in handy though it converted when we made the menu we converted it to an item makes it a lot more readable than using a array index in the alt we'll use the description and in the caption again we'll use the description and in the price of course we'll use the price so we created this menu element and then we need to create the figure that we're gonna put this inside we're gonna create call it a node document create element and the element we're making is a figure and we'll set the class name to the class name of the node to menu item and then what i'm going to do is i'm going to create a variable called a data string and this is basically all the data on this item i want to load it in so it's stored within the menu may sound kind of complicated but basically all it is is an object and uh so we can read it when we click on it we don't have to go back and cycle through the item list so um to work with this since the we're going to be setting it as a data attribute it's going to be a string so we have to convert it to a string and i'll use a json stringify and how it's going to look is we'll have a curly bracket and it'll basically just look like an object but we're going to have some dynamic items obviously in here and sorry i made a mistake there back tick get rid of that and so within the backtick we'll have our variables with the backtick we can use this dollar and curly sign and first we'll have the item skew and then just like an object we separate by a comma description and the description backtick and another comma um price and i'll just copy this to make it easier the final one the final one will be the tax rate so final one's tax rate and we have one more curly brace for that starting one so that sets the data string um and then let's attach it to the node so node set attribute and the attribute we'll call it data skew it's more than the skew but data skew will be data string so there all that data is contained within each html element and then node set the inner html to the menu element and then finally we're going to append this to the fragment so we're going to cycle through that and just append each item to the fragment with all this data that we're going to use later and then after we cycled through them we'll attach some document get element by id and it's the menu um append child and we're appending that fragment let's hide the grid uh payment over if we okay so it is loading we can take out the mock data now because this so take out this fixed data and so the menu is loading great okay so we can check that off our to-do list load menu and so next on our to-do list is to add items so we're going to go back to the order and get below our getters and setters and do our first regular method and order i'll call it add order line now this is fixed this application for now is just fixed with a quantity of one but you might want to change that later in case you do we'll have this parameter of quantity but for now it's always going to be one and so add order line and each order line is going to be an object so we'll initialize a current line as an object and if you remember the data um coming through will be from this javascript so this is the data string that's coming from the menu we stringified it we have to parse it back so i'll call it let line data and it's going to be this information here let line data equal json dot parse so converting it back into an object we can read or not data and then we go current line and line data dot skew so this is the great thing we can read it all from the click we don't have to go cross reference it to the menu again and this is just a parameter on its own it's not in the menu so that's just being read from the parameter the quantity and the current line price now here we run into where we're gonna have to do our first utility because this um this is gonna be a string um and or this will have to be rounded to two and it'll be have to be converted to a float so parse float line data price that's one thing and now i'm going to create our first utility i'm going to call it round to two i'll take a num and to round to two you could just use a round function function but i found this one on stack overflow and it seems to be a little more reliable i don't actually fully understand how it works but it seems to work for me but you can use whatever rounding function you're comfortable with uh so and we're gonna round to two now one thing i just noticed uh these are all coming out just as straight floats uh they aren't being converted to um to the uh currency uh so that's another utility we want to do static convert float to we'll call it string it's going to be a formatted string it's not just two string and i'll set some price params and this will make it easy for you to change it whatever country or currency you want to use without having to go through the html or currency we'll set it for us and then we return float to return float to locale string price params so convert float to string so let's go back up and see if this works okay great so that works it's reading as a dollar figure obviously we're going to use that a lot in the receipt as well so back to the order line the we we're adding we've added the price to the order and we parsed it round to two and then the next thing is the subtotal and this is actually not from the menu it is a calculation current line price uh the subtotal and then and then the tax is a calculation but this one we for sure don't want it to turn into some long float so i'm gonna round it to two utilities is spelt wrong round to two so line data tax rate times current line subtotal okay so we've assigned all these to the one single line and we want to push it so this order push it's an array so we're just adding to that order and then when we so we're able to add to the order but the problem is we don't have a ui for the receipt details yet so we will be creating a receipt details and it will take uh this order instance um so we have to create that ui function now um it's gonna be similar to this menu um so it's going to be a static receipt details it'll take order instance as the parameter and again we're gonna do we'll just create a frag fragment and we'll cycle through um in this case the order array so the order and four each and a little bit different than the one above we want the index to because we need to um in we need to embed that index for later so we can delete so we're getting the order line and the index um and now it's similar to what we did above lat receipt line and here is when we'll take the html that we plugged in it would be up here so we're going to create the node will be the tr and we're going to create um an element out of this and we'll use the backtick put that in there and again we're going to use these variables and order line description so we're going to have the description and we will have the quantity we'll have the price we'll have the subtotal and we won't um obviously the the icon won't change but we want some data for later when we want to delete that so we'll call it data delete and within that we will just have the index just so we can grab that we know which one we're deleting when we click on it later that's the next on our to-do list so we got the description quantity the problem with the price we have to convert this so we'll do a convert float to string convert float to string so that should do it for that element and now we got to do the node document create element and the node will be the row tr element and let's set an attribute this is kind of the same as the delete um a back tick and let's just copy it from here and that's wrong that's because we didn't have a closing curly and okay so index to string and then node.enter html receipt line and then frag a pen child okay that's all great um oh we haven't attached yet actually so it's not great um we will get the receipt details left get element by id receipt details and first we have to um we have to erase any we can't just load it up we have to get rid of what was in there before and reload it so while receipt details has child nodes receipt details remove child and receive details child nodes so this will just cycle through and remove all the receipt lines so that we can re-append them to a blank container okay so that's receipt details now that should work but now we need a listener on these items so we have to go back up to the menu and we have to go to the menu ui and we have to set our dynamic event listeners so they are listening for a click so select all for each add event listener okay so what we're doing here is we are getting all the menu items and then for each we are adding an event listener basically and they it's listening for a click and on the click we're doing it add in order instance and we're taking that method we just did and remember the parameter is quantity we're only doing one um at a time and from the button we're getting get attribute and we're getting that data sku which is more than the sku it's a entire object of data and we're loading it in to that line item so let's see if that works it's not working let's do an inspect see where the promise looks like we got an error cannot read of has gel nodes of null so receipt did we set an id for that that's the problem so let me just see here we want receipt details uh would probably be the table i guess receipt so we're getting the the receipt details i got it we want this tea body that's what we're missing there we go so the items are all loading add items now we want to be able to delete items and the delete items will be pretty straightforward we'll start with the method within the order after delete order line and this is where we'll use the index and this order splice index so we're just taking out of the array the index of that that order and then we'll update but we have to add listener and listener will be loaded when we whenever we load the receipt details so we are appending the fragment and document and it'll be all because there's multiple at time not always but and the class is delete and let's add an event listener okay so we're adding an event listener order instance and delete order line and we're taking um the data delete attribute so button get get attribute data delete but we got to convert that that's going to be a string so see how that works yeah that works okay let's get rid of the we have that one plugged in item we don't need that anymore so it comes up empty we can click we can delete and if even if we don't delete the last one it just updates very nicely so let's go back to our to-do list [Music] we got that one done and now we want to update summary so um we will first have to get summary and that's a little bit different can't use a getter obviously because we're not setting it as a property so get summary it's just going to be a calculation first i'll initialize an empty summary and so we're going to cycle through the order and just add them so summary so we're just going to accumulate the subtotals tax and then at the end this or and so we're just we created this method just so we can get those summary numbers calculated based on the current um items in the order and so let's do a summary ui so there's the receipt details static summary order instance so another static method within the ui and i'll just declare all these instance get summary so we're generating the summary and getting the data and get these document elements get element by d and we got sub total summary tax summary and grand total summary so there's the constants um and now we'll just set it i didn't really need to um make those i could have just done it but it just makes it less readable so subtotal and tax and grand total and that's about it so that will update the summary and we have to we have to run that every time we'll put it in the receipt details ui so after we append the fragment we just run that and there we go except the tax isn't working um why isn't the tax working first off let's check if the subtotal tax the id looks good it's up to all summary just a second here subtotal tax oh that's why wait a second this is the one that's wrong tax tax summary okay that seems to be working now so the summary's working and it's working when we delete as well let's cross that off and clear order is next on our list first let's get i think that should just be it for clear order um oh but then we have to run we have to update the receipt details now we have to this is where we're going to start with our static event listeners and the first one we will do will be the clear order and did i set that uh yep and this is based on the instantiated order of course let's see if this works cannot set property of order ah that's the problem so we do need a set order just in case um okay i mean we could maybe just do it um underscore order but this is probably better okay so that seems to be working well so clear order done now we want to this is actually payment overlay it is the it's the paypad and you know the white close button and the overlay covering the menu so open payment overlay um and we actually want to close payment oh really that's another to do so to open the payment overlay that's just going to be us changing the style and it's going to be mainly a ui thing so let's create in the ui we have the summary so show ppad it's actually payment overlay but anyways uh get element by id payment overlay and p pad style dot display okay there's show paypad and hide paypad okay pretty straightforward now we will do these will both be static so below the clear order we'll do a document it's going to be multiple query selector all and a button and here we will show a pad order and we will also want to change the payment type but we're not going to worry about that yet so that's just going to show it um and we're going to do the close and it's click listening for a click and on that click will be order or sorry ui bad order we're passing the order because we will also have to set payment types or clear payment types so forth so um we don't i may not have set paypad show on those icons there we go so that's working hide and show one thing we didn't haven't done that invoice number yet um maybe i'll do that real quick uh so after the setters and getters let's have a method and we don't need any input we're just the only input is the previous sales data really and so for this if um we'll check this we'll check if the previous sales is empty or undefined in that case um we're just going to set um this dot invoice number two one and then else and we're gonna get this remember the um the payment is coming the payment list is a 2d array so i'm going to use map and a pointer function here we're getting the skew and the skew is um in each subarray it's the sku is number one after the timestamp which is zero so that's how we get the skew on each of those and then let highest we're going to take that skew array we're going to find the highest by the reduce using the reduce and the function we can pass a callback in here with two parameters one is a a total and the other is just a each number as it iterates so return math max and pass it to amb or whichever is the highest so it will just accumulate the highest to to the highest and then we want to increment from the highest that's in that list so that's how we get increment the number based on the previous so generate invoice number and then we need a ui um and where we put it put it maybe right after receipt details and the ui will just basically run that invoice number method so i'll put it here so invoice number and then we just order instance generate invoice number no parameter and a constant invoice number order instance invoice number and document get element by d and it is invoice number i believe should be anyways text set the text content and i'll use the backtick invoice number and then the dollar for a variable invoice number and we want to set the invoice number um basically we want to set it when we instantiate um after we load the menu basically so so let's take out this fixed one so there we go it's loading so there's the invoice number on our to-do list so we're making good progress now now we have to worry about the payment and for the payment we will have to do we'll have to create another method in here so we'll do after get summary i'm going to have a method called change payment and change payment will take different types of parameters at different times so i'm just going to put input and it's basically going to accept an object as a parameter so every time we change the payment we need to check the grand total because we need to see if the customer is paid enough so we get the grand total from the summary and we check what type of input we got here if the input is amount paid or contains an amount paid property check if it's no this payment paid equals it's coming in as a string float input amount paid and we'll check this if input and this is payment type if the input is payment type then this dot payment type equals input type and then we're going to check is the payment now greater than the grand total this payment amount paid is greater than the order grand total then this payment change tip equals this grand total and now this point this is what determines whether that button shows so the close button is we want to create a static just a simple static ui takes a bull doesn't need the order and it's close sale and if bool close button style display else and close button and okay so back to this change payment that's misspelled and so uh change payment and we need an else so if amount paid is greater i believe we should have equal here and we need another ui the ui would be payment summary so payment summary it will take order instance payment summary order instance and it will be document get element by id amount paid equals utilities and we'll convert the float to string order instance payment amount paid so that's the amount paid and the change tip title get element by id tip title payment type okay so now we have to go through the um we'll check what um payment type um the payment is and set this accordingly i'm just going to pause briefly take a quick break so we've we've declared these two changed we've just gotten these elements and now we'll just cycle through so if if order instance payment type just set these back so credit if it's created change tip title text content equals tip remember if it's credit card there's no change it can only be a tip if they pay in excess payment type text content so that's if it's credit we'll do a else if else if cash this will be change and this will be cash and finally else can't spell else and change is the default and this is blank so now get element by id and we'll do the tip um chip change value text content and convert float to string order instance payment remember it's an object change or tip so there's the payment uh summary down there and the payment summary we will run that whenever we change the payment for one we'll run it a couple times but we run it when we change the payment so next we have to do um well real quick i'm just going to do a clear payment clear and this payment equals actually there's no invoice amount paid type and change tip just so we have that we'll need that as well oh and then that will automatically should run the ui payment summary as well with this instance so there's a clear payment and now the only way we can well first off we need to change those event listeners so that when we click on the paypad show we are also getting the attribute data payment type and we have to put data payment types in these which i don't think we did so after the class data payment type equals and the first one is some cash and this one data payment type and this one will be credit and we go back here and we do order change payment and if you remember we're going to parse it's going to be text coming in from the html same as the other time and get attribute and the attribute we're getting is data payment type so hopefully so unexpected token in the json and data payment type credit now we have to take a look at um data payment type oh we have to put put in a full um i get the problem here we will do a single and we have to tell it that it's what it is so and the same for this one there we go hopefully yep so that's changing it's changing to tip and changing it to credit card great um but we do have an error it's not stopping it but uh tip change value cannot set of null we don't have tip change value maybe not um there we go okay no errors okay so we've signed payment type now finally we can get to work on the uh paypal so you remember i'll bring over the finished project here this paypad we plug it in and it just enters it by the cent and it pushes the next numbers up and it's the same when we delete and then as soon as we clear equal or clear that so this one you see as the error in it it's not it's equal it should be have our close button but we fix that in this one so um we'll get to work on the paypal and the paypad functionality will put into the um utilities and let's just get down here so utilities we've got convert float to string round to two let's create a static paypad and we'll take an input and the order instance what we're taking um the input we're reading this data um if you remember each of these has a date id so we're going to take first off we're going to just check is this a number and we'll do this by if this will check if it's a number we have to convert it to an int if it's one of the other ones it won't convert to an it because those are strings and this and what we'll do is we'll split this up so the paypad will have static number paypad static number paypad same and static uh back static back paypad and and we don't need to it'll only be one input in that case and static clear paypad and so we will do uh first we check um is for this one if it is a number we're using the number paypad number so this is kind of just like a handler number ppad order instance so we're just handling the input and sending it to another method else if input this back pay pad order instance so we're going to run back paypad if the input's back and this dot clear paypal order instance and then otherwise we're just going to run closed sale and we haven't created closed sale yet that's going to be just our final one of our final methods here but i'm going to just create it empty method so if it's not any of the other buttons it will be closed sale so now let's handle this we'll handle um number paypad as follows we'll declare some constants uh current input and a current input now if you remember when we enter a number if i enter one it's going to add one cent but it's gonna move all the other numbers up so keep that in mind we will use the round to two um and multiply the input just in case some i mean floats act weird sometimes often and um so we're gonna change the number uh to a cent and const uh current amount paid we're going to move everything up by all the previous payment to payment so the current amount paid we just get that number and the new amount paid will be this round 2 2 we're going to round it to 2 because of these floats and current amount paid times 10 so we're moving everything up to make way for this cent value we put in so that should make the new amount paid so it moves everything up adds the cent at the bottom so if if the current amount paid is zero current input else change payment so if it's zero we just add the cent else we just input this new amount paid so that should work for the number if it's a number let's see if it's working so we have to add event listeners oh one thing when we close it i want to [Music] it's kind of a separate issue but when we close the paypath i want to clear it but anyways okay so document query selector all and button okay so add event listener and we're gonna add a click oh forgot the pointer or the arrow so it's in utilities and it's paypad and paypad's the handler and it'll tell us it'll check what the input is but um get attribute and we'll get data id and then the order instance is the second parameter so let's see so it is whatever it's doing it's not updating the ui so it is changing let's see here change payment let's go back here to the ppad to the handler order instance change payment amount paid is the property if input amount this should be amount paid there we go so that is working now and the clear is not updating why is the clear not updating clear order i don't think we have payment summary in the receipt details maybe so receipt details should so close maybe in the ui paypad show paypad and change payment and clear payment should both have it so why isn't it clearing when we close um so oh that's not running because it didn't have brackets there we go there we go so it's clearing now um and now we just we have the handler working and the numbers working now we just have to have the get the back paypad working so payment amount paid so we got the current payment now we got to think about when we do the back pay pad we just want to get rid of the scent um and so first i'm going to check if it's zero because if it's not we don't want to do anything um on a back so i'll declare a couple of um variables here uh to subtract when you think about it we want to take the current payment and what i'll do is i'll multiply it by 100 that will get all the decimals above the decimal space it'll basically have it with nothing behind the decimal space and then to get rid of that first digit i'll get the modulo 10 and so then i'll know what the cent figure is and then i will turn it back into ascent so this is how much we want to subtract and the new amount is simply the whatever the current payment is minus to subtract but then we got to reduce it by 10 so we're basically reducing the number by 10 but first we have to get rid of that cent amount and now we have to change payment change payment amount paid new amount so we're passing that object as a parameter to the change payment let's see if that works yeah seems to work okay so um we've got the back payment now the clear should be pretty easy so we're just going to get the order instance and now the object we're going to pay let's see if that works great so we're clearing it we're not clearing the payment type um we're just clearing this so now that works great let's check let's take a look at our to do okay input payment buttons and now we're ready to move on to the close sale so when we close it um for now we're just in this um we're just doing it in browser it's a little it's going to be a little different once we paste it into our project but um how we're gonna do it is we'll have to we'll have the closed sale but first what i'll do is create before the closed sale i'll create a couple of prep methods export order and export payment and these will take date because i'm going to run these both in within the close sale method and in that closed sale i'll generate a timestamp and that's how i'm going to get that first column in the google sheet so this order and it's order line and let current line equal so we're going to initialize a current line and basically i'm just transforming our order which is a array of objects into a 2d array that can be placed easily into the google sheet so i'm creating a new array and 2d array so basically if you remember the columns of these are the columns in the google sheet so sku description price tax rate and image so i'll go back up here so timestamp sorry i was looking at the item this is the sales timestamp sku or timestamp invoice number sku quantity price tax not tax rate total tax and so i will go back up to here so this will equal the timestamp invoice number sku quantity price tax and so for this i'm just getting this the invoice number and now i'm going to use that order line uh why don't we order line order line quantity borderline and order line tax and let's push it so for now we're just pushing it into the previous sales data we have because we're not connected in this to the google sheet we will be when i paste it into the app script and so i'm going to push the line and then i will this because i'm just setting that resetting our property in here because right here i'm just setting the array that's outside uh we'll change it all up once we paste it into the google sheet this is just for demonstration at this point so there's the export order now export payment is similar um minus this so that will just be the tip change this is only relevant if it's a credit card and there's tip so um grand total and this payment type if this uh payment so we're checking if it's cash or credit card um if it's cash the change tip will just be zero automatically because there's no there's no tips on the till so current payment will be zero current payment uh okay so there there's the export order there's the export payment now let's um combine it all into this closed sale uh method first let's get the timestamp and um previous sales data and ui we want to clear the paypa uh get rid of the paypad when we close and this dot clear payment and this dot clear order and ui reset the invoice number and it should increment okay so we are adding those up we can clear it we can delete let's do a so that's change and then that sets it so and we're incrementing the invoice number so that should be pretty much we should be ready now to paste it into our google apps script so i'm going to get back to the id i'll keep this open just in case but probably don't need it again um all right so here we are back in our ide and i am just going to paste this into here now like i said before there's a couple of changes um so i'm going to paste it below just so we can we'll replace this css first um and that's going to replace this link to the style sheet we'll get rid of the javascript there because we will link to it down here at the bottom of the body right at the end so there's our links to our external css and so i can delete i can get rid of this that's the original and within this style i will now copy all this css and within the script i'll copy all the javascript but we have to make some changes on the how the data closes out but this is a start um now i'm gonna do it actually before i do it deploy i just have to run get permissions on this probably we have to change the name to styles okay it's not asking me for permissions yet um okay so um before we well let's just take a look if this is working at all [Music] there we go so that is loading and it seems we're working pretty well we can clear it we can delete and the paypad comes up close sale comes up back works clear works credit card okay so everything seems working good but the one thing we cannot yet do is write to this and this does not seem to be reading from the right one let's try this again of course it's not reading from the sheet yet it's still reading from the mock data that was my mistake okay so um let's just create these functions first uh that's that are going to read the data so i just want to do a and so get items and let result we'll initialize a blank result and res.items equals w s get range and we're going to start on the second row and first column get last row and we'll do minus one because we have a header and get values okay so that's what gets our 2d range of the items which we're going to use for the menu but we also need the sales so we'll change worksheets get sheet by name and we'll do res sales equal and we'll start on two on that one and get last row minus one and goes to six column get values so that's how we'll get the sales and then we'll return that object so this is an object with these two which we're going to pass into the javascript and then for writing the data i'll declare a couple of constants and we have we're going to have to parse the data when it comes in as text so parse data so that's going to parse the data that's passed and another constant order so we need to know the length of the order so we can select the range to paste it in or to set it order so imported data order and then the length of the order and this is equal get active spreadsheet and we'll select the worksheet get sheet by name sales and then the range get range get last row order length so that is going to set the sales um the order based on the lengthy order and or that's going to get the range and then set values and place that 2d array from the javascript into that now let's set the payment change the worksheet get cheap by name payments and uh payment columns just get in case there's no tip um there's no tip information just find out how many columns there are in it and then range equals range get last row plus 1 1 1 payment columns and set values finally ported data payment okay so those are the two functions they should be good to go we can now uh use uh change the javascript uh to use those as well so let's go back to the javascript and we'll have to change it to work now within the app script and we're going to go down to export order and so we're going to change this up a bit so we'll let export data we'll initialize a blank array because we're passing in 2d arrays and um instead excuse me we're going to push it to export data but we will also excuse me push it to this and i'll explain why shortly and then what we're going to do is just return it return export data and for the payment i'm going to change a little bit i'm going to force a 2d array even though it's only one line we need it to be a 2d array to set the do the set values so since we're doing a 2d array i need to just put the zero index in all these so that should work and we'll just return current payment and so then moving on to the return current payment moving on to this so we have the timestamp um and then we're going to change this a little bit i want to make i want to declare cons a couple of variables here order [Music] data equals and payment data and then i'll take this out export data and i'll just create this object with order order data and payment payment data and uihide paypad this clear payment this clear order this invoice number and then i'm going to add a google script run and this is where we can run the function that we just wrote but i have to pass in a stringified object which will unparse which will parse when it comes out on the other side we have to stringify it going in so that should pass it properly to the set data now when we go back we're going to get rid of this all this mock data so we can get rid of that now because we're not going to use it so i got rid of the mock data and what we're going to do is in the order instantiation uh the order instantiation will change so we declare a new order but all this stuff we will have to wait um to do that so i'm going to create a function function sheet data and within that we're going to run google script run and we're going to do a with a with success handler with success handler and um we're gonna pass in what we get we'll call this this is gonna come from the callback function the data array so that's going to be the parameter and from the data array or it's going to be an object so we'll get items object values data array items and sales equals data array sales and this is where we will put in these so order menu will equal items and previous sales will equal sales and we'll put these two in there too and then we have to put in the function the google apps script function which is get data and then we have to run it and we'll run that here sheet data so this will enable us to run wait for this data to load for the invoice number and the items and it'll also should allow us to send the data back to the sheet so let's see i'm just going to redeploy it just in case okay we need authorization okay so let's check if this is working uh i'm gonna pull up the sheet it's loading the data so it's loading the items from the sheet [Music] let's check we'll change the price of the salad and refresh so the it's updating um it's reading from the sheet and now let's try to do an order if we look at the historical orders it is incrementing by one and we're going to create an order i'm going to pay by credit card and i'll say the customer pays 50 bucks and leaves a tip let's see if it sends it it sent the invoice it incremented the invoice number but it didn't send the payment let's take a look so it's not giving us much information here um but i think that we will get more information in the executions imported data is not defined set data okay let's take a look 30. imported ah spelling error okay well refreshing we mainly want to see if the payments go through okay another error let's take a look we'll go to executions and this has failed imported data is not defined oh another another error um there we go so the payment was paid passed and the invoice was passed and so now this is functional and again you will would want to configure it for your own business you know the way the tips work you might want to add functionality where you know the customer can leave a certain percentage of tips you want to add different credit cards so you can record what kind of credit cards paid what you'd obviously want to change change it to add uh you can change quantities and price of individual items but it's a basic start of a functional pos system and it writes to google sheets and later if it gets larger you could switch to a database but for a smaller operation google sheets should be good enough um and that's about it i hope you enjoyed the video please like and subscribe thank you

Channel: Projects For Entrepreneurs

Views: 27,379

Rating: 4.9622641 out of 5

Keywords: google sheets, google apps script, javascript, html, css, point of sale, google workspace, google sheets tutorial, apps script google sheet, apps script tutorial, web app, point of sale app, apps script, web app tutorial, point of sale application, how to make point of sale application, point of sale web application, appsheet point of sale, point of sale application in excel, google sheets apps script tutorial, google sheets point of sale, Point of sale google sheets

Id: ccVBKUUJUYI

Length: 217min 16sec (13036 seconds)

Published: Thu Jan 21 2021