In this interview, Tristan Wiley from Twitch sits down with Lizzie Siegle from Twilio to talk about Tristan's Twitch extension that allows viewers to call a streamer via Twilio. We hope you enjoy this interview transcript.
The following interview took place August 6th, 2019 at Twilio's SIGNAL conference at Moscone West in San Francisco, California. It previously aired on our SIGNAL TV broadcast over on Twitch.tv/Twilio.
Meet Twilio Champion Tristan Wiley from Twitch
Lizzie: Hi, everyone. Welcome back to SIGNAL TV. I'm Lizzie. Again, I'm a developer evangelist here at Twilio and I am beyond excited to welcome an MHacks organizer, rising junior at the University of Buffalo, an organizer of UB Hacking, a Twitch Developer Relations Intern, Twilio Champion and so much more, Tristan Wiley.
Tristan: Hello. Hi. Hi, everybody. Hi, everyone in chat. I know some of you. Thanks for stopping by.
Lizzie: Yes. So, what is you Twitch username again? Like, Lesirhype?
Tristan: I'm Lesirhype on Twitch, L-E-S-I-R-H-Y-P-E. Feel free to drop me a follow if you like.
Lizzie: Yes. Can we drop the URL and channel? Twitch.tv/sirhype. Yes Matt, we know you're flying. Are you on United, flying out of New York? I remember last time, he was coming with, what's his name, John. So...
Tristan: Thank you for my managers and everyone in chat.
Lizzie: Yes. L-E...Laserhype.
Tristan: Close. L-E-S-E... L-E-S-I-R-H-Y-P-E. Close. I should change it to Laserhype. That would be better.
Lizzie: Last time I was watching the TwitchDev stream, BlueLava, who is on the team with Tristan here at Twitch, was on a plane with Matt, who is also on their team. And John was flying out of LaGuardia, and Matt was flying out of New York, and they were, like, competing to see who got to San Francisco faster.
Tristan: Racing however many thousand feet in the air. Beautiful.
Lizzie: Yes. So, Tristan is usually from New York, so... But he is in San Francisco for the summer. Thank you StreamElements [SP]. So, what's something that surprised you about San Francisco?
Tristan: I really think the weather. So, I grew up in, you know, central New York, western New York area, and summers are very hot. It's, you know, it's like 80, 90, sometimes 100 and then winters are like, you know, 20, 10, degrees. And that's Fahrenheit for everyone.
Lizzie: Fahrenheit, yes.
Tristan: And then coming out here, it's like... It seems like it's 60 year-round, and it's just fantastic.
Lizzie: Yes. As Mark Twain once said, "The coldest winter I ever had was a summer in San Francisco." Very windy. Wear layers if you're here at SIGNAL.
Tristan: Yeah. It's been fantastic here. I love the weather. I love the people. Twitch is amazing. It's been absolutely fantastic. Yeah.
Lizzie: Yeah. I've spent quite a bit of time at Twitch headquarters with Tristan.
Tristan: We've been working on something that we're going to demo for you today, a little bit later in the stream. Super excited about that. Yeah.
Lizzie: Yeah. So, is this your first internship?
Tristan: It is my first internship. Previously I sort of worked at a start-up part-time in Buffalo, but it's been my first internship and while I don't have anything to compare it to, it's been an absolutely fantastic experience.
Lizzie: As [inaudible] is saying, he's a forever junior, now for 50-plus years: "Don't lose that curiosity and enthusiasm."
Tristan: Thank you. Yeah, it's fantastic. I love so much about Twitch. I mean, aside from just the food and the kitchen. That's all delicious. They had heath bar cookies today, they were so good. But, really, the people and the work I'm doing, it's all been fantastic. And if you want to check out some Twitch development stuff, then join the TwitchDev community. Check out Twitch.tv/TwitchDev, Twitter.com/TwitchDev, you know, and join the Discord, and dev.twitch.tv.
Lizzie: Yes, and I have been very impressed with Tristan's passion, curiosity and enthusiasm, and he's very into Twillio, which is why he is a Twilio Champion.
Tristan Talks About Twilio Champions
For more, read our Twilio Champions page.
Lizzie: Do you want to talk about your experience with the program, as well as the Champions Summit, which was on this past Sunday, Day Minus One of SIGNAL. First, we had Day Zero, which was Superclass, and now we have Day Minus One. The day before Superclass, and Superclass was yesterday, which was the day before SIGNAL, because today is Day One.
Tristan: Yeah. So, I joined the Champions program around when it was started. I don't actually know when, but it's a really great program which sort of recognizes community members in the Twilio.Development community who sort of embrace Twilio, teach Twilio, just love Twilio, and so... Let's see. When I was a junior in high school, I...
Lizzie: A junior in high school. When I was that age, I was playing outside.
Tristan: Hey. I played outside, too.
Lizzie: I'm kidding.
Tristan: I know. I went to my first Hackathon MHacks. Mhacks.org, if you want to learn more.
Lizzie: Can we give that in chat?
Tristan: Yeah. So, MHacks. And it was a fantastic experience where I sort of met a lot of great people, learned a lot, sort of worked with a bunch of different APIs, and... It was either my first or second MHacks where I sort of first interacted with sponsors and first interacted with Twilio. And it was truly a, like, turning point for my development experience, because it was the first company that, A, really like, embraced the hackathon spirit and really like, shared...
Tristan: Really shared their knowledge with the hackers. And also, I learned so much from the Twilio evangelists at that hackathon, and so, I fell in love with the company. I fell in love with the tool. It was so easy to use. Being able to just, like, make a phone call or send them text message, that's pretty much what you could do at the time with, like, two lines of code. Absolutely mind-boggling.
Lizzie: That still mind-boggles me. I remember seeing, meeting my teammates, Matt Makai and Sam Agnew, when I was a college student attending hackathons, and I was, like, "What's Twilio?" And they were all, "Let me show you." They didn't say, "Let me tell you." They were like, "Let me show you." And I love how the team really embodies a spirit of talent and live-coding and really digging into building relationships with hackers and students. And they gave me the time, and I can't believe I'm, like, I'm on their team now. I get the chance to learn from them even more.
Tristan: Yeah, yeah. It's absolutely fantastic, and it was only, like, relatively recently that I actually figured out how it all works. I mean, I still don't understand, but, like, from a code-side view I get a phone number and then you just, like, write some calls and you sent a text message or make a phone call, and I never really understood how that works and I still kind of don't. But, behind-the-scenes, because for me, like, phones are this, and phones are like landmines, and so being able to do the same thing with the computer and, like, code, it still is mind-boggling to me, but I still love Twilio and I still use Twilio. It's just fantastic.
Lizzie: It's empowering. So, let's check out this GitHub repo.
Tristan: Yeah. So, part of the Champions Program sort of when I first joined, or after I joined, or before I joined, I started working on this Twilio Dart Package, and then it was actually the first thing I code live-streamed on Twitch. It was a lot of fun, and if you haven't tried it, you should definitely try it. Very simple to like, learn, teach, and on my screen... If we could switch over to my screen real quick? I have this Twilio Dart Package that was made by Marcus.
Tristan: Marcos, sorry.
Lizzie: It's okay.
Tristan: He is actually just right outside, and it's a really cool wrapper library for Dart, which is a programming language, I think built by Google. I don't remember.
Lizzie: Built by Google. I remember seeing it at Google.io. It has to do with Flutter, I think.
Tristan: Yeah. Well, so Flutter is the framework that let's you build cross-platform apps. Good segue. And so, I wanted to build a Flutter app, and I sort of wanted to integrate Twilio, but the problem was the Twilio Dart package at the time wasn't upgraded to work with Dart 3.0, so I was like, "I don't know. I wrote in Dart, like, once. I'll try it out." And so, I made a pull request. Like, it's still actually active.
Lizzie: Still active? Marcos.
Tristan: Oh wait, no, that's not... Let's see. Yes. February 24, and it was to update to be Dart 2.0-compatible. Sorry, not 3.0. And I live-streamed on Twitch. I sort of upgraded it all, and it was a really great learning experience, because people in chat who knew more about Dart than me sort of helped me out. I was able to sort of teach some of what I knew about Flutter and Dart to them, and so that is sort of what I did. And it was really cool. I shared it on Twitter. Twilio liked it, and Marcos actually sent me this cool gift box. It had, like... Shoot, what was in it?
Lizzie: I forget, was it the Twilio's Cheerios?
Tristan: It was Twilio's Cheerios.
Lizzie: Like, a cereal box, like, cheerios, but Twilio's.
Tristan: There was a really nice TwilioQuest shirt.
Lizzie: My favorite. I was wearing it yesterday.
Tristan: It's such a comfy shirt.
Lizzie: Very comfy.
Tristan: Yeah. I also got, like, a ruler and some colored pencils and a little book, and it was, like, fantastic. And I still have it. I wore my TwilioQuest shirt yesterday to, like, the summit for Champions, and just sort of... The community is so great. You do stuff, they reward you. They care so much about the community.
Lizzie: Yes. So, Marcos is in the chat right now. He's like, I heard my name. Hi Marcos.
Lizzie: Thank you for making this public library.
Tristan: Yes, thank you.
Lizzie: Thank you, Tristan, for updating it.
Tristan: Yes. It was a lot of fun. If you want to check out more code streams, give me a follow. Twitch.tv/sirhype. Just going to drop that every once in a while. Trying to get me up to 50 followers.
Lizzie: Fifty followers. Let's get in there, folks.
Lizzie: Yes. And do please hire him. Yes, [inaudible 00:11:13], I agree. Matt, I agree. I'm glad you're impressed. You want to dig in some code?
Lizzie: Like, just show, like, maybe [crosstalk]?
Tristan: Sure. I can show just a little bit of what is in here. So, actually, I'll show an example. So, there's a few different things. There's cli, there's twilio_dart_web. I'll just go... Let's call that. And this is just a little example. We have our Twilio keys, we have the version, API version, the 'Make a new Twilio object,' and then we just read from a call list. That was what this example does. Now, there's... Yes, Matt. I'm trying to get Affiliate. If you want to send a text... All right. I'll go a little slower. 'Look ma! Dart can now send SMS's in under 15 lines.'
Lizzie: Fifteen lines? That's so few.
Tristan: I know. Yes. So...
Lizzie: [inaudible] is wondering is that just a regular Python script?
Lizzie: Yeah. So, Dart is a really cool language. Maybe I'll go to Flutter.io real quick.
Lizzie: So, Flutter... Well, Flutter.dev, actually, is a way to create, like, cross-platform mobile apps. So, Android, iOS, and it's, like, the apps are really beautiful-looking. Build once, deploy on both platforms.
Tristan: Right. And so, I wanted to build one and use Twilio, but I couldn't until now.
Lizzie:This is [inaudible 00:12:51]. We also had him. He was the first Twilio champion to live-code on our Instagram live account.
Tristan: That was fun, too. Yeah.
Lizzie: So, I decided in January... Or was it February? Instead of streaming on Twitch, I wanted to show code on Instagram Live.
Tristan: But now she's going to start streaming on Twitch.
Lizzie: I'm not streaming on Twitch yet.
Lizzie: But I am here on the stream right now.
Lizzie: If you have any suggestions for Instagram Livestreams, drop them in the chat. I know that's kind of competing with Twitch, but...
Tristan: It is.
Lizzie: It's a different...
Tristan: It's okay. It's okay. It's okay.
Lizzie: Different audience, different platform.
Tristan: If you want to check out this GitHub Repo... I know I didn't really prepare this, but it's Github.com/mplacona/twillio-dart. You can also just search 'Twilio Dart' on Google, and it will be up there.
Lizzie: Twilio Dart. Google it.
Tristan: Yes. So, yeah. That's something cool I made. If you're interested in joining the Champions Program, I believe it's Twilio.com/Champions, and there's a lot of cool perks. You get to interact with the community a lot.
Lizzie: Great community.
Tristan: Yeah. We got these really nice, like, sweatshirts the other day, from the Champions Summit. We...
Lizzie: Yes, I'm so jealous of them. They look really comfy.
Tristan: They're so comfy.
Lizzie: Yes. Just wanted to address some of the chat statements. You can live-stream on Instagram, on Instagram Live, for longer than a minute or however many seconds. Instagram Video, I'm not going to confirm or deny that it is weak.
Tristan: It definitely is a different platform with different audiences. It is a little difficult to, like, you can't really show your screen, you have to...
Lizzie: It is a bit difficult, but...
Tristan: I know. It's okay. It's okay.
Lizzie: We're experimenting. We're living the spirit of the challenge, which is one of the Twilio values. Live the spirit of the challenge.
Lizzie: Of course. So, if you're interested in joining the Champions Program, check out Twilio.com/Champions, and you can apply or nominate someone else. If you know someone in the community that really embraces the spirit of Twilio, loves Twilio, or, you know, is just passionate, feel free to nominate them.
Tristan: [inaudible], why do you think they would say no? Based on your, like... You've been great on the Twitch stream. I love your involvement and your comments. Chin up, buttercup. Be more positive, I believe in you. Yeah. So, I guess now I can demo sort of what we've been working on a little bit.
Tristan's Twitch Extension
Lizzie: Maybe... [inaudible] is wondering, "What's the coolest API feature for Twitch?"
Tristan: On Twitch, coolest API feature? Oh. Let me tell... Okay. So, what I made is called a Twitch extension. So, when I first went to my hackathon and I interacted with Twilio, I was really blown away, because it wasn't just, you know, another API that sort of brought you some information, you shared information from it. It was an entirely new platform. It's a platform where you can make phone calls, send texts. You can send faxes now. There's Twilio Function. There's so many Twilio products. I don't even know them all.
Lizzie: What's your favorite product?
Tristan: I got to go with SMS or voice... Ah, man. [inaudible]. Let's see. Probably SMS. I think that's probably the coolest, in my opinion.
Lizzie: Let's see some of your favorite Twilio products right there in the chat. I'm a fan of Autopilot.
Tristan: Autopilot's pretty cool, too.
Tristan: I've been working with the product team on docs, making some new guides, obtaining some of the documentation, went to some conferences with them. It's a really fun platform. I've not used fax, [inaudible], but some day.
Lizzie: You can do faxes now.
Tristan: So, I went there. I was blown away because it was something new, and when I joined Twitch and I sort of first interacted with these things called Twitch extensions, I had the same feeling, because it's an entirely different platform, and I assume I can find one that's live right now, with a Twitch extension that sort of shows off... Let's see. Like this guy, I think. I don't know if he has a... Okay. Perfect. We have a Twitch extension right here. Oh, sorry. Where is this? Do we have one? Oh, it's right down here. Sorry. So, this is called an Overlay extension. I see something with Shroud. Yes, I love Shroud. Shroud is great.
Lizzie: My main issue with Twitch and why I wanted to stream on Instagram Live is I'm not a gamer, and my friends are not gamers.
Tristan: There's a lot of things outside of gaming, too. [Crosstalk]. I actually saw a really nice that was doing a demo the other day, and it was an art stream. And I really loved watching that, because it was, like... I am not very good at drawing or anything art-related, but seeing someone live, drawing something and building or drawing out this, like, masterpiece was like incredible.
Lizzie: It was, yeah.
Tristan: So, anyways. A Twitch extension is something that sort of... You can overlay it over a Twitch feed. You can put it on the side in this little component area, and you can also put them below in the description, and they're just things that sort of enhance the viewing experience on Twitch, and I found that Twitch extensions for me sort of inspire me in the same way that Twilio does, is it's not just an API, it's an entirely different platform. You can build experiences on top of Twitch that, like, you couldn't anywhere else. And, like, this is completely honest from me. Like, this is what I thought when I first interacted with them. So, this one's like, sort of, you know, get scratchers or, like, different things like that. There's other really cool ones. What I saw was called StreamBreak. Let's do... WackyJacky has one, actually. If you go down into the chat... This isn't StreamBreak, but this is another one sort of, you know, you can see who has the most points. Who has given the most bits? Who has gifted the most subs? Just different interactions. And if you know web development in any sense, then you can build a Twitch extension. And if you check out dev.Twitch.tv, you can learn more about it.
Lizzie: Can we get that URL in the chat?
Lizzie: It's okay. I think BlueLava will handle the links, hopefully.
Tristan: And they are really cool. I was mentioning StreamBreak, and it's an extension that overlays over the entire feed and it lets you basically, while the streamer is away, you can interact with a game on their computer. You can, like, drop these little bombs and like they'll explode and then you try to get the most things off the platform. It's just a little fun. You just click around on the screen. Yeah.
Lizzie: So, who wants demo time?
Tristan: Demo time.
Lizzie: Demo time.
Tristan: Okay. So, I built a Twitch extension with Lizzie's help to essentially let viewers call in to a stream. Now, because there's so many people watching and we kind of want it to get this all-separate demo, I have two of my friends, Prince and Danny, who are going to help me out with the demo. The first think I'm going to do is sort of go through how it works, and then I'll start off with the demo. And all of this code, I'm going to opensource, once I clean it up a little bit. Make sure all the API keys are out of it, and I'll put it on GitHub, so you can try it out. You can try building this extension on your own, and hopefully help me improve it.
Lizzie: We can't wait to see what you build. We can't... I messed that up.
Tristan: It's okay. I'll share on Twitter, Twitter.com/Lesirhype, or on GitHub, Github.com/Tristanwiley. I'll share when the code is opensource there, but for now, let's try this out. So, I can go to my live dashboard. So, I am not live right now, but I can still see the extension. And so, this is what the broadcaster sees, and then if we go over here, this is what a viewer would see.
Lizzie: "Talk to me." That's so cute.
Tristan: So, "Talk to me..." So, the broadcaster is not currently accepting some questions.
Lizzie: Oh, I see that Kotlin GitHub repo.
Tristan: Ah, yes. And also, I have a feed of... This is another extension, which is a feed of my GitHub on my Twitch channel.
Lizzie: Fun fact: Marcos, who made the Dart library for Twilio originally, live-coded in Python this morning in the keynote. Can we get, like, some claps for him?
Lizzie: But he is a Kotlin developer, usually. But now we say he is a Python developer, from this morning.
Tristan: Kotlin is a great language as well. Okay. So, right now, calls are disabled. So, anyone who is on my stream, you won't be able to see this for now, because I have it white-listed to a set number of sort of friends who are going to help me out with this, but if I enable calls, you'll be able to see 'Talk to me' right over there. And Prince, if you're in chat right now, if you want to just submit a question and then I will get to that and we'll do a demo where I'll call you. Thank you.
Lizzie: Do you know what Prince's username on Twitch is?
Tristan: Prince is KingPower01.
Lizzie: Hi, Prince.
Tristan: Thank you, Prince.
Lizzie: I didn't know that was you.
Tristan: So, "Talk to me. Enter your information, ask a question." So, if I click ask a question, this little feed will pop up where I can just put in a phone number and a question I have.
Lizzie: [inaudible] says he only comes back when he hears key words.
Tristan: So, I'm not going to put in my actual phone number, because I don't want to get a bunch of calls, so I'm going to put, like, 55555555. I'm not going to actually call this, so that doesn't matter too much. I have a question about something.
Lizzie: Me too. I have many questions about, like...
Tristan: So, if I press submit, and if all goes to plan, which... Live-demoing.
Tristan: This will now show over here. Okay. I have a question about something. We also have a question from KingPower01. This may have actually been an old question, because we were testing this out and I didn't update it, but if I...
Tristan: It's okay. If I refresh it, and he does ask another question, it will also show up there. So, now I can call or I can delete. I can delete mine, because I'm not going to call myself.
Lizzie: That is the live one, says Prince.
Tristan: Oh, it is the live one. Thank you, Prince. So, what I'm going to do is I'm going to delete this one. Before I do this, I have to remember I have to put in my phone number here. Thank you, Brent. I'm going to do this here.
Tristan: That is so legit, you're right [inaudible]. Okay. All good. Perfect. So, I put in my phone number. I hid it. Go over here and press 'Call.' And now I'm going to go on my phone. I'm going to put it on speaker when I get the call.
Lizzie: I gave a demo yesterday and I used my own phone number, and people saw it. And I was like, I'm sorry. I can't hide it.
Tristan: I'm going to put it up to my mic. Hey, Prince, can you hear me?
Prince: Yup. I can hear you.
Tristan: Okay. I don't know if chat can hear that, but I'm actually talking to Prince right now.
Prince: I hear it.
Tristan: So, what is my favorite video game, and why? My favorite video game... Okay, so I'm really bad at it, but I enjoyed PUBG, PlayerUnknown's Battlegrounds, and I also really enjoy Rocket League. And I know that's two answers, but I like both of them.
Lizzie: I've never heard of either of those.
Tristan: Rocket League is actually something that's really fun and relatively easy to learn, difficult to master, where you kind of... It's essentially soccer with cars. You kind of drive around and hit the ball into the goal. It's really fun. Adam plays it. Adam's kind of bad at it.
Lizzie: So does ChefBrent, but I'm sure he's better than Adam. Adam is one of our hackathon friends.
Tristan: Oh, Brent. Let me know if you want to play Rocket League sometime over there. So, thank you so much Prince. I'm going to hang up.
Lizzie: Bye Prince, thank you
Tristan: Thank you for helping out.
Tristan: Bye. Okay. So, let me refresh this.
Lizzie: So, normally in the live-demo I'd be clapping right now, because a phone call was made.
Tristan: Deleting actually doesn't work, so that's why that one popped up. Danny, if you can put in your question, and I'll do your call next. Just put in chat when you're ready and I'll refresh it again. And so, Danny is another friend. Danny is in the Twitch Development community, which is... The extension isn't showing up? Okay. Let's debug this live. Let me make sure...
Lizzie: Fix it.
Tristan: We have to give access. Ah, it didn't save the changes. So, DannyKampsGamez. Save changes.
Lizzie: Live debugging. Yes.
Tristan: Live debugging. Hey, Danny. Can you refresh it now?
Lizzie: So, we have Matt asking, "Is the call in the browser, or...?"
Tristan: So, right now the call is on my phone. There's a few ways we could get it into the browser. We could actually just open up Hangouts so I could get it from there. [inaudible] try the audio is going to do, just through the HDMI, and we can also actually do in-browser calling, which I would love to add, and when I opensource it and when anyone wants to help add that, that'd be great, because Twilio does have in-browser calling.
Lizzie: Yes, we do.
Tristan: And really all an extension is, is just a web page in an iframe on Twitch. You can build so many different things. You can access so many different... You can access the API, you can access different functionalities, etc. So... Sent. Perfect. Okay, and we have Danny here. So, this call is actually going to go out to the Netherlands.
Tristan: Yeah. Danny's from the Netherlands.
Lizzie: I didn't know that.
Lizzie: So, where is everyone from? He's from the Netherlands, Matt.
Lizzie: Drop your location in chat.
Tristan: Yeah, yeah.
Lizzie: Where you're from.
Tristan: If you'd like.
Lizzie: If it's secure.
Tristan: So, I'm going to call Danny. Let me get my phone ready and get rid of all these notifications.
Lizzie: Don't dox yourself.
Tristan: Yeah. "Who is better, Adam or Prince?" I can't answer that question without losing a friend. I love you both. I heard the build is on Twilio. That is true. Thank you, Twilio, for the credits. So, let's go call. I don't know if I actually clicked that. We'll know if I get it in a second, and I'll also show onto the camera.
Lizzie: So, Adam is an Android developer at OkCupid based in Brooklyn. He's roommates with Prince, who I know through Twilio Champions and the general hackathon community. We love the hackathon community here. Anyone in chat go to hackathons?
Tristan: I'm going to click that again, because I'm not actually sure if I clicked it. I kind of, like, bleh. So, worst case I get two calls, but yeah.
Lizzie: Two calls.
Tristan: There's a lot of improvements that can be made.
Lizzie: Two calls is better than one call.
Tristan: Perfect, there we go. So, we see up there, hopefully it's okay. We got a call. I'm going to answer it, and I'll put it on speaker. Hey, Danny, can you hear me?
Tristan: Hi Danny. So...
Lizzie: Can you turn up the volume?
Tristan: That's as far as it goes. I'll just put it next to my mic. So, what is my favorite programming language and why is it my favorite? Okay.
Lizzie: Good question.
Lizzie: I don't know, I prefer Vue.
Danny: No problem.
Tristan: All right. See you.
Lizzie: Marcos is a Kotlin fan, as we know.
Tristan: Kotlin, woo.
Lizzie: [inaudible], not a fan of PHP, it's kind of ugly. Okay.
Tristan: So, it depends on what you use [inaudible ]. So, when you create an extension, you create the front-end. And you could also have a back-end if you need that for your extension, and then what you do is you have your front-end files and you actually upload it to Twitch. So, Twitch hosts all your front-end files, your static front-end files, and those can interact with the back-end. And there's a really easy review process. You submit it, you can test it locally, you can test it, like, host it on Twitch, and then you can submit it for review. And then once you do that, there's a review process and just like the App Store, you can have your extension up on the marketplace.
Lizzie: Okay. So, can we look at some of the Twilio functions?
Tristan: Oh, yes. Of course.
Lizzie: Tabs are spaces, everyone.
Tristan: Tabs are spaces. I use tabs, but I have them convert to spaces in my editor. So, I used a few different Twilio products for this. Thank you for all your help, by the way. Let me refresh this, because I think I updated something. Okay, that's fine.
Lizzie: I used to prefer tabs, but I kind of like spaces. It's kind of therapeutic to type, space, space, space.
Tristan: Therapeutic, really?
Tristan: I don't think that... Okay.
Lizzie: In a way.
Tristan: Okay. So, I used a few different Twilio products. Twilio has a bunch of really cool products.
Lizzie: Yes, we do.
Tristan: Yeah. So, I used mostly Twilio Functions, which is essentially a server-less environment for you to build your code that uses Twilio. It has a lot of integrations, so if you go to Configure you can actually see. You can enable ACCOUNT_SID and AUTH_TOKEN, to load it in from your function.
Lizzie: It's very easy to access your own personal ACCOUNT_SID and AUTH_TOKEN in Twilio Function. You can also have different environment variables, like I said, like 'sun grid.' I'm blanking on other API, because I hide... Anyways, you can set environment variables, import different node modules, and more, all in Functions.
Tristan: Yeah. If I actually go back, you can see I'm using a few different things. This is for something that I may do. This is something, if I want to... I was going to hard-code it if I wanted to do a live-demo. I may or may not do that, depending on time, but I want to add SMS support, so instead of calling you can just send a text. This is my TWITCHAPIKEY and my TWITCHSECRET. Yes, thank you for hiding those. So, those I use to validate the data from the extension, to make sure that the user who is sending it is actually who they say they are, which is very useful, so you don't have, like, bad data. And then the APIKEY is when I use the API, to sort of get the username, get some information. Then down here, just, you know, NPM modules for that. So, 'got' is for making API calls very easily. We have 'twilio,' of course. 'jsonwebtoken.' So, JWTs are really useful, especially when you're using Twitch, building a Twitch extension, for validation etc. So, if we go to our extension, there's three different things. Twilio is actually the connect function, so I'll click this, and you can see in our Twilio Function we have some code. Yeah?
Lizzie: That path is unique to everyone. We have cyan-lizard, I think you pronounce that?
Tristan: Yeah, cyan-lizard.
Lizzie: It does not matter how you pronounce it. That is unique to each user. So, my path is different.
Tristan: Yep. And there's also a really nice debugger that helped me out a lot when I was building this.
Lizzie: That also falls under Runtime, I believe.
Tristan: Robert, I'll get to your question once I'm done explaining this. I do want to answer that. So, we have a bunch of stuff in here. This is the sort of headers for returning JSON. This, I'm getting the token from the request, and the token is the JSON Web Token. The extension generates that via a key that you set in your console, and that's used to sort of verify that the user who is sending this request from the extension is who they say they are. So, I know for example that when Prince called, that was actually Prince and not someone who just sort of used Prince's username. And so, some checking, and then this takes the first number and the second number. So, in this case this is actually from this view, when I was actually pressing 'Call,' and then I just send this to a TwiML Bin, which contains this conference XML. TwiML's just basically XML markup. That's a little redundant, but a bunch of markup that defines what I want to happen.
Lizzie: And TwiML Bins are kind of like functions but for TwiML.
Tristan: Yeah. Functions but for TwiML. This is hosting some static XML. It's okay. That's just the Twilio number. I'll remove it after. You don't have to hide that, Brent. Thank you.
Lizzie: That URL, the handler.twilio.com/twiml/EH6, etc. etc. that is the TwiML Bin URL.
Tristan: Yep. And I can actually show you that. I'll real quick go through the other ones. This is more just talking to the back-end that I built. So, good questions, this talks to an AWS Lambda function that sort of contains all the questions. Yeah. Doing the same verification up here as well. Let me go... We don't have a lot of time, let me go to the TwiML Bin. And this TwiML Bin is where the XML for the conference is. So, this just has a room name. I thought I changed that to... I think I, like, copied it and removed it and then added it again. So, this would be, like, the room name for the conference. Shoutout to Brent [inaudible 00:35:50]. So yeah. That is the extension I made. I'm going to opensource it, put it on GitHub. It's been a lot of fun building the extension, building the Twilio back-end, building everything. Let me see.
Tristan Answers Questions from Chat
Lizzie: Any questions from the chat?
Tristan: I can also go over to sort of over here, and so this is the actual extension. So, if you're familiar with React, this may look familiar. Let me... Doo-doo-doo. Close these, so I can show you what each thing does. So, in our 'public,' this is just different HTML files. And so this just loads in React and then it'll render our page. And so, like I said, all an extension is, is just a web page that's pretty much in Twitch. You can build a lot of cool interactions from that, and there's also, like, different things that Twitch will load-in. So, you can access, for example, like, authentication and you can send messages in chat. All that sort of stuff.
Lizzie: What's the coolest Twitch extension you've seen besides this one that uses Twilio? That combines two of my favorite T-W-I companies.
Tristan: Yeah. So, yes. That is true. I think the coolest one that I've seen is called SoundAlerts. And so, basically it lets you play sounds on the broadcast of your computer, and so if you're not familiar with Twitch, Twitch has something called 'bits.' Bits are like a digital good, and so you can get bits and then you can give the bits to a broadcaster, but the cool thing is, if you use bits in extensions, you can actually get a cut of that bit revenue. So, if someone uses a bit in the SoundAlerts extension, for example, say they use 100 bits, which is about...
Tristan: About a dollar. And they use that in the extension, the broadcaster gets 80 percent of that, and you as a developer can actually get 20 percent of that. So, that can kind of add up, and you can, you know, make money while you make these cool experiences on Twitch.
Lizzie: Yes, [inaudible] do mean a lot today. Let's have some people in the chat drop your favorite Twitch extensions, also...
Tristan: Yes, Twitch extensions in chat.
Lizzie: The favorite Twilio hacks you've seen. That reminded me of when I was at MHacks last October, which is where I met Tristan in person. We had met, like, online, but we had never met in person. The coolest Twilio hack I have ever seen was at MHacks. It was called Moisture Meter and it would use an Arduino to measure sweat, but to test it you could just, like, show a towel that was, like, wet. And it would return, like, a percentage. Like, you are 5 percent sweaty, or, like, 50 percent sweaty, and if you were, like, over a threshold it would spray, like, Axe Bodyspray on you. And it would send you a text message saying you are, like, however percent sweaty.
Tristan: I do remember that. I kind of remember that. That was really cool.
Lizzie: And I was like, that is so silly, but I have never used of this use case. It's unique. It was a solo-hacker, and he told me when he was demoing, he was, like, "Yeah, I'm a senior. I have a job already. I don't need to be here. I'm just here for fun." And I was like, you're living the spirit of the hack. So...
Tristan: Real quick. Before I go into some questions, I do want to say hackathons are absolutely incredible.
Lizzie: They are.
Tristan: If you don't know, I love going to student hackathons, which are 24, 26-hour events, where you basically sit down. Most of the time your food is paid for, you just kind of sit down and you build for 24 hours, 36 hours. You think of an idea and you just make it, and it's really a great place to learn stuff, to make stuff.
Lizzie: Take risks. Learn something new. Experiment. You have an idea. You're surrounded by people who give up their weekends or days. They could be anywhere else, but they're in, like, a college gym.
Tristan: There's great food, great people, great talks, sponsors, prizes. Everything you could want. Two of my favorite that I help run, MHacks and UB Hacking, if you want to learn more about either you can go to ubhacking.com, U-B-H-A-C-K-I-N-G-dot-com, and also MHacks, MHacks.org, M-H-A-C-K-S-dot-org.
Lizzie: And I help organize a woman's hackathon called Spectra. You can find out more at SoSpectra, S-O-S-P-E-C-T-R-A-dot-com. That happened two weekends ago. The third time it's occurred. It's not affiliated with the school.
Tristan: Maybe, Danny. And yes, MiniHack, too. So, real quick, with the remaining time, I do want to answer some questions. If you want to learn more about any TwitchDev related stuff, go to dev.twitch.tv. There's a really great Discord as well. If someone can drop the Discord link in chat as well, there's a great community who's willing to help you with whatever you need. You can share what you've made, you can learn about new things. I'll be in there. Drop an emote, say hi to me.
Lizzie: And can we also drop, like, the runtime docs or functions or TwiML Bin documentation?
Tristan: Yes. So, Brent, if you can open up some of the questions, just real quick scroll up a bit. I just wanted to see a couple... One of them was from Robert Tables, I think? Ah. How was your experience with mentorship during your time at... I was at Twitch.
Lizzie: I was a Twilio intern, two summers ago. Three summers ago. 2017, 2017.
Tristan: I can talk about Twitch. It's fantastic, it's been fantastic. I've been working on a really cool project that'll be live and it will sort of showcase a bunch of, like, community-made projects, extensions, code-samples. All that sort of stuff that the community submits, and we just showcase it on our site, and I've also been able to be in the Discord and talk to the community and help with the community. It's been fantastic. Everybody at Twitch really cares about the community, no matter what team they're on, because, you know, there's viewers, there's the broadcasters, there's the developers. Everyone just loves their community. So, yeah. It's been a really fantastic new experience. I love it there. Yeah.
Lizzie: We have some of that community here at SIGNAL this week. I love just the atmosphere of developers. It's been great, yeah.
Tristan: This booth is really cool, too. There's, like, booths all over.
Lizzie: Yes, so many booths. And Dallas is wondering what your favorite color is, and why? Hi Dallas.
Tristan: What color is... Okay, I love Twilio red and Twitch purple.
Lizzie: I love Twilio red, too.
Tristan: That's my cop-out answer. Do we have meetups? We do have meetups.
Lizzie: Twilio red.
Tristan: I don't know... Actually, there's a developer jam hackathon online, too, if maybe we can get a link for that in chat as well. I know I'm asking for so many links, but yes, there are meetups. There's a lot of cool events. There's all sorts of things. Check it out, dev.twitch.tv. I love it there. You can...
Lizzie: Cop-out answer.
Tristan: Yes, cop-out answer. You can make a lot of cool stuff with Twitch, and there's a lot of possibilities integrating with Twilio as well. So, if you are a Twilio developer and you haven't tried out Twitch development yet, really try that out, because you could bring a really cool perspective. Like, this is just one of them. Like, calling into broadcasters, but there's however many products. Build something that, like, integrates with fax and so, like, prints out something at the streamer, like on a fax machine. That'd be so cool.
Lizzie: Twilio fax API. I love that.
Tristan: Yes, so cool.
Lizzie: So, [inaudible] is wondering, as your internship in the summer is winding down, what's next?
Tristan: What's next? Who knows?
Lizzie: Back to school.
Tristan: Yeah, back to school, unfortunately. I love school. It's great.
Lizzie: I will miss you, Tristan. We went out a lot in San Francisco this summer.
Tristan: Yeah. She's shown me a lot of good food places. I'll be back at school. I'm director for UB Hacking, so hopefully I'll see some of you at UB Hacking. We'll have hopefully travel reimbursements, and we'll be able to hopefully see some of you, especially if you're on the Eastern coast.
Lizzie: Eastern coast.
Lizzie: Twitch has internships. We have Tristan here. Twilio also has internships. I used to be an intern, and I have talked with a lot of [inaudible] ones as well. We have software engineer interns, product manager interns, data science interns.
Tristan: Hi, Megan [SP].
Lizzie: We have a marketing intern. Megan.
Tristan: Danny, I'll see what I can do.
Lizzie: We have one more minute. Does Europe count as the East Coast? Unfortunately not, I don't think so. Twitch Discord internship. Oh well. So, one more minute.
Tristan: Just one last question, I might be able to answer it.
Lizzie: New grad roles? We do, but they are all full. New grad roles have all filled up for 2019, but we have one minute left. Thank you for tuning in.
Tristan: Thank you so much.
Lizzie: We have a lot more material coming for you live on SIGNAL TV after our short break. Thank you, Tristan. Any last words?
Tristan: Hopefully I'll see you in the Twitch development community. Thank you for tuning in. High five.
Lizzie's talk with Tristan
Join 4,000+ of your peers for at SIGNAL 2020 for 2 days filled with 185+ talks. Transform your business and level-up your development skills. At SIGNAL, the world’s best companies join thousands of developers, business leaders, and innovators for learning, networking, and fun. Experience new product releases and in depth sessions led by innovative companies.
Limited time: register now for SIGNAL 2020 for the best pricing