 Hello developers, and welcome to Mobile Development with Jay Hipster, Ionic, and React Native. My name is Matt Rable, and I grew up in the backwoods of Montana with no electricity, no running water, and I had to walk two miles to the bus stop every day, and it felt like it was uphill both ways. I live in Denver, Colorado with my beautiful wife Trish, my two awesome kids, Abby and Jack. I also have a middle child, his name is Hefe, I bought him off eBay in 2004 and restored him over the next 12 years. Porsche engine, Porsche transmission, he really gets up and goes. I work for a company called Okta. Okta the word means a unit of cloud measurement, so if it's an eight Okta day, that means it's very cloudy. Zero Oktas means nice and sunny. So we're a cloud-based authentication and authorization company. We support OAuth 2, OpenID Connect, and SAML, so if you're looking for some way to authorize your users, look to us. So today I'll talk a little bit about J-Hipster, show you how to use it, show you how to build a progressive web application with it, and then I'll show you how to use Ionic for J-Hipster, and then I'll show you how to use J-Hipster Ignite, and at the end I'll tell you about what's coming with J-Hipster. So the first part, we'll be talking about what is J-Hipster, how to install and use it, how you can use J-Hipster to develop microservices and use OpenID Connect, and then progressive web applications with J-Hipster. So J-Hipster started as just a generator that creates Spring Boot and Angular Apps. Well now it's developed into much more, it's more of like a development platform now because we generate Docker files, we generate Kubernetes files, we allow you to create microservices, so there's all this other stuff that we do. Not only that, but we support React and Vue too. So J-Hipster's goals are to create a high performance, a robust Java stack on the server side with Spring Boot. It's a sleek, modern, mobile-first front-end with Angular and Bootstrap, obviously Angular, right, if you're using React, then that's not Angular, but Angular was our first one and we try to use Bootstrap for not only Vue but for React as well. We support a robust microservices architecture with J-Hipster registry based on Netflix Eureka and Elastic Stack and Docker. And then we have a powerful workflow to build your application with Webpack and Maven or Gradle. So basically you don't have to restart your app all the time, it'll just detect when things have changed and restart it for you. So how to use J-Hipster, npm install dash g, generator J-Hipster, then you'll create a directory and CD into it and then you'll just run J-Hipster. We also support microservices, so J-Hipster registry is your service registry, and then we also have a gateway on the front-end. There's also some examples that I have, J-Hipster's six demo is a quick blog post application that I created and that has a YouTube tutorial on how to create the whole thing in about 15 minutes. I also created a 21 points health application and 21 points health is something that I use to monitor my health, just like actuator monitors spring boots health. 21 points is basically you can get 21 points in a week and you can get three points a day. So you get a point if you eat well. For me it was low sugar, so I try not to eat sugar. Two if you exercise, you get a point. And the third one is if you don't drink, you get a point. You can get 21 points in a week and what I found is if I get above 18 points, typically I'll lose weight, feel really good. If I get 15 points, typically maintain and lower than that, not so good. And I've even come to the conclusion that if I get lower than 10, especially a couple weeks in a row, I usually get sick. So I stopped blaming it on my kids when I got sick and now I know it's my fault. So what we're going to do today is actually use that 21 points health system that I put together to create a new app and then we'll create our mobile apps based on that as well. So but first before we get to the demo, I want to mention progressive web apps real quick. Progressive web apps have to originate from a secure location, load while offline and reference a web app manifest. The web app manifest gives it details on how to install it, basically what page to load when it pops up on your mobile device and icons, things of that sort. Loading offline is done with service workers and so they can be installed, they look like native apps, distributed through the web and they're fast. So to enable a PWA and J-Hipster, after you generate your app, there's in the index.html this code that needs to be uncommitted. So now I'll do a demo of creating a J-Hipster app, generating entities in an app and convert the app to be a PWA and then I'll show you the lighthouse score afterwards. In MRABLE mobile J-Hipster, that's where all the code that I'm creating today resides and in here there's this demo.adoc file. I've loaded that up with my handy ASCII doctor plug in here. You can see if I toggle it off, it's just raw ASCII doc and if I toggle it back on it looks pretty nice and it shows that there's some prerequisites, Java 8, Node 10, Yarn and Cocoa Pods. So I don't have any versions on any of the MPM installs here and so if you try this in the future I can't guarantee it works, it should work but rather in locking down to a certain version these instructions just assume latest versions so everything. So you start by installing J-Hipster, which I've already done, MPM install, generator J-Hipster, create a new directory, make your mobile J-Hipster and then download this 21 points health JDL. JDL stands for J-Hipster Domain Language, that's how we know we're hip, we have our own domain language and you can see in here it's a monolith, it's going to use a base name of health points, it's going to use OAuth2 for authentication, cradle, plastic search, we're going to use React just for the heck of it just to show that whatever you have on the J-Hipster side doesn't affect what you have on the mobile side and then we have entities for points, blood pressure and weight. Blood pressure, just systolic, diastolic and the timestamp when you recorded it, the weight is just a timestamp in your weight and then the points, you get a point for exercising, you get a point for eating well, you get a point for alcohol, so I'm just using integers for those rather than Booleans because you could change your system someday and then preferences, your weekly goal and the weight units and then we have some enums in there and then relationships, one to one, preferences to user and then many to one for your blood pressure to user, your weight to user and your points to user, so they're all pointing to those users and then pagination rules at the bottom there, so back to our instructions, we'll create a back end directory and run import JDL from it and that'll basically create the whole app for us, so I've already done that just to speed things up a bit and you can see if we scroll back to the beginning here that I start with J-Hipster version and you'll see we're using the latest version at least as of today, 6.8.0 and then I run a WGet to get that 21 points.jh right there and take is a command that does make-dure and CDs into it, so it's kind of convenient. I created that back end directory, I ran J-Hipster import JDL, 21 points and then it goes through and creates everything for me, creates a whole bunch of Java files and a bunch of TypeScript files in the front end. It also creates database schema files, so when you start up your database, it creates a tables for you and it uses liquid base for that, so you can see it took one minute and 26 seconds to run, so I'm gonna put this on the right here, put this on the left and now I'm just gonna start it, alright, Gradle W. I'll have to start Keycloak first, so Docker compose, source main Docker keycloak up-d. We'll have a shortcut for it's J-H Keycloak up. So now everything's up and running and go ahead and open it up, through the login, it redirects us to Keycloak. Let me do admin admin, we're logged in, you can see there's our entities, blood pressure, and it uses Faker.js to create a bunch of fake data, so there is some data in there. Wait, we can go to the administration, see the metrics, timings for certain requests, and there's also health in here, and even swagger. So if you just want your front end developers to be able to see the swagger docs, you can certainly do that. And then of course, we could switch to Spanish there and back to English. There's on this page, points, if you were to create new points, you would see that you could enter any value. So I want to fix that and make it so we can actually just use checkboxes, right, you either did it or you didn't. So let's open up IntelliJ and make those changes. So now if we look for points, update TSX. So if we scroll into the code here, you'll see that we have these points, alcohol, points meals, and points exercise. So let's change those to checkboxes. So that was my live templates. Now it's checkboxes. Well, we've already built our app. So it's not actually going to see those changes. But we can use npm start, and then it'll use browser sync, load up the changes. And if we make any UI changes, it'll automatically refresh the browser and it'll proxy all the requests to the backend. So now you can see we're logged in. If we go to points, and create new point, you can see now you've got checkboxes, right? So today's been a good day. We'll go ahead and assign that to the admin user. You can save it, you can see it down at the bottom. And then you could delete it. So that's all working. Let's see anything else we need to do. Turning off faker. So I'm going to close down this one. And then I don't want to use faker because with the mobile apps, it shows so much data. It's kind of nicer just to have, you know, one record show up, and everything's a bit cleaner. So that's why I'm turning off faker. So if you go into source main resources, config application dev.yml and search for faker, you'll see it's one of the liquid base context. So you can just remove it. And then there won't be fake data that's entered. So you do need to remove it from build h2db because that's the database. And then if we restart it, then you'll have a version that doesn't have fake data in it. So I could continue and do the ionic and react native part of it. But let's go into the presentation real quick. So I didn't convert it to be a PWA. But I did it in a previous project. And so I can show you the score that it will get. But again, all you need to do is change that index.html file and actually comment out the service worker part. And then you need to run it with a prod profile. So it actually does the service worker copying into the final directory. So the test coverage is very good on j hipster project by default. You can see here we have 66% and down at the bottom there and zero bugs. So that's all looking pretty good. And then the lighthouse report on 680 when I started everything using prod and uncommitted that service worker, you can see 100 performance 100 accessibility, and it certifies as a progressable map. So looks pretty good. So part two ionic for j hipster. First of all, what is ionic? Well, ionic was created by the ionic company. So that's why they call it the ionic framework was one of those things where they started a project and a company that called them the same thing. And then they needed some distinction. So the on it framework is what people can use to develop PWAs or hybrid mobile apps using web technologies. It started out as just an AngularJS thing. And then they adopted Angular. And now they support react and view as well. So you can go to ionic framework to learn more about it. They also created stencil, which allows you to create web components. And then they also have a PWA toolkit. So they're definitely web focused. They're very into the web embracing the web and really great people that work there. So why would I want to create an ionic app when I can do a PWA? Well, I first created 21 points health for the J hipster mini book that I wrote. What I learned is it was very frustrating to use in the beginning because first of all, didn't even have to remember me. I had to log in each time that was a pain. And then just the transitions and the animations and kind of how it works just isn't quite as good as you get in a lot of native apps. So I want to develop the best user experience. And so native apps, you know, are painful but distribute, but sometimes they have a better experience. So that's why I wanted to explore ionic. I created the ionic module for J hipster, and you can install it. You have to install the ionic CLI as well because it uses that and then generator J hipster ionic and yeoman. That's yo. So yo create me on ionic app, right? You run it with yo J hipster dash ionic and then you'll profit. So in this demo, I'll create an app with ionic for J. That's what I like to call it in Java. There's log for J and there's other four J. So I thought it was kind of cute. We'll generate some entities in that app, the same entities that we have in the main J hipster app will modify the UI to be a bit friendlier. And then we'll run it on iOS. Alright, so I have it down here. I started it up beforehand. And you can see we scroll all the way to the top. I started by installing generator J hipster ionic ionic CLI and yeoman. And you'll see these are the versions I'm using. So I can't guarantee this will work if you're using other versions. But you know, this works today. And you run yo J hipster ionic and it goes ahead and prompts you for the name of your app and then where your J hipster back end is located. So since we just called it back in, that's what I did. And it reads from your J hipster configuration and knows, for instance, what authentication mechanism you're using either JWT or OAuth and then creates an app accordingly. So down here at the bottom, I can put this on the right now, we started by renaming health points to ionic, right, which I did right here, and then CD into it. And so now if I run ionic serve, we can see the app up and running. Now, if we were to log in, it redirected us to KeyClick, but it happened so fast, you didn't even notice. So if I were to say, doing an incognito window, and then maybe even down at the bottom here, turning this into an iPhone, you can see kind of more what it looks like. So localhost 8100, sign in redirected to KeyClick comes back and we're logged in, right. And then if we click on entities, we don't have any yet. So we can go here, close this one down since it's the same as this one over here. And we can do ionic for J, which is a shortcut to yo J hipster ionic and import J D L and those 21 points. Let's try J hipster ionic import J D L 21 points. Okay, so I don't know for J doesn't always work, but you know, the main one does. So that's good. It detects that we have some new files in there, recompiles everything. And so if we go to ionic here and sign in, you'll see there's all of our points. So we can see there's no blood pressures, right, because there isn't any on the back end. But if we were to go here and go into, let's say just the blood pressure, create a new one and say, you know, 120 over 70. This is for admin. We save it. We come back here, go to blood pressure. There it is, right. So you can see they're kind of talking to each other. So now if we want to make the same change where we go into points, and we make these into toggles, we have to do a bit of work. So we have to change the points update to use ion toggle, and then points update.ts to use Booleans. I'll open this up in IntelliJ, and then I'll find that points update.html. Close this one. And I said we had to change, right, these to toggle. So ion toggle instead of an input. And then slot equals start. And then remove this position here. All right. So now points update. We need to change first of all in the save method. Add these to convert it, right, from Booleans to ints. And then in the same file, this is new, then set some defaults, and then we'll run everything in iOS simulator. So ionic, Cordova, prepare iOS. And then back here, if we were to log in, we can see that if we go to our points, now they're toggled. So we've got one toggling, the others aren't. So let's look back at our HTML. Oh, we've got to change these to toggles. Now you can see they're toggled, right? Pretty slick, eh? And if we look at it on mobile device, looks much better, right? And you can even add like a user to it, hit OK, and save it. Creates all those points successfully. So now it's prompting me, do I want to integrate my app with Cordova? Yep. And then iOS is not installed, do I want to install it? Yep. So you can see that took about five minutes to run, so kind of a lengthy process. Once you have it compiled and ready to go, run open platforms, iOS, myapp.xc workspace. That opens it up in Xcode. And then you can click on my app at the top there, click play. And then once your app is up and running, you can click sign in. It'll redirect you to KeyClub to log in. So you can do, you know, admin-admin. Come back, see your entities, go to points, and we see that point is there. So we could edit it and say, you know, I didn't eat well today. And change that. If we were to go back here and refresh, oh, we're going to sign in. You can see the change is made there as well. So it's working on iOS and, you know, that's Ionic. So it works pretty well. Now back to the presentation. I wrote a blog post about this that shows not exactly the same demo, but it shows you how to add a photo gallery. I put old Hefe up there, so you can read that and see how that was all created as well. And now we'll dig into IgniteJHipster. So first of all, what is React Native? React Native is similar to Ionic, except it actually uses the native components. So you'll write it in React, but it's kind of a bridge and then the native components are used. So Ignite CLI is similar to Jhipster, but for React Native apps. So it's from infinite red. You can see up there in the top right, infinite.red slash ignite. It allows you to easily spin up a new React Native app, saves an average of two weeks, has an ever- expanding list of boilerplates and plugins, and Jhipster is one of those boilerplates. And it works on MacOS, Windows, and Linux. So to install IgniteJHipster, which is, you know, this boilerplate for Ignite CLI, MPM install dash G, Ignite CLI, and then IgniteJ Jhipster, you'll create a new app with it and then have fun. Right, so in this demo, I'll create an app with IgniteJHipster, generate entities in the app, modify the UI to be friendlier, and run it on Android. So back to our instructions here. You'll see we start by installing Ignite CLI and IgniteJHipster, and then create a health points React Native app. So I've already done some of these steps. You can see I installed Ignite CLI and IgniteJHipster, and these are the versions that are used. And then I went ahead and ignite new health points, and use that boilerplate for IgniteJHipster. And this does take quite a while to run. So you can see, even though there's not much output, it did take four minutes and 30 seconds. So then I moved it to React Native, and now I'm in that directory. So we'll put this on the right here. And the first thing we need to do is just, we could run iOS, but I said I was going to do this on Android. So first of all, let's go ahead and shortcut this, and get our entities generated. So this is 21 points, right? Ignite, generate, import JDL, and then the name of your JDL file. So we have all those. And then what I'll do is I'll do npm run Android. So while it's starting, we do need to run some ADB reverse command so it can talk to not only our JHipster API, but also KeyCook. So if we don't want that Metro bundler, that's just going to cause problems. So back here, that's where we'll do the ADB reverse. Okay, so everything's up and running now. If we were to go and click on login. Come on, baby. Maybe it's because this reverse didn't happen soon enough. Do rr to reload, then try it. Now it's working. So we can do admin admin. And now if we were to go to our entities, see if we look at points, try that one. That's when we entered in, right? That's the 0101. So this one has a text box just like Ionic did. So let's change those to Boolean. So open this up in IntelliJ. And we'll go to the points entity at screen, points entity. There we go. And we need to change these to Booleans instead of being numbers. And that'll change the form. So it handles it. But then we have to change entity to form value. We have to change that. So when it comes from our database, it converts it to Boolean. So exercise meals and alcohol. By default, it's zero. And if it exists, then it's one. And then form value to entity. So this is converting the form to send it back to the server. And then we can add some default values. You can see it says if it has an ID, then go ahead and say it's not a new entity. But we're going to say if it doesn't have an ID, then go ahead and create a date and set everything to true. Because we want everyone, you know, be ready to have a good day. So now you can see it's already refreshed. And it's got that information in there. So if we were to toggle off the exercise, for instance, and save it, save successfully, go back and look at health points, go to points. And this one's timed out as well. So we log in again, and then go to points. You can see it's taken out that exercise one. So now everything's working there. The last thing I want to show you is how to use Okta instead of Keycloak. You'll create a web application on Okta. You go to developer.okta.com and you'll click create free account. Then you'll put in your information and then you'll get an account. And then you can log into that account and create what's called a web application. And then you'll use this URL. This is for Spring Security as your login redirect URI. And then you'll set a log out redirect URI localhost 8080. So then you need to set up a groups claim and you need to configure an environment file that has this information in it. So I've already done all that just because, you know, watching that's kind of boring. So if we look at Okta.env, you can see these are my settings. And I've also created a native app. So if we were to source Okta.env, this is Jay Hipster, right? Then we can run Gradle and start it up. And since we've set those environment variables, Spring Boot knows to override its default settings. So now if we were to sign in, let me do an incognito window just to make sure. Okta host 8080 and click sign in. Now it'll redirect us to Okta. And we can log in with that user. Right? So that all works. We could also change our React native application just because that's one of the easier ones to modify. It's still up and running. And login.sagas.js to use the generated client ID. And we had it running in IntelliJ. Go here and look for login.sagas. And basically there's a client ID in here, right here. And instead of getting it from Jay Hipster, we want to have a more secure one from Okta. If I was to go back to React native and RR to refresh it and go to login. Oh, there we go. So now we're going to log in. It all works, right? And we can see our entities and we can talk to Jay Hipster. So lastly, Jay Hipster roadmap. Today you learned first of all that Jay Hipster is a project for generating back-end applications and front-end applications on the same platform. You can also use Ionic Ignite Jay Hipster and Okta with it. And next for Jay Hipster, we have Micronaut and Quarkus blueprints in the works. So people are working hard on those. We also have .NET and Node.js blueprints. That basically means that you can replace the whole back-end with those different frameworks. And if you like Spring Boot, of course you can use the default one and there's even Kotlin support if you want to use Kotlin instead of Java. There's full reactive support with WebFlux and Spring Cloud Gateway. Right now that's in Jay Hipster 6.8.0. Personally, I'm interested in adding GraphQL and Microfrontend support. So I don't know if that'll happen, but you know I got some time on my hands nowadays, so maybe it will. So my action to you is to try Jay Hipster. Learn more about PWAs. Try Ionic for Jay Hipster. Try Ignite Jay Hipster if you're interested in React Native and report any issues you find. If you have questions, please post them on Stack Overflow and just tag it with Jay Hipster and the whole team will get notifications. We post a ton of blog posts on our developer blog at Okta. You can also follow my team on Twitter. And the source code for everything we did today is at mobile.jhipster. Thank you for coming. You can find me on rabledesigns.com. You can find me on Twitter. My direct messages are wide open. This presentation I'll upload in the next couple of days to speaker deck. And then you can find most of the other code that I do on the Okta developer GitHub. May the auth be with you.