Mobile Development with Native PHP

What's up, beautiful PHP family? How everyone is doing today? Voice is not coming, but it's now back. Hopefully, now it's back. And we are back. Noo-Noo is not sick anymore. Finally, for God's sake, I'm not sick anymore. And just so excited to be back in today. Today, boys, we have an exciting live stream. Before we jump into that, before we jump into that, Ferentto, what's up? Grokes Neil Nisas, what's up? Nice to see you. Sun Ali, how you doing? Nice to see you today. Miguel, how you doing? Nice to see you. Floom, what's up, dude? Skimmer codes DL FM Pog, how you doing? You guys are absolutely awesome. You know, you know, I'm back. I'm not sick anymore. [ __ ] took a [ __ ] week to be just good, you know. Feels good, man. Feels good. [snorts] We are back, chat. We are back. Greetings from Colombia. Nice to see you, man. T, nice to see you as well. What's up, Tik Tockers? We are back, family. Okay, we are finally back. And hopefully now with [snorts] a consistent schedule. My drink is here. We good. And today we are going to talk about native PHP chat. And to talk about native PHP, I have the mighty guest Shane himself. What's up, Shane? Nice to see you, dude. How you doing? What is up? Hey, what's up? I'm great. How are you? How are you doing? What's up? [laughter] I'm fantastic, man. Let me know by the way, chat, if you can hear Shen's voice. Should be good, you know, but uh but let me know. Let me know. Let me know. W Shane, I agree, man. A little bit too low. Yeah, I'm going to put Shane a little bit more high. Wait a second. Should be a little bit louder now. I could get a little closer to the mic, too. This is better. This is about my regular talking voice, I think. No, it's a little bit better. Yeah. Yeah. Yeah. That was on me because we did the sound check with AirPods, not that microphone. Ah, that's it. That's why. There we go. Doubly Shane, here we go. Here we go. All right, Chad. Today, we are going to dive into native PHP, which is finally open source, man. So, I want to start with that, Shane. Before we just you know start cracking mobile apps here on my local DAP stuff I want to ask like how has been doing open source for native PHP so far? Yeah I think uh that's a great question. I don't know numbers wise but the feeling is super hype. Okay like we've we went open source free. We announced this um earlier this month in Laracon India and it has been wild. It's been awesome. Uh yeah so many more people coming into our discord. so many people uh contributing now that it's open source they can contribute make PRs into core and I think that's probably one of the biggest things that just kind of melts my heart a little bit because it's been just me and Simon you know plucking away at this stuff for so long and now it's like uh you know so the rest of the community can see what we've done and they can start making it better and better and better so it's been it's been awesome and you know how much I've been asking for native PHP to be open source man and I think this will open so many doors by the way for those who just arrived my name Nuno this is Shane and Shane is the creator of something called it native PHP. What it means what it means is the following is that you can use PHP and Laravel the best stack in the entire planet to make mobile applications. Okay. Literally and desktop. That's right. But you can use your phone just to literally be on Laravel. How cool is that? How cool is that? And today we are going to jump into all of that together with Shane here and you are going to help me out. That's right. Yeah. Yep. Happy to. Happy to. Okay. By the way, shed, I want to I want you guys to write on the chat how many of you have tried native PHP. Type yes if you have done native PHP development. Type no if you haven't already. And meanwhile, let's say thanks to our beautiful sponsors for making this stream a possibility. Redberry International, one of the best digital agencies out there for Laravel and View development. Of course, Titan as well. the build and rescue web apps that are also that also the authors of this beautiful book Laravel up and running. One of my favorite books ever. I don't read much, but this book was actually [ __ ] good. Okay, chat. Also, also we have Mail Trap. Mail trap. I know it's crazy. They used to be development only solutions, but now they have production solutions too. So, you can use the things you are using locally, but in production with Mail Trap. They're absolutely awesome. Check them out. Jet Brains, of course. We love Jet Brains. We love PHP Storm and they are the producers of the best editor in the entire planet. Check them out. Of course, Code Ra Code Rabbit if you want to have nice AI reviewing your code through pull requests and Davin AI if you want to offload some tasks to AI to get done. Okay, you can offload them through Slack through linear really just works. Check them out. And of course, chat, don't forget we have a new YouTube video outl I've done this video. It's working fantastically and if you guys could give me a help on this one will be really awesome. You just have to go to this video and click on this beautiful like button. Okay. I'm going to share the link with you so you guys can go there and do that. All right. All right. You just have to click on this beautiful like button. That being said, chat, we are going to do some native PHP development together with Shane. Okay. Okay. So, Shane, tell me something. This is literally something that a lot of people confuse a little bit and I want to I want to get this clear. Is native PHP a Laravel only thing? Like do you need to be on Laravel from the get-go or it's something that you start from native PHP? Where do you start exactly? Uh yeah. Well, that's kind of a weird question. So I'm weird. How do you answer [laughter] that? No, I like it. Uh no, you start with the Laravel application, but um it's a I I guess yes, Laravel. you have to start with Laravel because you install it's a composer requirement right of native PHP mobile into a Laravel app but we don't recommend trying to use an existing Laravel application and just thinking it's going to work as mobile okay so it's really we don't say like turn your app into a mobile app we say build mobile apps with Laravel right right that's a good constraint to have though like being coupled to Laravel I think it's a nice couple you know it's a nice couple to to have. Okay. So I need to be on Laval Shane. So what I have done here is prepared um I just basically just type laval new and I I called this mobile app example and I select react. There is a problem on choosing react or I can choose whatever I want to. Can I choose react live wire anything? Yeah you can use react but you will get less like brownie points for me. I just don't like react. So [laughter] you don't like react? What do you mean? What would you choose for for mobile stuff? No, you can you can absolutely use. We're totally compatible with it. It just personally I'm not a React fan. I like Vue better than React. Oh, I see. Or Live Wire. How about you, Shad? What do you guys prefer? Do you go with React? We go with Vue or Live Wire by default. I'm I'm I am a React guy recently. Even though if I couldn't choose React, I probably would go with LiveWire. You know what I mean? You know what I mean? I literally forgot to open my YouTube chat here. So, I'm going to do that right now real quick while you guys answer. A lot of LiveWire people, of course, people love LiveWire on my stream. I think it's kind of understandable that people do that. By the way, chat, we have a 100 people on YouTube. Go all the way down and click like on this video. Don't forget that. All right. Super super important. Look how many people Look how many people like Vue. Everybody likes Vue. [laughter] Oh my god. I I would I would use Vue now, but I just barely remember anything about Vue. I don't even know if it's different now. You know, I used to be like Oh, yeah. jQuery is better than React, dude. There is a there is a huge there is a huge team jQuery on my chat, by the way. A huge team jQuery, but but most people here are like LiveWire and Vue as well. Uh I'm only the only React guy at the minute, I think. So, anyways, let's go with React chat. All right, so Shane, I'm on React right now. So, this is basically a fresh Laravel app. Uh can I even see it? I don't even I don't need to see it, do I? Yeah, [ __ ] it. Let's not see it. But this is a fresh Laravel uh app on React. I think the only things I've selected is past PHP if I'm not mistaken. Here we go. Of course. And that's it. So this is inertia kind of regular trivial stuff. If I want to start with native PHP, uh which documentation starting point would you recommend to me? Uh installation. I I think that that's probably the best place to go. I mean it depends if you have your environment set up. Uh I'm guessing you're doing iPhone, correct? [clears throat] Yeah. So I do remember having installed already like the pre- requirements for you know iOS development on my machine because on I have done kind of a previous stream about native PHP the one that he told me that it didn't win so well I think it went fantastically but he told me it didn't win so well so I kind of have all those requirements already a little bit okay by the way Shane will be on camera on the post production postp production video okay so on the we are you know recording everything and my brother will edit this to be like a fantastic video on YouTube. Okay. So Shane will be on that YouTube video all the time. I think for the sake of kind of having space for everything. Um Shane won't be on camera. He's on voice though. People can hear Shane. Okay. So you were saying that there is some pre- requirements where if I wanted to see those pre- requirements it will be on this environment setup maybe. Yes. Yeah. Actually, it's in um somewhere in there. Environment setup. Yeah. Yeah. It this is the one. Okay. So, this is literally a set of commands I assume people need to run if they want to set up um Mac OS for native PHP development. Of course, have Xcode and have Koka codes, which probably means something that I should know. And I assume kind of some stuff like that, right? So, we can jump straight to installation chat. Let's do that. Okay. All right. So first thing I'm going to do type composer require native PHP mobile. Let's do that. I'm going to go here. Bam bam bam boom. Clear this stuff and type this. All right. That's a very simple installation. We do see a few dependencies. Aane I always like to ask like why there is such a set of dependencies. So maybe let's start with I see React PHP which for those who don't know is event loop event looping with PHP. Can you explain me briefly why do you need React PHP for native PHP? I would say I would say a lot of these are actually because we we just rolled out um the Jump app as well. So if you go to the app store uh probably if you just go to um buy Frost.nep.com/jump uh there's links for the iOS the App Store and the Google Play Store or at least it's on TestFlight for now because Apple is a stickler about some of the apps that they allow onto the Play Store app store. Um, but a lot of that is because we are running a local server uh for the jump app. So the jump app is a way to like if you don't want to set up your environment, you can get away with some things. You can't do everything uh with the jump app. And so the jump app installs on your phone. You run a command locally once you install composer require native PHP. And then you run composer uh PHP artisan native jump. And then it's going to ask you iOS or Android. That depends on what phone you're actually wanting to use this on. It's going to give you a QR code in your browser. You can scan that with the app and then you can just see the uh the application on your on your device. So, we're using I would say most of those if not all of those dependencies are to make that work. Interesting. Gotcha. Gotcha. Gotcha. Gotcha. So, that's React PHP and why that's required. Do I see anything here out of the box? I don't think I do. I see Spy, of course. Spy of course needs to be here. Of course. Of course. And well at the end we see of course native PHP mobile which is the set the package we are set up ourselves to to install. So sh just a quick recap I just type laval new. I choose my favorite front end stack and then I typed composer require native PHP mobile. It really really just works. I'm going to go all the way down to see if I have to type anything else. Okay. Um the next command seems to be PHP art. It's a native install. Am I right Shane? Uh yep. That's the one. Let's do it. So here's the question. Install native HP for mobile. What should be your app bundle ID? Do I care about this or I just type enter? For local development, this is fine. Um, so when you are ready to release to the Play Store, that's when you're going to have to decide like this reverse DNS com.nunaduro, you know, whatever the app name is. But for local development, this is fine. No problem. I have a question. Why this is like comaduro whatever instead of being whatever. nunumodor.com. Uh that you'd have to ask the the [laughter] play stores. I really don't know. Um that's just kind of like the standard in the industry. I don't know if there's a real reason. I bet there is a real reason. Someone in chat probably could could uh ask uh Open AI or something uh what the reason was. It's like driving in UK, you know? It's just they they drive the opposite way. India. Or India. Exactly. Yeah. It's a Java thing apparently. People are saying on the chat. Yeah. That makes sense. I know it's they've been doing it for a very very long time. So that would make that would by the way shad telling that Java does something it's not a good reason for something to be wrong. Okay. [laughter] Okay. But uh you know all right let's type enter here. Can I type enter? I think I guess. Yeah. Let's type enter. All right. Setive native PHP to that blah blah blah blah blah blah blah. Which platforms do you want to install? I want to install iOS. Is that okay? That's fine. Bam. Enter. No development team found. Woo. What we see here? This this is a nice logo here, man. This is This is nice. Okay. Thanks. All right. So, did a great job for us. [laughter] That's the part you don't are supposed to tell. Well, I think at this point people just accept it, right? Everyone is using fault code anyway. So, [ __ ] it. So, I see byrost. I see plugins. Can you briefly explain what is byrost and what is plugins? All right. Go ahead, dude. All right. So, we get this question a lot. Uh, what is Bifrost? Do I have to have Bifrost? You know, all all of that stuff. Byrost is number one, it's the name of our company. So, Simon Hemp and I started a company called Bifrost Technology. Um, and I can go into like why the name and all that stuff, but it's basically a bridge from the heavens to earth kind of thing. And, and that's what this is all about. Holy [ __ ] By frost, I wish I had a name like I wish I had a name like that for uh my packages like pint. It's a breach from the sky that comes to the to the heaven in whatever, but I don't. [laughter] It's really funny. We we sometimes we come up with names that we really like before we have a product to match it. And uh Bifrost wasn't one of them, but there's plenty of other ones that um that we've come up with. We were we had the name and we're like, where does this character fit into our ethos, you know? Um but uh byrost the uh the product is our SAS. Okay. So if you are on a Windows machine and you want to deploy to Apple Play Store, good luck. You just can't do it from a Windows machine. Uh but also if you're on a team and you want to see what other people on your team are deploying, it's a complete build life cycle CI/CD pipeline kind of management tool for your native PHP mobile and very soon desktop apps. We get asked a lot of questions about desktop as well. Um there it's behind a feature flag at the moment. We're still testing um but we should have that out within a month or so. uh for the desktop builds as well. So we can do all of our builds as long as you've got your uh your repo in GitHub. You connect it to Bifrost and you just uh add your credentials for the app stores and you can deploy. You just click build, ship it. Actually the name of the button is ship it and uh you ship it right to the source. Yeah. So byrost is for native PHP what Laravel Forge is for Laravel. Am I right? It's exactly our analogy that we use. Yep. Nice, nice, nice. So chat if you want if you are developing native PHP apps which by the way it's now free fully open source everyone can do it and if you don't want to if you don't want to compile from my understanding yourself everything you can just use by frost and that way supporting the creators of native PHP in the same way that you probably would use forge to shipping your Laval apps so you can support the Laravel team the team behind the framework that was loud and clear how about plugins what is plugins and you know why why should I use plugins to begin plugins are um so they are composer packages um that you can install to give your app native functionality in in version one and version two of native PHP we had all of those dependencies were bundled inside of the app and we found for two reasons that we can't do that anymore it's bloating the software whether or not you're using video or camera or microphone the software is there right number two uh is that we had some users that were um sending their apps to the app store and they were getting rejected because if you're using something like camera, right? You have to tell Apple this is the permission string. It's called a permission string. This is the reason why I have camera code in my in my code. And so you've you've been there before when you go to like start the camera on a new app that you just installed, it pops up and it says this this app wants to use your camera because and then it gives a description, right? Well, people were getting uh rejected from the app store because they weren't saying the description for the permissions. Well, they weren't even using the camera. So, they're coming to us. They're like, "I'm not even using the camera." The problem was Apple was detecting the the camera code in the binaries and they're rejecting. So, for a couple reasons, we had to bring everything out into separate little composer uh packages. So everything like microphone, camera, uh share, um dialogue, uh biometrics, push notifications, all of those now are separate plugins and we have our own marketplace. You can go to nativephp.com/plugins and you can take a look at all of the plugins that we've got there. That makes a lot of sense. And you know, I can totally understand that from the permission standpoint, but also in terms of bundle size. like I want my app to be as much smaller as possible and I can incrementally just add the features I really want to and I can do that from the plugins marketplace which looks absolutely awesome. Aris Faro, what's up? [ __ ] nice to see you. By the way, Shad, we have more than a hundred people on YouTube. You guys absolutely awesome. Go all the way down and click like on this video. Today, today, Shad, we are diving into native PHP with the creator of native PHP himself, the co-creator with Simon, and we are it's open source, man. Everyone can build native PHP apps right now using PHP, the best language in the entire planet. By the way, Shad, I want you guys to type Wshane for today's live stream. We are getting started, man. We are about to see some mobile development here. Let's get started on this [ __ ] I'm going to go back into documentation. So basically I just typed native PHP install. We just saw what is by frost and what is plugins. Documentation is where we were. So I'm going to type clear and move forward with installation steps. As you guys can see just a couple commands very very easy to get started. Okay. So native PHP installah start your app. So, I just have to do this now and I will see my app like in some sort of simulator, I guess. Yep, [snorts] that's exactly right. [clears throat] Um, it'll ask you which device you want to deploy on. Now, I will I will tell you if you have an I an iPhone, right? And you want to deploy to the iPhone physical iPhone. No, no, no, no. I'm not sharing my I know you don't, but this is for everybody else because we've had this people have asked as asked this question a lot. Okay. If you want to do that, you can, but you have to have, I believe, you have to have a paid Apple developer account. And then there's a section inside of developer.apple.com. Don't mark me on that. I've seen people I haven't played with it myself, but I've seen people say that it might be possible without a paid uh account, right? You have to also add your um your device into Apple to tell them that that is an approved device by you for your account. So, there's a little bit more setup for that. Um, but for today we're just doing a simulator. It should be just fine. Okay, chat. Three commands. Composer require native PHP PHP artist native PHP install. The third command I'm about to run is native PHP run or whatever. Okay, I'm going to type enter. Shane, I'm allowed to to do that. Just say the word, dude. Just say the word. Just say the word and I will. Yes. All right. There will be there will be. We'll see. Which platform would you like to run? I'm going to choose the iOS. Is that okay? Yeah, I guess. Bam. Running at PHP for iOS. Which uh target simulator? I want to be on the latest one. Is that okay? Or will I break my machine? Of course. Yeah, man. All right. I select iPhone 17 Pro Max, which is literally my phone. Okay. My phone is literally this device. Let's see. So, it's currently building uh from my understanding. Okay. Installing composer dependencies, removing unnecessary files. We get we get to see everything here. Resolving Swift package dependencies, installing cocoa pod. So, it's kind of doing the full story. And what [snorts] I do expect is see the [ __ ] simulator here appearing in a couple seconds. Okay, let's hope that will work on stream. W Native PHP everyone, right? Type that on the chat. Native PHP, what's up everyone? By the way, if you just arrived. Oh boy. Oh boy. Oh boy. Oh my god. Oh my god. Chad, I think I think I think it's running. I think it's running. I think it's running. Oh boy. Oh boy. Oh boy. Oh boy. Uh, do I want to go here? Yes. I want to do this and this and this. It's compiling, chat. It's compiling. It's compiling. You know, we we keep saying W Shane and W Native PHP. I like that. But also, W Nuno's health. How about that? It's so good to have you back, man. I'm Thank you. Thank you. Thank you. I appreciate, man. I I was tired of being sick, honestly. Jesus Christ. I was so tired of being sick. What is this? Ready for April Intelligence. I don't care about that. So this is basically only happening once this boot step or let me know. Yeah, the first time the first Well, if you close the simulator it's going to have to reboot. So um after this then you should be fine. Okay. Okay. So right now it's kind of booting, right? It's starting. [snorts] It could be a blank screen for a couple reasons. Um did you happen to run npm install npm run build and all that stuff before? Maybe not. So, let me you you want the you want you want to know like the the the ultra unlock stuff? Tell me. Tell me. You want All right. So, go back to the uh to your um IDE. Let's type in Let's do uh npm install first. npm install. And now we're going to do uh PHP artisan native. Or you can do slashnative instead of PHP artisan native. So, there's a shortcut that you've got there. P uh like this. Yep. Native. And now, personally, I have an alias in ZSR, Zsh for for that. I just type the letter N. So, that's another like shortcut if you want to get really really like very efficient, right? Uh so, slashnative. Uhhuh. And then run run and then the letter I for IOS. Okay. And then you're going to do uh dash uh capital W like this. Uh but before you run that, there's one thing I just remembered you have to do. Tell me. Uh go to the docs. Let me um let me go to scroll down under the get started. Go to the basics on the left on the get down to the next section on the get started to the basics. Yeah. And then go to uh native functions. Native functions. And then scroll down a little bit. We're going to do a couple things here. We have to install. We have our own native PHP mobile V plugin. Okay. And that's going to help with a lot of stuff. So, we can do live reloading, hot module reloading, and all that. Yep. Yep. Yep. Yep. Let's do it. Yep. All right. So, go down a little bit more. Keep going. Keep going. Keep going. Keep going. Uh, too far. Let me find it myself. One second. [cough] [clears throat] Docs. Android simulator consuming a lot of memory. Oh, I bet it's the same thing with my AOS simulator. You know, I don't have a lot of memory on this MacBook, though. I have like 36, I think. You know, that's it. [snorts] Where did that go? Oh, it used to be there. One moment. Yeah, take the time. I'll just tell you what it is. I'll just tell you what it is because PHP is awesome. It is, dude. Peach is dope. Dope. Dope. Dope. Dope. I [snorts] You didn't know that Nuna was sick, dude? I was sick for a week, man. That was a he without any stream. Thank you. Thank you, Shira. Thank you. Appreciate. [snorts] All right. I'm just gonna just one question from the chat. Does native PHP fully supports things like camera sensors and GPS? Yes, sir. Yes, sir. Plus, uh plus with a new plug-in system, you can build any plugin that you want to and literally do anything you can think of that device is capable of doing, you can do now from native PHP from Laravel. All right. So, so I sent you a private message. Do you see that private message? I don't know where it went to in our docs. It was here. Maybe I'm just I see an import. Where do I put that import? Uh go to your V config. V config. Okay. This is basically just improve a little bit our development setup, right? So I just import all the way top I assume. All right. Now it's done. And then you're going to add this inside of your uh plugins array. Okay. So that would be this and this. Okay. Done. And then inside of your Laravel uh plugin in that config object, you're going to add this. Okay. Uh so inside Laravel, you just type this. All right. Done. Yeah. And so go down. You can delete that um the hot file function. So a line 29. Oh, I can delete this one. Okay. Done. Yeah. And to make sure that native PHP mobile is inside of the plugins array. It looks like it is. It is. Yeah. Yeah. Yeah. so now do npm install again. And then there's also actually there's another one too. I know it's a little bit of setup. Actually, it was on the docs that you just had up. Um my patience to read documentation is just you know everything that does not start with PHP artisan I just skip. You know I don't know Chad by the way tell me if you are the same but for me like everything that does not start with PHP artisan or does not start with composer require I just skip. I I just don't really I sent [snorts] you another message here. Uh, go ahead and put that into your um package.json at the bottom. package.json at the bottom. Okay. Uh, at the bottom, you said so. I'm going to just put here. Yep. All right. Done. How about now? Yep. Good. We good to go. Okay. I'm going to type npm install once again. Do the npm run build thing. Well, build. No. Uh so actually this is another point of of understanding. It's a good learnings uh good learning point here. Mh. Um if you are on an iPhone so there's like reasons we use a web view to render all the all of the PHP. Right. Right. Uh iPhone does not let you use HTTP schema protocol inside of the web view for anything like that. So we have to we have our own schema. It's PHP colon slash. Uh, and because of that, there's some issues with Axios. There's issues with inertia. And so, that's one of the reasons why we created our own V um, plugin here. So, when you do npm run builds, you would think that's going to work, but it's going to work. And it's going to keep everything as HTTP. It's not going to swap. Should I do Should I do this? Uh, well, no. It would be npm run builds, but then you do dash dash and then dash space dash. Again, it's kind of weird. It's in the docs, trust me. space. Yeah. And then dashy hyphen and then space and then dash again mode equals iOS. iOS. Just type enter. It's a little weird, but you get used to it. Now, can I be on npm rundev or do I need to do a No, no, no, no. Build. Build. Okay. Can I type enter? Now you're going to Now, this is just for everybody to understand. If they're just doing an npm run build for iPhone, this is what you do. You can go ahead and run that. That should be just fine. When the next command we're going to run though is with the watch command on PHP artisan run native run and that's going to kind of negate all the work we did but I wanted everybody to know that. All right. So donative run I dash capital W I- capital W. Just type enter. There you go. Yep. All right. Let's do it. Watchmen uninstalled. Let's install watchmen then. Gotta install watchman. Yep. Got to have that. Sorry. Watch is the file watcher basically, right? Yeah. Nice, nice, nice, nice, nice. All right, chat. Using Brew Live on stream. What could go wrong? Risky, man. It is risky. It's already installing like the entire world. [snorts] All right, Shad, if you just arrived today, we are trying native PHP chat. We are about to see our welcome page on the browser. Uh, what Shane is literally telling me right now is that there is a few things we can do to increase our development experience. So besides seeing an hello world, we are now actually preparing our setup to be much more efficient on things like uh hot reloading. You want to kind of change the views and just be automatically uh seeing that change on the mobile app automatically. So that's exactly what we are going to do right now. Okay. So watchman is installed. Let's go again. Bam. Bam. Bam. Starting vid server. Oh boy. Oh boy. Select target device iOS. Yes sir. Let's do it. Will this like now kind of just rebuild it this thing? That would be awesome. Oh boy. Oh boy. Oh, okay. It's doing it from fresh again. So, installing composer, removing unnecessary files, kind of doing the full thing. [clears throat] Same for you. You only see the code sections. I know, dude. I know. W4 the videos. [laughter] Oh boy. Oh boy. Oh boy. Oh boy. Oh boy. [ __ ] It's coming. W mobile development with PHP. Here we go. [ __ ] And now I say hello world using Laravel shed. You know the I honestly there's a few things I never thought in 2026. Number one, I never thought AI will steal my job. That's the first one. Okay. Number two, seeing PHP for the mobile, it's kind of badass. Okay. Seeing PHP for mobile development, it's [ __ ] badass, which is absolutely awesome. So congratulations, Shane. Hey, thanks. [laughter] It was [snorts] uh you know, no big deal. It was all on the wrist. No big deal. [laughter] Nice one. Nice one. Nice one. I know. I know. All right. So, I want to see like how hot reloading is working now. Like, if I were to go into web, so I'll tell you. Oh, tell me. Yeah. What I actually want you to do, if you go into your app.blade.php, there's a class I want you to add there. Oo, app.blade.php. So, I'm there. Yep. Yep. What's up? So I think on your last stream one of the questions that you had had pointed out is uh so I'm going to have you add uh into the body the class there add this class native PHP php- safe safe hyphen area. There you go. So what that did is Oh that was clear what it did literally just moved the Oh let me see something though. What happens if I do this now? Oh my god, I love the hot reloading by the way. Me too. [laughter] Makes development so much better. Um [snorts and clears throat] Oh, that's so it hit a space an extra space in there or something. There you go. Yeah, nice stuff. Uh so I think on your last stream you pointed out like that should be the default and there's reasons why it's not the default because not every single app has this or needs this. um there's some other components or different ways that you want to render your your each different view or layout file might want to take advantage of it and might not want to. But what that class is is we actually the device knows where your notch is or where your your camera is or where you know all these different things are um inside of the device and it will tell you what that offset should be and then we convert that into pixels and we put that into CSS inside the web view so that we can take advantage of it. So, even if you like rotate the the device sideways or something, it'll detect that. It'll reingject it. And uh Simon and I both spent quite a bit of time making sure that that's working. So, um actually, we went back back over it like six times just to get it uh as dialed in as we have it currently. So, I have a question for you, dude. I have a question for you. This is looking fantastic. One of the many questions people make is in terms of performance, is this as native as React Native, for example? Uh, no. So, um, well that's those are different questions in terms of performance. Yes. [clears throat] So, as if you're if you're talking about like speed and getting under the 200 millisecond kind of user feedback of of most things, yes, I would say that it is. These are not native. We didn't take your HTML and convert it into actual native components. We're not we're not there yet. We are looking to get there very soon. Right. Uh, and I'm not going to I can't talk too much about that yet because I' I'm still working on some stuff in that space. But, uh, I I I think this is a a very uh this is um Yeah, this is like uh saying God isn't real in the 1500s probably for reasons for for a lot of reasons actually. PHP Do you know what PHP is? Nuno, I know what PHP is, dude. Yes. Yeah, I think you do. So PHP is a wrapper around C. Both Android and iOS are both native to C. Okay. Where when you if you're talking about React Native, I'm not even going to talk about Flutter because Flutter is just a virtual uh virtual machine. That's why if you look at like any of the uh performance metrics of React Native versus Flutter, uh Flutter is like zero milliseconds across the board because it's not even touching like full native. They've they've done some magic there to make things work and it's not a bad uh solution. It's great actually for a lot of things, but it is a virtual machine. React Native uses something called JSI. JSI is the JavaScript interface. What that is is like when your app boots up, it creates a JavaScript virtual machine. That virtual machine shares memory. It has overlapping memory space, right, with C++. So you can share C++ and JavaScript and they both can read and write at the same time. That's great. We can get there with PHP without having a virtual machine. So we actually inside of our own uh extension we've got we can actually carve out our own memory do basically the same thing and that's something that I plan to get done by the end of this year. So I'm really excited about that and I want to get full native uh components very soon. Let's [ __ ] go shed. I hope you guys have listen to this because this looks [ __ ] fantastic especially using PHP and Lavel the best stack in the planet. Wavel by the way everyone. Okay by the way sounds great so far. I I dude I have a question. I just literally registered a user on this app right here. What the [ __ ] the data went to? Like is this using SQLite behind the scenes? Yep. So we ship with a SQLite database and it's really interesting too some of the complexities here the database. So what we do when you run that run command and it you see it like it's it's it's like deleting all of the unused files that we don't need and it's compressing the Laravel. We take your whole Laravel application. We take away all the stuff you don't need. uh to make it as small as possible. We zip it up. We put it inside of a directory inside of the app like an asset sort of directory and we unzip it when you do this. The database though, however, has to live outside of Laravel. So, we've spent a lot of time playing with this because if you do an update, if you do an overtheair kind of update, which we're working on with Bifrost, or if you just like release a new version, you don't want to override and and like flash a fresh uh database that's going to override all of your users data, right? So we have to put that database outside of and tell Laravel and Laravel's so awesome at this. You just tell it this is the the directory where the database kind of lives and that's where it goes. And then we have to make sure that that's all being resolved when you run artisan commands migrate and all that stuff. So this is there's a SQLite database. Yeah, this is looking fantastic. So from my understanding everything really just works so far. I want to kind of jump a little bit into understanding how can I use the native capacities of my uh device. For example, do you have a plugin that you think would be nice to demo here? [snorts] I think one of the first ones that everyone should uh should use is the dialogue plugin. Ju just by the way, does that leave under native components lives elsewhere? That's going to be if you go into plugins or if you uh if you mouse over the word mobile at the top of your screen. Yep. Oh, and go to plugins there. Yeah, we have our own dedicated section here for plugins. Okay. Do we we want to jump into plugins before checking native stuff here? Oops. Just me go here. So plugins are native are native stuff. So I know you but I see this stuff here. You can read up on on on this stuff. Um, and it's there's no problem with that, but it's a little boring for a live stream to watch you read. Oh, it's buddy. [laughter] See, that's what you got me here for. So, I want to take you through everything on how to on how to do this stuff. All right, let's go here to mobile [clears throat] plugins. All right. So plugins is basically a place where I can see you know some of the you know some of the native features like interacting with native features of the device like things like file dialogues mobile system mobile browser mobile device microphone which one you think it's good to demo. [snorts] So I would definitely recommend starting with dialogue and I think there's a lot of lessons we can learn inside of the mobile dialogue. Okay. Oh here we go. The only thing I read is this, dude. Composer required. That means copy paste it and just do it. Let's do it. I'm going to go here into a separate browser and I'm going to type You're going to need to stop that anyway cuz it's going to have to move those files back over. Yep. Okay. So, no dependencies besides the mobile dialogue itself, version one. Okay. So, that's done. Next. Do we see a code snippet just below? I do. React. So, I basically just want to use this, Uh yeah, let's do it. Uh uh actually I think I want to use this instead. Don't you think you you can Well, the the uh the alert is better to start like having a toast. You can do that. That's fine with the alert. What's nice with the alert is that when you have an alert pop up, it offers like some buttons that you can click and then we fire off an event. And I want I want to demonstrate like how you can actually capture an event that's coming back from native and then handle that event. And that's something that the uh the uh alert does really well. Okay. Now, do you want me to just uh cop Do you want to start with this one then or the other one or both? Well, that's the PHP anyway. So, go to the one that's above above. Yeah. Uh yeah, that one. Okay. Just copy this. Where where do you want me to put this? Let's go to the welcome the welcome screen and we can just like add a button into into that and we can just like demonstrate pretty simple. Oh my god, you ask me to code now. Like I barely know how to type anymore on this postcloud code area. All right, let's tell Claude to do it. That's fine. Should we ask Claude or should we do just do it ourselves? Yeah, let's ask Claude. Let's see how how well Cloud Code behaves with this [ __ ] All right, so I'm going to just type We actually have boost guidelines. Uh actually, can I do a little plug? Can I do a small plug? Yeah, of course. You can do whatever. Tomorrow I'm working with uh Pushback from Laravel team and we're going to do on stream we're going to uh we're on Punapal. I don't know if you know Punapal. Yeah, I know. We're going to be on his channel. We're going to update the boost guidelines for version three for native PHP air live on live stream. We're going to push it. We're going to deploy it all the way out. Uh so I'm really excited about that because he was looking at it. He's like, "Yeah, there's definitely some things we can work on here." So, right, we're going to do that tomorrow at uh 10:30 a.m. Eastern time. Okay, so we'll do the following chat. Okay, so first of all, we have close to 200 people on the live stream. So don't forget, go all the way down and click like on this video. In meanwhile, also subscribe to the channel if you can, if you are enjoying. So, what I will do here is the following. Go to the welcome page and add a button that will fire off or aka use this JavaScript code. And then I'm going to just copy paste this JavaScript code. Bam, bam, bam, bam. Done. Okay. So, cloud code is working on it. Okay. Okay. Okay. Exploring the codebase. Why are you exploring the code base? There's nothing to be explored here. The [ __ ] Uh, so while cloud code is working on it, uh, so plugins, right? So if I want to use native stuff from the mobile device, I would go to plugins which are accessible from the mobile section all the way top and you just click on plugins and here you have um, you have a few plugins that are paid apparently and you have free plugins. Okay. So um, yeah. Do you want to do you want to talk about that a little bit? Sure. Yeah. So when we went free, right, um we stripped everything out into plugins. Um there were 15, I think, or 14 plugins. We didn't add any more for uh native PHP Air. We um and out of that 14 or 15, I think nine or 10 of them are free. And then the ones that people were really asking for and the things that we think that are worth some money, uh we're charging for. Now, if you had a subscription to um like if you're early access from, you know, you bought in before, uh that price at 199 goes down based on different things. If you already have a subscription or if you renewed your subscription, we give them to you for free. I think uh there's a lot of different things that we uh do to bring that pricing down for everybody because we don't want anybody to lose out on something they already had and we want to honor those people that have been helping us from the very beginning as well. But yeah, some of these plugins are free. The other cool thing about this is we're working on right now. Uh we're speaking in Laracon EU in a couple weeks. When we get back from that, we're going to be rolling out third-party plugins. There's some like legal stuff that we have to make sure that all of our tees are crossed, all of our eyes are dotted for to make sure that, you know, if we're selling other people's work that everybody is uh covered basically. Mhm. Um but we've already got several dozen plugins submitted to us for all sorts of functionality that um we'll be selling or some of them might be free as well on uh the plugins the marketplace. So there's a lot of cool things that people have been working on that we're really excited to um to uh showcase soon. Nice. Makes a lot of sense. And today we are trying to begin with at least a free plugin which is called it the dialogue uh plugin which apparently what it does is just basically alerts dialogues and toast notifications for native PHP development and these are the toasts and dialogues from the iPhone itself from the iOS. So this should actually be done by cloud code and it is okay. So I won't actually check the code yet but what I will do is do I need to restart native PHP run? I think I do right because I closed it. Yeah. So, let me look at the code, though. Let's make sure there's not going to be any real issues here. I want to see what it looks like. Uh, yeah, absolutely. So, I'm going to go for uh dialogue on off events. All of that was imported. Okay. And what I see here is that I see a button. That on click that you don't Why? Well, I I don't like that it's got it did the Think about it. It put the the function in line here. It should have put that in the JavaScript at the top, I It's beautiful though. Oh, you're saying just basic. Yeah, I think it's okay. I mean, well, we'll see if it works. [laughter] Uh, it should be all right. Let's Let's find out. What is the button called? And and maybe we could isolate some of the code. Get rid of some of the other boiler plate that comes with um the code is called it show dialogue at the minute. All right. So, we'll look for that button, All right. I mean, let's give it a shot. Let's see what happens. Uh, [clears throat] [snorts] worst case scenario, does not work. See, I don't know. I don't know React enough to see like this on and this off. Um, so in Vue, we put those in the unmounted and the on unmounted life cycle hooks. So that we, you know what I mean? Uh, I don't know if React handles that differently or not. We're about to find out, I guess. All right. I see show dialogue. Oh, no. That was close. No, it does not. So, did you just do run or-w? Oh, that's a good question. I think I did the previous command. Uh, there is a warning already here. I see. Uh, maybe it's not that. No, let me see. [cough] So, I did native P uh native run I-w. Is that Is that okay? Yeah. No, that's fine. Um I think that there's something to do with the way that it's implemented this. I would I would just like on click call a function. And that function is Okay, let's do that. Cloth code, you fired, man. I'm back. Noo-Noo is back to his job. Okay, so I'm going to just do here handle click for example. I'm going to go all the way top. Uh let's do here uh console handle click. I'm going to copy paste this inside. Oops. This does have to be an async uh method. Yep. Yep. Yep. Yep. Yep. Done. So that should be fine. Okay. How about this off and on thing? Does it need to be like at this level? This needs to be outside. Yeah. [snorts] So again, those like the on uh the off is really just because like for life cycle cleanup stuff. So we can get rid of off just for for for now. The on I don't know isn't it like uh what is it like use effect or something like that for the onmounted like similar to views unmounted life cycle hook. Oh so use effect on JavaScript on react for that kind of stuff. Do [snorts] you have an example here on the documentation or it's just really um not there at the minute? No, I don't think so. Yeah, we're just saying on someplace, Um, so let's Google it or ask Claude what's the what is right shet. Meanwhile, if any of any of you have an idea how this will work out, let me know. Okay. So, uh I'm going to wait for the dialogue alert. Yeah, the use effect is the way I would do the onmount thing. Okay. Uh that's what I that's so inside of use effect that's when you do the on. So the on the on method is just a wrapper around we fire off a a a JavaScript event that's prefixed with native and it's like got you know double escaping backslashes and sometimes it's four and like this used to be a problem back in version one of native PHP and we added this with version two just to simplify things. So we have this events.alert everything is like you know constants. So right and what should the handle click actually fire then? So that's just some function. So the handle click shouldn't do another alert. The handling a click should let's uh well you can actually you can do like um let's do uh let's just do something simple. Let's do a console log and I can show you like how to um how to debug the web view a little bit. Oh nice. Okay. So I'm going to say here hi Shane. Okay. Okay let's do that. Uh, do I want to have the on button here? I think I do. One second. [snorts] Here we go. So, it's back. I'm going to do a console log here to begin with. Uh, and the handle click should be on the show dialogue. And it is already. All right. Cool. Let's give it a shot. Yes, sir. So, just go back here. And how do I display the console situation here? So, um, well, we want to I don't Well, it should have updated. It may or may not have updated the JavaScript there. It should have. We'll try clicking the show dialog and see if it actually fires. Uh, doesn't look like it's firing. No. So, let's do this. Go uh open up Safari. Safari. Okay. Uh, all right. Done. And then if you uh in your menu, do you have the uh developer? Yeah, I do. Um, all right. So, go to developer. yeah. So, there it was there, I think. No, you've Sorry. Um, let me see your menu again. Okay. Uh, one second. Yeah. Go to develop. Nope. Go to develop on the top and see where it says Nuno's MacBook Pro iPhone 17 Pro Max simulator. Oh, got it. I see it. Yeah. Yeah. and then 127001. Click that. Wow. What is this? That is your That is your console for the iPhone. Oh, for the simulator. So, basically this simulator console log situation is here. Correct. Nice. So, if I were to click here Oh, it's doing much. All right. So, we got some some kind of issue going on here. Let's figure that out. Okay. And it's a little small. It's hard for me to read that. But um I would say I would say let's start uh let's stop the um Oh, you see something maybe uh one second. Uh okay, one second. Console. Oh, I think I know what you mean by Oh my god. Okay, I think I know I think I know how this is working. So, this should be Okay, I think I know what it Okay, give me a second. Give me a second. This will all make sense. [snorts] Bam. Bam. Made more sense if you used Vue.js. Right. So, this does not need the [ __ ] click anymore. Look at this. This will make a lot of sense in a second. This runs at root level. This thing that's why you mention use effect because you want to run it once. So, this will be a use effect. Bam. without any dependencies because we want to run it like once and on this is like a glo this is a this is a global thing so basically you want to hook into the device that when a button is pressed just call this thing and then we have the ID which ID will be this it will be like the HTML ID so you can pass in a custom ID into that uh it gives you one by default you don't really need that there um but that's good if you have multiple um multiple places. So we had uh in version one we had an issue where if you had like a global alert listener uh like we had one inside of actually inside of our kitchen sync app um that it was like uh Apple wanted to make sure that people could delete their accounts if they wanted to. So we made it so that you could delete your account. We did that with a confirmation dialogue. So people were clicking yes, I want to delete my account and they would delete their account. well downstream someplace we were demonstrating the alert and when they would click okay for that it would bubble up and it would call the global event listener for that and so um so now we can pass ids and we can scope those um alert uh alert confirmation you know callbacks uh wherever we want to but for this simple case we don't really need it right and what I think will happen here is that we're going to see the ID let's see the let's see that okay uh so what I will do is just do this And still not there. It should have appeared here. So I would I would actually stop the I would stop Let's just restart the the whole um watcher. Yeah. Let me make sure um at least the use effect is running because if not that will just um Oh, it is running. Yeah, the run. Okay, this is Yeah, it is running. That's good. So I think I think and I don't know anything about react but I think the handle button should be outside of use effect but I don't know I think just the on should be inside of so the difference by the way is that um if you have this thing out of the outside of a use effect um this will run multiple times depending of how much time this component is rendered. So the what a use effect does is that it basically makes sure this code right here only runs once for the given viewport, you know. So um we can do it, but it probably will still work, but um let's actually do it. Okay. All right. So on I feel like you're you're teaching me React and I don't want to learn. It's like the Jehovah's Witnesses come to my [laughter] house and it's like I don't want to know. Okay, so let's go back here. Uh vam vam. Do we see it now? We don't. It looks like this on thing is not working. So I think I think we did composer require. We did this. I want to see um please stop the file watcher. Mhm. And I want to run it again and I want to pay very close attention. Can you make the console a little bit bigger because I want to see some of the things it's doing here. Yeah. Go with last use. That's good. Uh we should see a Oh, you know what we didn't do? Tell me. And I I I haven't been looking at chat. Chat might know this. We composer required that dialogue um [clears throat] plugin, But for safety uh we require you to also register that uh that plugin because think about it. If somebody creates a plugin and inside of that plugin there's a malicious plugin that they've installed. Oh, that makes sense. Yep. Yep. Yep. We don't want that. So there's a there's a command uh Yep. So let's stop this. and then do it's a it'snative plugin colon register and then it's going to be native PHP actually I just I just actually delete that native PHP I added a I did a little thing last night just delete it just do plug-in register enter yeah all right so I have to I have to work on that so you need to tag it and release it I think I did I thought I did anyway we'll we'll take a later. Native PHP And then right, we have to publish our provider. So just run that and then do it again. Nice. And this. Nice. Done. All right. Now do the dash. That's why we didn't saw [ __ ] Bam. [ __ ] Let's do it. Let's do it. We are about to see a dialogue in a native one. Okay. in the native one. [snorts] Let's see. And take a look at chat. Hey everybody, I haven't been over here. W mobile for PHP chat. Everyone typing W. Oh, I already see it. Compiling plugin. Oh, this was clearly missing. I think it pops up. Yeah, there it is. Oh boy. Perfect. Oh boy. Oh boy. Okay. Do we see a I want to kind of put the Oh, the the console log situation disappeared. Do I can I open it back? Yeah. I don't know why it disappeared, but it's okay. So, developer. So, there's a there's a there's a develop. Yeah. There we go. Here we go. I put it here. Okay. Can I see it now? Not yet. So the only thing now that we are missing is the JavaScript code, right? Like the the JavaScript situation here. The Safari dev tools console disappears when the app shuts down. That makes sense. Yeah. All right. So the next step is seeing this console log appearing on screen, right? We we at least need to do that, right? So this on thing is still not working. So well, right. So like that tells me like even just like JavaScript is not functioning at the moment or something with the code is wrong because you should at least see that console log, On button pressed, we see the handle button. I'm assuming by the way that it does consider this a button press. Wait, wait, wait. No, you don't have an onclick handler for that button, right? And where should the on click point to though? Did that handle uh button? Whatever that um handle click or whatever. Handle button. This one. Handle button. Oh, you think that was it? Let's try. Okay. So, I don't think that will work, but we can see it at least, I guess. Oh, it did work. We see it con but undefined, right? Because the handle button is like um it's a function from it's just um it's basically react code you know what I mean it's it's not being this thing sending the event you know so all right so no no no all right you could delete the on line completely that's comes separate so the the flow is this when you click the button we want to call the dialogue alert function okay so I don't know what handle button is I thought that was like austo custom function that you were just creating. Oh no. So this will fire like a [ __ ] native thing. [snorts] Oh, what does go into the second array thing? Do you know you can put So there's a title and then a message I think and then there are buttons. You can leave the buttons which is the third parameter empty. It'll just have like okay and cancel for now. Okay. So I can just do this. Yeah, try that. What is the result of the alert? It's got to be it's got to be is it async? Yeah, this async going to do this has to be async. It's aable. Okay, I'm going to remove all of this. Oh, you mean the alert result is authentable. You mean Yeah. So, this function has to be like async awaited. I don't know what how that should have gone with Vue.js. It's all right. No, no, no. Don't do that on that. Just do just do um Yeah, just that. Just try that. Yeah. But just make sure this function, this handle button function. Mhm. Oh, is async this Okay, let's see. I'm going to console log all the payload to see what we have. All right, let's see. Bam, bam, bam, bam, bam. What do we have here? So, this little this little dialogue situation, this is like native stuff, right? It's liquid glass. Yeah. on iOS. It's [ __ ] liquid glass right here. [ __ ] W Dialogue, everyone. Okay. W Dialogue. This looks like native glass. Indeed. Do you like native? Do you like liquid glass? Not a big fan of it. I'm like liquid glass. You like it? I don't know. Sh. What do you guys think? You don't like it? I don't know, man. I I think there is some questionable choices regarding UI on the latest iOS release. I'm going to be honest. I like Honestly, I get bored. I don't get bored. But when I do get bored, I like just like pulling down my uh my little slide down here and just seeing like the refraction and like the work that they did in that. It's like very it's cool, I think. Dude, I have a question. How do I put some just this like second argument? That would be cool. That would be cool. Uh that would be the third one. Go back to the code. Uh back to the code. See, you got title message. Uh title message. Okay. So we have a title. So let's see something like uh high stream title and this will be description subscribe my channel and then we have a third argument argument is an array like Yeah, I forget what it is with JavaScript but I think that's right. Uh I'm going to check. So with JavaScript it's an array again. Yeah. Yeah. Yep. Yep. Yep. Yep. Good documentation, dude. So, this will be um done. Okay. If I'm done subscribing or no thank you if I don't like Nuno. So, this is done. And I close this. Bam. Bam. Bam. Okay, this should work. This is like this. Why is are you complaining here? Where's the complaint? Let me see. It looks like I'm looking at it now too. Let me you know what? I've got um let me open up a project locally. So I've got this already implemented with uh view and I can look at that. It is working very specific. Oh that's nice. Cool. So um what we're not doing now is showing um we're not handling that. And that's where that handle handle click the on the on method. Uh-huh. Um, so that on method is just saying, look, whenever this event is fired, I don't know how you do it with React, but whenever this event is fired, on dialogue.alert handleclick, whatever it was, um, then it's going to fire some function and then you define whatever that function is. You can inline it if you want to, right? So, what you're saying is that now I can have a function like handle done, for example. Am I right? Would it be in this handle button? Why would it go in handle button? That's a very specific function. I think we'll go on the use use effect on the use effect. Correct. Well, it should be a separate function that gets called. Yep. Yep. Yep. So, I wouldn't do that. I wouldn't do that. Well, I don't know. I don't know react, but personally, this is what I think will happen. That's okay. This is what I think. Um I think this will work perhaps. So, go to events. It's events.alert. Let me just copy this. Bam. Bam. Bam. Bam. Bam. Bam. Bam. Bam. Bam. Bam. Let's see. I'm getting expert level on the Here we go. Done. Button click. [ __ ] yeah, it did work. We're becoming good at native PHP, guys. I'm becoming like a pro native PHP. So, recap, chat, mega recap. Okay, [snorts] so the way the dialogue system works in native PHP is quite simple. Okay, super simple. You have a button with react which calls a handle button situation. The handle button situation will fire this dialogue alert. Obviously you may have to give multiple options like done or no thank you. Okay. The way you capture this options is done through this nice piece of code which you can place and you need to place at the use effect level. Okay. Now you basically hook a global handler call it uh on button pressed handle you know let's call this actually handle click on dialogue something a little bit more explicit okay and then when you click on any button dialogue what you are going to have access to is a couple of ids okay let's actually show a little bit that here under the hood I'm going to pass the payload in the payload I'm going to destruct the payload into a couple things like index label in ID I believe if If I just console log the label. Okay. If I just console log the label, I'm going to see a few things. I'm going to see done on the console log. Here we go. Done. Right there. Beautifully. And now I'm going to see no thank you here as well. Bam. Bam. Boom. Simple, easy. Really just works. If you want to, you can do a uh instead of console log, add another um do dialogue toast and then pass that LABEL IN. AH, you mean instead of doing this, I can do dialogue.toast and on takes two parameters. I think it's a title and uh no, it's just one. It's just a label. Yep, that's it. Yeah. Then this will basically display a toast now, right? So, if I do this, done. Oh, I see the toast right there. You see it? Good stuff. And this will be no thank you now. Well, hopefully. Oh. Oh, done. Why done again? I'm wondering if um that it's still being displaying the stuff from back in the days. Do you know why it doesn't close exactly? A handle button on click on the It should. H. That's interesting. Yeah, it should close. It does for me. No, thank you. There we go. There's no no thank you. Yeah. Or it keeps popping up like that. I wonder if that Oh, I wonder if it's this click event. Maybe it's maybe it's passing that click on that button. It's passing it all the way through. What is this handle button method? Is that just a method that you because you were saying I think that's something like call it call it nuno's button the onclick handler. Nuno button like this. Yeah, just something like just a custom function name. Done. All right. So, let's see. Is that the same thing? I think it'll be the same thing. Yeah. Oh. Oh, no. It is the same thing. Yeah. Yeah. Uh, that's interesting. I would be curious to see why that's happening. I have I have So, I haven't done anything with React and it might be pass I feel like it's just passing that click through again. Wait, wait, wait, wait. I forgot this. I think. Nope, not that. Yeah. I wonder. I mean, you're the React expert. need to pass a empty dependency array. Yeah, that's done. Uh I'm going to try something real quick. Uh I want to see like uh if this has been called been called. Look at me debugging React on stream like a pro. So the other thing is like on that hand the the click handler um you're passing like you you're putting all these params in. I don't think we put any params in there. So like the as this see here you got payload line 24 you have payload colon and then index label ID. You don't need any of that stuff there. No I don't. No no no no. [snorts] We're just doing a dialogue alert. Right. Uh this button is not being called though. So yep. Uh yeah. Not really sure. I'm wondering if I do this what happens. Yeah, that's weird. So, I'll tell you something, too. I'll tell you something, too. If you um the way that this works, h I'll try to I'll try to make it concise. When you first run the run command, okay, it zips up everything like I told you with Laravel package and it puts it into a certain directory and unzips it. And then we start the watcher. As you're watching stuff and you're making changes, it's swapping some of those files in. However, if you close the app on the device and then reopen it, it's going to reset to that state it originally was. And I think there's some people that are like, I made these changes, but they're not here when I You know what I mean? So, you just have to run the run command again, right? When I do that. So, I don't think that's the issue with when I when I do that thing of closing it and reopen it. Gotcha. [snorts] Gotcha. Gotcha. Okay. Well, uh, so I would try. Yeah. Do you want to fix that or do you want to fix that or should we move to another plugin? It's up to you. We can we can move to another plugin. Yeah, I think I don't know why it's doing that, but it's something I want to look into. Right. Right. Right. Right. We should move to another plugin, I think. Um, well, now it's working. So, it's fixed. Oo, maybe. Maybe it's fixed. Maybe it's not fixed. We are about to see. Bam. Well, that's Bam. Yeah, it's working now. Okay. Yeah. Show dialogue. No, thank you. [ __ ] yeah. Bam. Done. And now we'll display done hopefully at some point. [snorts] But that was clear, man. So on the on the JavaScript, we basically just interact with this API call it dialogue. And we can use alerts or toasts and they really just work. Nice, nice, nice, nice, nice. So that's JavaScript. If I were to do this like do you see a reason why do I want to do this on the back end? Yeah, if you're using LiveWire. Gotcha. So if I'm using live wire, I kind of want to do this on the back end using this API in Laravel called it dialogue double column toast or dialogue double column alert. And that's that's basically that JavaScript code. Interesting. And you're also using attribute. Yeah, we actually did that. We did that first. Well, we created our own attribute there. So it on native because we prefix everything with a native colon for for this side. So we just made our own trait. We just wrapped the uh on method for from liveware and then it made it on native. So we can do this and then we just pass in the name of the class the uh event that you are um passing in for it. Nice. Can we see another plugin? What other plugin can we use real quick? You could do network network. What does the plugin allows me to do? Uh so that that's a really easy one. It's pretty basic. Uh, this just tells you if you're on cellular, on Wi-Fi, if you're on airplane mode, if you're on with iPhone 2, it can detect if you're roaming or not. And it's call it calls it expensive. Um, expensive or inexpensive, something like that, right? So, here for example, easy. Make sure you register. Yep. Yep. Yep. Yep. Register, of course. So we just type composer require native PHP mobile network and then we type dash column native plug-in register mobileah network and that will just register the plugin himself and it's done then I re then I just use the code right let's see what we have so basically what we have is if I want to see this current status of the network through livewire I can just use this kind of easy peasy lemon squeezy really just works. Or if I want to do it on the on the on the mobile on the JavaScript code, I use this um await network status and that will tell me like if I'm connected, how I'm connected, and if I expensive blah blah blah blah blah blah. Let's use this real quick. Let's ask cloud code uh to do the following. Create a button that will alert um this information and I will just tell him to use this. Okay. [snorts] Uh so basically uh do you see a reason? Well, I do see a reason, right? If you don't have good internet connection, I kind of want to have access to that and just change slightly the experience to my user I guess. Yeah. So we actually made this because a lot of people were asking like how can we detect if the user is offline because they're writing data to a database. We want to synchronize that to the API but they're not online, right? So we can store data in the local SQLite database. We recommend having like a last sync that column that's nullable and then date timestamp that and update it whenever you interact with the API and we know that it's been synced with your API. So we can detect when you're offline and then to say hey you're back online you have five files or five records that need to be synchronized. You can click a button and so that's kind of the utility for that right. Um but there's a lot of other reasons you could want you know to know if the device is online or offline or roaming or whatever. Okay. Uh so this basically by the way this is sync will just work. Okay. Uh so what cloth code I've done is a button with network with network statues will collect the statues in a sync way and then just display that information. Okay. So let's see what we have. It's already using the dialogue alert which is interesting. So it's using directly already the dialogue alert to display the network status and uh the network status if there is no internet connection. So let's see what do we have. Let's go here uh all the way to the browser which is right here display network status and it did not work I think. Let's see why. So now we have the console log with no info whatsoever. Interesting. Well we did you uh restart the watcher because we did the composer require. Yeah, I I think you did, right? I think I did. Yes, I think I did. Well, [cough and clears throat] let's see if it's imported at the top. That's a good point. Uh, yeah, I think it is because I can see our auto completion working. Uh, let's double check. And yep, network import network from native PHP. That's it, right? Yep. So the other thing that I just don't know I don't I don't I mean if you like inlining your click handlers that's that's up to you. Do you want to move it to a function? I don't know. Let's I mean it's easier to maybe it's easier to debug. I don't know. That's my preference. It's just my Yeah, let's do it. Let's do it. So handle network and I'm going to have a button here. There is no UG effect. There is no use effect thing. Right. So I can just do this. Correct. Yeah. This doesn't fire off an event. It's uh it's just in line. All right. So, I'm going to have here handle network. Uh, I'm going to just console log this to see how it goes. And this should be All right. Let's see. Just call it. I see nothing. Like, what the [ __ ] is this working? Yes, it is. let me try something. Yeah, this needs to be over sync otherwise it won't work. That's weird. Do I need to re should I should I restart the thing or no need for that? I mean that's what I do when in doubt. Uh it should have worked but it also added some stuff too. So [snorts] all right let's do it again. Chad, by the way, Chad, don't forget go all the way down and put like on this live stream if you are having fun today here with me and the creator of native PHP. It's better if you write the code. Noo-Noo. Yes, I think it is. Cloud code is literally just, you know, not doing what he should, no good, huh? No good. It is working now. connecting via Wi-Fi. Yep. Yep. Yep. Yep. Yep. That's badass, by the way. Holy [ __ ] All right. So, uh you could even change that if you um if you go back to the emulator. The simulator. If you scroll down or pull down like uh like in the top like pull down like the battery where the battery is like look at your options. Like imagine if you're going to go to airplane mode, right? Uh it doesn't give you the option there. So there might be some in the menu for the simulator. You might be able to toggle that. I usually do this on my actual device. I'm not sure. Right. But you mean like to toggle the network statues. So it gives me different stuff. Oh, I see. In this case, for example, it's telling me it's telling me Wi-Fi because it thinks I am on Wi-Fi basically. Right. Well, [snorts] it's showing the Wi-Fi. Um it's showing Wi-Fi inside of the the simulator. So, right. uh simulator change network cannot change the network settings independently within the simulator. However, you can simulate different network conditions or use the Mac OS network settings. Ah, no, no, not touching on that, dude. We're not going to do that. No, no, no, no, no. But this is cool, man. So, basically, I know I'm connected via Wi-Fi, so I can just act on it. And if I wasn't through Wi-Fi, let me see what what other options do I have. So I am obviously connected and this will return false. If I am offline okay so this is basically if I didn't have any internet connection this will return false. If I have internet connection I get this type thing and the type is a string apparently. So which tells me Wi-Fi but I assume it will tell me like 3G or 4G if I'm on that situation. I also get this is expensive. Uh what means is expensive by the way? Uh so this is only for iOS but um is expensive is if you're roaming. So you might be roaming and you you know like uh if you uh like download a Netflix video and you're not on Wi-Fi, right? It's going to say it's going to say this this could be an expensive thing for your data usage. So it's kind of similar to that. So I could potentially make an alert to ask the user if he really wants to move forward with this or if he wants to potentially wait for a real good internet connection. Nice. Nice nice. So this is a network plugin. Really simple and really easy to use and interact with nice code here. And if I want to do this on live wire, it will be even simpl because I can just use this PHP code. Interesting. What's interesting is that actually the JavaScript we came out with later uh we made all the wrappers with version two of native PHP. uh all of the javas all the PHP stuff it actually is using this PHP under the hood because this is native PHP right we're not calling directly from JavaScript into the device we're actually delegating those calls into PHP and PHP is interacting with the device nice cool stuff uh do do you have any more plugins you want to showcase to me real quick because this one was badass I think I think another one that's good for utility is the I can't remember if it's I think it's device I think it's device and I think you want system installed as Well, so let's install both device and system cuz device will give you like a bunch of like uh device information. What's the ID of the device? What how much uh memory you might be using, you know, all that kind of stuff. I like this one. I like this one. I'm going to try to do it my own. PHP composer require native PHP mobile device. Bam, bam, bam, bam, done. I'm going to register the plugin. Of course, we have to register our plug-in chat. So, native register mobile device. Bam. Done. Clear. I'm going to rerun the thing once I can. But to use this, what kind of info do I have? Oh, I have information about the flashlight, about the information about my device. Get batterying info. Nice. This is cool stuff. Yeah. So, the get info is going to give you back a bunch of information. The It's not information about your flashlight. It will actually turn your flashlight on or off, but right, you don't have one on your uh on your simulator, of course. Right. displays this information. cloud code actually behaves good with um with um native PHP stuff which is surprising good stuff because it's a new it's a new well it's new open in the space of open source you know what I mean so I guess it has to do with the boost situation or potentially the boost situation will make it even better I guess good stuff yeah um [clears throat] yeah the boost guidelines right now are still on version two docs so that's going to get adjusted tomorrow in the live stream with push back on pun Pel's uh stream. Okay. So, this is done. Now, let's [clears throat] refresh the watcher real quick. So, I'm going to go here. Bam. Clear. Well,…

Transcript truncated. Watch the full video for the complete content.