 Thank you all for coming today. I know there's lots of other interesting talks, but mine has a buzzword in the title So I'm sure that lured you here, and I want to say hi to my girls that are watching at home Here's your little hedgehog by the way so Talking about games today, and I really like this quote I'm constantly reminded about trying to have the heart of a child because I have two little kids at home And it's kind of hard not to but this this really struck me as cool And if you don't know who wrote this quote It's it's the guy that created this game and that came out a huge impact on my life And you know games really are important. They're fun Obviously, we like to play them play video games like our games They are They're really important, I think they're important part of socialization with people And and really they're a part of our everyday life and I just want to show this gift because I like it I can watch this all day long Yeah, so first off here. We're gonna go over. What is a game? Just the very basics so a game is a voluntary attempt to overcome unnecessary obstacles And I ripped off this quote from this great book by Jane McGonagall of reality is broken And if you're interested in gaming or game techniques or game theory, I highly suggest you check out this book and in that book Jane kind of defines things as the game of golf When you think about it golf would be a whole lot easier and I by the way, this was one of my least favorite Nintendo games I just didn't like it at all It would be a whole lot easier if you just took the ball walk down the course and dropped it in the hole but with the game of golf you create these unnecessary obstacles to Prevent you from getting the ball in the hole. So Jane goes a little bit further with with the game Set up here and she she applies four rules to creating a proper game So you have to have a goal of course in golf. That's getting the ball in the hole rules Things like you can't pick it up You can't use a hockey stick to hit it all that kind of good stuff You also need a feedback system where people can see how they're doing to progress to get to that that goal state And you have to allow voluntary Participation so people have to choose to play the game and it can stop and start any time they want to so Playground games I volunteer at my daughter's school and this picture actually happened there a couple weeks ago some goats got loose And the school is actually in session when this happened and the cops had to come and Rope the goats which is the game in and of itself But anyways on the playground after I volunteer in the classroom I go outside and I play freeze tag a lot the kids second graders love playing freeze tag So in freeze tag the goal of the game when I'm it which I'm always it is after run around and tag people to freeze them And there's rules people that haven't been frozen can go around and unfreeze people So that also provides me a feedback state where I can look around the playground and be like oh my gosh They keep on freezing each other and this is horrible Because I'm running around so much and I can volunteer inside to stop playing at any time because I'm out of breath So that's that's games now gamification the big buzzword. So when I think of this word I kind of get like this Because it's just it's really kind of played out. Yeah, you know, this was a big word in the industry years ago and But yeah, and I'm giving a talk about it now. It's just so funny. So gamification is a pretty big thing It's all around us you pull up the I search the plug-in directory and you can see who has a gamification plug-in I'm not really sure what it does, but it's it's all around us And also badges are everywhere like I got this fit bit And the first day I wore it I think I walked like ten steps and all of a sudden my email inbox had like three emails with badges in it And it's just it's like overkill So it's it's everywhere and I think it's done poorly quite often So I really like this quote this guy's names you catch how and he wrote a book about gamification And I think he calls himself a gamification expert But gamification is the craft of deriving fun and engaging elements found typically in games and Thoughtfully applying them to real-world productive activities. So the key word there. I think is thoughtfully You can't just take badges or a leaderboard and just toss it up on anything and expect that to be an engaging experience and you know gamification really is is Trying to drive people to a goal state. So in the game, there's a goal that they want to achieve But also you have a goal for them whether that's coming back and playing your game often filling out a form on your website for a lead You can you know thoughtfully apply these game techniques to get people to the goal state you want So he wrote this book called actionable gamification and in there He had he's created this framework called octalysis, which I think is funny And it made me think of bloopy or blooper whatever that little squid thing is and Super Mario but Looks like the top one you can't see but it's he calls them eight core drives in this octalysis framework the first one Which you can't see his epic meaning But the rest of these here they're kind of they're kind of self-explanatory, but essentially He thinks that there's these eight core drives that kind of drive people to do anything in life and The books pretty interesting he goes through a lot of well-known websites like LinkedIn Facebook And talks about how their design really maps to these these game theories So you should check that out if you're interested in the subject So back to second grade When I'm in the classroom, I help out during reading in the classroom for a second grade, which is really fun and There's different centers set up around the classroom And there's a lot of cool things they have like iPads that they get to play games on and do multimedia stuff and laptops And then there's my station and my station is kind of lame It's a sheet of paper with like ten words on it and what the kids are supposed to do is choose a word on that list and write three times And then write a sentence using that word and Draw a picture and it's it's really not that fun So usually there you know, there's some kids that just come to my table and sit there and just don't work at all And they want to go play iPad. So one day I thought to myself You know, I think I think I can gamify the system So my goal state was to get them to actually do their work and I said to this one little girl You know, I bet you can't think of the word that I am thinking of on this list And of course, I didn't actually have a word in my head I was just like, let's see if this works and all of a sudden she was immediately engaged She started guessing words off the list and like on the third guess I was like, you got it. You got it, right? And she was she was like stoked And it was it was it's amazing you can apply these techniques anywhere in life So that leads us to the dog food game level 1 3 I work at this awesome company with all these beautiful amazing people and Let's play a quick game try to find me My hair is a little bit longer, but anyways The past six or seven months or so I've been working on part of the Clipso project, which was released last week specifically the post editor it's been This amazingly fun project and you could do a whole talk just around this and I would love to talk to you about it Well, we're talking about games today So we were having a meeting about six months ago. I think it was in July We're having a Google hangout or something and we're like, you know, we really need to get people to to use this internally to test it out for us What should we do and in the past, you know people? They'll post and say hey, we got this new product Can you test it out and see if you can find you bugs and let us know about it? So I was I was sitting there in the in the talk and like what should we do what should we do? And and you know my core drives are going, you know, like I'm trying to be creative and and Come up with this great idea and all this is like let's let's create a game, of course Let's gamify this thing. So going back to the basic tenants of what makes up a game The obstacle of this game would be for people to use this this beta editor this this beta software and Many of you know at automatic we write a lot of blog posts internally Instead of using email if we want to communicate something out to a large group of people We write a blog post and we have a lot of different ways to do that We have the the p2 theme which could see is quite a bit Some folks use WP admin and so we're asking people to step out of their daily routine and use This this new system. That's not quite perfect yet So that's the obstacle and our our goal state as the product team was to get people to use the editor to find bugs So the goal for them of course is to get points so We were gonna give people point for every time they use the the editor and the way we did that was with a little kind of Like a pixel tracking tool that we have internally So it's like yeah, we could totally do that But a bigger part of this was to actually get people to find bugs and to report them Because that's really the biggest value for us to have issues read it out So we can get them fixed before we release this so someone found a bug We're gonna give them two points And we create a feedback system We have like a really simple leaderboard so people can see where they rank amongst other players in the company and People can play whenever they want right they could choose to make a post to the new editor They could try to find a bug But if they didn't feel like taking the time out of their day out of their routine They could go back and use p2 or WP admin so with that that was the creation of the dog food game and Dog food, I think it's a pretty well known term. I worked at Microsoft in a prior lifetime and dog feeding was a big thing there I was there during the office XP and Windows XP days and We would try to roll out that software to certain percentage of users of the company So it's each your own dog food and you find bugs typically at Microsoft the finding bug thing didn't work out too well though so Like any good idea if you bring it up in a meeting like that You are immediately the one that gets to build it right everybody's like yeah, that's a great idea. Go for it You get to do it so when I That night. I think I was watching baseball. I was watching the Seattle Mariners lose again, and I thought you know I'm gonna build this thing and I went to my favorite tools, so I love to write JavaScript For a little quick simple things like this. I like little quick simple integrations and hacks. I love to use node and express Express is Kind of a very simple MVC model view controller type system It's a lot like Sinatra and Ruby and I use Jade as a templing system But the big question to me was data persistence, right? We need to track some things about the players in our game So each player we need to know how many times they've created an issue on GitHub And how many times they've made a post using the new editor So again two points when they credit issue on GitHub and one point when they actually create a post So typically in a node project you're gonna reach for a tool like Mongo or something like Redis like a no SQL database, and there's lots of Packages out there that make this really easy to do and I started to do that But then you know again, I was like yeah, I could do that But that's just that's not in the spirit of this game. This game's about dog food. This is the dog food game Right, so of course I should use WordPress for this game for the data layer And a pretty simple idea each player was going to be a post on a blog And I could track their score with that and use the the rest API to make this happen So fortunately much like these other tools that you could use to interface with with Mongo or Redis There is a great node library called WPMJS that automatic provides and it's a wrapper for excuse me the WordPress.com API so Along the right side of the page there you can see all these Endpoints and you can drill down and read about the documentation, but WPMJS makes it pretty simple to interface with any of those Another thing I wanted to point out here for anybody that's going to play with the API at all is the developer console And that's it's a great tool that you can actually go through and see all the endpoints and you can interact with them So here's a little screenshot of me going through and retrieving posts from The blog that I used to store The scores for this game so you can change the site you can change the query parameters And then you can interactively go through and look at the response stream So even before you write a single line of code you can go in here and kind of Conceptualize how you want to work with the API whether it's making posts or adding categories wherever you want to do so super slick So one big thing with the API To interact with it for certain endpoints to do things like create posts You have to be authenticated and the wordpest.com API uses OAuth to handle that so Getting an OAuth token in the context of this game was pretty simple Since I'm not going to be validating users or asking them for permission to post to their blogs I just created a single use token that process is kind of Convoluted and takes a little bit of time and I'm not going to stand up here and talk about it because it's boring but I do have a post up on my blog about it and we also have Another example application and another automatic repository that has a really simple note application that helps you Get an OAuth token really quickly. So check out the blog post Or come find me and we can make tokens together. It's a lot of fun So now we're gonna go to the boss level so look at some code and Potentially do a live demo if the gods smile on me today so instead of Using the exact game that we used for it for the post editor I decided to mix it up a little bit for this presentation. So I really like Chewbacca. He's my favorite character And this is this of course is like relevant right now with Star Wars coming up. So Earlier this week. I had this idea Of creating this this simple blog called sounds chewy I'm sure you've seen this thing on the internet if you haven't it's awesome. I'll try to get close enough where you can hear it It's a toilet paper roll This makes me so happy and In part of it and people automatic notice I have a hidden talent and it's being able to Chewbacca So I have a whole nother flash talk specifically about how to sound like Chewbacca, too so So for the so for this game I decided that that my blog is going to be about collecting cool Chewbacca videos things that sound chewy in real life Because they need to be documented for the greater good of humanity so whenever someone creates a post on sounds chewy they get a point and Sounds chewy has a github repository like any good open source project and if someone finds a bug with sounds chewy They get two points So the code for sounds the sounds chewy game Is located on my github profile under dog food? And you can see it's an old screenshot, but if you go like you can see how I did a lot of this last night So really the way this thing works the leaderboard for sounds chewy There is a blog on wordpress.com and it's kind of hard to see but the blog is called dog food game It doesn't really matter. It's a private blog. Nobby's ever gonna see this thing All it is there for is to simply have some posts and the posts tied or the post slug and title is the user name On wordpress.com and you can see the content underneath there So you can see Matt and it has 10 and I think I have another slide So it has 10 and then a pipe and a zero So the first number is the number of posts that Matt has made to sounds chewy Now Matt has not made a post to sounds chewy, but it'll be a lot cooler if you did but just work with me here and Zero he has reported no bugs. So This is what this is how I'm persisting the data for this leaderboard and we're gonna get to how that's done here shortly So how this actually works, how do we report and send signals to our little app that we need to record points? Well github in the repositories you have this notion of webhooks You know webhooks are pretty common around all web services, but github's are fairly robust and you can for this particular one I've told github. Hey anytime someone does anything with an issue on this repository Send that information to this address In this little example app we're running is up on Heroku right now So whenever someone creates an issue, it's gonna send a JSON payload with all the details about that that issue there Likewise on WordPress.com. There's a plug-in for webhooks and so anytime on On sounds chewy.com when a post is made it sends a ping to a webhook with the author's name So that's how we can can build out our leaderboard So here's the simple leaderboard for for this game. There's only two players right now Matt and myself and again You can remember Matt score was in the blog post was 10 and 0 and the first column is the number of posts on WordPress.com And the second one is the github issues and it's in a cool kind of gamey-looking font So let's go look at some code So like I said, this is all up on github and I'm not going to go into a ton of detail here But because it's kind of boring, but I'll kind of gloss over some things So up top here essentially what I'm doing is just requiring some some node packages. I'm requiring express and Some other little helper functions to make my code prettier and easier And then setting up some stuff about the express system here But down here is kind of the where the meat and potatoes of the whole thing start So here's on these lines you can see I'm assigning the bearer token to that token that I created using the instructions on my blog and These config values Sorry, I was gonna show this file first or stored in a little config file. So WordPress got Tom token the WordPress.com site so that the dog food game site that actually is gonna store the data so All my code knows which site to actually interact with and the github label And that's whenever someone creates an issue on github if it's labeled as a bug I'm gonna give them a point and the context context of the editor game Only when someone created an issue that was labeled editor what I give them a point so Here I'm just assigning those to some some constants so I can use them in my code and these next few lines here We're requiring the WPCOM JS library and passing in our bearer tokens that gives me an authenticated connection to the WordPress.com API players is a Little mapping file and all it's doing is it's taking github usernames and mapping them to WordPress.com usernames So when I create an issue on github, I can I can look up in this simple hash What my WordPress.com username is if this was more a you know bigger application or something It was gonna be more realistic and use more often this probably isn't the best way to do it But this was a quick and dirty little project. So it would work And don't this little user hash this this is a way to map the WordPress.com webhooks sends Not the username of the person that created the post of the author it sends the user ID So that's another lookup file But the real important one is this last one the site variable and what that's doing is It's it's saying the site that I want to work with via WPCOM JS is the one that's in my config file, which is dogfoodgame.wordpress.com So up here we have some little helper functions But I'm gonna skip over those for seconds and go down to These three functions right here. So in express You you set up the pages or the routes on your site using this really simple syntax Get you know, these are kind of restful words get so that line saying anytime someone that requests the home page Execute this logic The next one down is for the github issues any time there is a post Because the word excuse me the github webhook does a post with the data Execute this function and then the last one is the WordPress.com function. So This first one here is What actually builds grabs the data that we use to build out the leaderboard page And so it calls a function called fetch post data, which is back up here and Again, here's this variable called site and it's it's grabbing a post list So this is a function that's on WPCOM.js And it's a shortcut to the WordPress.com API that's going to return a list of posts from that particular blog There's a restraint of 100 posts per page but you can you can override that in these options you pass in and then For those that aren't kind of familiar with JavaScript you pass in the callback function And that's what's executed when the API returns with that data. So That's how that works and that's essentially when you call that you get a list of all the posts back from the API for that given site So right now it's just the two posts one about Matt one about myself and you can work with that data then so kind of glossing over some stuff here, but After after you have that data We we call render on a file called index and this is the Jade file This is the markup and it has some lovely inline CSS and then down here at the bottom It creates a table and it cycles it over each one of the players that's returned from the API or posts and Spits out the leaderboard. So You know really simple stuff Not gonna go into too much detail here Well, let's go ahead and take a look at one of these more interesting functions here, which is a web hook Excuse me that comes back from WordPress.com So when someone creates a post on sounds chewy I probably should also add some logic in here to send me an email or something or a text message So I can see the new Chewbacca video But what it's doing is it's taking the username Here that's like it's sent as the post author It's ensuring that I know who that username is and it's it's doing some validation against the request headers to make sure It's a somewhat legit request that you could still totally spoof this if you wanted to I'm kind of hoping someone out there is right now So and then once we have that we call a couple more functions So we know the person's legit the first function I call up top there Called ensure post what that is doing is going back out to the WordPress.com API and it's saying Hey, does dog food game have a post for user mat yet? And if it doesn't have one it creates a new post for that for that user and then after that the next function you can see scores dot posts Plus equals one so it's incrementing the score count by one point and then it's calling another one of my help helper functions Which is update scores So update scores up here real fast Here's another another call out to the WP com JS It's calling post and it's taking the post ID and it's updating the content and you know Just really really basic stuff So let's let's do a demo here because that's way more exciting looking code So here's a here's the super awesome wordpress.com app and here's the sounds chewy page Actually, it's good. Look at the leaderboard first. So here's the leaderboard live on Heroku at this very moment And of course, it's gonna Heroku if you don't know times out your app if it hasn't been used for a while So that was it starting back up. So you can see I'm in second place With five posts and one github issue. So if we come back here to wordpress So I made a this post called a catbacca This this one was a new one for me last night It's really good So you'll have to check it out because I don't think I have time to play it But it it's a draft. Well, if we have time or during questions, I'll play it for y'all So I'm gonna publish it Here goes. Come on live demo. Yay Okay, so it published and if we come back over here to our leaderboard Magical, I now have six points. I'm getting closer to Matt. Cool. So I'm gonna come over here to my github repository that has the webhook set up Let's create a new issue more cats, please seriously and It's a bug because the site needs more cats So we created a new bug over here and let's go back to our leaderboard magical internet Boom now Matt and I are tied. So that is is the very basics of this game So back to how this game kind of works with the editor Here's that the leaderboard hasn't looked at the very end of the game Obviously a lot more players a lot more excitement behind it not as much Chewbacca, but still pretty cool stuff But some big takeaways from this thing we had two hundred sixty people at automatic play this game And and that's that's a 65% of the company, which is which is just really awesome a huge amount of participation You know some people only made a post, but I'd say like the top ten were very competitive It was fun And overall they created two thousand three hundred and thirty one test posts and these were actual posts that went on sites Obviously, there's probably some test posts. This doesn't include Local development posts so these are actually posts that kind of meant something but a lot of people actually Spent some time to write some really good posts with this it motivated them And we also had five hundred and six issues created with and labeled with editor on github the thing that you can't really see from those numbers is The feedback that I got so at our grand meetup in October I got to go around and hand out prizes to people I made little notebooks to thank them for playing the game to the top 50 people and everybody I talked to you Just just love the game they they Fates just had a good time playing it and as the game was going on There was obviously some bugs in my code And some people weren't getting points. So I have people actually report bugs about the game So they actually cared about this thing. It was really cool So was this what was it gamified? So to me dog the doctor game really allowed everybody in the company kind of be a bigger part of this in this Big project of editor projects. So even though they might not have actually been writing code themselves They were still a big part of it in this game kind of brought everybody together around it The leaderboard definitely provided instant feedback There was some kind of manual stuff. I wouldn't do to update the post scores But it was a really good mechanism for people to kind of stay motivated and actually play this game Bug finding kind of played to people's creativity So that that was another game mechanic at play here that made it successful and of course this Uluwer of a prize Actually added to the fun, but most people told me they didn't really care about the prize so Really what this did is it had an obstacle was making people get out of their daily routine of using p2 or wp Admin but by creating this obstacle adding rules and these game mechanics that made this whole thing fun And there are some things that I probably do differently the next time I would do some more optimizations like caching some of the results from the API and It was slow at times Maybe do a different approach on the leaderboard instead of only just having that the top list Maybe do a 24-hour leaderboard so on a given day people can compete to win for win that day So even if you're down like at number 15 the list you can still win a given Monday or something And also make it easier for other groups with an automatic to start up a game like this to help out test their products Do so and wrap up with this with this quote right here from Jane again You know whatever you do if you have a game idea people are gonna come and play it just because people enjoy playing games and so if you have an idea about some crazy game or Just you know give it a try and think about using WordPress because it's there and the word press comm is very easy to interact with So if there's any questions, we'll make it a game You get a pair of wapoo socks if you ask a good question. Thank you Wapoo socks. Come on. I'm in So my question is probably bad because it's anti game stuff, but I can't help but think something like this could The concept behind it could benefit a Site or an app that does some version of progress. I'm thinking like a medical field type thing where you're tracking You know somebody's progress through You know, whatever it may be that Would this same approach go to that or would you recommend a you know another method of Want some socks You get your choice cool blue ones So that's a great question and in Jane McGonagall's book Reality is broken. That's a big theme that she talks about so And there's some examples in there of I think the game is called fold it at home where it does protein folding And it talks about gamifying things for a greater good and that's kind of the main concept of a book So there are some real-world examples of that being done. There was another one a paper in the UK that gamified finding Bad expense charges that People in Parliament had made so they publicized all these documents and had people look through them and try to find where People might have been spending too much money. So definitely game mechanics can be applied for greater good Yep, and I think that's her book super better. She talks about that. Yeah, so she has a couple really great books So check those out. She talks about that. Yeah So in this example, you're using your own dog food to use WordPress as a database a data store Yes for leader for the your leaderboard Fooding dog food is there. Yeah, it's inception. Is there any advantage that you found in doing that? It's fun It was really quick also and that's Using something when you can leverage something like a public API to just quickly stash some data like this And you're familiar with it because obviously I use WPCOM JS on a daily basis for my work There was obviously some efficiencies there for me I don't use Mongo on a daily basis anymore So I probably would have had to go and look at some documents But for me and when I thought about it's like, oh, yeah, totally I'm just gonna make blog posts about this instead because I can do it so yeah, definitely fun and also Think about it. You can just go into the post and edit a score So when I had buggy buggy code, I could just like I didn't get my point for creating a github issue I just opened up the post and editor and Updated their score. So cool. There were some nice things like that. I have a quick follow-up What does a cat that makes a Chewbacca sound sound like? Yes, yes So here's sounds chewy comm I Hope the stats blow up Here we go, I'll play it and we can take another question There you go TIL cats sound like Chewbacca if you want some socks you can come get them. Oh You want them? Okay. You can fight over it. Yeah, what's the question? My question is get close to the mic. I'm kind of like an intermediate WordPress user But I've brought some of my family members who are just beginning. Yeah, is there any Plugins or any kind of combination that might be something simpler for beginning users to do this with well There's on the plug-in directory. There are some gamification plugins I looked at them very briefly and I want to say they all interacted with kind of through party services to provide like leaderboards So you could check those out So yeah, I didn't really look at them But you might want to check those out or I'd be happy to show you how to do this This code's out there. It's kind of fun. Thank you. Yeah Don't forget socks. I don't want to take these home Yeah So I'm a writer. I don't actually do much code stuff. How difficult will this be for someone like me to do to my blog? Or should I just hire someone? Now that there would be someone here looking for a job It's open source So what maybe you should talk to me afterwards, but we could talk about what exactly you would want to do with the game And I could probably give you a good idea Points points out system you wanted to do or I'm thinking maybe more badges Okay, I want people to poke around inside my blog and not just look at the home page Yeah, and this the other book I talked about the from you Kai Chow He has a lot of that on his blog to you So I'll tweet out a link to his blog though. I don't like the design of it He hasn't really gamified so when people post a comment they get a certain number of points and If they tweet about it, so yeah, definitely you can you can gamify things like that. I guess I want those socks Okay, come on up. Yeah, yeah cool. Thank you so much