Collaborate on Personal Receipt Template for Research and Development with Ease Using airSlate SignNow

Personal receipt template for Research and Development

imagine building an app that can scan pretty much anything that you throw at it and that means you can build a personal finance app you can build an expense tracker or you can build a general purpose scanning app essentially a scanner that lives in your pocket well in today's video I'm going to be showing you exactly how you can do it using an amazing AI powered scanning framework now before we get started as always all the apps and all the resources that I demonstrate on this channel are going to be available to view and or clone from my patreon page and you can learn more about it using the link in the description below now if you Google for document AI you're going to be redirected to this page right here and this is an amazing AI powered scanning framework from Google Okay so this allows you to extract structured data from documents and analyze search and store this data and this essentially is an amazingly powerful framework that allows you to extract data from anywhere okay so you can essentially scan any kind of document and it's going to figure out what the data is all about and it's going to kind of tell you what all the data means now if I scroll down there's actually a demo that allows me to try a document AI in my environment okay so it allows me to upload the document like an invoice and see the structured data extracted so actually prepared some receipts some random receipts from the internet and if you come over here and you choose expense and you click here and you upload one of these receipts let's let's say this one right here it's going to scan them and it's gonna tell you what the data is in that receipt so check this out it essentially scanned the entire receipt and it also is telling me what all the data means right so it's it knows that the supplier name is Walmart the phone is this field here the address is this field this is very very useful so it's not just scanning it and just telling me you know what the data is on that receipt it's actually kind of telling me and giving me the categories right so it's giving me the amount the product code the description item let's try one more receipt we're gonna click here and let's say we're gonna pick this receipt right here just a random receipt click here and this is the result right so we have the supplier name we have the address we have the phone line item we have the amount you know all of these amounts we have all of this data and if we scroll down we also have the total amount right so this right here is the total amount of payment type receipt date purchase time etc etc so everything is there for me to look at but not not only to look at but to actually extract this data and actually do something useful with this data now this is awesome technology and everything but there is one main hurdle when it comes to actually building apps that Leverage this technology and that is they have an API that allows you to build you know python apps JavaScript apps etc etc but what if you want to leverage this technology without writing a single line of code well how would you do it well fortunately there's an amazing tool that allows you to leverage this technology and build apps that are able to scan pretty much anything that you throw at it without writing even a single line of code and that tool is called a rowi okay so you can head over to roy.io now rolly is an amazing low code backend that allows you to do a ton of things either with low code or with no code at all in fact in today's video we're not going to be writing even a line of code now Roy has graciously decided to sponsor this video but I've been using and recommending Rory for a while now way way before they even knew who I was and what my channel is about so I really really like this product and thank you very much to Roy for sponsoring this video and so once you're here on the main homepage of roy.io the next thing that you want to do is you want to create an account if you don't already have an account now Rory gives you a generous free plan that is actually what I'm using right now and so what I'm going to do is I'm gonna sign into my account once you sign into your account you're going to be redirected to a page that looks something like this so I have here a workplace and a workplace is really an umbrella it's a collection of different projects so the next thing that you want to do is you want to create a new project we're going to come in here and we're going to say create a project in The Next Step here it's asking us to set up a project so we're going to say project scan now the next thing we need to do is we need to pick a data source to connect this project to and so Rory supports Firebase and in the future they have plans to support postgres SQL as well as mongodb so we're going to select Firebase we're going to click on continue and right here Roy is asking us whether we want to connect at this new project that we're creating inside of rowi to one of our existing Firebase projects so I have a ton of projects here but what I'm going to do is I'm going to create a brand new file Firebase project so that you guys can see how to do it from scribe so I'm gonna click here so here I'm just going to give it a random name so maybe prj7 I'm going to leave this on defaults and I'm going to click on create project so now it's creating our project here all right and it's telling us that you've created a new project okay so you're going to click on continue and the next thing you need to do is you need to enable various Firebase services for this newly created Firebase project so you want to click here and once you open it up you're gonna be on your main Firebase project overview page this is essentially your Firebase dashboard and we have this new project selected here and you want to click here and get started to enable authentication Services next you're going to go back to Roy now you can click on verify and authentication is enabled we're going to click on continue okay so now it's telling us nicely done you've created a new project you're are going to click here and now you're going to be redirected to the main home page of your newly created Roy project okay so you can create a new table here but what we're looking for is we're looking to leverage that document scanning capability unfortunately rowi gives you a lot of templates that you can use there's tons of templates you can view all of them right here so there's lots and lots of different templates that you can use and these are essentially mini apps that allow you to leverage some form of powerful functionality without writing any code at all and so in this case we're looking to build an app that leverage document scanning so we're going to come here and we can actually take a look at this template so if you explore this live demo you can see that if you upload a receipt image you're going to be able to extract some data so it's showing you the data that was parsed and you can also extract any kind of fields that you want so in this case this template has total cost the day the supplier name and it's showing you the values right so we have a receipt from Pizza Hut right here we have Crowne Plaza Hotel we have Target we have Farmer's Table we have all kinds of different merchants and this amazing um document AI scanning technology is able to scan all that data and to parse it out uh and you can use it inside of your app and so once this data is parsed and this table you'll be able to reference this data from inside of your no code Builder whichever no code Builder you are using so we're gonna do is we're gonna click here use this template we're gonna click on setup Cloud functions we're going to click on continue now it's telling us to enable billing we're gonna up click here and as you can see right now Now the default the planet sparked no cost but what we want to do is we want to click here and we want to pick this Blaze plan pay as you go we're going to select this plan and we're going to click continue and I'm just going to set a threshold for like 10 bucks a month we're going to click on purchase and remember you're not going to be charged anything unless your app becomes super popular but then you're probably going to be rich anyway okay so do not worry about this at all so as you can see this was upgraded to our Blaze plan we're gonna go back we're gonna scroll down we're gonna click on verify okay we're going to wait a few moments and it's telling us billing is enabled click continue next you want to select the region where you're going to be deploying this rolly run instance so I select this typically I just do us Central I'm going to click deploy you're gonna wait a few moments here all right so it's finished and it's telling us deploy to Cloud run we're going to click on continue and it's telling us that that rolly run is set up okay so we are done here we're gonna exit out and now if you go back to tables and you click on this document AI expenses here and you say use this template you can immediately set this template up because we have everything else set up so we're going to click on let's begin and here you need to configure a bunch of fields I'm just going to leave it on defaults which is a good idea if you're just starting out create table we're going to click on next and now what we need to do is we need to enable this document AI API that our system is going to be using so we're going to click here I have this new project that I've just created here selected we're going to click on enable all right so we just enable Cloud document AI API in our newly created Firebase project or Google Cloud project and they're pretty much the same thing we're gonna go back we're gonna say next and now we need to create a new processor that's going to be able to process says our receipts okay so we're gonna click here we're gonna pick the project prj7 we're going to search for expense this is very very important you want to pick the right processor expense parser click on create processor we're gonna give it a name expense processor click on create after we've created this special processor we need to save a couple of pieces of information so the first is the ID of the processor so I have a new file here we're gonna paste it in here and then we also need to make note of the project ID and that's right here so I paste it in here go back click on next and now we need to paste it for rolly to know so the project ID is this one right here and the processor ID is this one right here paste it set values click next and the last step is that you want to give it the right permission so we're going to click here pick the project prj7 and you want to click here and you want to type Rory functions you want to select this you want to click on edit principle scroll down add another role click here and then you want to search for document and you want to select document AI administrator okay this is going to give permissions to rowi's function to access this document AI service we're going to click save okay now it has permissions so as you can see it has several of these permissions plus this new permission document AI administrator that we've just granted to it okay we're gonna go back click next and now you want to click on deploy functions and you want to wait a few moments for this to finish all right now it's telling us deploy you're going to click on proceed and it's telling us template has been installed successfully click on finish and so right now you are redirected to our new document that essentially is a mini app and you can start using it all within of Rolly right here okay so it's giving us some options we're going to close the saw and the way this works is you're going to click on ADD row and what you need to do is you need to upload an image here the data in all of these other cells is going to be populated automatically so as you can see the type of columns here these are calculated Fields because you see this kind of a function abbreviation here this f of x do you see it's f of x f of x f of x and what this means is that these are derived or calculated Fields you do not have to worry about these fields they're going to be calculated automatically they're going to be displayed automatically so all we need to do is upload an image here click here and let's say we want to upload um let's say this image here of a receipt it uploads and then we need to wait a couple of moments for it to parse everything okay so here's the parse data here here we have the total cost and here we have the suppliers name so the data has been parsed we can try another one add row upload something else how about how about this Crown Plaza right here upload that right there so it parse the data and we have the other fields automatically calculated so the total cost the day the supplier name Etc and if you open this receipt here right so if we go to this Crown Plaza receipt right here you can see that the total cost is right here 61.95 right here and then you have all this data so it does a pretty good job of kind of parsing everything out and getting the right values okay let's try another one let's try how about this one right here we're gonna upload this one and wait a moment essentially it's really really quick so it parse the the main data and then these fields take the data from here and display it so we have the total cost the date as well as the supplier's name so it actually parts that as old Target because it has that all there maybe some kind of a logo for Target yeah it's probably a logo for Target okay so it's not perfect it's not perfect by any means but as you can see it got the total and remember these are just you know a handful of fields that we're displaying we can display all kinds of other metadata right so if you double click here you can see what we you know you can see the data that we parse right so if you click on this tree you can see we have you know all of this data right here this is money value so you see it's telling you um money value and then the currency and the units etc etc and then if you scroll down you have more content this is probably the time and it's actually also telling you what kind of value you have so it says they uh daytime value and if you scroll up we have this date time value here and so you can get all kinds of different and interesting data and that is something I'm going to be covering a little bit later in the video so the first part of getting this app to work is done the first half is configuring role and testing that everything is set up correctly because if this works this data already exists in your Firebase okay this is the hardest part because if I go into my Firebase project here so here I am in prj7 and I you know choose firestore database here I should see the exact same tables with the exact same data already pre-filled for me right so here's the data this document AI expenses parser and we have three documents that represent essentially three rows right so we have three rows and they're stored as documents right so this is the first document right and these are the main fields we have date we have parse data we have receipt image the the only thing that we do is we upload we essentially set a receipt image so you need to set a couple of these fields that I'm going to show you a little bit later and everything else is generated automatically by rowing so you don't need to worry about you know making API calls you don't need to worry about you know any of the logic essentially because that's all done with that amazing template that rolly provided to us okay and so if you take a look we have data all of this is automatic the only thing that we upload and this is what I was just doing moments ago is this receipt image field right so if you head over to this receipt image when we upload the image a rowi automatically stores it in a Firebase storage okay and we get back a URL so it gets back a URL and once it has the URL it sends that image to uh this document this Google Document AI system and it gets back the the actual metadata data right so it gets back the actual metadata and stores it right here as far as data and so now we have all of this parse data right we have money value we have um you know so many other things right we have a lot of a lot of content right so if you scroll down we have type net amount and if you look for type you can see type purchase time and if you look at more types you can see type total amount so you have access to a lot of metadata in respect to that receipt right total tax amount we also have tax amount right here and this is 49.89 I think this was Target right 49.89 you see this is tax so it figured everything out and it works amazingly well and if we scroll down you have uh what else do we have receipt date right this is the date right here scroll down payment type right Visa right and if you look at the receipt you can see that this was a Visa charge right so you have you know you have access to a ton of metadata Fields not just what this template shows right this template is just a template right it's a way to show you what you know a couple of fields and to show you the possibilities but you have access to essentially the entire receipt here right so you can get you know the tax amount you can get the the type of currency whether it's dollars Euros Canadian dollars US Dollars you name it right you can get you know phone number of the the merchant the name of the merchant anything that you want it's available right it's available because it parsed everything and essentially categorized all of those fields which is very very powerful now the only thing that's left to do right now is to build a simple app that allows users to upload receipts and then display all the information on another screen and that's what we're gonna do right now so I logged into my account and I'm just gonna create a brand new app so I'm just going to call this so I'm just going to call it expenses I'm going to create a blank app I'm gonna click next and we need to make sure that Florida flow has access to our Firebase project so we're gonna find the a project ID of the Firebase project and that's right here just click on this gear icon project settings and this is the project ID copy that paste it in here click connect you're gonna get an error message because we haven't given flutter flow access to it yet go back here users and permissions add member paste the email address give it the editor role down add member okay go back here click connect and now it's connected next you want to click on order generate config files right here generate files you want to enable authentication and you want to create a user collection because obviously in this type of app you want to make sure that people are authenticated next you want to create your pages one for the login and one for the main page that logged in user C so we're going to click here and we're going to select a login page I'm just going to select this page right here call it login create page and this one right here I'm just gonna create a blank page and I'm just going to say home page create page start building okay all right so now we have a lot login page and we have a home page I'm going to create one more page that allows the users to upload their receipts we're going to come here next page and we're going to create a blank page and I'm just gonna say add receipt create page and now we have three pages now let's take a look at some of the errors here so we have a couple of errors with this template let's go ahead and fix it up as we do with this conditional visibility I'm just going to turn it off right here and I'm gonna delete all of this right here just to keep things simple turn all of this off all right so I fixed up the errors this is just a sign in page here next I want to create a sample account so that I can log in and add a receipt we're going to go back to our project we're going to go to authentication and I'm gonna go into sign in method and I want to turn on this email and password we're going to turn this on so that users can log in click save and I'm going to create an account I'm going to go into users a user and I'm gonna just add a random user alright so I added an account and now we should be able to log into the app okay all right let's go ahead and test the app to make sure it works we're going to create a new test environment all right so here's the app we can log in as that sample user right here click on sign in and now we are redirected to the home page so the app works right now let's go ahead and get it to display various receipts as well as the ability to add new receipts as well so let's go ahead and create a home page real quick this is our home page I'm just going to do home page and here we can easily list receipts so I'm just going to create a list view come over here maybe a we can create a row and then inside the row we can have maybe three text Fields okay so to represent different pieces of data so I'm just gonna duplicate this I'm gonna duplicate I'm gonna Center the row something like this and I'm gonna give it some padding maybe something like this and here we can display the various pieces of the information from the receipts but we can't do that just yet because we haven't given flutter flow the schema that we have so if you head over to firestore head over to the schema we have the user schema which is nice but we don't have the schema for the receipts so we want to go to our project and we want to create the schema for this document AI parser collection so what I'm going to do is I'm going to copy the name it needs to be exactly paste it in here create start from scratch and then I want to give it the fields uh to display the data so if we come back here the fields that we want to display are the date the supplier name and the total cost that is the only three fields that we want to display we can also display a receipt if we want uh later but right now I want to display these deal so I'm just going to say let's take a look it needs to be exact date supplier name total cost so I'm gonna say date this is going to be date time supplier name this is going to be a string and then total cost and it's storing the cost as a string it's not storing it as an integer so it needs to be string here and now we have our schema that exposes the data in our Firebase to flutter flow so we're going to go back here and now we can do a list view here a list query add a backend query query collection document confirm and then we can set the fields so remember we do have some data so we have three rows here okay so we're gonna go back to Florida flow and now we can display it so this first field uh we want maybe the supplier name the second field maybe we want whatever we want want the total cost and this last wheel do you want the date so we're going to come here pick the date format the date and let's say something something like this click confirm okay before you run the app you want to make sure that you have all data set up now like I said it's not perfect so for instance for this one it did not pull up a date so you want to set a date in this case so I'm just going to set a random date okay something like this because you want your data to be consistent okay otherwise you're going to have issues with the app so now that we have everything set up come over here instant reload all right and here's our app and as you can see we have all the data here being displayed so we have Target Crown Plaza farmer stable all the data is here and it's nicely being displayed because it was parsed successfully now we can give it some nice padding here so if we come back here we can come we can give a little bit of a padding to the roll so let's space it out a little bit so something like this and now if we reload it and now as you can see the formatting is a lot better there's more spacing and that way you can see exactly what is going on and you have a very very simple list of your data you can obviously sort it by any of these fields you can format it you can do all kinds of interesting things but the key here is making sure that users can enter new receipts and it's automatically going to display the parse data so let's go ahead and do that right now so we're going to go back to our app we have this add receipt page so let's give it a name add receipt and what we want to do is we want to create a widget that allows users to click on and upload a new receipt that we're going to be parsing okay so let's create a image maybe some kind of a placeholder and in fact let's wrap it inside of a roll so that we can nicely Center it wrap this widget inside of a row Center this row and now we have let's give it a little bit of padding from the top and so here we have a placeholder image and the idea here is that if you click on it you will be able to take a picture of the receipt or upload an existing picture that you may have of the receipt so we want to click here I want to come here we want to add an action so I'm going to click here add an action I'm going to search for upload utilities upload save media you're going to select that upload type you're going to select Firebase because we want that you know the images to be stored in Firebase and here you can you know you can choose whether it's camera or gallery or specifically camera or specifically Gallery so it doesn't really matter and so next what I want to do is I want to create a nav bar here so that I can access this page quickly and easily I'm just going to search for something like math maybe something like this and I'm gonna set up our nav bar show nav bar and I'm gonna configure it on the home page as well this is our home page and now we have home page and we have add that way we can access the pages I'm gonna do an instant reload right here all right so here's the app this is the main screen right now and if you click here we have this place folder obviously we don't have an image there but the idea here this is going to be the placeholder for the upload right so if you click here we pick Gallery we can upload the receipt so let's pick a receipt let's upload a random receipt and now the idea it's going to be uploaded and stored in our Firebase store here we are in Firebase storage I'm going to go into users my user uploads and this is the upload right this is what we've just uploaded this is the receipt right here all right so now that we've checked and verified that it uploads fine the next thing that we need to do is we need to make sure that it's able to process that receipt and how we're gonna do that well remember the way we do the processing is we need to add a row here and so we have the URL right so once we upload we get this URL and all we need to do is we need to add another um record another document to this document AI parser collection okay so if you take a look at these documents we have three documents here right now we need to add another one but we only need to specify certain Fields specifically we need to specify receipt image and we need to specify this download URL which is the URL of the image and we also need to specify the type of image that's the only thing we need to do everything else is going to be processed by Roy okay and so now what we need to do is we need to go back to our app and we need to create another document with this receipt image which is an array of these fields this map this is a map right here and so if we go back to our app we can go to our schema we can come here and what we need to do is we need to create a new record the problem is is that the record that we need to create is a complex record right we need to create received image then we need to create one element in the array and then this element needs to have these two fields and so in this case we can't really create these fields here right what we need to do is we need to create a complex field right so we need to create a data type we're going to come here we're going to create a new data type and the data type is going to be called receipt image type okay we're gonna say create we're going to add the fields that we need that we want and this is this download URL as well as this type right here that is all we need so just two Fields come back here say download URL which is a string add another field uh image type and you need to make sure that that its exact case actually just type so type is a string we're going to say create and now we have this receipt image type with two fields that we need to fill out and add to the document and then the rest of the fields are going to be filled out automatically by the system and now we're gonna come back here we're gonna go to this main document AI parser and we are going to create this new field so this is going to be received image which data type is of receipt image type we're going to select it right here this is a list okay remember this is a list because you see it has this so in this case it only has one element of this list or an array it's the same thing so this has one element of the array but we see the image itself is an array since as you're an array and this is a map okay so if we come back here now we have received the image which is a list of this data type and now we can add the right data and get back like all the other fields processed by the system so let's go back to the app let's go back to the UI and let's go ahead and fix our flow so we have this upload what we're going to do is we're going to create another action we're going to create a new document and the collection is document AI parser and we're going to add these fields now we're not going to add these fields we only want this field right we're going to remove these we only want this field and what we want to do is we want to add first item right this is an array and we we're going to be adding an item at first item and now what we want to do is set individual Fields so remember this is a complex side but we have this download URL in the type so I'm going to say download from variable and widget State uploaded file URL and for the type I'm just going to specify image JPEG just for JPEG file I'm just going to say done and then we're going to add a snack bar uh utilities alerts notifications shows snag bar image uploaded okay so that the user knows that you know things are working right we're gonna do a duration of all right so we are done there let's go ahead and reload the app and hopefully when it uploads it's going to add that record and the the rest of the fields are going to be processed automatically and then the list is going to be automatically updated with the new item so we're going to come back here click here gallery and then let's upload this receipt here we're gonna say open and then we're gonna take a look image uploaded let's let's see if it actually uploaded so there's the image and now we're waiting for it to process so it got the data and now it's going to process all of this so now we can go back to our list View and we should see the new item and there it is that's the image that we've just uploaded this uh Thai Kong store so if we come back here we can do another one Gallery let's pick another image how about this pizza heart upload image upload it go back to Rory and now we have this new record now we're waiting for the data to come in it parsed it and now these fields are gonna parse so now it got the total cost the day the supplier name go back to the home screen and now we have Pizza Hut being displayed here and we can also sort these we can also group them very very easy right all you have to do is come back to the home page and we're gonna go to this list view edit query and then you can do ordering right so let's say you want to order by supplier name you want to do increasing so like a to z instant reload then you're gonna see it nicely being ordered alright so now it's nicely being sorted in alphabetical order c f o p t right there and obviously you can sort it by any field that you want you can also group it by merchants and the way you you can group it by Merchants is by creating another list view in there and the first list you're just going to get the merchants and the second list view is going to filter by that specific merge and that way maybe you have several Pizza Hut transactions in that case they're going to be grouped under Pizza Hut and maybe you have several Target transactions that are going to be grouped on their target and if you have just single transactions but these Merchants uh they're just going to be grouped under the merchant but they're just going to be a you know single transaction under that specific Merchant now remember you can have more Fields here right if you go back to rowi and you click here this column settings and you go to column config you can see that this is actually pulling this total amount right and if you come back here and you go to column config you can see that this is actually pulling receipt date and remember what I told you in the beginning of the video is that it's able to get the types for the receipts right so like dates currency um total tax Merchant you know line item you name it so it says here receipt date and if you come back here and you go to column config you can see that this is supplier name and so theoretically you can add a new column and you can say well this is going to be I don't know like tax and you can say field type is going to be a derived right derivative right you're gonna do next and then in the function you're just going to copy that function from the uh the other columns and change the field the lookup field you know and whether it's going to be like tags or total subtotal name etc etc and that way you're gonna have when you calculated field here that's going to pull the data from this field here because if you click here remember there's lots and lots of values you're just looking so if you scroll down remember you are looking for the field type right so you have lots and lots you have type purchase time if you scroll down you have type supplier name if you scroll down you have type total tax amount so all of these types are available so you can get the specific data that you want so essentially you can have this table that we're looking at right here have as many columns as you want whereas fuel columns as you want it's really really up to you you don't have to be limited to total cost date or supplier days and this way you can take it as far as you want and display any kind of data that you want that you deem important in your app and remember and so if you like this app definitely check out roy.io thanks again to Roe for sponsoring this video and if you want to view and or clone the app that I built then you definitely want to check out and join our amazing patreon Community because not only will you get access to all the no code apps that I built on this channel all you need to do is find it click on it and then clone it or you can just view it just to see how I built everything and so if you are trying to learn no code if you want to build apps maybe a site project maybe you want to contract with somebody maybe you want to you know start a brand new career then joining our amazing patreon Community is definitely a worthwhile investment and you can learn more about our amazing patreon community in the description just below this video now if you're interested in some of the more things that I talked about when it comes to Rowley I'm gonna have a video right here you can check it out and learn some of the more functionality that you get access to when you use this amazing tool