 So the image stream has been a bunch of action cards, it makes a bunch of watches, a hash, a particular stack, a chain, which it will take on to. So it's part of the program. It's actually part of the, it's part of OpenChimp. It's part of OpenChimp. Yeah, it's a platform. So this one is something that should be used. This joint will be used. It's something that should be used regularly. It's something that should be used regularly. It's basically just part of it. It's basically just a polling type mechanism. It's built in August. You could build. You can do the same thing. I think you could do the Jenkins job. It could be done in a time shop. The question is, could you take that image stream change and kick off something in Jenkins when they don't remember what kind of work it might take? You know what I mean? It would probably just build automatically. Yeah, we have to look at that. It's all, it's all coming together. Yeah, I mean, where is, so it's something like on 3-0 or something, you know? I mean, like 4-0. OpenChimp. Oh, OpenChimp. Yeah, OpenChimp. He's looking to see where we hang out on 3-0. Yeah, so I'm on, I'm on some others, I'm trying to think. I'm like on a time, I can see that. There's a whole lot of different initiatives. Some of them are kind of like 4-0. Some of them are not. There's just so much. It's hard to figure out where. So many of you want to play. I'm just curious. Do you have time? I know. Can I see? Yeah. Now it's work. Yeah. I'm very pleased to welcome John Frisale that will speak about OpenShift and the mobile platform. Thank you. My name is John Frisale. I'm the chief architect with Red Hat Mobile. I was previously with a company called Feed Henry and we were acquired by Red Hat in October 2014. Been working with Feed Henry and in mobile technology since 2008. So quite a bit of background there. All at that time, apparently, if my t-shirt is to be believed, means I have mobile superpowers. Let's see if that's true today. You can find me on Twitter at John Frisale and on GitHub. GitHub.com slash John Frisale. So over the next 40 minutes, what I'm going to be talking to you about is using the Red Hat Mobile platform to build some mobile solutions. We're going to be looking at that in the context of pairing up Red Hat Mobile and OpenShift Online to deliver these solutions. So what we're looking at here is a... It's a little bit marketing-oriented of an architecture diagram, but basically it tells us that this mobile platform gives developers a set of features and functionality for building mobile applications. So you have facilities like Git hosting, Node.js source code, user identity management, analytics, hosted build farm. So that allows you to take your mobile source code and generate binaries automatically without having to install and run the tools locally. As well as that, as part of the platform, you have this embass, mobile backend as a service. And what that's for is for the mobile applications that are on your device. A mobile application on its own is not much good but doesn't have some backend connectivity, some systems to talk to. And the model that we promote is you have the mobile application talking to a single API server that acts as a gateway or a mediator and then from there into backend systems. And we look at that in quite a bit more detail over the next 40 minutes. We work on a premise of bring your own toolkit. So we're not prescriptive on how you develop your applications. If you're developing a native iOS app, you're obviously going to want and need to use Xcode for your local development. If you're developing Cordova hybrid apps, it's really up to yourself what editor you use. We do have a nice integration with JBDS that would probably be the recommended editor but you're free to use whatever you want. Sublime, Atom, IntelliJ, Vim, Emacs if you're inclined that way, not here to judge. So basically we make it as easy as possible for you to develop applications the way you want to. Try and stay out of the way and basically get involved where we can add value. The mobile platform is deployed as a hosted offering at the moment, so it's software as a service. You go to the URL, you sign up for an account and you use the hosted service in conjunction with OpenShift Online. We are working to make it available as an on-premise solution as well, so something that can be self-installed and that's being built on top of the next generation of OpenShift, OpenShift 3, using Docker and Kubernetes. So some of the key concepts we're going to talk about today. One is Embass. As I said, that's the mobile back end as a service. It's that piece running in the cloud that your mobile app communicates with. In this case, we're going to be using OpenShift to provide our embass. Another concept that we have that we'll be touching on is what we call an embass service. And this is a reusable piece of functionality within our platform. All of the back end systems in Node.js. And the embass service, it's a reusable microservice for encapsulating a specific piece of functionality that you might want to use again and again in different mobile projects or solutions. So, for example, a connector into a CMS system or a connector into an order database or connecting to external systems like Twilio or Google or Salesforce. Today we're going to be playing around with three embass services and we're going to be fronting them with an API server and we have a little application that we're going to be using. When we talk mobile, we tend to talk in terms of mobile projects or mobility projects rather than mobile apps because the app is just the front end of the system. It's the bit you see and feel and touch but without those back end layers mobile apps are pretty dead if they don't have any back end systems to connect to, they're not going to do very much. So when we talk about a project we talk about the mobile app we talk about an API server in the middle and we talk about these embass services behind the API server for connecting into your back end systems. So the demo app we're going to be playing around with today is an app that allows you to scan barcodes and look up data from a website called Search UPC. So we have a barcode scanner embedded in the application you scan a barcode it sends it to Search UPC and it gets the data back. Search UPC exposes its data via some of its information via a SOAP endpoint and then the response that comes back inside the SOAP endpoint is CSV. Nice. And what we want to return is JSON. So within this microservice we have we'll be receiving SOAP that's wrapped around CSV and we'll be transforming it into JSON to send it back to the client application. There's also the ability within Search UPC to see the last five searches that anyone that has used their service has done. Now that information is not available via their API it's only available on their main web page. So we have a piece of functionality in here that loads the web page loads it up in an in-memory browser in the cloud injects jQuery and then pulls out the recent searches again to be able to display them in the application. Now the app has no idea what's going on here because it's just talking to this guy who exposes a nice clean REST API for the functionality it needs and the nasty HTML scraping and SOAP parsing is all contained in that barcode microservice. So we have nice encapsulation we have that service doing just one or two things and doing them quite well. The other thing Search UPC returns is a URL of an image representing the product you just scanned and that's typically a link to something in Amazon because let's face it Amazon sell pretty much every product you can think of. So we also have this image microservice that will take the URL reach out to wherever the URL is pointing to get the data back stream it back either as base64 or as binary depending on what parameters you give it and then cache it for I think it's 10 seconds 40 seconds so that if a request for the same URL comes in again it serves a back out of cache and finally we have a dummy order service so this is just a very simple in memory it keeps a list of things that in the app you say oh I want to order one of them but the nice thing here is it has an API exposed. So if we wanted to take this and hook it up to a real world order processing system we can just replace the order microservice with one that connects into an actual system and so long as we keep the APIs the same this part and this part never know that we've switched out our order service for something else so it gives you real separation of concerns between the microservices that guy in the middle that's doing the mediation and the mobile app on device hasn't a clue what's going on he's nice and simple and dumb as dumb as possible because one of the things that you need to keep in mind with mobile is it's very different to deploying an update to a web application once people start downloading and installing your application you can't force them to upgrade so the more information you put in the client the more likelihood there is that you'll end up with bugs in your code in the client and you're having to try and push out updates you can't force people to take the updates and you end up with old buggy versions of your software on people's devices that you can't do anything about so if you move as much of your logic as you can to these two tiers and keep this as a very simple basically a UI rendering layer then most of your heavy lifting and most of your logic is back here meaning most of your bugs are back here and you can patch an update and redeploy this because they're just hosted web services so excuse me how this is represented in the actual platform is this screen here we'll be in now this screen quite a bit but we can see the same layout that we looked at on the previous slide you have the client you have this node API server in the middle acting as the mediator and you have the three microservices over here that are doing all of the heavy lifting so let's not do any more slides let's do some code so we have a version of the platform deployed that's hooked up to OpenShift you go to openshift.feedhenry.com you click request and invite before you do that you need to have an account on OpenShift Online it's a free account, it takes about two minutes to sign up for once you have your account on OpenShift Online you come back here you select request and invite you put in your details, your OpenShift email address and hit sign up you get an email with an invite link and then you'll be able to log into the system once you log into the system you'll land on this page here this is the main dashboard so from here we have kind of eight main functional areas a set of material and resources for getting started so tutorials, guides walkthroughs, videos, that kind of thing projects which is where as a developer you would spend quite a bit of your time this is where you lay out the architecture for your projects with what different types of clients you want are they native, are they hybrid, are they web applications that no JS API server in the middle and your microservices on the right hand side you have reporting and analytics to get information on usage of your applications, how many installs how many startups, how many API requests that kind of thing here's where you create those mobile microservices, the back end microservices link into documentation drag and drop apps is a set of functionality designed more for line of business users and developers so that allows people using a drag and drop system to drag fields onto a form so standard text fields and number fields mobile specific things like location capture, image capture signature capture and then without writing a line of code these line of business users click a button generate a mobile application and they can start replacing paper based systems it's pretty cool for non-technical people but it's not something we're going to really look at very much here today then we have an administration section where you can configure various pieces connectivity, security teams, collaborations that kind of thing so let's start by taking a quick look in here because a couple of things happen when you first sign into the system the first thing that happens is when you log into the system you're using your open shift credentials so the first thing we do when we get the login request we proxy that request to open shift and get them to verify your identity assuming that your username and password are correct we now have an active session on your behalf we use that to set up an SSH key pair and an OAuth token so that we can communicate with open shift on your behalf and deploy applications into open shift so in here under embass targets we can see that it created a target for us using my open shift username against open shift online and it's set up to environments so environments are there to allow you to have control of the life cycle of your development like you don't write code and just bang it straight into production well sometimes you do but normally you go through a kind of a dev test cycle so what we have here is a concept of environments to allow you to deploy your Node.js code and build your applications in different environments and move your mobile solutions through a life cycle so that you can continue to iterate on your development in your dev area and you're only deploying things that have been tested and verified to your production environment you have the option here under environments if you had a third stage or fourth stage in your life cycle flow you can add additional environments and hook them up to one or more of these embassies over an open shift under the settings area we can see the keys and the OAuth token excuse me that was created to allow connectivity revoking these tokens would prevent our platform from being able to talk to open shift and next time I try to do anything with open shift it will pop up a message saying we're no longer able to authenticate against open shift can you please put your username and password back in and we'll recreate these tokens so it self heals if the tokens expire or if they're revoked for some reason okay so back in projects as I said the application we're going to play with here is a barcode scanner application and this is the screen that we saw in the final slide of the presentation so we can see that we have a Cordova application here Node.js API server and three Node.js microservices within the client application we have a set of details about the application IDs access keys, git URLs so all of the applications that you create are backed by a git repository hosted within the platform so straight away it should start feeling like a fairly familiar workflow you get and you can start developing locally over here on the right hand side we have a preview of the application because it's a hybrid application means it uses mainly web technologies so we can preview it in the browser without actually having to install it on the device obviously this doesn't work for native iOS and native Android projects but for the hybrid applications the preview can be quite useful for just very quickly looking at the functionality I'm going to just pop this out for a minute as I said it's not a particularly pretty app I keep meaning to go back and do something with it and make it look less ugly but there you go so what we're seeing here is the list of five recent scans from search UPC over on the search UPC website we can see the same list if you click on one of the scans it shows your product details so within the mobile application we've implemented the same functionality now here's where this demo sorry got myself caught up here's where this can get a little bit interesting I have no idea what other people have been searching for so we've had a couple of occasions where we've clicked on something and it's been a little bit shall we say not suitable for work so disclaimer I don't know what's going to show up here I am not responsible for what shows up here so as we click on each of these what's happening is this client application is making an API call to that Node.js guy in the middle who in turn is mediating the call out to the barcode service to make that SOAP request and get the data back it then pulls the image URL out and it makes a call to the image service for version of the image back we build all of that up as a JSON object and send the whole thing back so we're getting everything we need back to the client in a single HTTP request along the way we strip out any data that comes back from search UPC that we don't want or need to keep the payload as small as possible going back into the client application so let's see what we get organic oils natural hair mask not bad a handsome dude oh no sorry it's the jacket it's not the guy another dude with half a head and a dude with no upper body okay they weren't too bad so let's look at actually getting this as an application on our devices and maybe have a little bit of fun with it so we're just going to quickly run down through the functionality on the left hand side here documentation area that just allows you to provide information about the application say for developers coming along behind you what kind of frameworks it uses maybe some structure, a code just useful information this is basically a readme file in fact it is your readme file in the root of your repo so the kinds of information you'd normally put in a readme file are the things that will show up here there's a live editor we're just handy for making small quick typo corrections or very minor modifications you can open your various source code files and make changes and see those updates are reflecting your preview but this is not really intended for actually writing your application because let's be honest if you had to try and use a tiny web based editor this size you go crazy fairly quickly so the majority of your development is going to be done locally and we'll get on to that in a minute we have some analytics information there's not going to be a lot here because yeah the app hasn't been used in quite a while configuration section integration of push notifications we need to enable push with various keys and credentials and then the fun part building the application getting an actual APK that we can install on device so in the OpenShift Online version Android is the only platform that we support through the BuildFarm in the full enterprise offering it supports Android, iOS and Windows Phone so we're going to build off master you can specify a branch, a tag or a commit that you want to build from we're going to build a debug application because in Android they're really simple to build you don't have to set up any keys you don't have to do anything you can literally just click build that we are talking to the barcode cloud app that's the guy in the middle it is possible to have more than one of them which is why there's an option here to select which one you want so if you have an Android device there will be a QR code appearing in just a minute if you want to install my lovely ugly looking app so what's happening here at the moment is it's taking the source code it's sending across to a hosted Linux machine that has the Android build tools installed because this is a Cordova application it's doing the Cordova bundling and packaging that's needed to add the Android platform to it and then it's invoking the standard build tools giving it all of that information plus any credentials and search that were sent across generates an APK and gives us back a link to it this can take just a minute so I will talk quite slowly wait for this to happen anyone know any good jokes no ok while we're waiting for that a couple of other it always starts out to me as soon as I go to move off ok there we go if anyone does have a QR code reader let me just make that a little bit bigger so if anyone has a QR reader and they want to take a snap of that and install the application I see a couple of phones out so I'll just step out of the way for a minute we can come back to that if people didn't get it there's also a short link there and you can download the APK directly onto your machine and install it over USB ok so with the application installed what do we get ok let's try that again hmm this worked perfectly earlier on sorry about this folks sorry yeah this is not going to work basically I was just going to demonstrate real time scanning an actual barcode and seeing the whole flow through but live demos being what they are that's not going to happen bigger pardon I could try doing that ok that's not going to work right let's try that no the Cordova actually yeah so the barcode scanning functionality is a Cordova plugin which has a layer of native code for interacting with your camera and device and overlaying the barcode scanner piece which means that it won't work in the browser because it doesn't have the native OS bit underneath this exact demo yeah I don't have Chrome remote debugging setup ok it's not going to play ball let us move on because we're fast running out of time ok I want to talk a little bit about local development so we've had a bit of a look around the the app studio at the various bits and pieces of functionality but in terms of actually building out these mobile solutions as I said you're not going to be doing it from the web browser so we have a command tool called FHC that I try to update about an hour before the presentation and it uninstalled the old version and then just failed I think it was because of the internet so I'm going to very quickly see if I can install it again basically what FHC does is it gives you a command line version of all of the functionality that is available through the graphical UI so this is very useful for developers for kind of standard development flow you don't want to be going back to a UI and click click clicking it's a lot easier and quicker once you're familiar with the syntax of the commands to use the command line to use the command line version of the UI it's written in Node.js itself you may be sensing a theme here we quite like Node.js and what that also means is you can include it as a library and you can integrate it into a CICD process and automate nightly builds of mobile applications deploys of your cloud code automatically run tests on your mobile device there's a lot of very powerful functionality that you can get to when you have the FHC command available as a library so let's take a look at a couple of examples so we want to see what projects we have so we say FHC projects and we get nothing God I love live demos spelled it right it would help so we've basically with the FHC target command we've told it to target the same URL as we're using here for our web browser I was already logged in so it didn't prompt me to authenticate again and then it gives us a list of our tree projects in the same way as we can see a list of tree projects here we can then if we want to get a list of the apps within the project so we can see we have our client and our Node.js cloud code we have a link to our Git URL to download the applications and start local development so I already have cloned the applications and so the client application the guy in the middle and the tree services I have them all cloned and open in Adam here so just want to quickly take a look at a little bit of the code that I was talking about earlier on so the micro service for interacting with search UPC is here can people see that font size okay do you want a bigger bit more okay so this is the entire implementation of the get me a list of the recent barcodes and what we're doing here I'll try and stand up without ripping my microphone off and I want to play with the stick so okay so we're making a HTTP request to search UPC.com just a standard get request when we get the response body back well when we get the response we check to see was there an error I think the last time I did this presentation I was working through this and it just would not work regardless of what I did I thought I'd introduced a bog I was trying and trying and trying eventually I went to the search UPC site and it was down which is why I went to it so early this time to make sure it was working so once we get a successful HTML response back we use a node module called JS DOM and we load in jQuery into the HTML response the site doesn't have jQuery in it by default we inject jQuery because the jQuery selectors are just so damn powerful it makes it really easy so having just viewed the source of the web page I could see that the five search results were in an element with an idea of current searches and each one of them was a link so a small little iterator to link over each of the children and pull out the actual URL of the link and then we return that as a JSON object and there we have a nice clean API screen scraping in about 25 lines of code similarly for the read endpoint in this case we're using the Soap endpoint so we're using another node module here called Soap we're creating a Soap client we are calling the getProducts function exposed from the the wisdom we get our response back and then we import the results which is the bit that they send back as CSV which is quite disgusting we use yet another sorry that was accidental we use another node module called CSV to parse the CSV results and turn it into a JSON response and then send that back so again in 25 lines of code we're integrating with Soap endpoint we're pulling out a CSV response transforming it to JSON and sending back a nice clean API so similarly then the image screen service is even simpler so all in including boilerplate it's 31 lines of code don't use it at all so we get in a URL and a Boolean to say whether or not we want our image base64 encoded if we do want our image base64 encoded we get the we make a request for the URL we pipe it through a stream encoder and pipe it out the far side and that's one of the really nice things about Node.js is it's support for streaming so you're not buffering large amounts of data in memory you set up streams, you pipe things through as many different streams as you need for transformations pipe it out the far side and it's literally just a chunk that it has in memory as it's streaming it through so it gives you a very nice small memory footprint and all of that then is fronted by that cloud app that we talked about that exposes the set of APIs that we need as a barcode API and an orders API for getting the barcode stuff a little bit more involved here we're caching the information for the recent searches for 10 seconds getting search UPC all of the time so first thing we do is check to see if we have anything in the cache for the recent searches if we do have anything in the cache we return it straight away down here if we don't have anything in the cache we make a call out to the barcode service saying we want to call the recent endpoint and we get our results back stick it into the cache and return it for the read endpoint similar idea if it's in cache we use it if it's not in cache we call the read endpoint we get the information back from the search UPC site we rip out the bits that we're not interested in to reduce the payload size and we somewhere here I've lost it if we've been given an image URL we call the image service we stream the image back to us as base64 stick that into the response and back it goes so that's a pretty quick trot through the kind of high level functionality of the platform and a little bit of a look at the implementation of some of the microservices that we use to achieve this functionality two minutes out so I'm going to throw it open to any questions if anyone has anything they'd like to ask yes we have support for native apps so within the project here you can add so we have Cordova apps we have web applications we have native android we have native android using the Gradle build system native iOS native windows phone there should be native iOS using coca pods as well and then some templates using some of the popular html frameworks like ionic, angular and backbone so it was quite a selection of getting started templates that covered pretty much all of the bases it has been discussed quite a bit I think probably ultimately yes simply due to the number of times we've been asked that question doing the iOS one sorry James go ahead now I have two sticks okay I think we're out of time just one final thing before I let you go we do have a workshop on today in room A112 from 430 to 650 so if you're interested in learning a little bit more and actually having a play around with the system Lucash fridge one of my colleagues will be running the workshop we'll be there and some of the other red out mobile folks will be there so if you want to come have a chat with us or try out the system yourself that is when and where you can do it thank you very much that's okay I didn't know to not hit the screen sorry about that okay so this is how loud see it's very loud I'll try to talk a little quieter and if it starts to hurt your ears start making this exactly start doing that is it already like that do you already feel that way do I believe you should I believe you what country are you from this one I know Marik I don't trust you