How to Build Enterprise Workflows with App Maker (Cloud Next '18)
Anyway. Oh I gotta introduce myself my name is Christian Jacque I'm a Google cloud developer, advocate I'm. Gonna be talking about how to build. Workflow. Type applications, in app maker. Quick. Show of hands how many people here have already tried. Or worked, without maker to some degree okay. So we got some familiar, folks. Here hopefully. What I show you today will give you a little bit more insight on what. You can do with that maker here's. Another quick poll how. Many people here are more management, side like IT decision, maker as opposed to developer, okay, yeah yeah that's kind of what I expected as well so I do have technical content, in the, demos. And in the presentation, but I'll just keep that in mind so it's not purely just like a technical. Walkthrough things like that. So. A little bit about myself, I've, been around for a couple, of years now, working, in a couple, of different Silicon, Valley companies. Software. Engineering product, management. Technical. Program, management and, then now cloud. Developer advocacy, and. Basically, focusing, on Google, Ad maker these last few years I was, actually the first pm4, at maker when it was an internal, 20%. Project and it. Was actually kind of a neat, experiment. That our CIO at, Google had wanted. To see if if we could build a, technology. That, would allow. People. To essentially help themselves in building like these smaller. To medium size applications, that would. Wouldn't, really fit they wouldn't really work with like a traditional, engineering. Resources. Behind them so it just wasn't economically, viable and so with this product you know that maker basically, was to essentially. Help mitigate or dampen, shadow, IT and get, everything under kind of like the same technical. Umbrella, so to speak and and this product itself was also you, know blessed by our privacy and security so there was no issue of any kind of random weird. Stuff that any 20%, Googler engineer could create it on their own so. In that sense that that's what led to the beginning of that maker within our corporate engineering department, and I helped you know get us to to, the point where we could actually feel, like we had a viable, product and we didn't early a couple years back, and then then, that began like another, journey as well as. We worked, our way towards doing our actual watch so. The, goal of this session basically is just to kind of walk through you, know introducing, that maker for those of you who, are, a little bit new explaining. Kind of high-level concepts, of what are the the, goals behind it I think I touched it already, and, then just drop into a. Demonstration. Of how to build. Applications. In app maker and so I have some. Stuff that I'll just build on the fly and then I have like a specific. Demo, that I created, recently, that I'll share with the community but it the goal was for this particular demo, that I were to sample app I guess it was just to show how you. Could build like a document. Workflow application, without having to get so, deep. Into the code and so this, will complement, the existing. Document. Workflow example, that we already have in the product alright. So. These are the general topics I'll be discussing. Kind. Of pretty. Straightforward, talking, about you know a little bit of background I, will, talk about some of the use cases that we've seen in. Various, enterprises starting. With Google and then, as we've launched, our trusted. Tester and early adopter programs we watched a lot of our customers, and partners building, like a number of different use cases as well, and so that all kind of factored into the evolution. Of app maker over time and, then I'll finish it off by just building or building, components, of like a workflow. Application, right here on, the fly and I'm glad I have network connectivity, as well because that was a bit of an issue.
Directly, But. For this one just to kind of give you a feel for what what, it's like to work with that maker you, typically you, have like our. On the left side a little. Bit cropped well. Yeah. We are a little bit cropped. Unfortunately. As. You can kind of see there's like data pages, and scripts and essentially. You you build out your database under the data tier you. You. Know build. Out the UI obviously, under pages and scripts for any custom, code so, in this case let me just go ahead and pop open the widget, palette, drag. And drop a button onto the screen. And. I, might want to generate. A little bit of code so this is like a script, generation. Wizard. And I. Just have like a function there. And. I can go here and double, click on that. So. This is like really, kind. Of intro stuff here and then. I can go over to the property editor on the right side and, change. It into doing like a custom, action so, in this case I'll just call. This. Function that I just created and then. To test it I click on the preview button and. That. Sends it over to the server and. Then, we have this little button there and, I click on it and says hello and happens to grab my my, ticular username so, that's just kind of a real small teaser but just to give you an, idea what you can do with that maker let's. Go back to the slides so. Also, I wanted to kind of step back a little bit and talk about some of the use cases that we've seen in the real world and, kind of help set the context. So. Over the last you know year and a half two years we've been working with a number of companies and helping, them with their various use cases some. Of them are more recent I, know of like for example we had a EBV olya join. Us on stage on Tuesday Cleo's, right there we. Had a great time basically helping them work help. Brainstorming, looking at their use cases and they had a hackathon these. Are kinds of things that I really enjoy going out and meeting the different customers and helping, them be successful but. In general like I've seen a lot of a lot, of familiar patterns and starting, from our Google experience, and then how that kind of transcended. Over into the outside world. For the most part the applications, that I see that tend to be built are are, either like dashboards, or tracking, applications. And, then a variety of workflows and so like. A training workflow, was I could think of one in particular where, there. Was like an initial. Initiative. To build something from scratch using cloud platform, but it ended up being a much more economic, economically. Feasible to dis build an app maker since it was basically a straightforward, workflow, application. And, then of course document, workflows that's a very common pattern. That we've seen so far and. So, in, order to kind of get into a little bit more of the meaty stuff with that maker I'm just gonna kind of give a general. Technical, overview, of that maker and I'll dive into like the the, the. Main technical, artifacts as well so, first up is the architecture. Albeit. This is somewhat simplified but, you know at the top you have like your editor that's, being served to you through a browser it's coming from cloud platform, and it's, just what I showed you a second ago it's like you have your developer. Environment, it's. All working within a browser there's, no SDK, downloads, or anything like that the, the most I. Would, say supported, browser. Environment is chrome that's the majority of the QA but other browsers do, work with with that Mike here as well and then, from a server, standpoint, when you actually click publish or a preview that run that basically, takes your application, bundles, it up sends it over the wire to the server and that's running in the Apps Script environment, and once, you're on the Apps Script environment, you have access, to all of these different services all, the the, things where you can like create, Docs edit, Docs fetch, data from sheets send emails etc and so, it's a very rich environment for the server that. You can have this is where the real magic of like cool workflows, can come into play and.
Then Finally since app maker is more like a traditional, database. Application. Or web application, environment. There is the the notion that you're gonna have like a primary, database, that you were working with and so right now we have cloud sequel as the recommended, default. Database there are other ways to access, data and this is also an area that we're looking to continue. To expand so though there will be other options as well but for today the. Cloud sequel option does provide the most secure for. Database, that you can build for enterprise, applications. And. Of course you can also step out even today using just. REST. API is, JDBC. There's, a JDBC connector within Apps Script that you can go out and talk to databases, my, sequel just natively you, do have to do a bit more scripting, if you go down that path where you create, essentially your own data, access objects which starts to getting into more coding. So. It I touched on those three main technical, artifacts I'll, go into a little bit more detail obviously with these so, on, the data side your. Goal is to essentially use, like this declarative, data modeling environment to build your, your model objects, and then set up like the the queries that go against and fetch the data, the. UI itself as you saw it's like drag and drop you, centrally, open up a widget pallet pull over whatever, UI, constructs. And then you can go to the property editor and set any properties. As needed you, can set up events to kind of trigger such as when you click on things or when the thing when, the actual UI element, loads you. Can set all that up to execute. Whatever you need to and of course the the kind of the glue that makes like, more I would say sophisticated. Workflows possible, or. Customized, behavior is within, the scripting and and. Scripting is kind of like the magic, that makes everything all all work, as you had expected now. You can get away with doing some very basic applications, that's without any code at all you could build like a crud. Database, application, so if you know what that term is you can create absolute update replace, delete and, even search without writing any code as well. So. Talking about models, this, slide kind of shows like, a typical. Transition. Where you're coming from like a spreadsheet or a CSV, file you can then pull, this into the app maker model editor have. The structure, of the spreadsheet be replicated, into a data. Model we. Have like a nice wizard that will scan through the the spreadsheet, or the CSV file that you upload and give. You all those fields for free you can then on your own customized, further and add additional, fields and such. Another. Very, important. Concept to know is data, sources data. Sources in short are just like queries, that go against your models and so, whenever, you create a new model you'll have a default data source that does like a select star and pulls all the data out and it will typically have like a hundred records. That it pulls back out at a time but. Then you can also customize these, data, sources to, set up further, filtering and typically. In a real application you're going to have multiple. Data sources going against a a particular data, model so. That's an important concept to know. In, relations, this is another very powerful feature with, that maker in the sense that you.
Don't Even need a relational, database but you can as long as you have your models you can set. Up relations, between those two models and they've, pretty, much follow standard, you, know relationships. Slow one-to-many, one-to-one, many to many, and you do it in in the visual sense so you just put them side-by-side and, you can set up the quote. Arity, I think that's a term that tends, to be used sometimes, for. This particular demo, or application, that I built I'm not actually using relations, but you, can see plenty of other examples of how to use it all. Right so, let's go ahead and jump back into the demo. And. For this one. I'm. Gonna start building a data model so. Just. To kind of set the stage actually maybe. I. Guess, there's no way to kind of, decrease. The. The. The. Demo screen a little bit so we can see the left side. No. Anyway. I could go. Okay. I'll just go ahead and keep on away here so. So, for the data model over. There on the top left there's. A little plus button I'll, click on that and, I'll go ahead and set up the Oh before, I do that let me just show you really quickly this, is going to be the source of my data model and this is very typical like, a workflow. Within a spreadsheet so you've probably seen that it's it's kind of like a natural behavior to do that so. This in this case it's like a document, workflow. Implemented. Within a spreadsheet so there's like you. Know things like the. Document URL very, important, when, do you want this to, be reviewed, by has. It already been reviewed and approved or, not and. Then of course who you want to actually review it so. Yeah so this spreadsheet will serve as kind of like the starting point for data model because, I go over here I click. On the plus button and, I'll, just accept the default cloud, sequel setup that I have for my particular domain, I can, talk about that more depending, on time but basically this is like a step. That you'll want to do if you want to set up called sequel that's the default. And. Then let's see you'll set up I'll, name this review. Request. And. This. Is the little button that I'll click on to allow. Me to, go. Out and search the Google. Drive for the spreadsheet that I was just showing you and, it, scans the spreadsheet, and I can see that that matches what I want to create my model from and then. Based off of the the data within. The spreadsheet it will essentially, deduce, what kinds, of data types that we want it'll also generate the field names appropriately, so you can see string number or date boolean.
Those All look pretty good so, I'll click create. And. Then now we're in the data model editor I can, customize this further so for example maybe I want to make the the. The docq RL field, I want it to be required. I, could. Even change the this is a sequel specific, feature but I could change the the, type from bar car to. Text. It'll give me a little bit more room to work with so I'll, just change the sequel type there on the fly and. There's, even other stuff I could set up regular expression so for validation and such and, even put in the error message right there. Let, me do one more customization. I'll go into the priority, and this, is a number and, for. This I'm going to go ahead and just limit it to four possible, values so, I click to set the value, here it's a little list editor. And. I'll just set it to 1 through 4 and that's. It so my data model is good to go I can, actually build an application with that also, if I click on the data sources tab I do have this default, data. Source which, will serve as my interface to my data if, I wanted to customize the query I could go into this this, little entry. Area here I can, change the number of records that it returns and so forth also, automatically, load data whenever you view the page it will automatically, fire the query so, pretty straightforward stuff. Anything. Else I think, that's probably good enough for now so, I'll come back to the demo in a second but so just getting back to the slide so. You saw in just a few minutes I was able to take a spreadsheet and turn it into an actual workable. Data model. Moving. Ahead let's talk about the UI so. The UI is relatively, straightforward there's, you know three main, artifacts, there like you're working predominantly. With with pages, pages. Are essentially containers, where you can put these UI elements, known as report we refer to them as widgets the. Widgets themselves, have all properties, you can bind the widgets like a text box back to a data. Model field and then it stays synchronized, so, you don't have to write data, access, code to actually do the synchronization it's all handled for you, page, fragments, are just reusable, UI. Fragments. Like header menu footer, and. You can customize you can build your own and whenever you build it your own page fragment it will then show up on the widget palette so, then you could just drag and drop it onto your UIs, and then, pop-ups that's another cool. Feature that's been it's. Relatively, new but it provides like a whole bunch of different types of dialogue. So ranging, from like a simple empty, dialogue to like a loading, or a snack. Bar like a little thing that will pop up and give you a message so. These are actually pretty fun to work with and I'll show you how to have it's pretty easy, now. For from a design and data binding there's some key things to know as.
You Can see it's a Google material look, and feel that's built in but. That's not to mean that you can step, away and do your own UI design, you can totally do that you can just turn off the. The styling, and then you can go in and build your own CSS look, and feel what, I see typically those people are very happy with the material look and feel but they just might tweak it a little bit or select some of the various different. Style variants, so we provide like a number of styles that you can select on. A widget by widget basis didn't have like a button rendered in like a circle like a fab button or whatever and so that's just kind of point-and-click at that point and, there is also a very helpful CSS editor where. You can type in some code and then it will do code completion to allow you to do, some you know somewhat advanced, CSS code, without really having to, really. Be, a CSS, expert but it's helps. You along, and of course the data binding feature an extremely, powerful feature that has I match it's you, can go through data, bind any types of elements or properties. On various widgets and then have them connected. Back to your database and it's not always just a data data model field it could be like an expression of concatenation, of server-side, data that, then gets sent down and connected to your front-end UI. All. Right so. Switching. Back to the demo. And. All. Right so now I'm going to go to the, UI so, again this is the UI that I used the starter app there's not really much going on here, so. For this one I'm going to build. A table that will allow me to track, all of the document, review requests, and so, in this case I'll just pop open. The. Widget palette I'll drag and drop a table and. It'll. Just define and I'm gonna set it to the same default. Data source. And. I'm gonna have a. Couple. Of things show up. Let's. See I don't need the comment. You're. Approved. Mmm. It's. Probably good enough I'm a back, approved. And. Then I'll accept the default options. For generating the, table and. So. Now we're looking at a design time view of the table it's basically a repeated row we. Have in this case we have just, labels but if I made it editable I would actually have, you. Know dropdowns, or date pickers and so forth all right now, the other thing I want to do is add a button so that I can then launch a dialog. To insert, new data so. In this case I'll just drag a button onto the screen here.
And. For, this one I might change it. To. Say add and. When, I change it to add I can actually take advantage of, the fact that Google. Material, has these keywords, that allows me to use an, icon and so by putting ad it actually changed it to when, I render, it as a as, a, as an icon it shows up with a little plus button likewise. There's like other things like fab mini, right. Here and then. So there's my button and what I want the button to do is when I click on it I wanted to launch the pop-up, so, to do that I go over to the property editor. My on-click. Property. And. I just scroll down here, and you'll see that there's the option for a show pop-up and, then, I have the create request a, dialog. I don't think I showed that yet but basically, I have this pop up here call. It create request and it's, just empty at the moment but I'm gonna fill that up now. I used. The the. Pop up wizard, here to select and, I just selected the empty pop up to. Do, that beforehand, and so, now I'm going to drag a form into there it's gonna be like an insert, form right so. This. Is where it gets fun so I can. Drag. The form same, as before same data source I specify. That I want it to be insert, and. I don't need all the fields I just want the primary stuff there. The. Due date I don't need the approved, the. Reviewer I need in the comment. So. That, should all line up nicely and that's part of the reason why I, pre-built. The. Dialog such that it's a it will fit nicely. So. Now I can go in and customize my, form so, now, that as you can probably guess, pushing. Or making, someone such that they have to enter in a URL is kind of a painful thing so, in this case there is a nice little drive picker widget. Right. Here which I'll just drag and drop right here onto the screen and, then. Again, I can change this the. Text to. Be an, icon. And, so I'm gonna use the keyword drive, and then I turned, the style variant over to icon. And now I have that nice Drive but, also as you can see it kind of shift everything down and so this is where you, want to start to get into a little bit more. Oops. I. Say, flow layout types of features where you can you can define different panels, that have certain. Flow. I guess associated, with it so in this case I selected a horizontal, panel and then, everything will just kind of snap together in a horizontal fashion so I'm going to pop this up, inside of that panel and then, I'm gonna take, the the dock URL and. Drop. It right inside there and now, I just want to stretch it out so that it will, not. Just fit to content, but I want it to. Fill. Parent. There. It is, so. And everything shifted over nicely, now. To make the drive picker widget actually do something I need to set some properties so, we have here the selected doc you are L and that, just means once I pop, open the DRI picker I want, it to actually send, that. Into, my field, the doc you are oil field right. And.
I'll Actually walk through this application as it's working first. I'll give a quick demo of it working and then I'll walk, through like the different components, that make this possible but, as you can see it's pretty straightforward sends. It off an email the reviewer get said he can click on it and then he or she gets it and then he can click on click. On the link and be. Able to go to a. Approval. Page and either you know accept it or what and then, there's, a couple data, updates and then it goes back to the requester just letting him. Or her know that the that the workflow has been completed so, pretty straightforward. So. I will show you how, it works so. This is like the cooking, show I was. Debating whether I wanted to do. It all from scratch but it's, a little bit too much to do from scratch and the, time I have so in, this case I'm just gonna walk through the application, first off. So. To do that let me just so here's the application as, you, can see it's pretty similar to what I had before I have a table I have a little button there to kick off to create a new record I have, the create request, dialog, and I. Also have this. Approval. Page, and. I'll get into a bit more of the details of how that works but that's basically how, the end user is going to they'll get the link and they'll go back to this approval page -, -. To either, approve or deny or whatever alright, so for, this one let's, just kick it off here I'll. Click preview. And. While it's loading on the server I'm. Going to make sure that I don't have any emails here because I'm going to be referring, back to this email. Application. I'm. Going to close down this. Window so I don't get confused all. Right so here's our workflow application, I'm going to pop. It open I have my little same, UI that I created from scratch before.
And. The dry picker window oh well I'm just going to do like a review. Of my presentation. And. I'm going to set up the reviewer again, as myself I, guess, ideally I could have like two different people but, you, get the idea so anyway there's my my. Data there I can set up the due date as, maybe two days and. Set up a priority as one, whatever, so. I will click Submit. Now. I have this record here but, at the same time I will, go back here and I see that there's an email that popped in and the. Email says oh you, know greetings, reviewer you have been requested, to review the following document. And this there's the actual URL of the application. Itself as well, as the actual. Record key as of parameter and then. The actual page for the approval so, then I'll click on that and that, will take me over to this page and there, was notice there was like a quick little flicker where it pulled in the right record I can explain that a little bit more detail but that's basically how I can locate it and there's even some security. Settings that you can lock it down so only that person can see this record but. Anyway I will. Put. In a comment. Looking. Good, I'll, click approve and, that will go ahead and update the status of that particular record and, if, I want I could go back to the main page here and, now. I can see that the approved, is now sitting true but, more importantly I can go back to the the email and. I, should have a new email sitting, there so it says review, complete and, then, now I can see that you know the document here which is, my presentation has, been reviewed and it's coming, back with as. True, being approved and it's. Looking good now I deliberately, kept, this simple, I could have made a nice rich HTML, page but for this I just wanted to kind of convey, the the basics of passing. On some of these you. Know values, in the emails all, right so that's essentially the entire cycle. Or the the workflow in a nutshell let me go back to the the. Actual application, to explain how it works, and. So there's a couple couple. Things that are triggered when a new. Where. The basically, the workflow gets kicked off right, when you create a new record so, on the, events side, of things on the, after creation of a new review. Request. There. Is this function. Here share link via email and I'm, passing the the, the. Actual reviewers, email, and. I pass the doc, URL, as well as the record key and that's actually critical, because I want it to be make, sure that I'm synchronized with that so, this is a server script so I have it right here share, via email right. At the top. Let. Me see if I can zoom in a little bit to see if that works for you guys. Okay. Cool. So this is the thing that gets called right when the record gets created, I generate. Essentially the URL that I want to pass to the end user or the reviewer, I'm. Using a little bit of app script to get the actual URL and then I attack on the provided, key I extend. Over I also attach on the approval, page so that gives, them the ability to go back to that approval. Page that I've created and. Then. Here we are at the approval page, so.
This. Is triggered, there's like a very important step when. It when. It gets fired off in that, it will. Let. Me just pull up the. Events. Here there. Is this unattach, event. So basically when the the the UI loads, it. Will call this parse, record, key /. Am and. So that's on the client and. That's, this guy right here, and. There's, just a little bit of code here just to to, grab the the URL, coming in from the request and just, double checks to make sure things are okay and then, it actually loads the. The. The, appropriate record and it's doing, this by grabbing. The the record key that's also been provided, and then, doing a load on the data source now, you notice that there is this custom, data source I haven't, showed that to you yet but it's it's a different data source that allows me to fetch the specific, record based off of the record ID and, so. Just to kind of return to that I. Have. My data sources and there it is right here and. This. Is where I have a little bit of scripting to, essentially grab the record key and return that specific, record and, there, is a parameter that I've added, record. Key which then allows me to kind of stitch, it all together this, gets until slightly more, advanced, you, have to kind of read through like what is like the difference between query, script and query builder in a nutshell there's just like you can write your own script into return records from, the data source or you, can just write, straight well. Relatively, similar sequel, code to fetched, your your your data, alright. And. That's. Essentially, it and that will allow us to view the, contents, on this page and then, when someone clicks on approve, for example or deny, it's, basically Colleen function here finish approval, and it, sends either a finish approval as true, or false, so you can maybe, see it off to the right side right. Here and then. That finish approval is a client-side, script. Which. Is here, so. We got the widget which is our connection, to our data source so we can do data operations and then, we have the actual boolean, value of for the approval and so here I'm just like doing a quick update. Changing. The the, the. The field and then I'm doing a script run, to. Email. The response back to the the. The, reviewer, saying the review has been complete, or the, yeah. This case they added the reviewer complete and that's. Pretty. Much it so let's. See there's. Anything I wanted to touch on. So. Yeah it's, a it, does take a little bit more coding to get that final. Finished. The loop so to speak but that's. Pretty much it any, I, guess, we can flip over into questions I'm right about on time. So. I wanted to make sure that you guys also have. All these links. Feel, free to take a picture or you'll get the slides, there's. A relatively simple code, lab that is relatively, new, if, you have some newbies. Getting started before, subjecting, them to the, full-on template. Experience, for all these advanced, templates just, doing that simple code lab which walks them through a basic, data. Modeled and UI creation. And. Then of course there's the other stuff that you can do like you can join the forum and. Of course if anyone doesn't have that maker and. You're looking to get at maker you just have to, G. Suite business, or enterprise, and edu as well. Let's. See and, then yeah, other. Doc's and things like that that you can you, can not jump into as well thanks, everyone thanks, for coming out early Thursday morning after, a Wednesday hope you had, fun watching, this early, morning demo. You.