Rapid Application Development of mobile apps with Servoy and phonegap

Good morning or good afternoon to our friends in the US, Canada, Mexico, Latin America, Europe. I’m Sean Devlin from Servoy and we have number 15 in our tech webinar series today. Thanks for joining us. We took a bit of a break a couple weeks ago, but we’ve been back on schedule. And today for the first time this year, I’m happy because I don’t have to do the webinar all by myself. I have a guest presenter, Dawn Nguyen, who’s gonna help help us because he’s done some research and some cool examples with integrating Servoy and phone gap. But before we get into that, I want to remind all of you that there’s a questions panel where you can ask your questions. We’ll try to answer them quietly throughout the webinar, but also we’ll take some time at the end to have our guest speaker answer them. So, Dawn, are you ready? Yes, thanks Sean. Alright, take it away. Alright. So just a bit of CR agenda for today. We’re gonna start out with the demo of the NG client for mobile devices and following that, we’ll look at how an application like this can kind of be built using Servoy. Also look at how to integrate some of the hardware elements of a device such as a camera or a GPS. And we’ll do a little bit of an overview of phone gap and some business use cases. So with that said, let’s start the demo. Okay, so for this webinar, I’m gonna be presenting using an Android emulator. For those who aren’t really familiar with this, it’s just a tool that’s gonna emulate an Android device. In this case, it’s gonna be emulating a Google Nexus smartphone. That being said, the app that I’m gonna be demoing, it can also be ran on IOS devices as well as other types of platforms. One other thing you’ll notice is that I’m running Servoy developer in the background. Not because I’m using its built-in application server to preview this app. Alright, so I’ve started running the application. Alright, and click get started. So as you notice, it opens just like it, the other mobile application. There’s a couple of modules here. Some examples I’m gonna be previewing. You’ll notice that there’s some table components and some charts. And both, and these are now mobile responsive, so it will work well in the mobile. And now let’s take a quick look at some of the other examples that take advantage of the devices native hardware. So in this case, the media files. So in this example, we’re gonna be using the Android OS file system or say, can or connect the camera, so you get some images and display them. So when I click load image, I’m gonna be using the built-in file system of Android. This is the default file manager and here I have preloaded some images and we can actually click on it. If I click on it, it’s gonna utilize that image on the app and it’s gonna display it for us. Of course, you can also use the devices built-in camera to take it to take an image. Now, since I’m using an emulator, it’s not gonna work right. There’s no actual camera connected to it, so you can try this on a real device and it’s gonna actually use the camera and you can take a picture and you can upload it to the app as well. The other example that uses native hardware is in this case GPS, it’s the location module. Since we’re on an emulator, I’m gonna try to set up some special some default locations set up by default. So here I’m gonna just click play and as the GPS coordinates are updated and changing, you can also see that there’s a visual change in the application as well. And this is using the Google Maps component to allow this to be able to use the app. All right, so that’s pretty much it for the application. There’s only a couple of examples, but we’re still adding more to this solution. So let’s just take a quick look at the developer and how we can do this, right? So let’s start by looking at the home. So you’ll notice right away that this is just a regular form and Servoy. Using a navigation bar that can be get gotten from our packages manager. And if we go into the home page, you also notice that this is just a regular form. It’s one of our responsive forms. Let me actually try this real quick. Kind of prove that we’re actually running locally. I’m gonna try to change some texture. You can see that it actually update quite easily and you get a live preview of sorts. Here’s an add-on-low-exclamation point to see that the application is updated. So next we’ll go over some of the examples. Here’s a responsive form. Simple to do in Servoy. This responsive form has two rows, each with a column. And for the car-based items you see here, it’s just using some CSS to get that visual looking field. The table components, I’m using one of the default available components in Servoy. This is a high performance table module. And for the charts we’re using a chart.js library. Here you can see that there’s tabs here and here’s the form. All right, so let’s look at something a little bit more interesting. We talked a little bit about how to connect to the native Android’s file system to get some images. So how do we actually do that on Servoy? So simple, we use a web service that allows us to talk directly to the phone gap plugins. And let’s take a look at how that’s done. So here we have a get-picture function, which is tied to one of the buttons on the image form. And we’re going to call a web service here, call scyphone get-camera. And we’ll call one of the functions called get-picture. And here if I’m going to be using the camera, I’ll pass in some optional parameters, one of which take the signals that hey, we’ll be using the camera versus the file system. There’s also a callback that we can get access to. And here’s the callback. If we get a picture from the file system successfully, then we’re going to update our single element with some new base 64 string. And that’s going to help us display the image. For our locations example, you’ll notice that it’s also just a basic form has one single element that takes up the pull width and height. The page and that element is just a Google Maps component. So for this guy, I’m running a function on show called get-location. Here I’m also calling a web service using scyphone gap location. I’m going to be watching the position of the device. And this function, what it does is that it allows us to keep track of the GPS position as the device moves or the location changes. We’ll be able to call a callback function. In this case, it’s going to be called get-location success. And as the position returned to us is valid, then I’m going to update my single element, the map component with the new coordinates. That’s your magnitude. Yeah, and that’s pretty much it. So I guess one of the questions is how do we get access to some of these components, services, and for those who don’t know already, sort of what comes with a built-in web package manager. I’m going to just preview this real quick. So all the components I showed today, the chart, Google Maps, the table components, they’re all within this right here, this view, you can just add them directly. And the phone gap services that allow you to take advantage of the native hardware is part of our NG services tab. Here it is, phone gap. Now one thing to note is that this service is still in beta. We put an example out there, and so there’s tons of plugins for phone gap that are available. I only preview two of them, right? But of course there’s a lot more out there, and we discussed more about that in a little bit. But that concludes the demo portion of this. Go back to the presentation. So, on, I have a question. Well, you’re… Yeah. So in the demo, when you were getting the location, that’s getting the built-in GPS from the phone, Correct. Yes. And that one. Just to serve, that’s just a Servoy method there. You have a fancy dark theme. So I wonder if the audience might think that that’s some other IDE that has to do with Android or something. You’re just writing plain Servoy code here? Yes, exactly. Just plain Servoy code. And you can pull the… You can tell the camera to take a picture and get the picture back, or you can ask it for the current GPS position at any time. Correct. Yep. Okay. Wow. Exactly. Thanks. All right. Yeah. So that was just an NG client solution. Obviously, it’s web-based. So the one thing about a phone gap is that this is what it allows, right? For those who aren’t, you don’t know about a Apache Cordova or Adobe Phone Gap, it’s the technology that allows us to create hybrid applications, right? Using web technologies. The great part about this is that it allows us to make a hardware using some of its plugins, and you can access those hardware using device APIs. This little image below here, you can kind of see how this might be done. There’s a phone gap container, and within that container, you can wrap around an eye frame of sorts. And if you already have a mobile application built, you can actually pass in the app URL and it’ll load it directly on there. The great part about this is that it’s also multi-platform, so you just have to build your mobile application once, and using plugins and device APIs, you can have it be accessible on different platforms, IOs, Android, Windows, etc. All right, so some of the use cases I showed, right, being able to track location and show me information based on where users device is located. I think this is great at each year, because if you’re traveling salesmen, you might be moving to different locations, and you could have an application show you different customers or different prospects, depending on where you’re located. And that could be a pretty cool use case. The one that the other item is being able to talk to a connected hardware, things like square card reader, Bluetooth devices, keyboards, name it, you can do that if they are plugins available. And of course, being able to access the file system, uploading, downloading files directly to and from a device. And one other thing I thought was kind of cool is they also have the ability to use fingerprint or touch ID, right, you’re using iPhone. And I think the cool use case model, this is just increased the security, and the convenience of an application. So, the opening application, you might be kind of open something, secure function, and now you don’t have to enter a pin anymore, you could just use your fingerprint, right? And you can’t really do that with just an airplane web application. You need some kind of API to talk to those that are where. Yeah, and of course, there’s a lot more. I just listed a few examples here and sure you can come up with some of yourself as well. The service that we presented is called SUI Phone Gap, web service. Basically, it’s just a bridge to connect Servoy to phone gaps native plugins. This is still in development, and so we only have a few modules right now. You can easily make your own module, not very hard to do. The source code for this is on GitHub, as well as the sample you saw today. So, I’m actually going to open up that link and just kind of show you what it looks like if you were to go to our GitHub site. Let’s take a look at that. What you get access to. Here’s the mobile sample, and you’ll notice that the wiki, you can actually get information on how to build your own version of this, or it just helped you get started with building your own mobile application. It has all the information on how to set it up using a Servoy developer and phone gaps. The other thing is that that’s where a phone gap is also available on GitHub. And here we also have a lot of documentation for it. Like I said, there’s only three modules right now. There’s a little getting started guide, how to set it up, and all the APIs and information and how to call these functions are also available here. Lastly, the demo I presented today is actually available on the Play Store as well. So, if you’re lazy and you don’t want to build it right away and you have an Android device, you can actually go to this link below and try downloading it directly to your phone and play around with it. So, that pretty much concludes my presentation. Okay, any questions, John? Yeah, we have a few questions coming in. One person asks, is this a different client type? Is this a new kind of client? No, it is not. Let me show you what I’m actually doing. So, this is the regular Servoy developer. I run it here. You’ll notice that it’s just a regular ng client local host. And if I’ve designed it so that it works well on mobile devices, it won’t look well on the desktop, obviously. Look a little funky. But if you’re using it in a mobile view, it will look pretty, it will look okay. So, this is a web app, right? That I’ve wrapped around phone gap underneath phone gap. And however, none of the hardware features are going to work. So, if I were to try and screen a little bit, try and upload an image, it won’t work, right? Because camera is no camera for the web, but using phone gap, you can get access to those hardware. So, yeah, this is a regular Servoy application, ng client. Okay. We have another question that says, is the app server running on the phone? What about resources? Data broadcast? We get all of that. It’s running locally right now. Servoy developer comes with a built-in application server. So, data broadcasting resources, all that is handled by Servoy developer. It’s not even the application doesn’t do any of that. But what about the deployed application? So, the one that you put in the app store, is that also, I think the question is, is that installing also somehow the app server on the phone? And is that then mean you have to have? The app server is deployed in a separate location, it’s a separate server. So, you’ll deploy just like any other ng client application. Okay, so it’s still a pure web application when you deploy it. It talks the same way to the server as the ng client. Exactly. Did you have to write any Android slash iOS? That’s the great part about this. I do not have to write any of that. No objective C, no Java, just regular old Servoy functions and forms. Okay, that’s good to know. And some of these you already answered. And we have some other comments that just say really cool app. Oh, all right. Thanks. Okay. Yeah, well, if you have any more questions, you can go to the forum where we keep a running thread. And also some of the links that Duon shared, including where all the wiki documentation is on those GitHub projects. And if you want to rewatch this webinar because you found it so inspiring, you can go to the tech series homepage. If you want to bring up your slide with useful links, Duon, we could just post those one last time as we close up the webinar here. Yeah, so those are those are the places where you can find more info about this and other webinars. Okay, well, thanks very much to my guest speaker. It was a nice break for me to be on the other side and to listen and ask questions, really cool stuff. And stay tuned. We do this every two weeks. We don’t have an announcement yet for two weeks from now, but there will be a webinar and it will be informative and fun and cool. So thanks everyone. Have a good rest of your week. All right. Thanks, everybody.

Close