Servoy Tech Webinar #62: Update- Mobile Application Development – We Showcase Some Client Apps!
Servoy Tech Webinar #62: Update- Mobile Application Development – We Showcase Some Client Apps!
Welcome everybody to today’s webinar and today I will be joined by Twan. Twan. Good morning how are you doing? Hey good morning god. Doing well. I’m doing fantastic. Let me see if I can share my screen so we can get that out of our way as a starting point. I always forget with the Google slides where the button is. I just clicked a few minutes. Is my slide visible on your end one? Yeah it looks like it. Mobile app development I see it up. Okay excellent. All right again welcome everybody and good morning afternoon or welcome to yet another webinar today. Twan is going to be presenting because Shahn is taking a week off. He is actually his birthday today in case you speak to him. Unlike myself he is a very smart guy and he takes off on his birthday. So that’s always a very smart thing to do. If you do have any questions during the webinar then feel free to post them in the questions channel. I’m guessing there will be quite a few questions. As mobile app development covers quite a bit. And today we are going to really focus on showing actual examples. There will be a little bit of code because hey this is a tech webinar. We are showing how things are done. This will also be referring back to the previous mobile app development webinar which you can find on the archive pages. So feel free if you need a basic overview of how to build and compile to native to go back to that archive. But perhaps Twan will be touching on that briefly as well. So today webinar number 62 mobile application development and really looking at a couple of real life examples. So this will also give you a pretty good feel of what kind of applications other companies are building out there. So we are going to be looking at three real applications that are being deployed to customers. And as you can imagine there are a few hundred applications today that are being deployed to users. Typically business applications, extensions to business applications. But in some cases even consumer applications unlike what SIT is doing. They have built a mobile banking application using a Servoy that can be used both on iPad. On tablets, so not only iPad but also Android devices. And on mobile phones, iPhone and Android are fully supported by mobile a Servoy. So we will be diving into some real life applications. And of course, if at any point in time you ask yourself how is this done? Sir, can I do this myself and feel free to post it on the questions channel. And we will make sure to get to all of your questions today. We may have only some technical challenges because Twan is going to present a couple of these applications from his mobile phone. And we haven’t done that before. So bear with us as we hopefully will be able to fight those technical challenges as we go along. Alright, so let’s start with the Royal Four. Twan, do you want to start with the actual demo or do you want to talk about SIT first? Let’s just go through it briefly. I’m actually not going to demo this particular item. But let me just, I think there’s a screenshot of it at least that you can pull up. Let me one moment here. Yes, there you go. Yep, so just a little bit of background on Royal Four. They’ve been working with us and they provide warehouse management software. So one of the applications they’ve made is this doc scheduler application. And what it does is it allows mail carriers or other agents to request appointments and to help them deliver or pick up goods from the warehouse. So they be able to easily change and see the specific appointments and receive push notifications of things change. This was deployed and for both Android and iOS, I believe. So inside from this, there’s also another application that’s starting work on that’s more to help them manage warehouse related systems to few slides down. And as you can see this, everything is done with responsive designs. It’s a very complex application with, you know, tons of functionality. And also using lots of the built in components from Sir boy that that comes out of the box ready, such as the signature that you see there and camera web cam integration. So that’s real for an I don’t have a demo per se for them. I will demo. S IT, however, that’s. I think a few slides later. I can just pull to that one. All right. I guess maybe at this point you could also make me present your two. Okay. And are you okay and that’s on your robot device right. Let’s see here. Oh, yeah. Oh, sorry. PICUS. Yes, yes. Let’s do the mobile one first. Yep. All right. So, yes. So this application, a PICUS is comes from innovative software solutions. They provide greenhouse horticulture production software. Now they’ve worked with us to create their next generation mobile app that and this is going to help their customers be more productive in the field. Maybe no, we will do things like data entry, help them manage drivers, deliveries and confirmation of inventory, things like that. And today I’m going to share some of the functions they built. And some of these also integrate with the hardware device. And since it’s, you know, mobile sub so I said it. I’m going to demo it from my phone. So let’s start with this first function. I’m going to go down to data collection. And schedule notes. Now, as you can see, it’s very fluid, it’s quick. And what they’ve done here with this page is they’ve integrated a barcode scanner directly into the device. So I’m going to try to use it to scan something. I don’t know if you’ll be able to see this, but let me know once it goes up. Yeah, we can, we can see the camera and we can see a barcode coming up. Okay, good. So this is actually I’m looking at my computer screen right now on and I’m, I’m going to raise it up to the barcode. And as you can see, detects a barcode and it picks up the value, right. And it then inputs it back to the field. And I think a couple other items on here that are kind of cool is that you can actually choose from a gallery. Of images that you want to post. Say I want to grab this, a picture of my mouse for whatever reason. I can upload it. And it’s there on the app. And I can also remove it or use my built in camera to take a picture as well. So. All right, so I’m actually going to try to plug in a real barcode number here. So bear with me. So for barcode, do you typically use camera or would you also be able to use like a laser scanner if you had an android device with a built on laser scanner? That’s a great question. It looks like this component, this barcode scanner uses the camera on the device. But yes, we can also certainly use laser type scanners as well. Cool. That’s pretty cool. All right, so my mouse. I’m just now. Finish that note and now it’s done. Okay, so that’s one, you know, small function that shows barcode scanning. This application has tons of features. I’m just going to try to demo a few of them that are related to hardware integration. The other demo I wanted to do was on the driver’s side. And let me just. click filter here. So this shows all the deliveries that are in progress are not yet opened. Yeah, for particular greenhouse. I’m going to open this one and walk us through the process for one of these. So this would be given to a delivery man and he’s going to start his delivery. You’ll notice that the application allows us to see the address for number all that information. What I’m going to do is I’m going to click on this little map icon here. And you can see that it opens up the Google Maps. And then I can add the driver start going through the routes and driving to my location. I’m going to hit start delivery to do that. And. And once I get to my location. Likely I’ll, you know, I want to sign. And confirm that I’ve delivered my goods. Right, so here’s a little. Confirmation and I’m going to sign. All right. Except. And now who do we actually PDF that was being displayed. It looks like it. Yes. It’s like a generated report or PDF and allows you to sign. It’s a custom component. It looks like. But very cool. Yeah. All right. And I received it. Okay. Sure. All right. So this just confirms that I. I finished my confirmation confirmed. And this is obviously a demo app. So some of the status fees. Are going to be exact. But we can also see that in this detail, we get a nice list of you for what we’ve delivered. So, you know, we’re going to see that. Yeah. All right. Well, that is really it for this particular demo. Both of the two main integrations I wanted to show. The camera functionality bar code and. You know, signatures. Signing. So I’m going to close this one. And any questions so far. Yeah. You like what you see. Well, that is. Very impressive what what innovative software solutions have been building. It’s. Pretty broad and rich application with. With hardware integration that they have there. Cool. So you want to switch to the desktop now to. To continue that end. Yeah. Let’s do that. I’m going to quickly open up the other demo. Yeah. See. My making me. Yep. Presenter. I’m going to. Show my screen. Let me know once you see my screen. Yeah, your screen is surfaceable. We’re looking at portfolio plus on your screen. So this is I guess on a tablet simulator that you’re showing up. Yes. It’s a tablet and mobile simulator. So this application comes from strategic information technology. And they’ve partnered with us to create their next generation mobile banking product. Call portfolio plus. So the app itself includes lots of features that will help users manage their. Counts, reach out account investments deposits loans, et cetera. So it was built in a responsive. With their response of UX in mind. And so it will actually shrink down in size. Right. I make the screen smaller. And or make it bigger. You can see more. Right. And what I think is pretty cool about this application is they are using a. A single code base for both a compiled native application that can go to. iOS devices and to Android. And they’re using the very same code base to deploy it as a web browser based application for people connecting with their with their browsers. This really saves a lot of. Development time that yeah, you can use a single code base if you build responsive. That can be deployed both to not only browsers but also as native compiled applications. Yep, absolutely. And you can connect to this this application from the browser from tablets, iPhones, et cetera. For the demo, I’m going to show just a few things. You know, this is a typical account landing screen. Look at some accounts. And. Let’s see. All right, I think we’ve ran into our first little snag here. I can’t tell a bit. Open up another screen. All right. Let’s try this. There we go. All right, and this is just a sample account so we don’t actually see any user information but. Typical what you can see in an application like this list of accounts. We can filter data. You can filter. Let’s turn the limits. Or you can do a custom filter, right? And you can actually see a custom date period. Want to do that. You also have the ability to print or export it CSV and. You’ll get a nice report. I was also nice about this application is that they are reusing and existing. Banking applications, so imagine this in the back office. There is a banking application that has been running for many, many years. It has proven technology that is very solid. But really needed a more modern. Application and user interface. And with the Servoy, SIT was able to build in a pretty short time frame. A very modern user experience that for every bank is customized. So every bank has a different look and feel as you can imagine their own logos. Their own colors. So this is multi multi bank. Any bank can use this software. And run it. There’s a couple of short questions coming into one that I think I should handle right now. To actually are pretty similar one is from Ming Zu Zao. And these questions are all the apps you show built in the Servoy platform. And the answer is yes. So everything you’re seeing here is 100% built in in in Servoy in ng client. And ng client allows you to deploy both to a browser. And also to compile to a native iOS and Android application. So it’s up to you and your end users. How you deploy the application. All right back to you. No, I think yeah, make very good point. You can build once and get a lot of benefits from it. The thing I like about this application is that most did not all the components. Or all come out of the box, meaning they didn’t have to do too much custom work. Aside from styling and the colors for each of the customers. Right. So built very nicely and it’s architecture is great. I didn’t have much more to show for this for this demo. I mean obviously you can see that you can also do a lot of things. The question of addresses. Typical things you might see in application like this. Let me see there’s something else. And of course you can do the typical transfer of accounts. Things like that. I won’t share that piece. I think we’re actually pretty good with this demo. I’m Jan. Okay, you can move on. And then yeah, let’s dive into the last one, which is one that all of you can download. So with the Servoy mobile demo, all of you can actually go to. Do you want me to show that on the slides? Tawn or are you going to dive into the demo as well? I think I can dive this one into my phone. So I do have it on my device. So if you make the mobile phone presenter one more time. Okay. Yeah. So the, and perhaps Tawn, you can also show a little bit of code after that. Because this after all is a tech webinar. The, we shipped with a native mobile example on, on GitHub and we’ll point you to where you can download this code. So that you can see under the hood how to build these kind of applications. And you can use it as a starting point for your, your own applications and build a pretty cool mobile applications with hardware integration, location integration, fingerprint integration, push notifications. It’s all demonstrated in this, in this mobile app. And I think we also ship it as a compiled Android app, but not iOS. I think, Tawn, is that right? Yeah. Yes. It’s available on the Android place to at the moment. So you can actually download the app, a lot of installing anything. It’s a very developer and you can still run it. So. Yep. And if you wanted to do this for, for iOS and all you would have to do is compile it with your own certificate, as that is a requirement of, of Apple. So if, if your question is going to be, will this also run on iOS? Then the answer is, yes, all the stuff you see here runs on both Android and iOS. And for you as a server, I developer, that is going to be the same code base. And the same APIs to integrate with, with the hardware devices. Yeah. So, so this app is, is mostly a demo. We’ve gotten over this one, one other webinar in the past. And you can go back to the archives to look at that and see more of the code in general. Since then, we’ve added some new hardware integrations with fingerprint, you know, file system. And allowing you look at network information. Amongst other things, such as barcode scanner. But you don’t have on this app. And this one I can show you. So this is a file system example and I’m going to load from a file. You can see that it picks up the text. If we quit this application and go to the file manager. I can actually show you on my file system. But this is located. Yeah. So here we can see that it created a test file and I can actually open it up. And I can make some changes. Changes. I’m going to save this. I’m going to go back to the application. And I can load. So rather than do that, it actually integrates directly with the file system on the device. And you can load files, make changes to files, etc. I did for a very simple example right on a single notepad item or text item. But you can imagine doing this for, you know, more complex things. And then we have the standard media, which I already kind of demoed with the package. Integration with camera. Location. You can pick up where you are GPS. Get coordinates, things like that. Okay. Should we dive into the code of it? Yeah. Just to see where. Yeah. That would be pretty cool. Well, you will you fire up your code. Let me briefly finish. the slides. And then yeah, maybe showing one or two of those integration items, how you would actually write the code in a sort of way. And where to get started would be, it would be pretty cool. Yeah. So while you will you fire up, sir, for developer, I will, I will finish the slides to recap what we just saw. So the innovative software solutions application, very cool. And thanks. To that team for allowing us to show their application. A lot of functions in it, integrating with their with their enterprise application. That is, that is also browser based and built on Servoy. In their case on top of progress application and database, the Servoy also allows you to build and reuse progress business logic. We saw most of these screens, barcode integration as to on demo. There is camera integration, but if you want to go laser. So let’s say you have to do a lot of scanning. We also allow you to do laser type of integration. We briefly looked at portfolio plus from SIT. We built a great mobile banking application in just a few months. Reusing an existing banking, very solid banking platform. They already have with a nice and modern native iOS and Android and tablet application. That is, that is pretty extensive and deployed and used by multiple banks. And we also briefly looked at the mobile application of which. TON is going to show how to get to it and how you can start building mobile applications. Today in in in Servoy. So let me go back here and make TON the presenter again. Let’s see here. If I get the right tab to do that. Okay, there you go TON. All right, thanks, yeah. Let me just show my screen. So if you guys have not seen our GitHub repository, I’m just showing a little. Link to it. This is where the code lives for that application that we just last demoed. So SFI mobile. Under the Servoy. Link here. And what I just did was I cloned the source code and I’m firing up a Servoy to go for right. Now we’re going to look at how to import that code and view it. So I’m going to do that on the fly. So. And this was. Cool. So you just go to that GitHub. You download that as an archive and then you. You import the solution. Yep, important solution. And now I have the solution. I’m just gonna launch it. So this is a little bit more in-depth look at the code. And you can see all the forms that I created. Um. Think of print examples. So we’ll look at the file system example. I think that’s new. And I’ll look at also the file system one. I’ll open both of those. So if you look at the fingerprint example. The format is fairly simple. There’s a check authentication button to check if authentication is available. And a show authentication to show the fingerprint. Um. So we’ll look at both. I clicked in the wrong one. See. Is available. So to check if it’s available. We can call our built in plug-in service. The phone gap fingerprint. This package comes built in with Servoy. It’s an extra package that you can install. Another Servoy package manager. And once you have it, you have access to this API. You can call this method. Is available. Right. And if it’s available, it’s going to return. I’ll back. That says success message. Otherwise, if it’s a failure, then you know you don’t have fingerprint. Hardware. So you won’t be able to use it. If you do have it, then you can. Of course, show the authentication. Use the secret password and ID. And show the configuration message. And once you show it, if they. have successfully authenticated with their finger, you’ll get an authentication success callback. And the threat where we print out the message. Is successfully authenticated. Or you failed. Right. So that’s as simple as that. For fingerprint. And for the file system. Let me just open up the form as well. It’s just a few fields that you have made the path in the file name. And you can enter the contents of the file. Whatever you want to place in there. Then there’s a load of save button. So if we look at the load and save. Start with the load. We’re able to get at a particular. Directory. In this case, I put in a check for both Ios and. Android. And if it’s not Android, we use a particular documents directory. And this is specified under the. Plug in documentation. So we’ll know where to pick up the file from. What the file name is. The directory. And there’s a read callback and a read error. So if we’re able to load correctly, it will execute our call back. And it’ll update the file content. Which is the field right here. With whatever we find in that file. Right. Whatever data we have. The other method is to save. And again, we’re going to go to the documents directory. And look to see that file exists. I’m sorry. If we want to write to it. So we just need the file name, the directory and the content. Right. Which whatever you’ve placed in that field. And those are the really the main two calls. Right to file and read from file. There was one other new item, which is the network plug in that. I didn’t think I demoed. But. Oh, it does. It gives you IP address information on whatever network you’ve connected to. And that one is. Fairly simple. API as well. You can get carry IP. Or you can get Wi-Fi carrier and proxy information. So those are three API calls. And here, I’m just printing out the callbacks and placing those into a field. So a lot of this is dependent on a servoibreish to the phone gap. A wrapper. And like I mentioned, this can be gotten from our servoib package manager. I’ll just show developers how to do that. And it’s called phone gap. So here I have the package already installed. And if you haven’t installed one before, you can hit the little plus. And that’s it. That’s really all it takes. Much of the documentation for a phone gap can also be done here directly from our get help page. And I encourage developers to get there and take a look. For a wiki had documentation on how to set up things for the camera. Fingerprint. And it has more in-depth documentation on how to do some of these kind of calls. All right. That looks pretty useful. And it’s good that you point to the documentation. Yes, anybody wants to get started building mobile applications. This is a good place to start with the sample and the documentation on GitHub. And, uh, meanwhile, if you have any last minute questions, then make sure to post them right now. You now have the main servoibreish mobile guru in the room with, with Tuan presenting with us. A couple of questions coming in the tweet. Question from Minxow. Can you set a splash screen for your mobile app? Yes, you can. It might have shown really quick for the last demo. There was a splash screen. It was a bit orange kind of icon for servoibreish. But yes, the answer short answers. Yes. Cool. And Juan Carlos says, if package that I need for the exam solution is not installed, will we get a warning? Say that again. What, what warning? If a package that I need for the exam solution is not installed, will we get a warning? Yes. When you run it, it’s going to shout out to error at you. So if you did decide to download this particular solution, though, it should automatically. Install the phone gap package for you. So normally that wouldn’t happen. But yes, if you’re starting from scratch and you’re trying to use the APIs, it will give you an error message. Yes. So quantifically when you install a solution, the solution knows what packages it’s referring to and is actually download them automatically for you. So this is just a matter of clicking a few buttons. And again, guys, we encourage you to download these samples for yourself and try it the best way to learn in my opinion is by downloading the examples and getting started with it. A follow up question from Ming Zao is can you also set the icon of the application on your device? Yes, you can. That’s more on the phone gap wrap type, but you can certainly do that. Both pikest and strategic information, those demos for those applications, they have their own specific icons. Okay. And where can we find that documentation? Where do we begin? Great question. If you go back to the mobile page, there’s a wiki on it. And let me just bring you up to there. So the wiki includes a lot of information, but there’s also this little guide I put up. And within the guide, a walk you through a good chunk of the steps, but there’s also an app template zip in the guide that shows the structure of how you need to place your icons. And you can look at that for a more closer look. Okay. Cool. So the phone app guide is the place to start if you’re going to compile to a native iOS and or Android. And it will lead you step by step through those settings and provide you with the template. All right. With that, we’ve had most questions and times also up. Feel free if you, if any other questions pop up in your mind to head over to forum.suravoy.com and post any of those questions. Let me actually put up that I think we always end with a with a slide with those items. Let’s see if I have that. Let’s go back here and put that slide up while we end the presentation. Okay. All right. Yeah. So this, this last slide, three caps, what’s a plant just showed you can catch you want to read for your reference. So anything you can do in NG client, you can then also use on mobile devices, both Apple and Android based devices, business logic is in is in JavaScript just like you used to in in Servoy from a single code base. So you can do this, you can do hot code pushes to to mobile devices and the phone gap bridge allows you to go to the native hardware on your device and we went through the documentation of that already. Okay. Last one at least the links text series where you find the archive you will find this recording there shortly after today’s session.