Journalist Tool

Kineticist

  • HDashboard
  • IItems
  • ↓Ingest
  • SSources
  • KBeats
  • BBriefs
  • RIntel
  • QSearch
  • NName Review
  • +Health

v0.1.0

← Back to items

Software Development: Roboctop.us in Visual Studio Code

Don't Panic Flip·video·1h 39m·analyzed·Oct 19, 2019
View original
Export .md

Analysis

claude-haiku-4-5-20251001 · $0.024

TL;DR

Developer streams fixing Flippers league app and planning Azure migration for Roboctopus.

Summary

George Gomez (Don't Panic Flip) streams software development work on Flippers, a pinball league management app, and Roboctopus, an audience participation app that integrates with Twitch and controls smart lights. He discusses fixing a missing edit screen in Flippers' member management interface and plans to migrate Roboctopus from a local .NET Web API to Azure Functions for better scalability and reliability.

Key Claims

  • Flippers is a pinball league management app in early beta, currently only released to a couple of leagues

    high confidence · George Gomez directly discussing the production status and beta limitations of Flippers

  • The edit member functionality was removed when Flippers was refactored to use an Angular Material wizard interface, causing a bug where users can add members but cannot edit them

    high confidence · George debugging the code live on stream and discovering the HTML conditional logic that omits edit functionality

  • Roboctopus currently integrates with Philips Hue lights and Yeelight, with plans to expand to Nanoleaf and LIFX

    high confidence · George listing supported light platforms and mentioning expansion in progress during the stream

  • Azure Functions provides a free tier of up to one million activations per month, making it cost-effective for moving Roboctopus from local hosting

    high confidence · George stating the free tier details when discussing Azure Functions migration strategy

  • George went to a local technical school in Fort Collins for system administration and was hired immediately as a junior administrator after graduation

    high confidence · George directly answering chat question about his educational background

  • George started learning software development around 2009 when his boss asked him to develop diagnostic software that could access live data

    high confidence · George describing his transition from system administration to software development

  • There are approximately 200 people total interested in pinball on Twitch

    medium confidence · George's opinion expressed during chat discussion about pinball community size on streaming platform

  • DeadFlip is doing an amazing job bringing new audiences into pinball through being cool and personable, which could expand interest in the niche

    high confidence · George praising DeadFlip's community building and cross-audience appeal during live chat discussion

Notable Quotes

  • “I have no idea how this is going to go, but apparently I've started watching it online, so there's obviously an audience.”

    George Gomez@ 1:07 — Establishes the exploratory nature of the software development stream and uncertainty about audience reception

  • “I taught myself to code by reading books, so I'm just used to that format now.”

    George Gomez@ 11:57 — Explains his learning style and why he's interested in watching other developers stream code

  • “That's what's so amazing about programming, is you write something, and then you run it, and you test it. And if it's something as cool as lights, you actually get to see them change.”

    George Gomez@ 14:37 — Articulates the immediate gratification and tangible feedback loops that make programming rewarding

  • “Pinball could use a larger audience. I see no issue bringing programmers into pinball.”

    George Gomez@ 27:01 — Expresses desire to expand pinball community through cross-stream audience building

  • “Right now what we're working on is a pinball league management app that was pushed out to production without a fully functioning edit menu option for a user.”

    George Gomez@ 19:33 — Clarifies the primary bug fix goal for the Flippers app during this stream session

Entities

George GomezpersonFlippersproductRoboctopusproductDon't Panic FliporganizationDeadFlippersonJames MontemagnopersonNoopCatpersonAzure Functionsproduct

Signals

  • ?

    community_signal: George streaming software development as new content category to engage programming community and bring cross-audience interest into pinball

    high · George actively responding to chat questions, inviting suggestions, hosting interactive coding session with audience participation via commands

  • ~

    sentiment_shift: Positive community reception of Roboctopus concept with multiple user requests for access, indicating demand for streaming audience participation tools

    high · George stating 'I've got a bunch of people asking me for access to it anyway' regarding Roboctopus

  • ?

    community_signal: Expansion of Roboctopus smart light support beyond Philips Hue to include multiple platforms (Yeelight, Nanoleaf, LIFX) to serve broader audience

    high · George stating 'I'm expanding right now the lights that I allow access to' and listing multiple platforms: 'Yeelight, Nanoleaf, LIFX'

  • ?

    personnel_signal: NoopCat transitioned from code streaming to employment at Stripe

    medium · George and James Montemagno discussing NoopCat's work history; James noting 'she headed to Stripe' and mentioning they are good friends

  • ?

    product_concern: Flippers league management app pushed to production with incomplete edit member functionality, causing user-reported bugs in beta testing

    high · George explicitly stating 'a pinball league management app that was pushed out to production without a fully functioning edit menu option'; mentions receiving calls from beta testers unable to edit member data

Transcript

youtube_groq_whisper · $0.299

0:30
Hello. My name is George, and this is the first of potentially many really weird streams where we develop some software. I have no idea how this is going to go, but apparently I've started watching it online, so there's obviously an audience. I don't know that it's a big audience, but I like it, and I'm all for backseat programming, I guess, in a fun way. Let's see how this goes. I've got an interface set up for this. I have no idea what to expect, and I guess I'll just be checking the chat and talking a little bit about what I'm doing and why I'm doing it, and then people can throw out who are actually good at developing why I'm doing it wrong and how I could improve upon that.
1:56
I feel like I should have a beer right now, but I don't. So, without further ado, Minnesota Pinball. This might not, I don't know what you do for a living, but this might not be your kind of stream, man. We're going to do software development. Here, check this out.
2:16
That's right, this is code. Now, on the fun side of this is actually we're going to start off by messing with Rock Paper Flippers, which is a pinball league management app that needs some updates. Currently doing nothing for a living, so this looks fun. Okay, awesome.
2:36
In that case, here, I'll flip you over to the secondary screen. So, we pushed out an update recently to Rock Paper Flippers, and we have a group of developers who are working on this right now. And we made some changes. Actually, what I need to do... Here, I'm going to flip you back over. Right now, this is saying I'm not in any active leagues. Wow, there are so many ads on Pandora. But I'm going to switch back over here to this screen, and let's go ahead and open up Visual Studio and get an instance. Ooh, I don't know how that's going to... Look. Ha! We just lost the screen. There we go.
Angular Material
product
Philips Hueproduct
  • ?

    technology_signal: George planning migration of Roboctopus from .NET 4.6/4.7 full framework running locally to .NET Core on Azure Functions for better scalability and reliability

    high · George stating 'we're going to start the process of moving from a full .NET 4.7 application running here as a web API... to Azure functions'; discussing free tier benefits and improved supportability

    • 3:22
    So I'm going to come here. We're going to open this guy up. It's awesome. Just so that way I don't have actual customer's code on this computer as well. But let's throw that one off to the side, and let's go in here. We'll go into Rock, Paper, Flippers, and now I can throw this screen back over. Now that we're in rock, paper, flippers, let's open up the solution.
    3:48
    And I have a feeling my local instance is trying to point to an API, which is the software sitting in the background just responding to calls from the Internet to try and provide data. What I need to do is actually get a version of this running locally on my computer so the website actually gets some responses when it says, hey, what leagues are you currently in? So, and this is all just getting your local development environment kind of set up. So what I did right there is I told this solution, which is a collection of different chunks of software. We have some security stuff. We have a layer wrapped around accessing data. We have our actual API and some view models that we're passing back and forth. And that build was successful, I can see down here in the bottom left. Uh, so now I am going to go ahead and tell this to... I think it works if I just tell it to go ahead.
    4:47
    I don't know, it's been kind of a while since I actually started this up. So, my, my goal, my, my initial goal for tonight was, uh, to try and build an edit screen for something that we refactored. Pink Ninja Man! Yes, we are, we're coding tonight. I'm going to try this out. I want to see how this goes. Yeah. By the way, I think there's a coding category if you want to use that. I thought I actually selected science and technology was the coding category that I saw some others using. I am happy to switch it.
    5:27
    Program... Basic... Excuse me, basic programming. I don't see it. if you happen to know what that category is, I'm happy to switch. I mean, use whatever you want.
    5:48
    Kisco, hey, I'm just here to stop by and ask if you will be at this year's Pinball Expo. Kisco, hey, welcome, man. It's been a while. I will not be at Expo this year, but I will be in Chicago for almost the entire month of December. I'm taking about three weeks to go spend some time with my family who are all out there. Oh, cool. We got this actually running. So I'm going to switch over to this screen. So we've got a local instance of the API that actually drives Rock Paper Flippers running locally here, but it's accessing data stored up in the cloud on our development instance. So none of this is real data. but this is running from my computer a development instance of Rock Paper Flippers which is an app we put together that we haven't done any marketing on whatsoever we've made a bunch of changes to it and we've been working with a couple of local pinball leagues to kind of figure things out and really try and decide what it is that we want to tackle I guess before we try to go big on the release we did a stream a while ago specifically about this, and it's come a long way. And we have analytics up and running, we have, I'll throw some fun stuff out here, we now have a standings page you can come into, and you get to see a whole bunch of stuff. You can now click on somebody's name in here and get access to all of their scores and points and bonus points that they've achieved in the league. You get some information up top as to what kind of league this is, how many drops have been applied to what you're seeing over here, how many of the sessions are applied to this, of the total sessions available, and then you have some fun export capabilities. So we put a good amount of effort into this, and it's worked out really well for the few leagues that are using it right now. But like I said, we're not doing any kind of marketing on it. We think there's still a decent ways to go, although we're pretty close at this point. But some fun things we did was we pushed out a version that does a wonderful little three-part thing to help get you into integrating a member. Unfortunately, we don't have an edit screen for this. We had an edit screen for it previously, but when it got updated to this version, we forgot to put the edit functionality in there. So you can add people, but if you go to edit them right now, and this is just stuff that happens occasionally in software development. Once you notice there's an edit button here, I'm going to click it. Oh, I already made some changes. Normally that didn't even open at all. So I've already gone in there and made some small modifications to at least get that little modal to pop up. But I'll jump into the code, and you guys can just throw out questions, and I'll see how enjoyable this is, I guess, to kind of do some of what I end up doing late at night anyways, but allowing other people to ask questions. Or if there's other people out there who do it better, I'm all for other people giving suggestions on how to do things better as well. I would love to get better at the craft, you know? So, catching up on chat. They may have changed it up since the last time I used to watch people program. Oh, nice. And while I'm here, I should also ask, where did you go to college and what did you go for? I'm currently looking and what to look for. So I actually went to college for system administration and landed right out of college. And I just went to a local college here in Fort Collins, not CSU, although I did go to CSU. But that was that was a year that we can just say got completely wasted. I should have taken a year off because there was, there's, I literally have very little memory of a good year of my life. But I ended up going back to a technical school locally here and came out with a degree where I got hired on immediately as a junior administrator. Ended up becoming their network administrator, eventually their systems admin. And from there, it was back in about 2009 or so. My boss at the time asked me if I was interested in software because I had taken over managing the company website, and they were looking to have some diagnostic software running, accessing live data as it was coming in. And I said, yeah, that sounds great, actually. Like, personally, I had started getting into writing scripts and software, and I was really, really enjoying it.
    10:31
    And that's when it changed. I developed a Windows service, so there's no front end to it. It just runs constantly in the background, and it parses or runs through all data that that job was getting in live from the field and runs a bunch of calculations on it and outputs a bunch of data that was being used to determine whether or not things were working correctly.
    10:55
    And that was my first foray into software. and from there the company, because I did a pretty good job as a system admin, so they hired somebody else on and then paid for me to get a bunch of training to do software.
    11:13
    And from there, man, it's been all on-the-job training and forcing myself to learn new stuff, which is why I do fun things like what I'm going to eventually do tonight is try and perform a refactor. So you guys have seen the light show from Roboctopus. If you give me a second, I can actually start up a development instance of that. Here, hold on. We're going to go back to the primary screen. So this is the agent that I have running locally.
    11:43
    And this is what this show, I think, is really going to focus on, is the late-night work I end up doing on Roboctopus, because I've had a lot of people ask for access to this, and it needs a lot more work in order to get there. So the first thing I did, for me, man, I taught myself to code by reading books, so I'm just used to that format now.
    12:05
    And so I'm going to switch this, refactor Roboctopus to be, to use the, you get a free million hits per month up on Azure if you build everything as an Azure function. So I'm going to refactor the web API I built that is running locally on my computer here to accept calls right from Twitch and put it up as Azure functions that update a queue, and then the agent, which you're actually seeing running here, you're seeing this no command found. That is this agent calling this computer because I'm hosting the API on this computer. It's calling that, checking once a second for any commands on the queue for a user called don't panic flip. And A, that needs to be way more secure in the real world. But the other thing you're seeing here is I'm making, I have a WebSocket connection open with Streamlabs, and I'm sending a ping every five seconds, I think it is, or maybe three seconds, and waiting for a pong to keep that WebSocket connection live, so that way when somebody does something on the stream, like follow or subscribe or send bits, I immediately get the event, which is actually really cool. You can see it happen here. So watch this. I'm going to do exclamation point color, hot pink, right? and you just saw that happen right here found command to process initiating operation set light color operation success right and then you also saw the the lights change which is super fun if you're there you go kiss go awesome a thank you very much for the bit and b initiating operation twitch event operation success received bits like how how freaking cool is that uh now an issue is it did it three times. I'm not sure why it's still going right now, and why it ran into some sort of, uh, an indexing issue, but it did it, technically. And I will call that good. Uh, Kisco, you're awesome, by the way, for sending the bit. But that's what, in my mind, and, and that's why I love programming so much, because there is this instant gratification that comes, by the way, we need to, I'm gonna, I'm gonna change the lights again here, because this is a little too dark, um, but, uh, but that's what I, actually, that's still too dark, let's go with, I don't know, uh, exclamation point, color, let's go with light green, maybe? There we go, uh, that's what's so amazing about programming, is you, you write something, and then you run it, and you test it, And is something as cool as lights, you actually get to see them change. Or if you're working on a webpage, and let's switch back over. Like, that's another great part about this, is I can... That's awesome color blue. Yeah, so it's looking in the queue right now for my name. What eventually it will do is you'll log into... You'll open up an agent, and it will prompt you to log in to Streamlabs. and you'll log in using your Twitch credentials and it'll, yeah, black is really dark.
    15:19
    Minnesota Fidball. Yeah, so what's cool is I can hand this off right now. I have to make a couple of changes before I can give other people agents and then they can hook this up to their lights. On top of that, I'm expanding right now the lights that I allow access to. So, oh, this is, that's right, I'm on manual focus right now, I'm no longer autofocused on the new camera. But this is Yeelight. And then I've got... The other one was Razer Keyboard, or Razer Products has an SDK on Nanoleaf and LIFX. So we'll expand the product base. And I'm going to do it all here in stream as we just continue expanding on Roboctopus and get it to a point where I can hand it off very... No, sorry, Minnesota Pinball. The lights won't go off. I don't have that command in there. But there's some really fun ones. Yeah, dude, the life hacks are gorgeous, Kisco. But a really, really fun one is, there you go, color black. That's how you essentially turn it off. But you can do something like rave if you're a subscriber or a mod, right, which just changes the colors constantly for roughly about 30 seconds. Or a really fun one you can do is exclamation point my color. and I have this set so that way the first time you run it will randomly assign your user unique colors to every single bulb in here so that way the next time you call my color it will set them to the same colors and I am not integrated with IFTTT yet so I played around a little bit initially with IFTTT and I think that's where we want to go with the app in terms of flexibility. I have TTT, and then the other one would be the ability to just call a Python script would be the other one. Yeah, light green looks good.
    17:16
    And then another command I got in here, so my color will randomly assign... Cool! So I got pink over here and, like, a green over here, and then it's also currently set to modify my lights over by the pinball machines, which is kind of fun. And then, now that it's set my colors, I can do my rave, which will randomly change the colors of the rave to only colors that were assigned my user.
    17:47
    So there's a bunch of fun, and that's just the colors. There's actually a lot of other fun stuff that this app does right now. Like, I can simulate key presses on the, actually on the computer, which is the reason I went with an agent design, so I could have local administrator access. I keep looking at myself as opposed to the camera up there. I've really got to get used to this again. Camera's in a very unique place. And this is my desk. So you guys, at some point, I'll have to throw up some pictures so you guys can see. But I've got a 40-inch TV here, 40-inch TV here. I've got a 22-inch monitor here. And then I've got the camera up top looking down at me. And this is all on a stand-up sit-down desk. So at some point, we'll drop it if I get really tired on a Friday or something. Yeah, exclamation point press, control alt delete. No, so, good thought, Kisco. And, no, it doesn't, it's not, you don't get to choose the key press. So, one of them is exclamation point, I think it was tilt on and tilt off. And I had a, it would do like a control or, I think it was shift, shift one and shift two. and I had those key combinations tied into specific shortcuts in OBS.
    19:06
    Exclamation point. Hey, Tyler Ray, I don't have a command yet for project. I probably need to put one of those in there, though.
    19:15
    And so that way it describes what we're currently working on, which right now it's a little weird. I'm taking an aside from a project. This is my first time streaming software development. Normally I stream pinball.
    19:28
    But yeah, I have to throw in an exclamation point project in there. Right now what we're working on is a pinball league management app that got pushed out to production without a fully functioning edit menu option for a user. And production, we're still in a really early beta stage. and right now it's released to just a couple of leagues for use.
    19:56
    And so I'm going to try and fix that really quick. At the same time, I've got an app that does audience participation. It allows people to change lights. So a really good example would be exclamation point color, hot pink, right? And that changes the lights on cue lights here, and we're going to expand on that, and we're going to add access to Yeelights. There you go, color sky blue. To Yeelights, Nanoleaf, LifeX, and then other forms of things like I want mods. Right now, mods can simulate key presses, and you can link those to hotkey associations and OBS, so a mod can come in here and, let's say, switch my scenes for me remotely. So we're going to expand on that, but the problem is it's all running locally from my computer, and I'm going to start playing around with Azure functions. So I've got a full .NET 4.7 application running here as a web API and we're going to start the process and that's really what I want to focus on for streaming.
    21:05
    Yes, Tyler, there is a .NET wrapper on an API for Philips Hue Lights, which is what we're currently set up for. so we're going to turn this web API and kind of learn the process of working with Azure Functions so far I've only worked with in Azure I've set up a .NET Core 2 web API working on a collective on a three system what is the word I'm looking for right now an app service cluster so I've got a multiple environment set up right now on one of my jobs, and that was my first time really kind of breaking into, I guess, like functions as a service or software as a service in developing, what do you call them, like containerized .NET Core applications. So my hope is over, when I'm working on this stuff late at night, to start playing around and focus really on this Roboctopus audience participation application. Get that up on Azure. It's free, up to a million activations, I think, so it should be inexpensive and a great way to get it kind of up in the cloud and way more supportable and less likely to crash or, like, when I pick up my laptop to go work outside or something like that. James Montemagno, welcome to the stream, man. Hey, buddy, let me know if you need anything. I am Microsoft Client DevTools. Oh, wow! So let me know if you need anything. Also, we have a whole live coder stream team of all types of livecoders.dev. James, I am clicking that link right now, and if there's anybody else on who is interested in that as well, why don't I go ahead and just star that really quick.
    22:55
    Yeah. That's awesome. Yeah, that's exactly what I'm... I didn't even know that people were streaming code, and I found NoopCat a couple of weeks ago, and since then I found probably about three other developers who were enjoyable to watch and they responded to questions and I was learning things actually watching them and I thought about it from the other point of view I'm like, I'm an okay developer I get stuff done you throw a problem at me, I figure it out but I learn from books I don't do well from videos and I thought, you know A, I'm doing this late at night anyways and other people can throw suggestions in on how to, I don't know, like, write code better. So, all different languages, all sorts of stuff. Yep, I worked with Nuke Cat before she headed to Stripe. Her and I are good friends. We live like five... That's awesome. So, yeah, that's exactly, I guess, what I was looking for. And, you know, as opposed to Pinball, which, obviously, I want to keep going, but I've got a vacation coming up where I'm going to Chicago and keep the stream going. I thought, you know, keep going with the audience integration piece. I've got a bunch of people asking me for access to it anyway, so I'm, you know, we'll keep going with that. In the meantime, I'm going to flip back over here. So, uh, that was the .NET software that's allowing light changes right now, and I'm going to put this back on hot pink. There we go.
    24:26
    It's a little bit nicer, kind of better with the music. Hopefully the music isn't too loud, and I'm going to drop that, drop that and now we've got Rock Paper Flippers going and it is actually up and running right now. We're just doing an ng serve.
    24:43
    I had a couple of other people make some check-ins so beforehand I did a quick npm install just in case. There's a bunch of stuff that needs to be cleaned up in there and now we actually getting back to the fact that we missing an edit screen in here So let see how this goes We've got... Which is kind of fun, I feel like, because I didn't do this update. And what I'm referring to here is if we go to Streamers League and Members... I'm going to hit up this secondary screen. And I want to add a member. there's the what is this? Angular Material almost like a wizard and we have this set in vertical mode right now where you can come through and choose the mail, email enter in some information and finish and that's working fine but the guy who switched this from a non-wizard to a wizard kind of spaced allowing it to be edited which I think is kind of funny So right now it's out there. I got a call from one of our beta testers like, hey, we added a member, but I misspelled his last name and I can't edit it. Nothing is showing up right now. So we're going to go through and add an edit screen before we jump over into Azure and start the migration of a full .NET 4.7 implementation of the Web API and try to push those into a series of Azure functions that update a queue and then update the agent we have running locally to pull from that queue as opposed to hitting the web API I have running locally. And yeah, one thing a lot of us do is have two accounts, one for gaming and one for coding. James, that sounds interesting. You don't put both under the same account? I don't know, that seems like kind of a it seems like kind of a waste not to have it all under one account. Although if you're streaming as a part of a group that completely makes sense. You would have that as a separate account anyways.
    26:56
    Split audiences. Yeah, that makes sense. That totally makes sense. Although Pinball could use a larger audience. I see no issue bringing programmers into pinball. Not for everyone. Depends on the stream. Yeah.
    27:12
    Okay, cool. So now we know. And I'm going to switch back over here. We're using Visual Studio Code. And honestly, it's been so long since I've been in on this code, I kind of just want to take a quick look at what's going on. So let's jump into the debugger. and I think I'm already in here, so there's the component TS, just make sure, members bottom, members bottom sheet component HTML, the TS is the controller, and what are we doing as this page gets loaded? If data.selectedID, we're going to do this, otherwise there is a current member, and then we reset the user. The user is doing this.
    28:05
    Alright, not how I would have done it, but we're just cleaning this up for now. We are not refactoring this page. I just need to get it functional.
    28:13
    And Pinball needs more apps. It does. It needs more everything. There's like 200 people total that are interested, I feel like, in Pinball on Twitch. And that really needs to expand. Deadflip does an amazing job of bringing other people in just by being cool, I feel like, and being the kind of person that other audience types are interested in doing. Like, he could host a bowling stream, and suddenly bowling people might be more interested in pinball. I'm out. Oh, Kisco, have a wonderful night. Thank you so much for stopping by.
    28:51
    So, let's set a breakpoint here and just get the lay of the land. I'm going to refresh this, and let's look at what some of the objects are that are being passed around here.
    29:05
    That is trying to load a ton of stuff. So we're going to hit the edit button now. And so I've set this breakpoint on another screen. You know what, I can do this over here.
    29:17
    Do that. I'm going to click edit. Boom. We hit that breakpoint. so there's an uninitialize event that and we're coding in Angular here so this is Angular I think it's 6 point something so I want to say we're at least one major revision behind if not two on Angular and I know we should do a much better job about making sure we're at least jumping into the releases after the first patch and what do we got we're passing in a data object and inside that data object we have a league ID and a user.
    29:56
    So I'm just going to step through this. So it's going to go down, it's going to set current member to this.data, and it's going to cast it as this league player's members. Not going to say anything about the names on these, because I'm actually the back-end guy for this project. I don't touch the front-end all that often. but we need to get this fix out kind of quick. So stepping through, we now have a this.current member is set to this. When did they join the league? What league ID? Member status ID. Here's a user. Jimmy Carter is the user that we're editing right now. And then it goes through and resets the user object. Why is that happening? Search results message. Why is there search results on an edit screen? Cool, so that maybe explains what we're seeing here. Let's take a look at what the code is actually, the HTML is doing with this.
    31:00
    This is a material stepper. We're using the vertical stepper, as you can see right here. And in the beginning, there was email.
    31:11
    What's going on here? Uh, if current member, wait, we have the code up on that. Ah, there it is. Current member. So if current member, uh, is not null, uh, that would be make it edit member, uh, edit member and make sure that the name of that user displays at the top. Do we get that? I'm going to hit play.
    31:36
    Yeah. Check that out. We get edit member, Jimmy Carter. Okay, cool. So, I mean, there's something accessing stuff. It's weird that the edit functionality wasn't in there. So I'm going to drop that. Now what's going on?
    31:58
    This is where it's asking for an email address. And there's a key down on the find member. Oh, okay, cool. Because this is the same screen where you create members. So there's a key down check to actually try and find the member as you're adding in the email address. So it automatically does a search and tries to find it.
    32:21
    And it looks like this is the first step control. Then we have the second step control. So why is it not populating any of the information for somebody who already exists? Well, what is the ngModel set to? Well, it looks like in this case, it's set to email on that first page. And on the second, it's looking for user.
    32:51
    This is interesting. So it's disabled if the user.id does not equal null. So it's almost like there is some functionality in here to provide editing. and ngModelCurrentMember.user.display. Well, we just looked at that. We are definitely referencing current member. So it really seems like we should get some data here.
    33:18
    Hey, look at that. Boom, there is actual data showing up. It's weird that it has member name, member phone, name, email address, and phone. Ah! Okay, so I don't know if you guys caught what the UI guys were doing here, but it looks like they have different inputs. One for if you're a new user coming into this modal, and one if you're a returning user that we're editing. Right?
    33:52
    So it almost seems like you just come to this screen, and you should just be able to edit your name, email address, and phone number, and then finish?
    34:05
    But that's weird, because it says finish and choose your adventure, and there's a back, and I have a grade out create new member, and then a save and a back and a cancel. This form is just hosed.
    34:19
    Alright, so if I come in, does it work nicely if I add a new member? I'm going to hit play. I don't want to break on that anymore. I want to add a new address. Let's just go with test at rockpaperflippers.com. Let's go ahead and perform the search.
    34:39
    Control-Alt-Delete problem solved. Oh, hey, it's an existing user. So we can hit next, and I can add this person to the league. But that wasn't what I wanted to do. I wanted to make sure it worked. so let's choose I don't know test42 at rockpaperflippers.com and right now we're accessing a development instance of both SQL Server and it's a development instance I think up on Azure right now but we're running both the API so it's a development instance of SQL but the API and the UI are all running locally on my development machine right now. So, uh, I found a user that didn't exist, now it's prompting me to enter in their name and phone number, so I'm just gonna throw in some basic information, uh, I'm not real, with a phone number, alright, hit next, and choose your adventure below, create new member, go back, that's really interesting, because on edit you get a different set of buttons, I guess I could go back next and create new member.
    35:59
    This is real interesting. Okay, so Mr. I'm not real, when I go to edit, I'm just going to uncheck that. We don't need that for right now.
    36:11
    So it brings up the same thing, but it did fill out name, email address, and phone, and I have a next button here with a finish, and I can't actually click that. I could hit save over here. Let's see if it works. I'm not. Uh-oh. Somebody did something. Stevie Love, thank you very much for that follow.
    36:35
    Right now, we're kind of taking a little sidestep as we're fixing something for a side project before we jump into the side side project and start playing around in Azure, moving from a .NET, a full .NET, I think, 4.6 or 4.7. I'm not sure what version we're at right now on it. But it's a .NET, a full .NET Web API, switching that over to .NET Core and running on Azure Functions. Hey, look at that. Oh, you can't see it because notifications are currently blocked by my image. That was done intentionally at the bottom right corner. Okay, so I'm not, I'm going to make it, I'm not for real, and hit next and save. Is that actually... Oh my gosh! Did that actually save?
    37:22
    I guess we could just hide a bunch of stuff and call it good enough. Once again... Oh, cool! It really did save. I did a refresh. So that actually pulled that from the database. It's there.
    37:37
    So it's just... This second screen is the only part that should be visualized right now. Nothing else should be available, I guess, to edit or do stuff with. So we need to hide step one or pre-fill out step one and pre-populate and make two active so that way you can next. And then we need to hide this stuff and just allow save, back, or cancel. This is a little hairy.
    38:05
    All right, let's play with it and see what we can do easily. Uh, here we go. So we've got, it's a material stepper, and, um, step control first form group. What is this? Second form group.
    38:25
    And then finish it, match step label. Why does this not have a name on it? Like I said, I'm the, I do the back end stuff for this project. I only jump into the front end when I need to get something done kind of quick. so, uh, feel free to judge, I'm perfectly fine with that, and like, also, I hope the music isn't too loud, but loud enough to where you guys can hear it in the background, if it's overpowering, let me know, oh, wait, we were gonna put this guy, that's why I have a second screen, let's put you over there, so that way I can go like that, that's very clean, I like that, oh, good, James, thank you, Alright, so we're setting disabled on user.id equals null, and when we take a look at that code, it's weird...
    39:21
    Uh... Because, at least for me, when I use Angular, I don't like the... Nah, that's... Well, so they're setting the data that's passed into this modal. They're casting it as a league player's members, which is just, it's a league player member. The S's aren't supposed to be on there because it's not plural.
    39:47
    But I digress. Let's go this.currentmember. Otherwise, it's this.user if it's a new user. And then what's happening when they perform the save?
    40:01
    League members response... Okay, here we go. Update member. So it's calling a service, specifically the update member, and I have subscribed to the response of that. And then I'm dismissing the bottom sheet passing in the updated member response. Okay, that makes sense. Is that what's happening when it's a new member?
    40:24
    Add member to RPF. So a different... Oh, because they're different buttons. So they're calling different functions on the back end. And we should be able to verify that here by looking at the button itself and seeing what the click event is. Right, so we've got close member sheet on this guy, which I think is the cancel. Then we've got update member. So these are the buttons at the very bottom that calls update member. As opposed to choose your own adventure. Add member to league is right here where it passes in user.id and the selected league ID. Man. Add member. Add member to league and add member to RPF. Okay, so we've got the member ID and the league ID. Does that mean that... Hold on. But how did it create the member is the confusing part to me, right? Like, is it... At this point, if we go back over, what this is saying is that the member already exists. So I'm going to go back over here, and I'm going to click off this, go back up to the top, we're going to hit add member, and if I perform a search, let's go with, um, I, what did I have, test 42, so let's go test 43 at rockpaperflippers.com, and I perform a search,
    41:56
    it looks like this user is not... So, at this point, did it create the user? Is that what just happened?
    42:04
    Let's check that out. So, flipping back over to the code, let's see what happens when I click search. Looks like we're find member API, where it's passing in the email. So, we're going to switch back over to the controller, and we're going to go to find member API. There's the find member response. It's going to set, if member is found, it sets the member and the status of whether or not they're already in the league and it updates. There's the search results message. That's why it was called search results. Making a little bit more sense now. Otherwise, it looks like this user is not already a Rock Paper Flipper member. Give us some basic information we can use to track it. And it sets the focus to, I'm guessing it's entering the member name. That, I guess, kind of seems all good. I'm not going to argue any of that right now. So at what point is the member being created? We're going to flip back over. So now you've found a member, and you're entering in an email address, a phone number, and a name, right? And all that is doing is setting all of that, and the material stepper next isn't performing any actions, so add member to league, passing in the user, oh, right there, if the user ID does not equal null, otherwise, so it's a different button that gets displayed if it's a new user as opposed to editing or adding an existing user. So not only are we editing, allowing an edit in this screen, but when you add somebody, if they're emailed, if they're already a registered user, we pass in their information, and it seems like to turn on and off different buttons to trigger different actions to be performed with different parameters to be passed in based on if they're already an existing member or not. So, there we go. This one over here is add member to RPF. create new member. Now we can flip back over and say, add member to RPF. We're going to subscribe, adding this.user as opposed to this.currentmember. And then after that, in the subscription, we're chaining a second call to add that member to the league. Now we've added them to RPF as a registered user, and a user can be assigned to multiple leagues. So you add them to RPF, and then you add them to this specific league. And then we dismiss passing in the newly either created or edited member.
    44:48
    Okay. I think I've got a pretty good handle on what's going on. The question is, on edit, can we make all of this stuff disappear? So I'm going to flip back over to this screen, and let's see what happens here. My allergies are acting up, which is awesome.
    45:11
    and we have no beer and I'm out of water. So we're going to have to go get water here, I think, shortly. Because it is just shy of midnight, and I think I've got at least another hour of development in me.
    45:23
    So we were going to edit one of these guys. Let's edit... I'm not for real. That was already expanded. I'm going to click Edit, and... when I click here and hit Next, Finish It is displayed along with these buttons down at the bottom. So I need to not display those if current.member is populated. I mean, that gets us to something functional, right?
    45:53
    So flipping back over to the code, let's do something really, really simple. And on finish it, ng if. So we're going to add this.currentMember equals null. I'll just add that same thing over here.
    46:26
    And I think if I hit save, we should flip back over. and I think on this serve it should automatically detect and refresh. Yes, there it goes. So it just automatically recompiled and once that was successful, you can see that here, it's refreshing the page and rebuilding it. It's going back out there and now if I go here and if I expand I'm not for real, and click that edit button. I'm going to here, click next, choose your adventure below. I should also make that go away. And you can just hit back, cancel, or save.
    47:07
    Going back up to the top, add member, just making sure I didn't break anything. Test, 44, rockpaperflippers.com We're going to perform a search.
    47:23
    Geez, not again. Next. Awesome. So we have these buttons. I kind of want those buttons to look like the other buttons. Not sure why that style. Yo, James Montemagno, thank you so much for hanging out, man. And also, thanks for the link to the other Microsoft developer stuff.
    47:46
    Yeah, appreciate it, dude. Headed out, bedtime here. I was checking and expecting pinball, but cool to see you code. Hit me up to chat more, mots at Microsoft.com. Cool. Yeah, thanks again.
    48:00
    All right. Music stopped. That's got to change. Yep, still listening. uh so we're going to come back over here and just being consistent with what these ui guys have i'm gonna copy that throw that up here but switch out the content right and this is just so that way the buttons at the bottom always have the same look and feel. I kind of like it with the like being in a footer.
    48:39
    Right? And then we're gonna set I guess this here. And then this crazy... Whoa! James! Thank you very much for those bits, man. Those lights flashing, that's for you. That's a hat's off. Thank you. And we'll be back on tomorrow with some pinball.
    49:03
    Uh, and in fact, I think we're doing, uh, I think it's Deadpool tomorrow. Always be coding. Night, buddy. Yeah, thanks, man.
    49:14
    Uh, let's see here. There's that. That over here. I hate that. Let's get rid of that. Okay, cool. So... I don't understand... other than it's a step label, and maybe it had to put some text in it. I just going to see what happens if I get rid of that and hit go Now let see what this looks like We going to flip back over Let's see if we just clean this up.
    50:02
    Adding a member. Okay, so you don't see any of the buttons. I'm going to go test45 at rockpaperflippers.com. we're gonna search uh geezrick 7-0-5-5-5-1-2-1-2 next cool we've got this purple create new member and back uh do we really need it to say create new member I don't know that button just looks really I don't know like we're trying to put a lot of text on there and it's got spaces and stuff like what if we just do create and maybe add.
    50:53
    Oh my god, I can't type. There we go. Saving that, we're going to change some of those buttons around. Okay, cool. So now we've just got really simple words like back, cancel, save, create, or add, and back. and it looked like it was working as expected.
    51:14
    So let's see what this looks like. Let's just confirm we made our changes. And this is, when I mention coding is kind of awesome. Also, I don't, I got to set this up so that way it figures out what the colors are before it does something, does the cool light change and then sets it back. Color hot pink.
    51:33
    There we go. Nope. Color bright white. There we go. Uh-oh. Did I break something? Hey, we can check that.
    51:49
    Let's go primary. Let's see. Unexpected closing tag button. Al Anonymous, welcome to the stream, man. This is definitely not pinball tonight. We're coding. and we're doing some fun cleanup on the most recent release of Rock Paper Flippers, which is a league management app a few friends in a development team and I have put together. We've been beta testing with a couple of local pinball leagues, and I just broke something.
    52:24
    So it was over here, and I added a button, and it auto-added some text. We're just going to get rid of that. hit save because we had too many button things going on.
    52:39
    Alright, let's see. Back over to the secondary screen. Did we fix it? We did. Boom. So now we can go down here. And the issue was we added recently the ability to add a member to a league. and it has a stepper now that kind of walks you through the process. But the edit functionality wasn't there on the edit a member. So I'm going to click off of this, go down. I'm not for real. We've got an edit. And now we've got at least the values there. We've got to do some more cleanup. We hit next. And we've got finish it, back cancel, and save. So we can go back here. I need to not display those. and then in this field here.
    53:30
    Nice. Okay, so we're almost done. I don't know what to do about this first step, though. So I'm going to switch back over. Let's go here and fill in member information. So we've got member... Was it member... So we've got name, email address, and phone. and these guys here are the three that are being populated by the current member, right? And these ones here are being displayed even though we're editing a current member as opposed to creating a new one. So what we need to do is this ng-if thing and set it here. Right now, this is some front-end work. I normally work on the back-end. if not let's do the same thing here so we'll only display these two fields if current member is equal to null we're going to hit save let's flip back over and just make sure that worked like we expect and I'm going to click edit go to the second step look at that, now it just says name, email address, and phone number with a back and next, and then I can go to finish, and I have back, cancel, or actually save, and I can come in here and adjust this from I'm not for real to I'm not real, hit next and save, and confirm I'm now I'm not real as opposed to I'm not for real, with a nice little notification letting me know that my save and through. So, um, now we just need to get rid, not display the top and go immediately, I guess, to the second. Or I guess we could just immediately go to the second. That would get confusing, though, if we don't populate the email address. So I kind of just want to skip to the second one. How do we do that? Step control, second form group. His second, I'm going to flip back over to the code, and I don't know what this step control equals second form group, so I'm going to check in the controller and see if we're setting that anywhere. Yeah, second form group is not set. So, what is this guy?
    55:56
    Going in here is that one. Nope, there is no references to whatever we're doing here with these step controls. Equals first form group and second form group.
    56:07
    So, this is where it gets kind of interesting. Since I'm not a front-end person, typically I now have to go find how to programmatically set a material stepper to the second step. Let's do that. So I'm going to flip back over to secondary. let's go in here and type in angular material let's take a look at these components and we've got the stepper in here somewhere there it is and it does have an api uh extend cd input input what do we got completed editable label state state of the step step control, top level abstract, and what do we call that? Step control. Template, false, is air state, extends, CDK stepper, methods, next, previous, and reset. So I guess we could kind of assume the vertical stepper, which is the one we're actually on, query list, CDK step, next, previous select and focus is the next step in the list. And if we go to the examples at the top, are they going to give us an example where they somehow programmatically switch the step?
    57:31
    I don't think so. Second control. Okay, interesting. This ngOnInit, first form group, group validators required. So In this step right here, you're actually passing in some of the configuration options for the stepper control.
    57:56
    And that is where the code came from here. I'm going to flip back over. If you go back here and we take a look right here where it says step control equals first form group,
    58:09
    that's where you can pass in those objects. And it looks like enforce validation or something along those lines. but the UI doesn't currently implement that, so I guess the next step is, I don't know, do we set the entire step to non-existent? Like, we could try throwing a star ng if, exclamation point, was it current member?
    58:36
    I don't know, is that going to work, or is that going to freak out? Just take out an entire step? He got me. Got kind of dark.
    58:54
    Jeez. Wow, that got kind of... I was, like, looking right into the light when it did that. Whew! Uh, alright, let's see if that fixed it. I don't know. Fix is relative in this sense. Like, I would kind of want to refactor that. Whoa!
    59:11
    Look at that. Edit member. I'm not real. Now I'm going to make it... I'm not for real. hit next, finish it save, I'm now, I'm not for real beautiful now did we break anything else? let's go to ad member nice, we've got three steps in the ad member you guys can't see that I'm flipping over to the secondary really quick, I'll show what we just did there so, I'm editing this now I only have two steps with the ability to modify the name, email address, and phone uh, back I guess shouldn't be displayed, right? Yes. Cool, so we need to go back in here, flipping back over to the code, and let's find that back button on the second step, and only show it, so star ng if, nope, uh, exclamation point, current member. Great. So now there's just a next button.
    60:15
    and that leads you to the finish. You don't really need the finish, which is kind of messed up, I guess, but it's part of the step. Yeah, I'm not going to push it too much further. Like, this is, it's functional, and that's all I'm trying to do right now, is we've got a whole bunch of other updates coming out for this app, where we're turning it into a PWA, which is kind of fun, a progressive web app, at the same time that we're going to start incorporating tournaments, as opposed to just leagues. And there's a lot more going on. At the same time, we do have actual leagues using this right now. So I just want to get something pushed out, let's say tomorrow night. So that way one of our beta users can actually edit one of the people they created. So we've got the email address of this just next. I'm going to click next and save. That got saved. I'm going to go up to the top. Let's look at add member. and I'm going to add in test46 at rockpaper flippers.
    61:20
    Let's go ahead and perform a search. Member name. Uh, George Test phone number. Ah, we did break something.
    61:36
    This is good. What did we break? Uh, so I'm going to flip back over here. Oh, good, you guys can already see that because I didn't flip back over, but we're generating quite a few errors right now. Cannot read property errors of undefined. Uh, so this is RPF bottom sheet container. This.currentmember equals null.
    62:05
    Disabled user, where is errors? field.errors? question mark dot email so this is on members bottom sheet component right so this is here there it is it's saying that it can't find field.errors and this dot current member equals null, which is why the next button isn't working when I press it.
    62:41
    What doesn't it like, I'm wondering? And what did we break? Field.errors question, because this was working just a second ago.
    62:57
    Um. dot email and let's go back to that error message and see what it was pointing at. Cannot read property errors of undefined. So field is undefined in this instance.
    63:22
    I must have deleted something. That's interesting. Let's... I can now go here. So, I created a branch, right? And what I'm going to do is I kind of want to look at what the code looked like beforehand. Now, what I can do is switch my branch, but then I've got to stop everything. So the other thing I could do would be to go look at the code live, actually in Azure DevOps, which we're using as our repository. So I'm going to log into DevOps really quick and see if I can pull up the code there.
    64:10
    One memento here. As we pull that up, I'll switch over the screens once I'm in. And repos files. There we go. So now I'm going to flip this over to this screen, and we're in Web, Source, App, Modules.
    64:34
    Where are we right now? We're in League Players, Components, and this is the Members bottom sheet. and I'm going to make this a little bit bigger. Let's take a look at the HTML before I modified it and let's find that field. So that field is right there and what was creating that field? That is the question and so star ng if user.id equals null so this is if it's a new user that we haven't come across yet it's disabled if user.display equals null or field.errors question mark we didn't mess that up so I'm really interested to know where this field property came from wonder if that's some sort of a fun built in component. Can I do a search on here? Yeah, let's find... I can't spell field. Material form field. It's saying that field is 17 times in here? Yeah, there we go. Material form field, name equals field. Alright, so we scroll back up to the top, and flipping back over to the code, it looks like we've got a name of field here, whoa, and the field is the NG model, and this is the email address. So, scrolling back down, is this saying field.errors? dot email and user.isburner equals false. That is confusing! Who knows where field is coming from here? So these are form fields. Is there a form definition somewhere on this page where we might be pulling in the field? This is just weird. Oh wait, we got another reference to this field.error.email. Field.errors?email or not email. So if there's an error on the email. And this is still trying to set whether or not this button is disabled. Okay, so what this is trying to do is, if there's an error in the email, disable the button, right? And if there's an error in the email, and it's not a burner account, we'll get into burner accounts here in just a minute. Because burner accounts are a specialty, since we're dealing with pinball people, there's actually a lot of pinball people who are kind of off the grid, and it's really, really interesting. So we have to handle people who want to be able to use the app, and rather, league managers who need the ability to add a user who has no intention of ever entering in an email address. In fact, so much to the point where they don't even want a fake email address put in that represents them. They just want a name, and we need to still store all of the information about the performance in the league against the name without faking an email address to go in there. So we have to have this concept of what we call the burner account, kind of like a burner phone, in order to handle those kinds of users in the league, which as you're beta testing you find all kinds of weird stuff. We ran across that twice with burner accounts, in two different leagues where people didn't want anything associated with their anything having to do with the league, especially if that league is being made public and is accessible to others outside of their group, which is a cool feature of RPF in that it's completely secure. You're logged in, your information isn't available to anyone. Now your league director can export that information and post it to, let's say, Facebook or something like that, but that's just the league director doing what they want with regards to the app unless it's marked as public it's not accessible to anyone else unless you're actually a part of the league so field.ers?email so this field inside of this stepper component for some reason doesn't have access to the same field that we have up here and I wonder if that's because I put it inside of a separate div structure
    69:19
    Uh, scrolling back down on the left, nope. Oh, interesting. So, this, oh. That actually is supposed to be zoomed in a little bit.
    69:35
    That makes a lot more sense. So we're inside of that div, which seems, I don't know, kind of arbitrary. inside of that step.
    69:49
    Finish it. Template. Choose your adventure below. NG if. NG if current member. Is it that it's like nested one too deep or something? And maybe that's why the buttons were a little bit different previously.
    70:06
    Ah, let's see here. Right? Field.errs? question mark, and we go back up to the top and we can see that they disabled this button, which is the search button, on the same thing, field.errors question mark dot email. And it's saying errors because field isn't there. And obviously the field is this guy right here, which is the input for email. But we're still inside the vertical stepper, which is fine. Hmm. So if I put this back, does it work? So I'm going to come here. This is how it was beforehand. That's before I messed with it. I just didn't like the buttons. This really doesn't have anything to do with the actual work item. But I'm going to close those. I think it's control slash. There you go. Nice little shortcut inside of Visual Studio Code to comment out a chunk of code. We're going to flip back over and let's see what happens now. This is currently compiling, and it should refresh. That's right, this was a new member, so I'm going to come back in here, and let's see if we have triggered, we have not triggered any errors yet, so I'm going to go test47 at rockpaperflippers.com. member name. We're going to call this one test.
    71:59
    Nope. Alright, cool. We have already triggered this error, and it's the same error now. I'm going to flip it back over so you guys can see that.
    72:12
    What do we got? We've got a button disabled. It still doesn't like field.errors. Right? Specifically can't read property errors of undefined, so field is still undefined. I want to go back, see if we changed anything else in here. Oh, I know why. I am an idiot. So, uh, that entire section of code is no longer in there. So, hold on. We've got this. Uh, I'm going to minimize this and come in here. I'm going to control Z those changes there we go, leave this in here so, um user.display equals null or and this is which button is this? This is the create I'm going to flip back over. I just want to see what this create looks like.
    73:18
    That's on the finish. So hold on. I'm going to go edit. This will work just fine. Aha. You can see the create new member here and back. But those, there's, there's an ng if that says this dot current member equals null. This code actually shouldn't be running, which is really interesting that it is. If we go back over here, where is it? It's the second one in.
    73:49
    So flipping back over, the problem is that there is this chunk of code right here that says, if user.id equals and this equals null,
    74:02
    so this code actually shouldn't be running. user.id equals null. Oh, wait, this was on a new user. Yeah.
    74:14
    Interesting. Hold on. So I'm going to minimize this. We're going to reset this guy. So I shouldn't get the error message when I'm editing an existing user. Let's make sure that is the case. I'm doing a refresh.
    74:35
    Come here. I click edit. I'm going to hit next. The create new member and back button showed back up. At what point did I feel like I broke that Hold on I did not save my changes That would be helpful
    74:58
    We're going to see this refresh in a second. I'm going to expand that here. Let's go ahead and click edit. Next. Great. Okay, buttons are as I expect. And now when I do add member,
    75:28
    now the question is, when am I killing this entire, if current member does not exist, go ahead and kill the top stepper, which is what is defining that field component. And if that is removed, then we don't have access to it later on when we do try to access it. But an add member, current member should be null, which is why we have access to the first stepper. So I'm going to enter in something here. Test 48 at rockpaperleapers.com. I'm going to hit search. I'm going to go back. It's still there. So, current member is not visible.
    76:21
    Sorry, current member should not be populated. I'm going to go with test new league and hit next. But we've already generated the error. Yep. A bunch, saying that it's not there.
    76:34
    Now, field actually should be there in this instance, right? Because this component is where it's defined.
    76:43
    But it's not there. So, switching back over. Now we just have to find why when I put this ng-if on this entire step, we seem to have lost access in other steps to this field object here.
    77:01
    And the question is, is that even necessary? I guess down at this point. Almost seems like... Man. So if... I wonder if you can put a disabled status on the material step. Let's switch back over here, and we're going to take a look at the API on the material stepper. Let's see if there's a disabled status on this.
    77:31
    Method is Air State Control. Here we are, the vertical stepper, so this is the one that we're using. Disable ripple. Linear. Selected. Selected index. Animation done. Selection changed. Steps. Next. Previous. And reset.
    77:49
    We do not get any kind of a disabled, which is kind of what I was thinking of. And this is a horizontal stepper. And if we view the source on this, yeah, we don't have any kind of a kill for that. Okay. So, flipping back over to the code.
    78:11
    I'm going to drop this. The problem is now that I've got an ng-if on that top container, this doesn't seem to be able to access the field component, which I think is a little funky.
    78:26
    So I'm trying to decide if there's another way to determine if you... Wait, which button is this? This is the add... Yeah, this is the create member button, which we kind of need, right?
    78:41
    I guess let's really see if that's the NG if, because that's all I changed up at the top, right? Somebody did Little Doctor Games. Thank you very much for that follow. I hope you enjoy the flashing lights. Those are just for you. And hopefully it leaves them at a higher...
    79:07
    Still going. by the way, if you can see it yeah, we're on that screen that is this little fun guy which is the Roboctopus app that hopefully we're going to switch back over to it's the reason we're just moving into some of the code stuff but that the audience participation stuff for Twitch and Streamlabs is really, I think, what we're going to be focusing on streaming here when we're not playing pinball, which is my normal routine Monday, Tuesday, and Thursday Uh, so, moving on, we've got an issue right now, and I'm not, I'm not typically on the, the front end, I typically work on the back end on this project, um, but we didn't have a way to edit properly, uh, new members that were added to this app. So right now, I think I hit save on this, I don't know. We're gonna flip back over and see if we at least undid the issue. which was I fixed the edit now you can edit but in I also made a couple of changes there was a few issues and a bunch more I would love to go back in there and play with but I'm not doing that right now I'm just getting things functional so that way the team can move on and keep working as they're migrating from an Angular 6 app I think to an Angular 7 or maybe an Angular Beta 8 PWA is what they're doing on the front end while I work on some back-end work to incorporate geolocation on this. And let's see here. We're going to go test49 at rockpaperclippers.com. All right. And I think I'll start getting the error as soon as I start.
    80:55
    No, look at this. Okay, so it is that ng-if on the... Yeah, that's really crazy. Check this out. So, I'm going to flip back over so you guys can see the primary. It is... I'm going to Ctrl-Z to... No, oh, there we go. Throwing that back in there. It's this ng-if on the step that somehow doesn't allow another step to access this field, which is a part of this form. and I think that's kind of interesting because I'm trying to access that over here to see if there are any errors on that particular field before I allow them to hit submit and I'm just kind of playing with the existing code that's here so I guess I could kill that and then you could potentially submit with a bad email and I guess that's better than not being able to edit right now because I'm just, like I said, trying to make things functional here. I'm not really pushing to refactor this. I would do, I think, a lot to this user creation page if I was really getting in here. But now that I do have the ng-if back in up at the top,
    82:16
    let's go, what is this? This is test 49 at rock paper. flippers.com, search. Uh, whoa, it's me. I'm going to hit next. Okay, great. But I don't have the save. Right. Because why? Uh, let's see. User.display disabled there. Why is the create disabled, or user, oh, it was two things.
    82:53
    If it was an error, and. So it's now actually disabling it because user.isBurner equals false. So I just don't even need this additional thing here. It's just saying basically if the user display equals null, disable it.
    83:10
    And we'll come back and check that out with a burner account, which is, like I said, kind of a unique user type. which we found in beta testing in Pinball. Apparently there's a lot of people who like to live off-grid.
    83:25
    All right, coming back in here. Add member. Nope. Test 50. Rock paper. Flippers.com. Search. I'm going to say George. That's me, by the way. I'm George.
    83:45
    Two. And finish it. I can now create this account. Does it do it successfully? Look at that. I have George. And now can I come in here and edit it?
    83:57
    Look at that. I have fill in member information. Hit next. Actually, I'm going to go back. I'm going to make it Georgie just to make sure it saves okay.
    84:06
    I'm now Georgie. That's great. Now let's take a look at a burner account. Let's create one of those.
    84:12
    We're going to select a burner and turn a name. Shweeby2 with no phone number. I'm going to hit create. I now have a Shweeby2 burner account. Let's make sure I can edit this. Hit next. Oh, you know what? I'm going to go back. Let's change it to Shweeby3. Next. And hit save. I'm now Shweeby3. Okay, cool. So we have the ability to create standard accounts and what do you call those other accounts? Burner accounts. Okay, cool. moving on. I'm actually just going to check that code in really quick.
    84:53
    And I have too many other tabs in my code stuff open right now to show that off. You guys only saw the code. Here we go. I thought I was showing that off. I forgot to switch screens, but now we can edit. So I can go through here and change that to four and I can hit save. and now ShweeB4 is there and that's a burner account so I'm going to come in here on a full account and make it test51 next and save and you can see that the email address is updated here so now we've got all of these members the screen seems to be fully functional I'm just ready to check this code in now and call it good and then we can move back into the Roboctopus application which is the audience participation stuff And maybe, because it's already 12.35, we'll just do a quick walkthrough. And the next time we stream software dev, we can focus on step one, which is going to be taking the full .NET 4.7, I think, web API implementation we have and beginning the transition to Azure Functions, which I've never worked with before. I got a book, started reading it tonight, and I thought, what the hell, let's just go through and do maybe like a hello world, uh, building Azure functions and then, uh, and then just start doing it. Like we'll learn on the way. And, uh, apparently Azure functions are free up to a million, uh, activations per month. Uh, and at that point you can start paying per consumption. I don't know for how long that is, but that's going to be more than enough, uh, to get Roboctopus into a position where I can start handing out the agents to other people's. and that is, that's this guy here. So when you do something like exclamation point color hot pink, I've got an app, or a web API that right now Nightbot is sending.
    87:06
    you That sound. Somebody did something. That was Slaughterdude. Thank you very much for that follow.
    88:03
    I think you can hear me now, but it's a much worse sound, Bob. Let's go back to this one. And, okay.
    88:14
    Hopefully you can hear the sweet sounds of my voice now through the wonderful blue microphone. Okay, cool.
    88:22
    Not sure what happened with that. Like, all sound just dropped out. I had to switch it to a different microphone and come back, which is interesting. I've run into that issue in web meetings, but never with this microphone. I always thought it was a different one.
    88:38
    So, but, oh, which, by the way, hopefully you saw that there. I'm going to scroll back up, but you can see we're integrated. Oh, no, that's just going to keep resetting. But you actually could see the agent detecting the Twitch event and then responding to it by triggering sequences. So in that case, it was running the lights intensity and on and off due to that particular command. But you can, with any event type, be it one that jumps onto the queue or one that comes submitted by Streamlabs, you can run off any kind of an action right now. And I've got a few set up. One of them is simulate key presses. So I've got a couple where I can have moderators only have the ability to send a command, like exclamation point, I think it's tilt, tilt on? Is that the right one? Yeah. which we got that command.
    89:36
    I hope it didn't just do it, because I think that's a shift one or shift two. I don't know where it actually did that. Anyway, so when it gets that command, normally I stream Pinball Monday, Tuesday, and Thursday, and this is my first stream doing software development. And the Simulate Keypress is kind of fun, because I have OBS right now set to look for hotkeys.
    90:06
    And shift one, I think, turns on my tilt bob cam and my pinball on one of the pinball machines. And then tilt off does shift two, which actually triggers a group of camera and the container that I have inside of it, all of it to turn off. So mods can turn on and off while they're watching the stream a camera or turn on and off displaying it. So that's one thing it does. We've also got light integration right now just with Philips Hue.
    90:36
    But we picked up a Yi light. So we're going to integrate with Yi because there's a .NET SDK wrapper for that. And then we're going to play with LIFX and Nanoleaf will be the other ones that the agent will be able to mess with. So that way we can offer up other people the ability to do fun stuff like this.
    90:58
    Which is a rave, and this is just constantly changing the colors. Philips Hue can display 16 million colors, or 16 point something million, and this just randomly chooses a color, not saturation, but a brightness for that color. And it does it a certain number of iterations as it switches them all.
    91:21
    That said, now I can do color white. and brighten things up so that way you can see it in here. So, without further ado, I'm going to switch back over to this screen,
    91:37
    and that way you guys can see the rock, paper, flippers, and then also the commands for this. So, while I check in those changes we made to rock, paper, flippers,
    91:49
    let's commit those, stage all, and these are updates to support editing of members and we have a whole bunch of changes pushed out right now. We're going to, I think, tomorrow night make a push out to production for RPF so that way our beta users have access to this.
    92:10
    I don't want to delete the branch. There we go. and I'm going to push that up. Now that we've got that checked, we're back in develop, and now we are pushed up. So that's going to trigger off our CICD up in Azure to go through and push all of that code to our development environment. Right now I'm running everything locally. So let's switch back over to code, bring this guy back over, and now we can close out rock paper flippers and I can close out this screen over here and make sure that I have Roboctopus back up and running which is good and we don't have a front end for Roboctopus right now and at some point we're going to need one but that comes after the switch on the API I really do want to get the API running up on Azure as a series of functions updating a queue so that way the agent can pull that back down and it's not running. Like the API right now is currently running on my computer. And I don't like that because I want to be able to hand out... I've got a handful of different streamers right now who want access to the... just even access to Philips Hue and the ability to change lights and integrate with Streamlabs so that way they can have different light sequences and stuff like that get triggered. So right now we're looking at that project as a full .NET, what framework are we on right now?
    94:00
    461. So this is a full .NET framework 461 implementation of their web API. And the goal is going to be to take the few API endpoints we have defined here and move those all up as Azure functions running actually up in Azure. And then we'll go into Nightbot and redirect all of those to that location. So that way when you enter in a command into the chat, something like color light blue, it ends up calling that. and then our agent can actually pull from that queue. And I think that's going to be our goal, stumbling through Azure functions. My experience on Azure so far has been with a service fabric cluster doing a .NET Core 2.0 stateless web API. So we do have some experience up on Azure in multiple environments. We haven't integrated that yet with our CICD, but we'll get there. And the goal would be to get Roboctopus essentially up to that same point so we can hand out the agent to other users and have them reliably be able to do the same things that we're doing here right now with their own stream. But it is now 12.45. I typically go right up until about now with my pinball stream. So I think we're going to call it and say goodnight, you guys. I'm going to switch back over to the chatting interface. Thank you so much for hanging out.
    95:37
    Yeah, dude, Slaughter Dude. That was the goal. I had seen another streamer do something really simple, and I thought, well, why not do that, but then do some other stuff. Like, we have the Rave, and we also have My Color, which I thought was kind of fun, and I want to allow people to be able to set those, but when you throw the command exclamation point my color out, it assigns your user ID on Twitch a number of random colors. And then any time you perform my color again, it sets all of the bulbs to the same colors. So you kind of have a randomly assigned color scheme to you the first time you call it, and then if you're... I don't think it's a subscriber. I think anyone with a follower status can do that one. You can always set your own colors, basically, on my stream. And I'd want to offer that ability up to other people, too, but need to start expanding the different lights, because Philips Hue lights are amazing, but they're also expensive as hell. Like, they are really, really expensive, which is why I jumped into Yee Lights that Al Anonymous had recommended, because I think he was using Yee Lights, and then I started playing around with trying to think of what the other, Lifex and Nanoleaf are the two others that we're going to expand to and we'll end up I think streaming a lot of that because I got nothing better to do when I am not streaming Monday, Tuesday and Thursday on Pinball from this time I'm usually working on other side projects so we'll end up streaming that. Anyway thank you, I hope everybody enjoys what's left of their Sunday and yeah, I hope you guys have a good one. And if you're interested in ever watching Pinball, I stream Pinball Monday, Tuesday, and Thursday same time, 10.30 p.m. to 12.30 a.m. Mountain Time. And Slaughter says, super stoked to start following you on this. Nanoleaf is amazing. It really is. Like, I'm excited to get a Nanoleaf in here and kind of throw it up in the background right next to a LIFX and start having the ability to set individual lights on all of those, and then giving the audience the ability to set individual lights on all of those. I think that's going to be a lot of fun. Anyway, you guys have a great one. See you later.
    98:22
    Thank you.