Pair Programming a Facebook Messenger Bot - FunFunFunction #28

Good Monday morning. I am MPJ and uh I'm David and this is Fun Fun Function. We're here in Stockholm uh or I am here in Stockholm. David is always in Stockholm, but we have these uh hack weekends where we visit each other. I come to Stockholm and David comes to Gothberg and we spend a weekend uh just hacking away on random projects like trying to learn new things or just build stupid things often stupid things. Yeah, this is the first time uh I try to involve somebody else in the uh in fun function. We are not exactly sure how to go about this. So you have to bear with us as we figure out this format. But we do have a concept we want to try to show you with us being two. So we just took the opportunity of Matias being here and just try to show off some pair programming. Yeah. Right. Uh so pair programming is a technique. I'm not sure if it originates from there but uh I learned it when I learned to do extreme programming XP. And the basic idea is that one person is a u navigator and the person that uh gives a sense of where the production is heading and one person is the driver and that is the person that actually sits around sits around writing code. We have a vague idea of what we're going to try. Yeah, we want to tag along on the like the trends in programming today and what everyone is talking about. So, if you're watching this in the future, this will seems very old to you. We're going to build a Facebook Messenger bot. A big bot. Everything is about bots these days. Yep. So, what are we going to build with a bot? Like, what can you do with Facebook Messenger bots? No one knows. No, we don't know. We have intentionally not checked the docs to too well. Our expectations is that today we're going to have some kind of live bot for all the subscribers and followers and viewers to actually use and be able to interact with. Uh but we will see what happens. Yeah, that that's our goal. We wanted to build something that was uh sort of useless. We have this idea of replicating a stupid thing, a stupid bug in the telecommunication systems of Sweden that was widely used in 1982. When you dialed a number that was not connected, nobody had had that number yet. Everybody else that called that same number also heard everybody else on the line. So it was kind of uh basically a voice group chat that was a completely unintentional usage of the system. This uh this became a thing. This was pre- internet. So nobody had any place to meet online because online didn't exist. This was the closest thing that occurred. This was primarily uh popular among youth. This was like my uh my what my my mother called into this thing. I this was my He was even he wasn't even born. No, exactly. You weren't born either. No, this was a chat before the concept of chat was even around. Well, of course, they had chats. People were chatting with each other, but So, we're building this bot. We will call it Stockholm Hotline. So, let's get to it. Let's get to it. For I I think that we first have to find out what the API of the Messenger bots, right? What What can we do? So, we just uh developer Facebook Uh, Messenger platform la where developer docs. Where where's the code? Messenger plugins. No, this is not it. Uh, structured template message. It says Messenger codes and links. Okay, there codes and links, right? Uh, it's in beta. Get started. Okay, you need to create a Facebook app or Facebook page and set up a web hook. Okay, cool. Under product settings, find the web hook. Enter a verified blah blah blah blah blah. Oh, this looks like Oh, this looks like it, right? Okay. Subscribe the app to the page. Receive messages. This is the web hook, right? What are we looking at here? I have no idea. Uh, in your web hook, listen post calls. So this is what the Facebook is going to post back to our web hook. This is the the messages that I guess that they they send when you send a a message to the bot, right? Come on there. There there. Uh and uh it has some messaging events lang. And then then we extract an event object from there and that has an ID and we have a message and that message has text and we just get that text and then we're going to have to figure out a way to just broadcast that out to everybody who has ever interacted with this bot ever until they block the bot. Yeah, we're trying to keep this simple to just make Let's do it. We have the bot here. We call Stockholm Hotline. It's It's like a Facebook user and I'm a Facebook user and MPJ is also chatting with the bot. So if I send LOL, Stockholm Hotline will send it to MPJ. It says David says LOL. So what's the first step here? The getting started guide is about getting started. So you should just uh follow the steps. Step one, create a Facebook app and Facebook page. All right, cool. Uh oh, I have a bunch of them. Uh, choose an existing app. No. Okay. What? Stockholm hotline. Create new Facebook app ID. Okay. Contact email. Spamf function. Do we have I don't know. uh productivity. Okay. Setup SDK. I think that next uh we don't have a website and it's not even encrypted. No. Test your Facebook integration. No. Next step. Next steps here. Shack. I think we're done, right? Yeah. Uh, we need to create a page. Uh, entertainment course. Sure. Choose a category performance art. I guess this is Yeah, it was fictional character that no per I like performance art. This is kind of performance art. Yeah. And this is very typical to get stuck with this totally unimportant things. Yes, that's really true. Uh I think that we like the um the way that me and David know each other originally was because we started a company together. We built a small web agency basically. Uh and I we spent so much [ __ ] time on picking a name. Yeah. Do you remember like the name and the logo? Do you remember? Yeah. Beard tools. Oh yeah. Very very good. Yeah. The supreme the supreme coders. The 16-year-old supreme coders. Ah Jesus Christ. It was before that it was actually called Yeah. And me and Eric, we uh uh we spent a uh a ton of time uh going to the pond at the park photographing ducks because quack is uh is quack. Yeah. Well, quack in Swedish. So, it was a duck themed design. It was very dark and very green because that was cool. We thought that was cool. We were like 15. We only want young people to use this. This is our preferred audience. Yeah. I don't know what is this for. No, I I think you they said we want needed a page. So, we creating page. I don't know what to get around. Okay. Okay. So far, we've done this. All right. Awesome. We're very being very productive. Uh your Facebook blah blah blah blah blah and your page does not have to be publicly visible. Oh, that's awesome. Uh absolutely. Go to settings. Click add product. Select messenger. So, we're back to the app. Where where is the app? Here. Settings. Settings. Awesome. Uh, and add plat. Was it add product? I don't remember. There. No. No. Another get started. Select the page. Great. Some of the permissions below have not been approved for use by Facebook. Submit for review. Okay. Makes.com hotline. Oh, okay. I don't think that we need to do that though. Yeah. Oh, okay. Okay, fine. Manage your pages. This is really meta. Okay. Okay. Page access token. Okay, cool. Like, so, uh, in case you didn't catch what we did there, we clicked like hell on everything and then it worked. We don't know if it works. All right. On the product settings section, click on the message your product you just added. Find a web hook. Add your web hook URL. Add code for verification. Your code should look at. Ah, okay. We're going to do that stuff. Validation token. Uh, that's not the same thing. Okay, I will just kick her. All right, cool about you. I guess that's our server. All right, cool. So, all right. I guess that we're going to I we need to set up a server at this point, right? Yeah. So, what are we going to use? We're going to do something in Node, right? I know JavaScript best. Yeah, sure. But like, are we going to use Can you use Meteor for this? Is that suitable? I think we just make a basic a basic node app. Yeah. And then put it up on modulus. All right. Cool. So you have to just npm install modulus. Something like that. All right. Cool. Uh I think it's free. I hope. Uh wow. Showing all my projects. I guess that's fine. Uh make directory. Uh so I'm creating some kind of stock hotline install modulus. Is this just uh npm install gm modulus? I I think so. [Music] done. All right. So, what do you do? What how does modules work? We need to we I guess we need to make an make this into some kind of node appy thingy. Yeah. Uh Stockholm Hotline version one. Um uh a really stupid meaningless spot I guess. Sure. Go tests. Uh and uh get cry repository. We should we create one? I guess so. Yeah, I guess it's good. uh and we're calling it stockhold uh initialize this repository with a ignore node and we're gonna Yes. totally boring. Yeah. Yeah. Yeah. Yeah. Yeah. MPJ just give me the code. Where when can I start coding? Yeah. Web development is never it's it's not a lot of code. It's just tying things together. Uh keywords, authors, uh thank you so much. This is everybody going to spam me now. Okay. What? Notice how it is doesn't include me. No, [ __ ] you. You're just you're just some random person. Uh okay. Uh we have a package.json, I guess. Um we need a js perhaps. Yeah, let's just switch to Adam. All right. So, uh, app.js. I guess we need to find out. Are we using express for this? Is that what you use nowadays? Probably. Is right. Uh, npm install. Express. Save. [Music] Done. Okay. Getting started. I constantly forget how express works. Guide here somewhere. Oh, that's great. Bam. Uh, yes. I think we're done. All right. So, post uh web hook because this is express that they're showing here, I think. Yeah. Can we just deploy it and try to just get something to log? Oh, that's that's a good idea. like just uh app.get get uh ping and yes you spell function function I was just now navigating very good driver to type correctly type correctly that's good uh hello uh or we just call world hello cool uh so how Do we get this up? Uh uh type modulus and see what happens with O modulus things. Uh [Music] Right. There we go. Uh, and it's MPJ and it's that password. And that did not work. Sign up. This was logging, but we didn't have a user. Oh, okay. Try again. All right. Um, Uh, and MJ there. Oh, it's not. Okay. [Music] Okay. Whoa. Now create the project. Modulus project create modulus first. All right. Uh modulus project create great. Enter project name. Stock hotline. Stock mod. Uh no.js. Enter a servo size in megabytes. 192 I guess. Yeah. Sure. Uh blah. Okay. So now I think we could just modulus. I I don't know if it's modulus push to just push your stuffs. Uh it's just modulus push. Okay. Um deploy modes deploy. Uh modulus deploy. Yes. Will this really work? Does it even know how to start it? I because you selected it has the package JSON. It knows it's a node project. Yeah, sure. But I don't think we we don't I don't think we have like the start thing in the node. Uh I think it will work anyways. How? Wow. That's because modules are built for node. Yeah, sure. But we'll see. Yeah, I I don't think this will work. Exciting. It's done. It's run. How can it be running? I I think this is a lie. It's built for node. Yeah, but we we haven't specified. Yeah, exactly. Okay. Sorry. No, but we because So now we can check the logs there. Yeah. Oh, uh modulus uh it doesn't even listen. Okay. Is that what you're saying that? Yeah, it doesn't it doesn't do anything. It doesn't do anything. Yes. Uh okay. So it's blah blah blah main file specify found looking for index.js. It was looking for no running command node app.js. Oh, it actually Yeah, but it doesn't even do anything. So, just listen from some port. All right. All right. All right. Reason. How do applist perhaps? I have no idea. Listen port. Uh if it's like on Heroku and other services, you tend to like have a environment variable that you need to pass in here. H you can set that up in the web interface. I know uh if we want to send a variable, but I'm pretty sure they have some kind of getting started uh docs advanced. They have some um getting started. Getting started with Node.js video app list and process unimportant. Process important. All right. Awesome. Is there anything else we need to think about? No. No. This I don't think so. No, I think we're done. main.appj. So, this is fun. Like we actually have the wrong here and they still figure out. Uh that's fun. Okay, let's keep it that way because it's fun. Yeah, thank you Modulus. Yeah, thank you Modulus. Uh not sponsored. Redeploy and redeploy. All right. Uh Modulus deploy. Enter. Boom. This is frustratingly slow. [Music] It's done. Now we have to try it. See if All right. All right. Uh just go to that slashhello. Yes. Yes. Yes. Uh flap flap slash hello. Oh yeah. Hello internal server. Okay. So how it's not not too bad. No. And then just look modulus logs I guess. Why does it always ask that? Uh rest is not defined. Okay. Rest is not defined. No, because rest is not defined. Yes. Yes. Okay. Uh deploy. Okay. Let it deploy now. And after it's uploaded, we can start modifying the code again. Yeah. Let's assume this works while deploying, right? So, what should we do more? Uh, we should probably go back and see. This is the worst. Okay. Um, let's see what documentation. Uh, add that and add the validation token to it. So, this is so you see it's validation token that we have. Okay, cool. So, we add that and we we have a validation token, right? Somewhere. Yeah. Somewhere in one of those tabs. This is there. No, no, that's uh Where's the validation token? Uh set up web hooks, I think. All right. Uh verify token. Was that the one? Validation verif Oh, yeah. Uh P verify token. What is verified token? I don't know. Validation token is something different. No. Okay. What my What is this? Um enter a verify token and select message deliveries. Oh, so we should create our own token. This is just some Okay, this is just some shared secret that we will now be sharing with everybody watching. And you should have the SL web hook call back. Yeah. Web hook. Okay. And we're calling this super secret. Uh and this we want everything. Yeah, probably very fancy. What? This is secure call back. HTTPS. Is this a I guess that they have Yeah, let's just go for it. What is it? Still an error. Why? Why is it the error couldn't be validated? Callback verification failed with it 404. Okay. Google HTTPS modus. We can just try it. Uh, so will this even work? Yeah, it work. It's working now. What? Uh, but does it work with HTTPS? Probably not. Yes, it does. It does. I think it's a web hook hook that is broken. Okay. So, check the logs. Uh, oh yeah. Yeah, because probably try to post post. Yeah, right. I think you could default that. All right. Uh, all logs. Rest. Rest is not defined. No, but it it No, maybe we don't we don't output anything. So, we're just running it doesn't output anything. So, we need to maybe get web hook. Oh, oh, we need to add the validation token as well. Probably the one we just created. Super secret. Maybe. Right. Okay. This is back on. I'm going to reboot this and we're having a lot of trouble with the keyboard. So, David is away trying to find some batteries, new batteries for it and see if that helps. All right. So, we're back. Uh, batteries. Can you We had to buy some. Uh, we were out. Like, uh, this is this whole recording. We also bought some sodas. Uh, this whole recording is insanely improvised. I had to just show you how this looks. Okay, so I forgot this camera. I forgot the charger for this camera. So, we wouldn't be able to use it for the duration of this um this shoot. So, uh we have mounted my iPhone like this because it is a pretty good camera, Dunk. Uh and we bought these lamps and we also soundproofed the room with a big mattress over there and a drape over there. It's all It's We're all pretty We're pretty satisfied actually. Does it matter which direction I should have this? Can Can you have this in any direction? No. Is this wrong or right? I think it's right. It's alive. It's alive. What? Okay. So, where were we? We uh No idea. No idea. Okay. We uh Why don't we we Why don't we switch me? Let me be navigator. We um uh we were creating a bot. We were our goal is uh currently to get the web hook working. All right. The we got a 404 on the Facebook web hook. It was not uh it said it wasn't uh receiving us. I think that should try that again. Just I think that Yeah, but I think that if that because it's it's it's attempting to access the hook, right? Yeah. So, uh I think I need to move left. Uh yeah. Yeah, we should update the secret, right? No, I think that that was not a problem because right it says 404 not found. And if we look at the code, if you look at the code, uh before I changed it now before we like with the batteries and stuff, but before it says it had a slash just after the web hook, uh which means that it wouldn't like it wouldn't be right. It's trying to access web hook without the slash. So I think that if we just update it now, I think that we it will be another error. But we could also do this as well. Super secret. Super secret. I think it's dash secret. My god. Are you sure? No. It was dash. It was dash. Okay. Okay. I have the best memory. That's a lie. Save. Yes. Boom. All right. Boom. Okay, we're ready. I'm ready to click. Okay, modulus, please make this faster. [Music] Like really this should I we're probably doing something wrong. Perhaps it's the index.js. No, I think they're doing something wrong. I think that web development is doing something wrong. Oh yeah. Is it still uploading the completed build? It uploading from from where? Yeah. From us to them. Maybe it should be noted that yeah we are we are one on 100 megabit fiber here. Oh, wired. Okay, let's do this again. Boom. Verifying save. Yes. All right. Cool. All right. Uh where uh so so what's next? The getting started, right? Yeah. Getting started guide. Back to that. Uh at your web hook, add a code for verification. The code should I guess that we did that. Yeah, we did the verify and save. So now So we did this. We're done. Now we're on three. Yeah. Okay. So we we need to get the page access here somewhere. Yeah. Okay. I think that this is just on the one of the tabs has that access token. We have generated that one. So we should go back to the the the this. Yeah. Uh yeah just select that page. What the page where do you see the there there there token hotline and that should gen that's a that's a token that we need. Is it Oh. Yeah. So and where should I put this? Yeah. I'm not sure like go back to the getting started page. Getting started. Get page access token. Okay. Subscribe the app to the page using the page access. Oh, okay. Uh you need to start create a new document and paste the uh access token in there. There. Yes. Okay. And then go back to that page where we just were and pay copy that and paste that in. And we need I think that at the end there's a space for the token. Got it. And then we replace the Yeah. token with the exactly. And then you just execute this curl command. And uh this will subscribe. Boom. What happened? Did we got success? True. Sounds good. Yes. Okay. Okay. Let's go for it. Fine. Receive messages in your listen for post. Okay. Should we just do this? Yeah, I guess do it out of. Okay. Go back to the app.js. Appjs. Yeah, because that one is uh the one above on uh line 8. That's that's the verify. Exactly. That's just a get. So, we can just paste this in. Uh this should do the things we want to do. That's a great comment. Good for everyone. when we come back in a couple of months time. Yeah, we will understand handle a text message from this sender. So, should we do something with this like output it or let's console log it for now? console.log text. I will add a semicolon here even though you hate them. I don't hate them. Uh one here. Okay. Save. Should we redeploy this or I think yes, redeploy it and then we can keep on reading that. Uh boom. So, how do we go to your Facebook page and send a message to it? Oh, okay. Let's do that then. We should be able to Are you signed in somewhere? No, it's the Facebook page is somewhere. What's uh Did we call it anything? We called it like Stockholm Hotline. Yeah. Can we go to that? Yeah. Performance Art. Awesome. 10,000 people talking about this already. Nice. I wonder what Socom hotline is. I think that's a thing. [ __ ] Close. Close. Okay. Okay. So, here like the So, hello. This doesn't Can it be probably entry of undefined? What is that? What is undefined? It it uh it says cannot read JS19. Okay, let's go there. Let's do it. Entry of undefined. So, it says that okay, so body is undefined. Oh, right. Because this is probably sending JSON. Yeah. Uh and we uh are not parsing this as JSON. They probably uh if Okay. So, we should just convert it to JSON. Yeah. But we don't there's a plug-in for app uh for for express for this. Just Google express JSON. Express JSON. Uh uh let's do there. No, this was number four there. No four. No four. No four. No four there. This one. No, that underdone that body parts there. Body parts. This is the one. This is the one I want. This is the one I do this. Uh MPM means there. There. So just do it like this. Yeah. But uh do it with a d-save. So it's added to the package.json file. If you don't know this, you should if you add d-save to your mpm install, it's automatically added to your package.json. I didn't know that. I have always opened the package. JSON stuff. Super handy. Super handy. And then we need to do that thing. Just add that. Yeah. And I think and then I think that you in there there is an install thing somewhere somewhere. Where's the getting started? Here we go. Here we go. App dot use there. There. This one. That's Yes, that is what we want. So, so what happens when we do this? What do you mean? App dot I think that if if a client sends JSON, it will automatically parse that as JSON. So, so this should be separate from our whatever whatever we do. Okay. So, just adding this this is middleware like that. Yes. Save. So, what this does is that it installs the body parser JSON middleware into uh express so that it gets first the dibs on the request and is allowed. So, when it sees something that looks like JSON, it will just parse it. Exactly. and then like feed that at at line 22 here. It will feed that as a parse like a finished object. So you think that we could just like redeploy this and this should work? Yes. Is there a way for us to not have to deploy it to test it? So we could just test it locally instead. I think we just could. But we need to fix the package.json thing because right now it's pointing to index.js which modulus is magically fixing. Yeah, it's just and and just try uh m npm start. Can we do that missing script start? Okay, just add a script start then uh in the scripts thing. Ah uh start start and just go node app.js. Cool. Right. You need to open a new tab in the terminal. I think I split the pane. Yeah. Close split pane. Close. How do I open a new tab? Yeah. Command T. Command T. All right. Uh and just curl to it. Uh how do you do uh no because it's listening on that environment. Uh but go to app.js. App.js. Here we go. Yeah. And which line? Um, if you look at line 36, it's going to do this process and port thing. And if we don't have it, we add something else. Yeah, I think that's easier. We could Yeah, we could pass it in as an environment variable, too. But that this is easier. So, save. Yeah. And then we run it again like that. And then we should be able to curl it like that and 30,000 or just Yeah, I think that's Can we do that? I never learned code. Cannot get that. Yeah, which makes sense. uh do the test. Yeah, but it's not test. It's something else. Hello. Hello. Hello. Yeah, cool. It works. Okay. So, and now I want to try to post some kind of JSON stuff. How do I post? Yeah, just Google curl JSON. Curl JSON. How to post data. I use this command. Oh my god. Uh, okay. There. That's nice. And we do this to our web hook. Boom. We get some undefined. Yeah. Because we're not posting the payload it expects. Oh, you think? I think so. Yeah. But you think it Yeah, because this is not the same error. So this is so you mean that this is good because it's another error than from the I would say so yes what what is there it says can read property zero of undefined on appjs appjs 22 I think that's where we're reading the stuffs isn't this this the same no look uh it's uh body is an object now body is not so something so this is this is good it's trying to read the the first index but okay just for fun. Just define entry as an array like in your curly thing. In my fake card, uh define it wants an entry property. Uh and that expects it to be an array and the first should be have a message object with a property messaging which should have some LOL's content. Yeah, exactly. And now Yeah. Should we try this? Yes. Now we should get the error that No, we shouldn't error on like 43. I think 25. That's good. So now we get the error here. So it's working. Yeah. Deployed. The JSON stuffs is working. Deploy. Boom. [Music] So, let's continue with the with the tutorial. That one. We don't need that one. We right now don't need that one. We don't need that one. We don't need that one. Uh, send a text message. Oh, so so when it's deployed, we should be able to send a text message and then and see it in logs. So perfect message provisioning and deploying bundles to servos. Hello, this is Stockholm. Calling the hotlines. Okay, I know this is misspelled. Don't bother. Okay, so now we should check the logs to see if there's something coming here. It should now. Yes. Root. Bam. Okay. Uh, so okay. Now we need Did you see that? It got the hello as well, the previous text. Yeah. So, did it resend that? No, I guess it worked. Yeah. But when we sent the hello. Yeah. The app wasn't Oh, okay. So, probably somehow it's resending it. Yeah. Awesome. That's cool. Okay. So, you got a friend request here. Uh, it's it's probably some person. Uh, I try to friend him. Yeah. I don't I don't I don't use Okay, next step. Um, text message. Boom, boom, boom. Let's modify a web hook to echo messages back. All right. Low is a function that will send back a text message with whatever. This this is excellent. This is good. Isn't this exactly what we want to do? Yeah. But to everyone. Okay. Uh, so that's the difference. Yeah. So, but this is a good good step on the way. So, ah, I guess token is that the one we used? No. page access token is the curl the token from the curl it might be if you you look at uh yes it's the it's the token from the kernel so just paste this in replace the comment above with which is the comment above I don't know what is oh ah I think that yes I think that we we can figure it out should we just add the codes here somewhere yes that's fine The access token we had that here here. Yes. So I will copy the act the page whatever token. Yes token past in there like that. Ah I think it's here. We want they want us to add the code. Yeah. Rep place the comment with Yeah. Oh we can we can console log. Why not? Yeah that's fine. So what is the send text message? We just created this function send text messages with a sender and some text. What is sender? Sender is what is it getting that from? Sender. Okay. Sender ID. All right. So this is basically an unique ID for the the person sending the message. So later on for us we would have to store all the senders ids somewhere to be able to yes to dispatch all the messages to all the ids. Yeah, I'm thinking if so we we have to have a database. Maybe may maybe we keep it in memory. We could keep it in memory if the like that's that's dirty but it works. We can we can do that first at least. Uh I don't think that we will have time for more. So okay, we save it. We try to deploy it again and then we keep on following the instructions here. Yeah, I think I think that this should I think we're really close to done actually. I dear Stockholm hotline, I sincerely hope you will echo this uh letter back to me. Father is well. The farm is doing uh okay. Harvest wasn't very good this uh when do you harvest? Fall. Fall what? Slash summer. You don't This This year year year this year. Uh the uploading of the build is soon completed. You know the build. Yeah. Jesus, we can write a letter. I tell everyone we are healthy and well. Modulus, you you should not be able to write letters this long while you're doing deployment. Uploading uploading bill what? How could that? I just realized that this so so I often watch MPJ's videos on the on my mobile phone which is like a 4 in phone. Oh, this will be super tiny. This will be very tiny and so uh please I I I will excuse to make an excuse to myself that I made this so tiny. Okay, so this one is Yeah. Damn it. I was expecting error something. [ __ ] Okay. Logs, logs, logs, logs, logs, logs, loss. What happened? Request is not defined. Yeah, probably. What do you mean? No, it's probably uh we just haven't defined it. We haven't defined it in the u in the header. So, what? Oh, uh request. Oh, yeah. Yeah. Because it's using some some library. Okay. So, what is request? it it's they are using some kind of request library. I think it's just uh just check in their example. They're probably they probably say what library that is uh perhaps in the beginning something we skipped just do okay I think that this is just the npm package that is called request. So just go npm install uh save request dash save like that. Yes, I think that will be and then we should require it. Yes, in the codes. Require it in the codes. Uh request. Yes. Require request. That cool. Should we just try to run it locally or just just [Music] go [ __ ] Damn it. Yes. What is What is What is happening now? Everything seems fine here. Running command npm start start. Yeah, it seems fine. Should we specified? But it's not even logging it out. You're right. So, did this re when we added the request stuff, did it do something in our code that somehow took over? Maybe. So, it's could it be that it never Oh, perhaps we should. It's not doing that. Like we should It should print the text before this fails or whatever it does. Yes, it should. Yeah, let's check the logs again. Perhaps it's okay. It's now something happened. Yeah, it's printing them. Did it perhaps. Was he just late? Yes. Boom. Okay. High five. I All right, that's awesome. Um, we need to Okay, we need to send this out to all whenever a sender connects. Whenever a sender sends a message, we need to add that to uh you do that while I connect my Facebooks. Yes, my Facebook. Uh, I think that I might need to add you to this page. No, I will I will add myself to the Yeah, but can you can you find it? Oh, whatever. Like you mean that it's not public? Yeah, exactly. It's not public. Oh, I might have to invite you somehow. Invite friends. Performance art. There. Did you find it? Okay, cool. Oh, great. It was me from the other side. Okay. Awesome. This works. So because so this this u so because he's we are the Facebook page. So we get a notification that someone is sending something to us. That's why we we get this one. But now we want to have the thing that I sent from my laptop over here to get echoed back here to all subscribers to the Stockholm Hotline chat. All right. Cool. We want to store. Okay, let me show here these ids. We want to store them somewhere. So, we then can send it out to all the ids that are now uh on the chat. All right. So, this is the web hook where we're getting uh we need to save at this point, right? For every Oh, you can get several messages here. Yeah, because it burst the two messages. Yeah. So, okay. So for every time we need to like bar all senders. Yeah, we can just create that as an object. Yeah, like a hash table. Yeah. And then sender and I'm going to assign uh oh oh sorry all all senders. Yeah. Uh and true maybe. So it's it's a hash table with people that are senders. Okay. And then we just loop them and then Yeah. should we clear them some at some time or should we just make it would be a lot of senders there because it would be huge. Yeah. Exactly. Yeah. But that's that's the nature of the app. Yeah. But so what I'm saying how would we how would we evict them like Yeah. I don't know because what I'm saying is that will we end up with having 1 million senders? Yes, we would. Yeah. Well, until the app restarts. It's just in memory for now. Yeah. But when will we know that they are false? So we don't start to send to Well, we could we could just, you know, add a date date time here. Ah, okay. Okay. Let's do it. That that's Can we do that later? Okay, we do it later. Yeah, we will we will never do that. No. Uh, all senders and then we need to like do this for every sender, right? So all like how do you do this? object keys, right? What do you want to do? I'm I'm going through the the properties of all the senders. Yeah. So, uh and so now this will be an array of all the ids and then just each for each email. Nice. Uh and then right you could call that sender ID. That's more clear because it's just Yeah. I never I'm going to call this sender ID as well. you know that we're using it later on, right? Yeah, we're going to like because but this will hide this one. Okay. Yeah, sure. So, we're going to All right. Yeah, it's now it wrote sender ID. Send ID. I'm going to call it sender ID everywhere. Okay, great. Uh and going to move this segment in. Uhhuh. No. I think you just wrap it around the the send text message because it's like one one message is coming and then we want to just loop through all the sender IDs and send it to all of them and not just the one that sent the message. So this is from you know what we want to look to everyone but the one that sent the message. Oh that's a good point. That's a good point. Uh, so make just an if. Uh, yes. No, do like this. Loop it through all the senders. Yeah. And then we add this sender to the ID. Clever boy. All right. So, we do that. Uh, but then again, no, because that will work. That would only work the first time. Yeah. Okay. Uh, so just send it to everyone. Yeah, that's true. That's good. We just confirmed that that will be working. Good. I don't call it sender anywhere. Where is it? Send ID. Center ID. Center ID. Hang on. This thing. Where is this? This is going to be I'm going to do that. I think this is good, right? Yeah. What can go wrong? What can go wrong? Let's deploy it. No, not logs. Damn it. Deploy. So, let's check this. Enter. Boom. Boom. Okay, let's let's check while we're uploading again. We will check the code. All right, so Oh, hey. Uh, so we are re getting the event here that's not changed. We are assigning the sender ID to a bar. That bar is that send we're making sure that the sender ID is in the uh in this hash table here. Uh, and it's just called true to yes to have any value. And then if the event has a message text, why wouldn't it? Okay, maybe there's something. It can the message can probably have a lot of other properties or like some like an image or something. I'm so annoyed that they are assigning this to uh and uh then we just console log the text and then send it to all center. This should work now, I think. Yeah. And we're running. So, so, so I would write on my computer. Yeah. And I'm going to check here. So, let me just write something. Something did not work. Nothing happened. So, check the Yeah, it it it received it but didn't send it to everyone. No, because this has not been added yet. Yeah, but No, because this was before talking about received something. Yeah. Yeah, but that makes sense. for this client. Yeah, but I didn't get it back on my computer either. No, but that makes sense. Why? Because you're added to you're added to the sender array or sender the sender all senders object. You're only added here uh when you send a message and this code did not did not exist when the other people sent their messages. Yes. But when I sent Yeah. the message should have been come here. Send is me. I'm added. Yeah. Oh yeah. So for some reason this doesn't work. So I think it's this code that might fail. Are we sure on this? Like I don't something is failing. It should work. Why isn't that working? Okay. Just Okay. We don't care about the text. Yeah, we care about the text. Yeah, we do. And then we console log this also. Yeah, fair enough. just to see what's going on. Or could it be that it was just slow? So if we send again, something will work something again. Maybe something again. Stockline received the message from me. Yeah, but nothing's happening. It's not happening anything. Somebody watching this is now like they are so stupid for not seeing this. Okay, now it's online. Yeah. All right. We just send something. We send something there instead. All right. You send it here and we go like hello hats. You don't have to spell it. No. Okay. Check the Okay. Whoa. Oh, it worked. Did it work there, too? No. Yes. No. Because that's not yet in the center. No. Hello hats. Isn't again that's not why is that not hello from David. Can't be something that is not a public app. It does receive the messages. Yeah, exactly. And it this and you sign in as Stockholm Hotline itself. Yeah. Could it be somehow that it's not public for because this is echoing it back. Yeah. Okay. just output the logs because you have the you have the flag there. So you are the page. You're talking to yourself. Exactly. So perhaps it's some kind of uh Okay. So it's right my messages aren't there. So So let's see. Hello from David. I'm writing here hello from David. Yeah I'm checking so that there and we see a logs and it's not there. There it's not there. So for some reason my ID is not there. It's not there. Perhaps it's because I think it's it's somehow it's not published. Yeah, it's not treating it's not public. Perhaps we need to make you an admin or something. That was tricky. Uh invite friends. I did that. Oh, you did that. I Okay, go back. Go back. So in this case, you will be able to message only app admins. You can also generate you will own. So we need to make an admin. Where is admin? Ah here. Add administrations. Okay. There. So you mean that now I Yeah, you need to accept the invitation on your computer. Confirm. I confirm it. I'm an admin. So now reload here. You should see that. So I'm an admin. Okay. I will type here. Hello from David. Yes. Boom. Awesome. So, our code is working. Now, we expect to see here in the logs two IDs. Two ids. Boom. Yes. It's MPJ and then hello from David is from me. So, here my ID was added. Yeah. Sweet. So, we're done now. Um, this is not public yet because I think that Facebook needs to review it. I guess uh we will try to fix this up and uh and make it like so that Facebook approves it. Uh I'm making no promises because this is a really stupid app and they might not approve it, but uh we'll try. All right. Uh that's it. Uh we we accomplished our mission. Um you have watched an episode of Fun Fun Function. Uh, I release new uh episodes of this show every Monday morning. So, make sure that you don't miss the next one. If you like this one, subscribe down below. If you don't want to wait that long, you can check out uh one of the older episodes here or here. I am MPJ David. Until next Monday morning, stay curious. Okay, [ __ ] Stop. out. If he's