Automation with Quip Live Apps and Google Sheets

oh okay yes it's lights camera and action hello everyone my name is Annie and today we're going to be talking about automation with equipped live apps and Google sheets before I say anything else need to go over this fancy slide the four locate statement basically what it says base your purchasing decisions on what is readily available where you can find what's probably available that's the Investor Relations page on salesforce.com well we're going to cover in the next 40 minutes of course I'll say Who I am and what I am my getting up here also talked about commonly asked question why integrate equip with Google sheets because as many of you know quip has its own sheets then talk about a Toastmasters program because we automate it for the Toastmasters organization of course talk about the media charter system that's what we automated demo it right that's really important talk about working with OAuth authentication can be very fun let's just put it that way there are of course consideration was when working with live apps because you know no technology does everything and when a positive note with what quit does really really really well and also references so Who am I I am the newest addition to the cell source developers evangelist team if you want to think about it and like the baby penguin over there okay I am very new on the job this is my first Dreamforce where I'm speaking but this is my third dream force so yay my teammates I'm actually my manager Josh is sitting right there so my teammates are all wonderful they are partaking in the admin and developer keynotes I have this breakout session and I'm speaking to you guys which are actually really happy to be speaking to you guys because this is a topic that I'm very passionate about cool before we go any further I want to say there is a quite a bit of JavaScript in this session can I get a see a show of hands of who is who would say they're confident JavaScript developers hence okay there's a few people in the crowd cool are you all currently using equip raise your hands if you're already using quip okay that's also a good offense so the goal of the session is to show some code to see how we implement end-to-end automation system using quip as a centerpiece so there will be code but don't worry I will explain what the code does and the code is also open source so you have that refer awesome I get this question a lot why integrate web sheets with Google coupe equipped documents with Google sheets right most importantly I get it it's funny because I get it from Google employees and I get that phone clip employees those two groups don't seem to speak to each other that often but the answer very simple answer to this question is when you really want it the best user experience for our users we as in the developers that work on this end-to-end automation project and the users as in all of the people within Salesforce Toastmasters basically the people within Salesforce that go to Toastmasters let's want to back up and just explain how we designed this system or actually why the existence exists in the first place story time once upon a time in a land far far away called Vancouver Canada I'm sure many of you have heard of it I joined Toastmasters okay who would say they're comfortable speaking on stage ends up ok quite a few of you ok that's better than I hope for so I joined Toastmasters if you're aware of Toastmasters is basically a gym where instead of working out your muscles you work out your public speaking and communication also leadership skills so if during this presentation you'll feel there's anything missing in my presentation or I'm not doing as well as you would like remember four and half years ago I was much much worse so just be grateful back that I'm practicing and incorporating all of my Toastmasters training now what I noticed with the corporate clubs and Salesforce Toastmasters is a corporate Club which means someone in the company pays for all of our memberships is that it has such great return on investment no other program that I know to my knowledge allows you to continually continuously improve your communication skills week after week after week for that low of a price I mean it's literally under $100 remember it's cheaper than going to the gym like seriously so but I noticed one thing after weeks of going to Sara's Toastmasters over and over and over again and this thing really bother me physically we had this meeting management system when it's free is hosted it's off the shelf is the free toast host we branded it a little bit but basically there was a lot of manual labor around signing people up around at least like authenticating to get into the system I mean we're all Salesforce we should anyone should be able to sign up into the system we shouldn't the experts of the system shouldn't take like five minutes of their day just to sign up a new member so there was a lot of friction with the system and we're like okay dude like we're Salesforce we have all the tools that we caught possibly you need so we just moved this meeting management system into quit and this is so awesome like anyone can sign up they can sign up even other people basically whenever we sign up someone else we ant mentioned them and they get an email notification which will say check this document and they can open the document and see which world they signed up for it this is awesome like I'm surprised you guys are not getting off your seats and dancing because not only do you sign up other people you can also confirm with them in the documents you just add mention them in that chat which is on the right hand side and they get an email notification to say oh you know you need to take a look at the stock any they'll be like yes confirmed for a speaker for next week yeah this is so much better than what we had before except there were some minor flaws and over time it really hurt us there was quite a bit of manual process still for example in a sign-up sheet the project itself is a free text field basically you can put anything there that is not a Toastmasters way the Toastmasters way is you pick from a list of standard projects that's important because that will count towards your educational progress and you get different certificates based on that so that needs to be fixed and every meeting we need to copy the set of names onto an agenda to be printed out because a Toastmasters we run the meetings very efficiently and that means everyone needs to have a copy of the agenda with the proper names on it so this is a pain the last but not least we need to track how our members are doing which roles are taking what kind of speeches they're doing so we need to copy the names onto the sheets for tracking why sheets because we were used already using sheets for signing like when people sign and they put their names we already put that into sheets so she's been the clay or repository for querying what a member has done so all of this is manual all of this happens every week and every week we get someone like this yeah and a fortunate volunteer and we keep hearing them complaining and a complaint very loudly and consistently about how we're a billion dollar technology company we have the people we have thousands of engineers we have the tools you're a dream force you have seen some of our tools they're awesome so why don't we just automates this right let's get the people and the tools together that's automated so at a team off-site with Salesforce Toastmasters officers we got together and these are lovely officers and actually Casey the president is in the room so yay so you even notice that the three of us on the left we were all thinking about our evasion particularly sense or user information and has partly in quip and partly in sheets we need those two systems to communicate with each other how we're gonna do that we're gonna go do that through live apps so the three of us got together and just for recognition they are so they're Serena's so straight out is the one that volunteered to undertake this entire end-to-end automation projects he bravely said he was going to phototype it over the weekend and it took longer than a weekend for the final product max is or VP of public relations who built out the static site for the agenda with a one button click he noticed that it was not a one-person weekend project so he volunteered all three of us to form a team and I come from a JavaScript background have three years experience and react and I was like equip live Apps users react yes so live Apps you don't have to use react but the documentation uses we actually helps so the three of us got together and after three months of collaborating of iterating because you know we're agile through different solutions we finally achieved this in production system that automates things beautifully and we're going to show a demo but before we do that this is the hologram this is a Holy Grail that we've defined as the automated member tracking because we're Toastmasters it's so important that the roles and the speeches are tracked otherwise our members may not be able to verify the education awards we don't want our members time and effort to go to waste so we want to honor that or criteria for great user experience is first of all it has to be easy to use you should not be copy pasting you should not need to be technical right this is something that anybody can use easy to maintain this is easier said than done so we went through several iterations of like maybe google apps for example to pull data from quip using the equip automation API but we thought hey like easiest solution is just to make a quip like that because that would be just hosted on quip and then we make an agenda which is the static site which is hosted on github so we don't need to maintain any other systems so easy to maintain it's very important since we're a corporate club and there is people turnover and last but not least we need to use existing stack because we don't want to be like very different experience for our users we want your users to feel like it's a same experience but better because they don't have to do all that manual work so that's why we chose to stick with quip Docs and Google sheets and that's why they are talking to each other cool so before I go over the demo which I know you're itching to see this is what's gonna happen in the sign up the user is going to be able to pick from a standard set but there's also going to be a button which does two things it opens in a new tab and sends some JSON that way so the gem that conference and then the archive roles will be using a post request this is a very innocent looking slide because this end-to-end system took us three months of part time work with three software engineers and you may be thinking wow like that I mean you're like engineers are really bad right like this is pretty simple no it's actually pretty there were some potholes that we had to jump through because the first one just printing parts of equip documents is non-trivial right we need to send just that section of data in a structured way to another system and the second one is you need to post two sheets if you have posted two sheets using the sheets API you may have noticed that you need to authenticate right to authenticate which was to go with OAuth 2 which are also covered in this presentation so those potholes they are surmountable after some effort which we put in okay you're not talking let's let's show you the demo can you see your now okay awesome so Toastmasters up cast on a custom app only a few people can instantiate it so instantiate it and there are some placeholders that help with filling out the form so we put in a date our meetings are on Tuesdays so let's say October the second that's when the next meeting is I will put my name in for Toastmasters which is a very special rule well the internet must have some problems okay alright then i refresh the page okay great so that's working I will just sign myself in and then for the title I will say I'm trying to talk about sushi because that's a very important topic I will give it as organized your speech next person let's pick my partner in crime ring off and he will talk about pizza because developers love to eat pizza right get to the point and then I will say it's myself okay so you can see what I've done it's physically it's the same as a normal clip application look at the native clip application with the difference of this picklist which is very special you can filter for example let's do researching presenting and you automatically updates with a with a name without at the time we'll just have a minutes in this case okay so I'm gonna save I'm friends remember what that does so will prints with this princess gender and you'll see that all that JSON is in the URL so that's how we sent the data over here it's literally three buttons to print this is so much better than copy and pasting and we also post it to the equip backing sheet so this was just posted here see I have all the rules and I'm talking about sushi and Serena is talking about pizza okay so that's the end to end demo for one week let's imagine that we come back next week and we're going to make another Toastmasters app for that date so the next week is going to be the nice let's say or presidents Casey is going to be a Toastmaster and a grammarian is going to be a string house I'll take the remaining rules let's see this going to talk about teddy bears because they're cute and we have Cody let's say visionary leader how how Cody is a visionary leader that sounds great I'll also add my partner-in-crime as the second speaker he is going to talk about astral or other muskets and how to say it example okay save run friends literally three buttons to print this thing this is so awesome basically this saves so much time and you can see in the backing sheet that we just added another row without me doing anything other than clicking a button with the Toastmasters as Casey and the grammarians Serena's and we need talking about teddy bears and with max talking about Astro yes that's our answer and system and that works so live demo so that's our end-to-end demo and we're very proud that it is in production and we're using it so can we get a hands like clapping hands for mission accomplished thank you thank you thank you after three months of hard work we have finally accomplished this using our own Salesforce technologies and we are very proud okay let's talk about something that really irks me during those months so the time to actually create the equip live app is very short because I already know reacts and it was very simple authentication on the other hand is something that was new to me and I needed to learn how it works so what really irks me is that sometimes the authentication will work and whenever I need to actually demo the application then I get a 401 it's like why it was working and there's no code changes like why is it not working anymore so and you really need to take a step back to understand how Roth works and how it works on quick does everyone know what loss is anyone who is unfamiliar okay maybe yeah so Olaf is our way to authenticate the quip uses OAuth 2 and it's really easy to work autant okay with quip so whenever you use sign-in with Google and signing your Facebook you see something like this you're using OAuth in the background right it's super simple for the users for the developers that's a whole other story cool so testing whether equipped can authenticate with Google is super simple we have the quip Developer console which does exactly that physically you put in the URLs which you can get from that github readme and you press the test login now you have to go through the selecting your accounts and then if it's successful then you can rest assured that quip is able to authenticate with that service through OAuth 2 so this is really good because it helps you debug right if this works that means the error has to be somewhere else but for us or use case we don't want the user to see that right like the quip already knows who the user is because in Salesforce wanna quit when a user lands on that quip document they already signed in so they shouldn't need to do that and as a developer I don't want to see that every time I'm debugging the application so after debugging the application like a hundred times and clicking this button one hundred times I was like this is enough there should be a easier way and there is if you only need to authenticate when you're making a request you can just do this so basically this is this is in the source code it's really simple basically what it says is send the request to the quiff api proxy using the URL on the program's you have defined with a custom header that has a jot token write your token which is the access token this is so simple and the user doesn't have to click any funny things and this is great also because we didn't need to specify any secrets any API keys we can publish this online and you you'll be fine there's no secrets shared here like I'm sharing this right now and it's okay so this is awesome however I was still getting 401 from time to time right like why this has happened because whenever this happens we can't use our system it it's just not and to end anymore so debugging this how basically the cause for this is because your jaw token expired AHA jaw tokens expire who we're not we did not know that right the defaults for equip is expires in is 3600 that is in seconds which means in one hour so if your if your application needs to refresh tokens you do need to bake that into your application because otherwise you're gonna run into 401 errors like I did basically everything works until you want to demo where then it doesn't work because 401 K just yeah very annoying so please refresh token how do you refresh your token well you can refresh it manually super not scalable always works do the test login button and what that does is request the service for a new token simple but not scalable is there a way to do it programmatically yes there is so this is taken directly from the equip clips github repo which has tons of good source code that I recommend I started with the simpler apps and worked my way to understanding more complex apps basically what this does is authenticate if a record is 4:01 authenticate again that's that's pretty simple so that's how you refresh your tokens programmatically so if you did that and the token is not expired and authentication fails then it has to be something in your code so the way I do bug is I looked at the quip app open the browser console in the network's tab looked at the request body of what it's sent to the proxy server and compared that versus with the request body of the sheets API Explorer which is provided by Google and the sheets if you explorer always works so comparing those two and see what is and it's not there that's how heidi bug cool okay so that's a a lot about OAuth enough about OAuth let's talk about something to consider when working with live apps because there's something that we learned down the line that we really wish we knew at the beginning some pretty big challenges but we overcame them first of all this is so important it needs it's on slide because history the lovely history which we talked about at the beginning is available in native equipped but not in your live apps this is really big because clip live apps they're a sandboxed meaning the alive apps can only see what seeing each other kinda see what it's in itself and not of each other so this is something that when you develop your app you if you still wants what is available in native equip that's something that you need to program it in yourself you need bake it in yourself and how you do that is using the clip life apps API there is the send message which takes a program and you can put a string in there and you can do that while listening to a record so a record is a unit or storage which I'll talk about shortly so there's record listeners and which listeners are record change on a regular change send a message and then you will have the which fields got changed that kind of thing so that is how you get around the missing history other speedbumps there is no key value configuration UI which coming from Heroku it's like something that took for granted so for example the sheets ID we actually checked that into the code because there was no easier way to store that otherwise there is way to get around that is of course to build your own config UI but of course they wanted to use the API to check who the users are so if the user is a B and C then show this config thing which is really clunky to be serious so yeah this is something that we really like to see and I put developer console I want to end in a positive note because clip live apps APR has a lot going for it it's it has a suite of really cool features that if you were to implement for like as a separate web app you spent tons of time reinventing the wheel so and with a positive note and just say here are the cool bits so processing data in qyp apps is so easy because every quip app has something called a route record how you use that is for example for our app you'll notice that every field there in the route record maps to a record like in the UI so date maps to the date and toast master master toast master that's all you need to do this is so easy if you're just editing one single field and that field is a string this is all you need to do to have that field be persistent in quick live app it's just like magic he also noticed that we use a lot of rich text records rich tax records it's great because they're out of box they're styled out of the box and they already interact with Bruce record by the way if you haven't figured out already rich tax record means rich as in versatility and functionality and not nothing like there have lots of money but you know that kind of thing cool so if you if you're really in a slide you may notice that the last one in get properties its speaker slots and it's a record list type speech select so that is the only one that is not a rich text record the reason we had to make a custom record is if you notice that the the pick list there it's not just a string when you also need to track if it's speaker 1 or speaker 2 because I may be talking about different things they probably are talking about different things so our data store then had to be slightly different they had to have a number as well as a string and the way you specify that you just extend their rich text record very simple and how we instantiate it when the app starts is we have the speaker 1 and speaker 2 and just to find that in the roots record this is so cool because it just shows you how easy it is to work with the root record you just get it and you add something to it you can also use the sets which we'll do later in the code but you already have the code because it's open source watch I'll share it in aggressive slide cool okay so that's the cool bits of quit which is really cool I also wanted to talk about how to release the users because I thought this part was going to be difficult and actually is not it's very simple by default your apps are already public to users if the user can see the documents on which your app is running they can see and use your app there is a limit on who can instantiate its new instances of the apps so for example in the coop developer console you define the developers with their emails so if someone is not defined here and they go to a sorceress documents and they try to do at Toastmasters app you wouldn't show up for them that's just one of the limits of quit hey now I talked a lot Sona and with the references if you want more information Equipe api reference is awesome the live apps API is pretty thrilled especially on the OAuth part which is the part that I spent a lot of time reading then the quip clip apps github repo has tons of great apps especially the Google Drive one was very enlightening the Google sheets API very useful for us at least for debugging purposes but that's also pretty well written as well okay by the way we really like open source so we shared or or toastmasters app it is public you can clone it you can make comments you can make issues give us feedback we are always you know looking for great developers to learn from cool having said that over this last 30 minutes we covered how you send data from quip right you can send it through the URL or you can post it we covered ooofff and how that works with clip so basically you're all set you can go on after exchange to get morning from inspiration you can go back to your organization and give them 12 quick live app ideas and be able to implement every single one of them I hope so yeah really now you're ready to go forth and create oh and in case you missed the keynote this clip life apps is also available in quip slides so that's just one more way that the audience can enjoy your hard work thank you and I'll take any questions you

Channel: Salesforce Developers

Views: 749

Keywords: Developer, Application Development, Salesforce on Salesforce, dsMoscone2018, Salesforce Developers TV, Dreamforce, Collaboration, Quip, Process Automation, Quip Live Apps

Id: LxSiz3eyT3A

Length: 32min 43sec (1963 seconds)

Published: Fri Oct 05 2018