[0:03] hey what's up everybody can you hear me
[0:06] okay
[0:07] hey what's up everybody can you hear me
[0:10] okay if so let me know in the comments
[0:20] so yeah there's that a few second delay
[0:22] on my end so yeah everything's good let
[0:25] me know and then we'll get going
[0:27] cool so yeah first of all we're about to
[0:32] hit 50,000 subs so I just wanted to say
[0:34] thank you to everybody for that it's
[0:35] never really expected to get to that
[0:37] point so yeah I just really appreciate
[0:40] all the support and everything there and
[0:43] then yeah I wanted to just kind of
[0:45] experiment with these live streams I
[0:47] think in the future we could do like
[0:48] some ask me anything kind of videos and
[0:51] stuff like that cool are you guys
[0:55] getting an echo or do I sound okay cool
[1:04] um alright so I think the first thing
[1:07] I'll do is just will switch over to the
[1:09] code what I'm going to do is pull all of
[1:11] the comments from yesterday's video
[1:13] using that YouTube API so it kind of
[1:16] keeps with that same theme of using
[1:17] Google API is to get something done so
[1:20] if you haven't already commented on that
[1:22] on yesterday's video you've got about
[1:24] maybe two or three minutes to do that
[1:26] and then we'll pull all the comments in
[1:28] real time
[1:28] so I'm gonna go ahead and switch over to
[1:32] a screen share and then we'll just blow
[1:35] through the code in a couple minutes and
[1:36] then we'll pick the winner oops alright
[1:45] and so this is the actual shirt that is
[1:47] going to be going out it's a one of a
[1:49] kind like for these giveaways I just
[1:51] create a one-time design and it only
[1:53] gets printed once so if you win you'll
[1:55] be the only person in the world that has
[1:57] to share it and then I'm gonna switch
[2:02] over to vs code here and we'll see last
[2:06] time last time we use node to pick the
[2:08] winner but I did a little more refining
[2:10] to that script and we'll actually use
[2:12] the browser this time to provide some
[2:14] better UI elements and basically just
[2:18] what we have here is some simple HTML
[2:20] and I have a few empty elements and I'm
[2:24] gonna trigger this pick winner method
[2:25] and it's going to fire off this pick
[2:29] winner script that I'll show you here in
[2:30] a second
[2:31] and basically the script is an async
[2:34] it's an async recursive function so what
[2:37] it's going to do is pick comments from
[2:39] the YouTube API and batches of 20 and
[2:41] then it will put all of those into an
[2:44] array and then we'll do some random
[2:46] stuff with JavaScript to actually pick a
[2:49] random index from that array and make
[2:50] sure that only a unique comments can be
[2:53] picked so we'll set this up as an async
[2:57] function and then we'll make this
[3:00] recursive by passing in a page token
[3:02] argument that starts out blank and then
[3:05] it will end this function once the page
[3:07] token ends that means we've reached the
[3:09] end of like YouTube's comment pagination
[3:13] so to make a request to the API we're
[3:16] just using vanilla JavaScript and will
[3:19] preside up some URL search brands and
[3:22] that's going to take a key the video
[3:25] idea what this is the YouTube video ID
[3:27] from yesterday so you still have time to
[3:29] comment C from there we'll go ahead and
[3:34] request the snippet and then pass in the
[3:37] page token which again we use for
[3:39] pagination to know how to get like the
[3:41] next 20 comments in a batch so let's see
[3:47] here the actual YouTube API this is the
[3:49] URL for that and then we'll format the
[3:53] actual URL that we'll be making this
[3:55] request to and just a side note you
[3:58] don't need any authentication for this
[4:00] API you can just use it as an
[4:02] unauthenticated user all you need is
[4:04] that google gcpd project and so we use
[4:10] the browser or fetch API and that's
[4:13] going to be a promise or wait that
[4:14] that's the actual response from YouTube
[4:17] and we can one tip here is when you have
[4:20] a JSON response you can actually D
[4:22] structure it using this syntax here and
[4:27] just a cleaner way than setting up
[4:28] multiple variables for the different
[4:30] things that come back on the response
[4:34] from there we'll go ahead and map the
[4:36] items to the there's a bunch of data
[4:41] that comes back in the response so
[4:42] basically I'm doing here is just mapping
[4:44] it down to the top-level comment and the
[4:46] snippet on that comment which has the
[4:48] user name and user profile and stuff
[4:49] like that and we'll take this array and
[4:54] for each batch we'll go ahead and
[4:55] compose a new array so this wouldn't be
[4:57] it in a rainy it gets bigger and bigger
[4:58] and batches of 20 and this is what makes
[5:02] the function recursive so if we have a
[5:05] next page token then we're just going to
[5:07] call this function that we're define in
[5:09] some notes we're inside the size of
[5:11] pacing function if we have a page token
[5:14] then we're going to keep calling it
[5:16] until we run out until we get to the end
[5:18] of the pagination from YouTube so that
[5:24] takes care of the function and then
[5:27] we'll just define our array outside of
[5:28] the scope of this function and mutate it
[5:30] and then our event handler does its pick
[5:35] pointer and so what this is going to do
[5:37] is just grab a couple of elements from
[5:39] the DOM and we'll update some
[5:42] information in the DOM and what I want
[5:46] to do is add a whole bunch of suspense
[5:47] to this function so I have just wrapped
[5:49] it in a timeout for 5 seconds so we'll
[5:52] have to wait at least 5 seconds for the
[5:53] swag gods to respond with their decision
[5:57] and I'm kind of cheating here I'm using
[5:59] a low dash to make sure that all the
[6:02] comments are unique so that means if you
[6:04] if you commented on the video multiple
[6:05] times you'll have the same chance of
[6:07] winning as someone who just commented
[6:08] once and it's easier to do this with
[6:13] lodash because it's quite a bit more
[6:15] work in vanilla j/s when you have it
[6:16] like deeply nested object property like
[6:19] this and then to actually get a random
[6:24] value we'll take the floor of a random
[6:28] value and then we'll multiply that by
[6:31] the length of unique values in the array
[6:33] which last time I checked was about 110
[6:36] so that's your odds will be about 110
[6:38] Plus whoever commented in the last 10
[6:40] that's that we'll take that winner it'll
[6:46] be the index in our array and it'll just
[6:51] update a bunch of stuff in the DOM and
[6:52] that's it so if anybody has any any
[6:57] issues of that logic let me know now in
[6:59] the comments but otherwise I'm about
[7:00] ready to click the button and we'll
[7:02] figure out who wins so we can actually
[7:07] this is just plain HTML and JavaScript
[7:09] so we can actually just grab the path to
[7:12] this to this file and we'll just open up
[7:17] a new browser tab here and hopefully
[7:21] everything works I kind of just threw
[7:22] this together and I think I think it
[7:23] should be good but hopefully we don't
[7:27] run into any issues all right so here we
[7:31] go three two one and the winner is garfi
[7:42] Anto it should I he I'm not gonna say
[7:45] that right but congratulations you won
[7:48] that was index 179 out of 147 so yeah
[7:53] quite a few more people commented in the
[7:55] last few minutes and cool yeah thanks
[7:59] for the nice video and you requested the
[8:02] Google Maps API and that's definitely
[8:05] something I want to do more of I know a
[8:06] lot of people want to see a Google Maps
[8:09] extension to the ionic course so I might
[8:12] might add that to the ionic course here
[8:14] in the near future um let's see but
[8:20] that's one winner let's we might as well
[8:23] go ahead and pick one more while we're
[8:24] at it I think I said it was a
[8:27] one-of-a-kind shirt but I guess it's
[8:28] gonna be a two of a kind shirt now so
[8:32] we'll wait one more decision and see
[8:34] what happens and Arturo Blanco you're
[8:40] the second winner pool so dashboard for
[8:44] analytics with plotly and yan I did a
[8:48] plotly video quite a while back but
[8:51] that's definitely something that could
[8:53] be revisited
[8:56] so cool congratulations to the winners
[8:58] if you're on our slack channel the best
[9:01] place to give me your address and shirt
[9:03] size would be on the channel but you can
[9:06] also send me a direct message through
[9:07] YouTube as well so yeah that's pretty
[9:19] much all I have for the that random
[9:21] winner is I think there's definitely
[9:23] something I want to do more of because
[9:25] there's plenty of opportunities to do
[9:27] this and it's easy enough to do you know
[9:29] on a weekly basis I think and yeah if
[9:35] you guys have any questions in the
[9:36] comments I can maybe try to answer some
[9:38] of those now but I think that's pretty
[9:40] pretty much all I had for this
[9:41] livestream so I'll give that a few
[9:50] minutes and yeah definitely want to do
[9:53] some more stuff with the YouTube or with
[9:55] with Google API is a big one that just
[9:57] came out of Developer Preview recently
[9:59] was the Google Photos API so that's got
[10:02] gives you access to like at Google's
[10:04] users users albums and photos so there's
[10:08] a lot of I think business opportunity
[10:10] there if you want to do you know some
[10:12] kind of photo management app or even
[10:14] like a physical printing app for photos
[10:16] [Music]
[10:19] cool and I'm just kind of looking
[10:21] through the comments here
[10:32] well again yeah thank you everybody I'm
[10:34] gonna go ahead and wrap the stream up
[10:35] there we can chat more on slack and yeah
[10:38] again if you have any questions just let
[10:40] me know all right thanks everybody see
[10:42] you later