Improve Processes by integrating App Maker, Data Studio and GCP (Cloud Next '19)

Improve Processes by integrating App Maker, Data Studio and GCP (Cloud Next '19)

Show Video

My. Name is Andrew I'm the Google. Cloud, I've. Spent my career in. Artificial. Intelligence jumping. Between academia, and industry. This. Particular. Next, is so exciting, for me because it's. All about how artificial, intelligence, has become a real, and significant, part of the world's economy and I'm. Imagining. The, students. I was teaching, 20 years ago about the. Futuristic. Promise of AI and although. We have a heck of a lot further go much. Of it is now actually here. Hi. Everyone my name is Rajan, chef and I lead the product team for for, cloud AI I've been at Google 15, years and and in, enterprise, the whole time because my passion is turning. Interesting, technology, like this into products, that can help all of you customers, developers. Partners, do. Really great great, things and I think AI, is probably, the most interesting technology. I've seen because, it can really empower, people, to really transform, it, so. In. 2019. I think. You've you're seeing this in this particular, meeting. We. Are. Taking. The. Business of, AI. Very, seriously, the, fact is that, where. Many. Of us were excited. About producing, tools. Which had the prospects, of helping transform industries. We're. Now most. Interested. In the science, of how. Enterprises. Adopt, AI. Effectively. Without, too many false starts. Safely. Reliably. And, of. Course in an ethical, and sensible. Way. Please. Take your seats, and silence your mobile devices our, session will begin shortly. So. Let's go ahead and kick this off here sorry, we're starting just a little bit late we had a little. Video issue we, didn't have the converter box so we're gonna be pulling out the cable right midstream but no worries so anyway welcome to our presentation. Welcome, to improve, process, by integrating, app maker data studio and GCP and. Just to kind of get going here Cleo you want to go ahead and introduce yourself hi my name is Cleo I'm a product, manager with, ADP financial, I'm also a G suite Google developer expert, and I've been working with app maker since the beta date yeah, and my name is Christian Shaw I'm a developer advocate I've also been, one of the early founders of, app maker when it was the 20% project, and we actually launched it internally, and then here, we are today we're working towards, you know continuing, and growing the ecosystem, so happy, to be here so let's go, ahead and jump right into it so. For this session today we're, gonna just I'll start off with an app maker overview, so if you how many folks here have not used that maker today or yet oh good, so we got some new folks here I'm happy to show you definitely, the cool stuff so. Clays gonna be doing a real quick demo on how to build like a simple, request application, and. Then she's gonna dive into like what they've done over at HEB. Alberta, Treasury Board right and then we'll. Get into some cool stuff with data studio she's got a neat demo where she's actually pulled, some real data and integrated. Into app maker and then also final. Demo at the end just kind of the art of what's possible with an app maker and GCP, or the vision. API and, then we'll just do Q&A from there on out cool. So. Let's talk about app maker app. Maker is a low. Code application. Development environment it's not an O code it's actually low code so typically, when, you start to build out applications, if you want to do any kind of level of customization, you do have the ability to drop into the scripting, environment.

That It does provide the. Main goal though is to empower, a larger, audience of knowledge. Worker or business, developers, essentially, people who have maybe a certain level of comfort on just working with data but might have some understanding of how to work with some, JavaScript, perhaps maybe a sequel, database in the backend maybe. Even some CSS so if you have some of those skills or even, if you have some of the older skills that have been around since the 90s with the rapid. Application development the. The application, development, methods. Are very similar such, that you can drag and drop widgets, onto canvas in the screen and then bind them to a back-end database so. That's essentially what happening here is why. Does that make your exists a little, backstory with AppMakr our. CIO at the time funded. Our 20% project which, was essentially, to provide a technology that. Would serve, to fill this gap of custom. Applications, that just needed to be built but were economically. Not, viable meaning like there's a lot there was a lot of internal, applications, that needed to be built that had requirements. That were more advanced, than what you could do with like a spreadsheet and so, and this was in Google and and what I've seen especially with other companies that other companies have this same need to build customized. Applications, that are internal, there they they serve definitely, a purpose but. What, happens a lot of times is like when there's no solution, you they get these very large bloated, spreadsheets, that can be unwieldy they don't have a very good user interface as well as you can often get shadow IT creeping, up where you can often, have people that have some technical know-how them they'll be able to provide a solution momentarily. But, then they they're often gone and then you're kind of left with this shadow IT technical. Debt so app, makers goal was to solve that process, mitigate, shadow IT and then provide a streamlined, process. For in, focusing, on like the core areas, of app development one, is the data the modeling environment so you don't have to write out all the code that serves, as your your back-end, database your, schema so to speak you. Can set up you know relationship, set up validation, and such all within a declarative, environment, secondly, the UI if. You're happy with CSS, HTML, that's great but for folks who just want to put, together a UI and not have to worry about it that's where app maker also excels, you can visually design your UI you, can drag drag and drop widgets, from a pallet and then bind those widgets to a back-end data source it's pretty, straightforward and then finally when you want to get into customizations, such as more intricate. Workflows, or really any kind of front-end UI manipulation. You have that ability just, by dropping into JavaScript, and if you want to integrate third party to scripts such as jQuery d3, or whatever you can easily do that within app maker applications. And then also the customization, on the server meaning like if you have some server-side. Logic that needs to execute Apps Script functions, Apps Script beans or services you have that all available. Too and so a typical app maker app will do a little bit of UI manipulation. It, might you, know even integrate third-party java scripts, or whatever, and then you'll often, just launch, server-side, code to do some interesting things, whether. It's Apps Script or even calling REST API to talk, to any number of third party rest services or even, talking, directly to GCP, and so that's what we'll be showing as well today so. How, how what, have we seen so far from a set of use cases so as you, may know app maker has been out in either beta or it's also was launched last year we've, been working with a lot of partners and customers, understanding. Their use cases and what we've found is that a lot of the use cases at least for the types of, apps. That they need built are fairly similar like there are a lot of tracking there's a lot of dashboards, there's a lot of simple workflows and.

This Is where app maker kind of finds its nation so this is the what, we've learned so far both internally, originally, at Google as well as working with our early adopters and, and partners and such alright, so, getting, into app maker the. Development, process, is relatively simple. Conceptually. It's like first, you can start by defining your data model your. Data model could start off as say a spreadsheet, so you have like the structure the different columns and then, you can then have point app maker to that and then bring. That into app maker and pleitos going to do a demo in a second then, you can design your UI so you can drag and drop whatever widgets, you want plug them into the back end you can even generate a good amount of you you are using some of the wizards and then, finally you know you're ready to you can customize there's another optional, step of adding, some additional code if you like and. Then the final step is like let's go ahead and preview test, it a bit and then publish it out to your users and that's, at the step where you can define who the users are they can be like a collection of different roles that you can then go you could go in beforehand, and define like this is an admin role they can see these pages this, is like a basic, user that can see these pages or even, these widgets, I want only the admins to be able to see this little link that takes them to the admin page things like that so it's all very granular you have complete control both. On the UI as well, as on the server so on the database back here and you can control who, can access the different elements who can insert delete fetch. Data so, it's very granule granular. And you have basically, complete, control in that regard so, I'd, like to turn it over to Clio and she's gonna actually show a picker in how, to build a pretty cool feedback. Thank. You Chris so switching over to my computer. Here today I'm gonna show you how easy it is to create a web, fully functional, web application, without writing a single line of code the. Example I'm going to show is, request. Feedback. Type, intake, slash management, type tool where. Generally, a team, would, need to gather either work requests, or feedback. From their user and, their team have to do some processing in it this, is very common in ATP and Google, Forms does work. In to some extent but once you get to like high volumes, of requests, or concurrent, users trying. To work with the same response sheet it gets a little harder, so. That's why with, AppMakr, you can kind of alleviate these problems this, is an example spreadsheet a. Typical. Example of a, list of requests, that you may have pulled from a Google Form and I'm gonna use this sheet in order to create, my application. So I'm going to switch over to app maker here. And what, I've done is use the. Starter. App template. Which is available when you create a new app maker project, once. You actually click on that starter, app you will see this for, the sake of time I pre. Created it and basically. It gives you some UI elements, that are, pretty nice to look at and you can start building your apps from here the.

First Thing I'm gonna do is make, my data model so my data model is essentially, my. Way of saying what types of data or slash information, I like to capture or, display. In the application. And I, do that by clicking the, add. If. Your TCO means set up your Cloud SQL database, you should just have that choice by default which is where. Data would actually, be stored I'm. Gonna name this model. I'll. Call it requests, and I'll. Utilize, the sheet I just show earlier. And. As, you can see it reads off those, values. And. Then. I hit next you, can see it grabbed all the column headers which gets, translated, to data fields, in the, data, model, I'm. Just gonna make sure to feel tightness correct, and so you can see there's different types of data, you can be collecting, this one is a date so I'm gonna make it into a date. Hitting. Create and now, my fields, are in, the data model. Good. Question the data is not in the data model yet you can actually import, the data if you want using this function, here on the top left. I'm. Gonna also utilize, the configuration. That app maker gifts, to each data, field to, kind. Of further refine, the status, column so first of all I'm gonna use the possible, value to say that the, status of a request can only be new. It. Can only be in progress, and, it. Can only be completed, so the user has to enter one of these free values, this way I don't have to worry about them entering something that doesn't make sense next. I'm gonna use a, default value, which, basically. Indicates, every request starts, as new, by default unless I specify to be something else so. There we go there's the data model and now, we move, on to the screen portion, this is where I'm gonna build the, pages, that my users, will, be interacting. With in. The application. Thank. You and, so. To do that we, use widgets and there's the widget menu you can see there's a bunch of elements, I can use the, two owls be, using is a foreman table for simplicity, I'm gonna build a single page app so I'm gonna put a form for people to submit requests and on the same page they're gonna see the list of requests, that's been submitted but you can have multiple pages too if you wanted to but for, sure. So. First I'm going to select the data source it. Will ask me to do so, it's the request I just created I'm gonna do an insert, form, and. For. This I'm just gonna get whoever submitting. To enter their description, and their, email, of their request. Now. Backtrack, a bit and there's some things I want to do on the page itself, as well so you can see the it, startup has a header and it shows the display name so, I'm gonna change this to request, intake, and. I'm, actually gonna say the whole page use this request, as its data source as this is a page to work with requests so what's a data source data, source is essentially a query view of your, data model. And. Let's. Put now the table, in in order to view, the list of requests. Here. We see, that now that I declare, it on the page level it's it will just inherit, it I'm. Gonna hide the ID but, what I want to do is the team processing. The request I want them to be able to, change. These, fields, the status assigned to comments. And the completion date, and. As you can see widgets, have. Property, switches, on the right here on the editor I'm, gonna utilize that to give some spacing, between the two the form and the table, so it looks a little better.

Finally. I'm, gonna link in the search box I'm, just gonna do a very simple search so I just want to do a keyword search on the description. So that people can find requests. Based on, just. The keyword on the description, to, do that I need to find the, search text box I have it selected I, need to use the query object inside. A data source as we talked about the source is essentially a query view and so. There is a query, object which. Has filters, I can say what field, I want to apply to filter to which is the description and, I, want to say if the description contains whatever, user enter. Return. Those results, the. Other thing I'm going to do is, to. Actually run the search I have to say. On, on. The case where user changes, value so it's called an unvalued change, event I'm gonna have it reload, the data source which, will take an account, click the filter, that the user just applied. And reload. The cast list, so. Let's actually see what I've done so far the preview, allows you to, actually see what the end user will see without actually, deploying, your application so, it's a little faster way to, check. Your progress as, you can see I have a form and I have the submitter and. I'm gonna say. And. The preview window also gives you a little paged page, chooser on the top left a little log window those will disappear, once you actually deploy it for, production, ok, and, now you can see I entered, the values on the form and now, it shows up on the table so it's saving my data which is great the. Last thing I'm gonna demo is the, usage, of the user picker so you notice, I had to type my own email in which is kind of long and tedious so. I am actually gonna, utilize the, widget known as, user picker, and. What. This will do is actually reads, from my organization's, directory, and be. Able to pull emails from there so I'm gonna bind its value, to the submitter, field in my data model I'm. Gonna label it submitter. And. Now. I don't need this text box anymore because I just made one and let's. Preview again and you can see the difference now. And, now if. I type just the first few characters of my name it shows it. Looked in the directory she finds me and now, it puts my email, in directly. Which is much. Nicer user, experience, and now, I can demonstrate the, search since not two tasks and I'm, gonna say I'm gonna find for all tasks, related to login and.

Let's Talk about that and. You can see it reloads with just one, record. Now. With. This is a very simple application you, can take this go, to your testers try things out and you can keep iterating through, it and that's the nice thing about app maker is so easy to deploy and, make, newer versions, so here's, an example that, I did where I just took that and iterated, a little more where I actually, completely. Took out submitter I wrote. Just a couple lines of code to say, just grab the whoever's, logged in grab your email just put in the submitter so that they don't have to enter it I've. Also said, if they, have, the, stuff if they change status to complete it let's let the submitter know that their request, has been completed, so. For example, now if you see on the, table is I can, change. One. Of these to complete let's say I was the team I processed, it I'm done, I, completed. It and you. Can see with the script, it actually auto populates, the date and I should be getting an email. After. That. And. Here's the email I receive. So. It's, even. If you have to write a few lines of code to automate, certain stuff it's just so simple and if you don't leave right any lines of code you still have a fully functional, app. So. Let's go back to the presentation. Where. Now I can, talk a bit about our. Success. Stories, within a teepee and how, at maker have been used, so. In the same line of kind, of a request intake tool our banking, operations, team have created a, certain registration. Application. So, this team takes requests, from lenders, who, needs to do very a variety, type of searches like core or registry, searches, on their, customer, and this. Request, can get quite complicated because of the different types of searches you can do used. To be a macro. Enabled excel, sheet the macros are used to make the sheet of, excel. Sheet a little easier to fill out and it, gets emailed to the team unfortunately, depending on the type it goes, to different teams so they have five email, queues kind. Of managing, this process, and it's just not very efficient, not very optimized, so a couple of the. Team members there have some. Coding experience not a not, a web application full-blown. Server, client type application, development. But some experience, and they decide, to take this on and, reimagine. How this could work utilizing. Some of the better, controls. On their, UI so here's the demo of the application. That they currently rolled, out and, the. Form is now more intuitive, based on what user has entered they. Get they produce a little checklist so that the user knows, oh I gotta fill in these items, there they, also are able to use the parent-child. Relationship data. Modeling, that atma can provide so that for, one parent, request they can do multiple, searches and. Be. Able and have users be able to enter that, kind of more complex, type requests. And. So. Once submitted the, requester, has full visibility of, that request, records, and on, the fulfillment, team side. They get now a work queue where they can go through and check. Out a request to themselves, and be able to change the status contact. The requester, if they have more information and so forth, so. This has been really successful it. Eliminated. Four, of, their email queues now it's all centralized, into the app maker app it. Reduces, the time of processing, from 24. Hours down to an hour and this. Team here really talking iterative, approach to this they did a lot of pilot testing, prior to full production release which lets them fix all the bugs and, also. Get the enhancement, they need from their testers, and because. Of that they are able to achieve a very high adoption, rate as as soon as went into production. And. They're, still iterating and it's. Now, that they have learned how to build an application these. These. Dusty's, team member have been able to actually respond. To all the requests, and feedback, that their, users have given them and be able to deploy them in no time at all so. Everyone. Feels happy. Because you know they're, getting listened, to and they see it in the app right away because, the team can respond quickly to, these changes. Next. Example, I'm gonna cover is the our procurement teams contract. Database, so, in the past they have a sheet managing. The list of the contracts, that ADP, holds, with our suppliers, and, there's. So many concurrent, usage, that's sometimes.

There's Like 20 people working on the same sheet which is, you know sheet. You can only apply filter ones so it, really, makes it inefficient, people are overriding, people's. Views or actually. Their actual data so, the data quality, is decrease, and usability. Is just not great, so. What they have done is they had a summer student who has also has some coding background and, they, key, came in and built this application, where now the user. Can, search. For directors they want as, well as add new records, in a much better intuitive. User interface, you, know logical, sections or, the possible, values, list. It so that it they don't fill it out wrong and they, can trigger assessment. Based on how user enter, certain things and do scoring, based on that. This. Really, cleaned up the quality of their data and now with this the validation, is better so they get better data better reporting. And better visibility, in general, so, now they can see the. List of expiring contracts, because that makers calculating. That for a time with the script and the. Scoring's are better and the overhead, of managing just, as improved, and they. Are able to remove. One FTEs, worth of work. Finally. There is the, loan review application. Which is used by a retail. Loan review team, so, this is their, process, is an example of where this bread she really wasn't a sign for what they need what they do is post audit review of lender, application. And they. Review of her compliance. Needs. And, basically. It's a little questions, and checklist, items they have to go through depending. On how certain questions. Or answer they have to do more checks and balances, and so. It becomes this long long, spreadsheet. That they each, special, review specialists, manage on their own it's. Not easy to actually, find, specific. Lenders unless you know which specialists and, which file was, it it was in so, it's inefficient they move from Excel to sheets and even then because, their process is not really designed for strategy it just wasn't really, efficient. So they said they asked me well can I make her help and and. For them they actually never coded, at all there's no coding experience for these, this. Team here so I swap, through them teach them how to create. The page they want how to do the data modeling, and they're. Able to create basically. The interface that they envision, how their review would work as. You can see it's a very long page, but now with, some coaching, you know they are able to actually do conditional, where they select one field and it hides other fields, based on what they say and also. They've learned some CSS, so they, even color-coded their own answers based on what user. User. Has entered. And. So. With that with, the automation with, the elimination, of tedious overhead, they save so much time and. The. Best part of it is they feel empowered and you, know for people. Who've been banished just working as a banker all their lives to.

Be That heavily, involved, in. Creation. Of a web application is, something they would never actually dreamed of until an app maker came along so. Now. Now, that theis covered. How what awesome, ask that advocate, can make let's talk about all the integrations, that you can do to make your app even better so, just just to kind of finalize. What you're saying though you're saying that basically at, ATP you have this is a working example with the different apps of true knowledge workers, that were able to in, you know essentially with your little bit of guidance and kind of helping they were able to build sophisticated solutions, after yeah for sure mm-hmm. So. Because, it's build on G suite and the Apps Script platform, there's a lot of integration, you can do with the app maker apps you produce so you can continuously, improve an. Application. That you've created so. The free apps I covered they all use status to do this, for. Their reporting, needs and so. This allows them to have real-time data, by tapping, into the cloud SQL database, that the data is stored on and. Wow. App, maker has charting. Widgets using, data studio actually opens, up to other people, helping, with the process, as well because. Now, you have also a group of people who can just focus on learning data studio and not having to learn app maker in its intricacy, so. That actually, even opens up to more people helping. To build solutions, and. The. Beautiful thing is it's life is, it's. Completely. Real-time you set it up once it will always pull the real life data and that, really eliminated, any kind, of snapshot theta or, theta dump, that people have to do to get their reports and, generate them off like sheets or Excel. So. With that I will just do a quick demo of how data. Studio, works. And. So. I, have. This the request app that I just mentioned earlier if you. Go back to app maker, so. That was the published, version and, you know edit deployment, you, can see this is what I published so this is what this. Is that production. Version. And, if. You actually hit edit. If. You. Use the default Cloud. SQL database. That your G suite amends setup you will see there is the database key. Like. That which. Will tell you which database, you need to tap into now. Once, you switch over to data studio first of all without, a studio if you're not familiar with it you need to specify a data source which I worry did but basically you will select cloud, SQL from ice for, MySQL, as your type of connection, you'll. Probably need to get your G suite immense you give you the instant connection, name and so some username and password, but. I'll I can paste in the database or create your own or create your own yeah I can. Put in my database key here and once. I authenticate it, will actually read my data model as you can see my request, I can also run custom, SQL, query if I need to do more better aggregation. And. Once it reads it it will actually port. Or the fields, over and. This. Is the an example of dashboard.

I Created based on those requests. That, is in my application here. As, you, can see it just utilizes. The fields, from that data source and create, these charts. So. As I mentioned the examples. I've given they. All have their own boards. So this is the certain registration, app in, the past of what their email queue, and how that all that works they have no visibility, of the team's workload, it's very hard to track now, they actually built a huddle board where. They can actually see all the requests. How many is pending and what status, is there in the types of requests, and they're, currently. Exploring, you, know more features, like the blended theta in that studio to kind of even incorporate. Other types of data into, their dashboards. So it's been really powerful. And, eye-opening for them to actually be able to see this all, life. Loan. Review similar, thing so they used to do a monthly, reporting. It takes a day for someone, to actually go and go. And get the data do, the report on excel or sheets and then be, able to report that to. Leadership's, and so forth now it's just at a studio report and this particular, view which, actually, tracks how many times a question has been answered no is actually, uses. The custom, query function, from the data, source I just show to get that aggregated, data. Finally. Where procurement. As I mentioned. Earlier it, now, has a nice dashboard more, more visibility, to all the contracts, active and expiring, contracts, they have in. Their system and actually they have embedded. This, particular. Report into, their Atma crap so, it's actually quite simple, to do and I. Will show you that quickly how to do that and. That. Is video gives us embed this report, function, which. You click on there's a little bit of HTML code doesn't, matter what it says you just copy it the rec in, my. Demo, here, I. Have. Created, a page, call. Report. Just. For that purpose and what, I'm gonna utilize is the HTML, widget then. I can drop on to the screen and for. The HTML, I'm just gonna paste blindly, what I just grabbed from data studio and do. Allow unsaved, HTML. Now. Let me preview this means so it can execute JavaScript, itself yes. And. Now I will, preview that. And. As you can see now it's completely, embedded into, my app maker up to an end user they probably wouldn't really notice and. Because. I build a two page application. I can flip between, the two, really. Easily so. That's. How. That's. How easy it is to just integrate, your advocate data to data studio, and. Now if I flip back to the presentation, let's talk about a few other types, of integration. Another. Popular one is the automatic, generation of Docs, and sheets. And. The screenshot here is an example of the procurement, teams contract, database. Template. For a report, they have, to produce to give to like for a party or, email. To like new team member and so forth and in the past when they have the sheet they actually have to copy every value into, the template, which is obviously, very tedious, with, now the auto generation. They write the app script and now. It just get automatic, sent to whoever they need to send it to which is again another, time-saver. Another. Possible, integration, that we've been playing with so Maps and places API and maker, has. And map. With you that shows the location and, you, know in the map you. Can also then use places API to get more information about that location and, display it right on the app as well chat. Bots using. Like natural language API or, dialogue flow or, even. Having hangout, chat tap, into. The app maker data you, can actually now create conversational. Database. Conversational. Interfaces, for your. Application. And I actually did, one for the. Project, tracker that comes with AppMakr I did a chat bot that you can ask what my outstanding tasks are and. Finally, you, know you can really connect for any external services, for the REST, API so. Any third, party system, your organization. Might have any other TCP functionalities. You, can also incorporate. That, through the app script portion of app maker and. With that I'll turn over to Chris to talk about one of these, interesting. Integration. All you can do thank, you thank you really, cool.

So. I'm gonna talk about kind, of the art of what's possible and, so I've kind of taken the the integration. Story and, connected, it to cloud, I cloud. A I essentially. Utilizing. The vision API and, so, for my use case I figured this would be kind of fun to try out I essentially, built. A mobile app, mobile web app be an app maker and I'm utilizing utilising. Html5, to capture, the what's, shown in the camera and the idea behind this is that you know how many people actually still have business cards these days it's kind of like tapering down right so if you still have a business card and you you you want to give it to someone it's almost easier just to like take a picture of it so this does the next step further this takes a picture of it calls, vision OCR, essentially, converts it to text and, then, sorry I'm getting ahead of myself, sends. Back the response and then you got a nice little text, stream of what the data was on the actual card and then, with some simple app scripts you can create a Google Doc from that so that's essentially what I built in this app it's. There's. A little, bit of code involved, but I'll show you it's not too bad the. Most complex thing is the html5. Part of it, so, what. We're looking at here is the, AppMakr. Environment, and this is the. Little. You know UI part that I'm working with here so I mean. Just go ahead and switch this over so, that you can see that I can even there's. A few little mobile. Enhancements, that we're starting to add we're gonna continue to add this but, right now I'm just gonna go ahead and show you this application how, it works. So. In this case I'm just gonna grab this. This. Card that I happen to have here, which is uh, it's. A business card that I got created, in Japan for me and. So this business card essentially. Don't. Tell me all our display, troubles we had somebody display tolls earlier it's. Not giving us it shows the cameras being turned on yeah. I'll, click refresh the. Other thing that I can do is I have it also on my mobile app which then I'm not connected to the yeah. That's. Unfortunate, doesn't, seem to like this display. I'll. Give it one more shot. Yeah, a little light is on so it says the cameras during gun all right well Plan B I will go to my, mobile app so. Hopefully you can get. The idea in the sense that. What. Happens here, is yeah. So. After I click the image I'll get the response. Back from the API then. I can actually create, a document. So, to plan, B sorry. The display, is causing, those problems even that's what I've got started late so for Plan B I have the app right here on my phone so I'd like to ask a volunteer to give me a business card I'm gonna run out and get it. Jump. Over the fence or I think we had someone, back there that might be able to volunteer, yeah. It's pretty crazy I know. There. We go. It's. Okay I spoke to her before so anyway, so now I have, the app right here yeah. I can see the video yeah, as expected. All. Right now I'm gonna go ahead and take a take a snapshot of this this. Image. I. Get. A little bit of Clara kicking in. There. We go so now I got some text I don't know if that looks okay to you, I'll. Just go ahead and create the document and then what I can do is go back to my laptop and we'll see it. So. Now this is firing off an email. Alright. Alright. There. We go so I got this email that just came out and.

It's. Got a little link there so I'll click on the link and. There's. The the text, sorry, a little bit glare but hopefully, is that basically, the text that you had on your card, I, can. I can zoom in a little bit there smart. Cash back shopping so anyway let me step, into a little bit of how this actually works, yeah. Sorry, for the glare anyway. That's. A bummer little thing didn't work for the the view in there but, nevertheless, what. It worth the way it works, is that I have a bit of code that I first. Won the when I click on the button it. Calls a. Function. Down here and grab image and what I'm doing is I'm using html5, to. First, connect. To the camera grab that video set. It to a canvas, and then, I can convert that image into a base64, image, which makes it easier for transport, or I could have also stored that in Google storage if I wanted to and. Then, I have a little call here that says call. The vision. API and. That's. Right here and. That's. The actual request that goes to my server-side, logic so that's running on the Apps Script runtime. Server and, I'm actually setting up stream that that, image. Will. Go to the server. Vision part so, this is the make request part and. What this is doing is it's assembling, a request. That has all the necessary arguments. All. The parameters so in this case I'm specifying that I want to do. A document, text, detection I could, easily do sentiment, analysis or any of the other flavors of detection it's pretty cool and, then I add. In the image. Right there in line otherwise, it would be a URL, that I refer to like getting Google storage, and. I set up the request and I call a URL fetch URL. Fetch which is essentially my rest call out to the service to, the URL, of the API along, with the API key and then, the, options and then I get the response back and so once I get this response, back. I can then start to build out, the rest of the UI so. The response, back comes I can, I have this function here called show response, and. This, bit of code here is, running on the browser on the client and, so I essentially I take that the data that I want I update. The UI I update, it into the facility, little text box there I have. A little bit of code to check to see if there's a you, know problem with the image I can just you know give a little error message and so, forth so that's basically how it works it's. Unfortunate, I wasn't able to show you the actual demo. From my laptop but we had a lot of problems with the video connection here I, could, also show like all the raw images in the log oh actually I could do that at least give. Me an idea. So. I can't see catalog all these images, as they're as, they're coming in. Make. Like a little esepcially database, so. These are all the fun I was actually toying with making a TPS report so. Just. Various examples of stuff I also have Japanese, so, the Japanese line is actually let me just show you that so. So. This could be like the little log, that I'm keeping track and then I can click on one of these things here and, so this is this is an example of the Japanese. Version so this is the back side of my business, card that I created. And. Just. To show you that it actually converted, correctly, I can just drop. That into Google, Translate, it. Didn't quite get my last name correct but you know close enough, so. Anyway just fun stuff so, this is like I said kind of the order of what's possible so if you do have like kind of a you. Know interest in and, dabbling in some of the more fun stuff with the cloudy, you know the cloudy API is and such you can definitely dive. Into that and utilize app maker for what it brings to the table you know a simple UI construction. Basically. Simple to set up the rest calls in that case cool. So I think that's pretty much it for what I wanted to show for this one so we're. Gonna finish up pretty soon and do some Q&A so. If you can go back to the the slides. So. Just, wanted to touch on what are some of the things, that we're gonna be working on that we're currently working on actually for this next year next several quarters.

We. Want to continue to help Clio. And people, like her such that we make app maker more approachable, make, it more I would say assistive. Make it make. It easier for people that may not have full you know computer, science backgrounds but basically have kind of a inkling, for working with data or working with building. Out like an application so in that sense we want to provide more samples. Tutorials, templates as well as making the product just a lot more approachable I think so we're, also looking at assistive, app creation so what, that means is that maybe you're editing the spreadsheet, the spreadsheet. Itself could say hey you know this might actually be a good app maker app so we can give you a little connector. There to then generate out an application based off of the use case that it's it's, starting to see or kind of like a common. Type of an. App use case that that. Looks like what the spreadsheet data is showing so, that's definitely something we had some design Sprint's on that and that's taking, progress. Easier. Mobile responsive, web app design, so there's a little bit that I showed you like the little viewport, editor. Or the view poke window. That you can change the UI, there's, definitely more to be done, responsive. Web app development is not an easy subject so we want to try to provide more guidance such, that it'll be easier so people are not so comfortable, with the complexities. Of CSS, and things like media queries we want to continue to make that an easier, experience for, our knowledge workers and stuff or. Just kind of roll it in under the scenes so they don't have to get into the ugly. Messy. Stuff that can sometimes be the. Other. Thing is like we want to continue doubling. Down on making, an app maker very friendly to legacy technology, so you can actually import from other older. Technologies, get the data uploaded, and be able to start generating applications. Fairly quickly. And as well as sheets so like right now Clio showed how she, was able to connect to a sheet grab its structure and build a data model off of that we, want to continue to refine that process so it's a lot easier and also maybe a little bit more obvious such that once you connect to a sheet that you could import the data or potentially. Even connect, to that sheet and let that sheet serve as dia the, final you. Know database. Destination, although that's still a bit controversial because it's not really a database but you know it depends. Publishing. The G suite marketplace that's definitely another area that we'll be working on this year to make it such that you can take your applications, and publish them relatively. Easy within your domain, and potentially. Share them in a larger marketplace, out so other people can take advantage of it this is definitely something that's been on the roadmap for a long time but this year we want to definitely start taking, some substantial, progress and, we're already starting to get some initial, details. Worked out on that and, then finally just kind of widget icing or rolling, in some of the most popular, api's. Especially, with the cloud API is making, it easier to reach out and connect to a lot of the other different, elements, of the cloud platform such, that it's very easy to take that in and build. That into your applications, so like, right now it's very easy once you get setup with cloud sequel you don't have to worry about the setup but we want to do the same thing for other data, sources data services, bigquery, and so there's a whole strategy that's now beginning. To start being. Rolled out for that so that's, essentially a bit of a look of the head for the next few quarters and where we're taking out maker. So. Yeah I would, say if you're interested you can just you know learn. About it there's a you know you can that's essentially, the top link is a marketing, page but, you can dive into the, tutorials.

There's, A collab, there. Is one, thing that I should say that gap maker currently, is gated, via the SKUs. So you, have to be a G Suite customer, and you have to have either business, enterprise. Or an edu customer, for now still. Discussing, some some alternate, ways to get. Access to admin you. Can also you know join the forum, and then participate, ask questions and that you know our engineers, our overall team is like listen that and they'll chime in when available so, so, that's pretty much it I think thank. You so much I hope you enjoyed learn something and you, can always reach out to us we. Have our info, available online, so I hope, you guys enjoyed it.

2019-04-15 23:49

Show Video

Comments:

This is impressive!

Great job, Cleo!

We really need App Maker available for Basic (paid) GSuite accounts!

Hi, great video. Where I am confused is how to take the app maker app/file to the market where it is downloaded as a mobile/ipad app. Can you all tell us how that works? also a video how-to. Also the add-on in the marketplace for gmail, if the app is made a download mobile app can the add ons be integrated and smoothly run in the app for productivity?

Other news