Native Features Overview0:00
Now you're all excited and you wanna start building some native features. So let's dive into that. I don't wanna get too complicated with this. So I'm just gonna create a simple live wire component and we can use one of the APIs that I know is gonna work on a simulator. Bear in mind that not all of the native functionality works on simulators because they're not real devices.
of the native functionality works on simulators because they're not real devices. And there's some testing that you'll eventually need to do on a real device and there's a lot of gotchas in how to get there. Make sure that you're referencing the native PHP documentation 'cause we're trying to cover everything there so that you can get on with what you're trying to do as easily as possible.
Build Alert Component0:46
that you can get on with what you're trying to do as easily as possible. So let's go to the terminal. I'm gonna do a new live wire component and we'll just sort of call this Hello world. Great. So let's go and open that. I just want a button that's gonna show an alert, simple as that first simple starting point. So we want a public function show alert, and let's just have a look at the docs
So we want a public function show alert, and let's just have a look at the docs to see what's available around alerts. So under the APIs section, I know that it's in the dialogue area and we have alert. So let's see what's required here. So we have Dialogue alert, what's the namespace, right? So let's take this namespace, let's put
what's the namespace, right? So let's take this namespace, let's put that in our class. And then in our button press function, we're just gonna say dialogue alert. And what were the options Title, message button. So title, let's just say hello world messages. This Is from PHP. Save that. And then we just need to wire that up
This Is from PHP. Save that. And then we just need to wire that up with our front end. So that's in our resources, views, live wire, hello world. Oops. And all I want to do here is have a button and I want to wire click show alert. And I wanna say, say hi. Close that button. Save that. Okay.
And I wanna say, say hi. Close that button. Save that. Okay. And the final step is to add a route to this component. So let's do that web PHP. I'm gonna use the home route just because I don't really want that screen in my app at all. And I'm gonna say, hello world class. We just need to import that. So use app Live wire world.
So use app Live wire world. And we're actually just missing one other thing. And that's the layout file for this component. And I just want to use a simple layout that already exists. So I don't have any more work to do here. So we just need to import live wire's attribute for layouts. So that's attributes, layout. And then we need to apply that to our render method.
So that's attributes, layout. And then we need to apply that to our render method. So let's do uh, layout. And the layout that we want is in, it's in components, layouts, auth, and it's simple. This is one that comes with the live wire starter kit. That'll just get us going. So we've got this basic layout, we've got a very nasty button that doesn't look like a button at all.
we've got a very nasty button that doesn't look like a button at all. Um, so let's just jazz that up a little bit real quick. Let's, instead of it being a normal button, let's make it a flux button. I Refresh. Cool. That's a bit jazzier. If we say hi, you can see it does something but it, it's not really working. It's not doing anything here.
but it, it's not really working. It's not doing anything here. So that's expected because it's calling a native function to show a native alert and there is no native alert that we're tapping into in this context of the browser. So we need to run our application inside the environment that does have that and we can access that in a simulator. We can also access it on a real device.
Run on iOS Simulator4:58
that does have that and we can access that in a simulator. We can also access it on a real device. So let's have a look at that on a simulator. So we need to jump back to our terminal and do PHP Artisan native Run iOS. We'll pick the same simulator that we used before. 'cause our application will already be installed. Okay. And we have our button and you can see that it looks just like it did in the
Okay. And we have our button and you can see that it looks just like it did in the browser, but in a sort of mobile view, which is great. So we haven't lost any of the fidelity of our ui. I just wanna hit this button. And there you go. We have our native alert and it's even come with a default okay button to dismiss it. Now there are loads of native features that we've built already and there's a lot more to come, but as I said earlier, not all
that we've built already and there's a lot more to come, but as I said earlier, not all of them will work on a simulator. Things like camera, things like push notifications, location kind of does on the iOS simulator, there's a whole bunch of them that don't really work. So you can't prove that it's working the way that you'd like to unless you're running on a real device. Now, just a note on iPhone or in Apple's world of iPhone development, you have
Deploying to Real Devices6:18
Now, just a note on iPhone or in Apple's world of iPhone development, you have to have the paid developer account to deploy to real devices that costs around $99 per year. And that's Apple's fee for gaining access to their tools to deploy to your user's phones. So if you want to test your application on a real phone, even your own phone, you need to sign up for Apple's Developer program.
Kitchen Sink Feature Tour6:48
even your own phone, you need to sign up for Apple's Developer program. This is on a real phone. That's this phone? Yeah. And this is the kitchen sink app, the native PHP kitchen sink app. So straight away there's a few things to note. You might not have seen it, but the splash screen we can customize. And this is just a flux web application. We've got a nice little side menu
And this is just a flux web application. We've got a nice little side menu and we've got all of these features available. So let's have a look at them one by one. We can use the camera to take a photo complete with permissions prompt, and it just demos that that photo has been taken. This actually doesn't go anywhere, this doesn't get stored in the photo library or anything like that.
this doesn't get stored in the photo library or anything like that. This just gets rendered out to the page. And once we move on from this page, it's gone. That photo's no longer accessible. So this is really just to demo that. We can also pick images from the photo library. So let's have a look. Oh, shocking. So we can select one of these and it's just gonna show up. Um, we can also have a multi-select,
So we can select one of these and it's just gonna show up. Um, we can also have a multi-select, so I can pick all of those. Now they show haptics, we can vibrate. Then we've got browser APIs and there's a few of these. So we have the in-app browser, which allows us to open a URL in a browser inside our application, just like you're used to in other applications, fine,
inside our application, just like you're used to in other applications, fine, we have the system browser so we can open the user's default browser or A URL that we want. And that's not just like using a normal link. If you did use a normal link to a HTTP or HTTP SURL, the same kind of thing would happen. But this is actually happening from PHP. So we're making a call back to PHP.
But this is actually happening from PHP. So we're making a call back to PHP. And PHP is instructing the system to open the user's browser. And then finally we have the authentication browser, which you might have seen when you've gone through like an OAuth flow when you've logged into an app. Push notifications are complicated and they require set up on your application and set up on your server.
and they require set up on your application and set up on your server. And for true cross platform applications, we're using Firebase cloud messaging, which requires you to configure Apple's, push notifications as well, and connect all of those things together. It's complicated. We're not gonna cover that during this course, but look out for videos on our YouTube channel about this in the future. Okay, so the first thing we have
for videos on our YouTube channel about this in the future. Okay, so the first thing we have to do is request push notifications access. So I'm gonna allow that. And then we get a token back from push notification service. Now we've got a token, we can send a test notification and that tells us we've gotta quit the app and just wait for a minute. Because of the way that I'm sharing this screen, it kind of mutes the notifications,
Because of the way that I'm sharing this screen, it kind of mutes the notifications, but you can see that it's come through here. Okay, moving on. Let's go to biometrics. Now this demo is just gonna present me with a passcode request because I haven't set up face ID on this device, but the biometrics API will try to use the most secure, uh, biometric identification that it can do. So on iPhone that will be face id.
uh, biometric identification that it can do. So on iPhone that will be face id. And if that's not available, touch id. And if that's not available then it will use pin. This is just gonna prompt me for a pin, which you won't be able to see. And once that's verified, you can see that the UI gets updated. Geo location, again, we need to ask for permissions. I have already granted permissions on this one
Geo location, again, we need to ask for permissions. I have already granted permissions on this one so I can just get location and that's my location. Great, and that's nice and fast. Secure Storage is a fundamental piece of kit for building safe applications. Secure storage, we could go into a lot of detail, but the basics of it are use it to store API keys and anything that you want to be encrypted and stored on the user's device using the devices built in
and anything that you want to be encrypted and stored on the user's device using the devices built in encryption and key stores. These things are super critical for building connected applications. It's not a store for files and large pieces of data is just meant for small bits like keys. You could generate a key and IT and use that to encrypt other pieces of data
You could generate a key and IT and use that to encrypt other pieces of data or files that you store elsewhere. So very powerful stuff. We've got a suite of APIs here that enable you to work with data stored in secure storage. So let's store a value. We'll call this one our API key just for demonstration purposes. We can make it whatever we want. Super secret.
demonstration purposes. We can make it whatever we want. Super secret. Two, three store, great. And now the only way that we can get that value back is from Secure Storage. So I can go API key here and it should give me the value that it's stored, but it will be decrypted. And the other good thing about Secure Storage is it persists after the lifetime of your application.
And the other good thing about Secure Storage is it persists after the lifetime of your application. So if I quit this application and I can open this back up, I can come back to Secure Storage. I can go back down here and check for the API key again. And unlike Sessions, it's permanently stored and it's encrypted as well. So that's great. And if I don't want, if I don't need that value anymore, I can just remove it
So that's great. And if I don't want, if I don't need that value anymore, I can just remove it if we try and get it now, it says there's no value. Cool dialogues. We've already seen the alerts, so we won't look at that. We have the share sheet, so you can share a specific URL and that opens up the default sharing sheet and toast. Yum Toast. The most important feature of native PHP for mobile is
How Native PHP Works13:48
Yum Toast. The most important feature of native PHP for mobile is that we've been able to package up the PHP engine and run it inside of a Swift application or inside of a Java application and call into the native features of the device by providing user land PHP functions that tap into the Native Swift and Kotlin functions that are available. And we've built all pieces of the stack to fit together.
and Kotlin functions that are available. And we've built all pieces of the stack to fit together. We build the Swift and Kotlin applications, we've built the bridge APIs in those languages, and we've built the native PHP extension, which is an extension to PHP that's written in C, and we compile that into PHP. And we compile PHP as a C library, an embeddable C library. What that means is that these applications,
an embeddable C library. What that means is that these applications, this Swift application is PHP. Your phone application is capable of running PHP code directly. That's as close to native as we can get where your PHP code is running inside this native shell. And the native shell is capable of executing your PHP code. And because there's no network involved, requests from the web view go directly
And because there's no network involved, requests from the web view go directly to the PHP engine inside the application and get processed as quickly as any native application can process that request and PHP will return the response back to the web view. It sounds really complicated, and that's because it is, but we've tried to make it really, really simple. So in the next lesson, let's start building out our RACA mobile application a
So in the next lesson, let's start building out our RACA mobile application a little bit more and see some of the tools and tricks that we've got to help make that really, really easy.
