 Hello, developers! My name is Matt Raible. Happy Halloween! Today I'm dressed as Octaman with my Octa cape, Octa shirt, and my J. Hipster glasses. What I'd like to show you today is how to develop a mobile application with Ionic, Angular, Spring Boot, and J. Hipster. Let's get started. To begin, I'd like to show you a little bit about Ionic. Ionic is basically a mobile framework for building applications, leveraging web technologies like Angular. You see here you can also use React, and they do have view support as well. And you can also deploy it as a PWA to the web so you don't have to do it iOS or Android, and there's even electron support. J. Hipster, on the other hand, is an application generator that generates a Spring Boot application with Angular, React, or View in the front end. So this screencast is based on a blog post that I wrote called Build Mobile Apps with Angular, Ionic 4, and Spring Boot. And at the bottom of it, you'll find a link to the completed application on GitHub. And so in this completed application, there is a demo.adoc. And this is what I will use for this screencast. And it's just a quick, condensed version of the blog post, if you will, that makes it a little easier for you to see what I'm doing. And you could also follow these steps if you wanted to do your own demo. This script is written in ASCII Doc, so I can very easily click the raw button. And since I have the ASCII Doctor plugin installed for Chrome, it renders a nice preview. So we'll put that on the left, and we'll open up a terminal on the right. And I already have J. Hipster installed. So if I do J. Hipster version, you'll see I have 641. If you don't have it installed, you'll need to do MPMI-G generator J. Hipster, and that'll get you the latest version. I have ZSH installed, so there's a cool command called take. That'll create a directory and CD into it. And then I can grab this code right here to generate a new J. Hipster application. And so this import JDL command allows an inline application definition. So I'm configuring it with the name of OAuth2, authentication type OAuth2, build tool, we'll use Gradle for this, and protractor to verify everything works. You can see that took about a minute and a half to create. That time will depend on the speed of your internet connection. If you did not want to use JDL to create your application, you could create another application as long as you're using OAuth2 for the authentication type. It should all work with this tutorial. So if you just type J. Hipster, it'll prompt you for all the values. So you'll notice it gives me a warning here that I'm in my home folder. That's one of the biggest mistakes you can make. So if you were to make Dur, like test and then CD into that, then run J. Hipster. It would prompt you with all the options. So this one that I created previously uses all the defaults except for these that I overrode. So you can see monolith, microservices, you can even do a UAA server. So if we did a monolith and then it prompts you for the name, the Java package, if you want to use J. Hipster registry, all kinds of different authentication types. And there's basically 26,000 different options that J. Hipster supports. So we can just remove that because we're in our app directory. And J. Hipster, I mentioned earlier that I was using ZSH or ZShell. I'm also using Oh My ZSH for my shell. And J. Hipster has a plug-in. JH is the default prefix. If I just use JH, that's a prefix for JHipster. But I can also use it to start key cloak in a Docker container. So since we are using OAuth2, we try to make sure that you can run everything locally. And to do that, we use key cloak, we leverage key cloak 7.0, and run a Docker container that's preconfigured with all the JHipster default users, groups, roles, key cloak is up and running. And we can start our application using the built-in Gradle wrapper. So everything started successfully. Now we can open another terminal window and run our protractor test to verify that it created everything successfully. So that's npm run e2e. And there is an error here with the latest version 641. And that's because it supports Chrome version 76. And so if you were to modify package.json, search for WebDriverManager, and update it to the latest version 12.1.7, then it'll work with Chrome 78, which is what I'm using. And then we can run npm run e2e to test our application, verify the authentication works and the default pages render as expected. So that all works nicely. And you got a quick overview of what the UI looks like. And I say quick, I mean quick, it only took, you know, 19 seconds to go through all the pages in the existing app. So now I'm going to create a web application on octa to show you how easy it is to switch from using jhipster and keycloak to using jhipster and octa. So I'll start by opening a new browser window and going to octa here. And this is a account I already created. So if you go to developer.octa.com, and you go into sign up, you could create your own account. And I already have one. So I'm going to log in. And I'll start by going to applications, add application, and web. I'll create a new application called jhipster for the win. And for the redirect uri, I'm going to use the one that's already coded into jhipster. So this is used for both keycloak and for octa. That's why you should put it in here. And then we'll go ahead and save it. And then we'll also add a log out redirect uri. That's localhost 8080. So this is necessary for log out in jhipster to work. So that's all set up. And then you'll need to set up some default groups. I already have them created. jhipster expects them to be named role admin and role user. And once you have that configured, you'll need to add the groups as a claim to your ID token. So if you go into the default authorization server, again, that was API authorization servers. And then click on the default one. And then click on claims, and add a claim, call it groups, specify the ID token, specify groups, and then use a matches regex, and do dot star. And create it. And that's all you need to configure jhipster to work with octa. And you can start your app using those settings. So jhipster has all of its security settings configured. If we were to look in source main resources, config application dot yml, and search for security, you'll see that it's configured to go to logos 9080 for key cloak. And then it's got web app as a client ID and a client secret. So rather than putting those new values for octa in the ammo file, I'm just going to override them. So I'll open up text main here real quick. And I'll paste those values in there. And then we need to grab those from our application. So if we go back to our application and jhipster FTW and grab the client ID, first of all, put that right here and make sure you delete all the characters no dollar sign in front or trailing characters in the back. And then if we go to API authorization servers, you can grab our issue or your eye. And note that this actually, when you copy and paste that it does have a carriage return. So make sure and delete that or nothing will work. So then grab those three lines, go back to your terminal and control C and restart it with those octa parameters for security. And this will basically talk to octa instead of key cloak. So we can hit local host 8080. Hit sign in. And since we're already signed in our octa organization, you can see that we're signed in. If we were to go sign out, you could sign in as a different user. For instance, I have a demo user. That is just a regular user. And so they're not an admin, and therefore they don't see the admin menu because they're not in a role admin group. So we'll go ahead and log out of that. Close that. And we'll create a native application now for Ionic. And key cloak doesn't quite require this. But it's a little more wide open by default. And so octa is a little more locked down. So I'm going to create a new native application by going to applications, add application, and then native. And then I'll call this ionic for for the win. And I'm going to add a few different URIs. I'm going to add local host 8100 for when we're doing development in the browser. And I'm going to add this URL dev dot local host dot ionic, because that's what we have hard coded into J hipster. And then for the log out redirect URIs, I have to add those after I create it. So create it, go to edit, and then hit log out, add 8100, as well as this one here. And you can also use a different URL. For instance, you can use the calm dot octa dot dev one, or you could use your company's calm dot company dot application name. Those are all easily configurable. If you go to look for generator J hipster ionic, it has all the instructions you'll need to configure it differently. So everything's in here, octa for authentication and tells you how to change things here if you want to do that. So now we also have to add some new claims. And this is because what happens with ionic and J hipster is J hipster will act as an OAuth resource server. And so we're just going to pass an access token into it. One of the things we could have done with J hipster is use that access token to go out and get the user information. But what I defaulted to is just having some certain claims in the access token groups, given name and family name, and then it'll be able to return the information that J hipster will store. So if we go to authorization servers again, we go to default, we go to claims, we can add a claim again groups just like before, except instead of the ID token, we're going to put it in access token. So again, matches regex, and we'll put them all in there. And then we'll create a new one for the given name, access token. And this will be an expression. And we'll do user dot first name. And then add claim and family name in the access token expression, user dot last name. And if you need to know what all the different options are, you can use the expression language guide. And it's got all the different attributes that you can get to in there, and all kinds of expressions that you can do. So we'll create that. So now we have everything we need there. And we'll close that down. We're going to need that, we're going to need that client ID in a second. So I'll go ahead and leave that running. JDL is J hipster domain language. And that allows us to not only create applications J hipster, but also entities. So I'm going to create a photo album using this photos dot JDL. So I'm going to create vi photos dot JDL. And then once I have that created, I can do J hipster import JDL photos. And it'll go and create not only all the entities, but the liquid base files to populate the database, as well as tests and all the UI code to crud those entities. So you can see that took about 30 seconds to complete those. And if we were to run our application, let's go back to running it with octa. Then we'll be able to see that there's an album, there's photos, and there's tags. So we can tag our photos just like if you're using Flickr. So open up local host 8080. We can sign in. And if we go to entities, you'll see there's an album. And there's photos. And there's a whole bunch of sample data in here. Because what we've noticed is as developers, a lot of times when you're testing things, you go in and add code, or you add entities, you delete them, you manipulate them, you make everything, sure everything works. And having default data is sometimes just easier. So if you want to turn that off, you can go vi source main resources config, and it's in the application dev for the dev profile, and search for faker. And you can see here liquid base uses faker JS to pre populate that. So I don't like to have fake data, at least for screencast, it doesn't look that great. So I'm going to go ahead and RM minus R, I think it's in build H2, just deleting the database, so it doesn't have that in there. And then I can start everything again. And this time that data won't be in there. So while that's completing, let's go back to our script here, and create an ionic app. So we'll go ahead and create a whole new window here. And you want to do it side by side with your J hipster app, or in a different directory, but not in the same directory as J hipster. So you'll want to install ionic CLI, I already have that 544, Cordova, and generator J hipster ionic. And I have all those installed. So I'm not going to go ahead and install those. But if you needed to install all of them, and just grab this copy paste, and do that. And so there's an alias I created by default, you should use yo J hipster ionic. But I created an alias called ionic for J, kind of like log for J. I thought it was a cute name. So you can run ionic for J, and it'll do the same thing as running yo J hipster ionic. And then I'm going to call this application mobile. And then it's located in app. And that will use a starter that I created the ionic J hipster starter to not only create an application, but then add OAuth into it, because we're using OAuth for the backend. So you can see that did take a couple minutes to run. And if we scroll up, you'll see that it creates everything and checks it in to get. But the part that I wanted to show you was right here, where it adds a bunch of OAuth capabilities to ionic. So it's using ionic app auth to create OAuth capabilities, and ionic storage to store the access tokens. And then it creates all these files to basically make it possible to do the ionic stuff. And this is all based on ionic app auth and the example that they have. And I just made it work within J hipster and ionic. And so you can basically CD into mobile. And the one thing you'll need to do is modify the auth service to use that new client ID that we created for the native application by default, it uses what J hipster uses, and it doesn't work with octa by default. So if you were to go to local host 8080, I think it's called API auth info. This is what the ionic app will call when it starts up to get the issuer and the client ID that's returned as the one from J hipster. So we just need to override that for ionic. So it's in source app auth, and then auth service. And if you search for data dot client ID, this is where you'll find it. And then if we go back here, go to our applications, and grab it from the native app, then it'll be able to talk to octa for authentication, and then our J hipster back end as well. So we can run ionic serve. And now we have our application up and running, we can click sign in. Let's try that again. local host 8080. 80 100 is our ionic application. Let's make sure okay, so it's got some things in there. Let's shift reload and make sure it's not getting a stale version. It looks like it was. So now if I click sign in, this is interesting. So by default, when I added that login redirect URI, it didn't create a trusted origin for ionic. So I have to go back into octa here under API trusted origins, and add 8100. So it did add one for J hipster, but not for the native application. So 8100. And then cores and redirect. So we save that. And now if we were to refresh and click sign in, it knows that I'm already logged into octa, it says welcome. So that all works now. That trusted origin is something that you will need to do. So I'll make sure and update any documentation that I have to include that. And now what we can do is we can generate screens for the ionic application using import JDL as well. So ionic for J import JDL as its command. And it's in our app photos. And so now it's recompiling all of those. And if we were to go back here, and let me just take it out of that mode, and we click on entities, you can see that's where they are. And if we were to go back to our J hipster app, there isn't anything in there since we got rid of the faker stuff. And if we were to go to entities album, we could create a new one. For instance, VW buses. And then we'll create it today, which is Halloween 2019. And we'll put it in my account. And so then if I were to go to album here, you can see it's been created there as well. So proof that we're talking, you know, to the same back in. And then the next thing I want to do is show you how to make it into an iOS app. So we can control C that one. And go ahead and run ionic, Cordova, prepare iOS. And once that's done, you can open up platforms, iOS, my app, XC work space in Xcode. And this is how you'll run it. So if you click on my app, then signing to make sure you've configured it for signing. And go ahead and start it up. And you can click sign in and log in with your credentials. And if you click entities, you'll see that album's there. If we were to go back to our J. Hipster app, we could add a new photo at Hafe. My 66 bus. We'll upload a picture of him here from the parade. And this was a couple years ago. So I think it was 2018, probably about 11 o'clock in the morning. And we'll put it in our VW buses album. So we save that. And then if we were to go back here, go to photo, you can see it shows up there. And if we were to add a new one, one of the features that Ionic has is the whole pull to refresh. So for to pull to refresh, we would get the new photos that were added. So that's all working. There's also the ability to edit and delete. So if you were to swipe left, you can click edit. And then you could change anything you wanted. So you could say something like is awesome. Because he's got a Porsche engine in him. So that's fun. And then you click down up here. And if you wanted to delete it, you could also click delete. And if you were to just click on it, then it just takes you to the view screen where you can edit or delete as well. So let's close that and close X code. And now we'll do it for Android. So make sure you're using Java eight version. So I'm using open JDK one dot eight. You can use Ionic, Cordova, prepare Android, say yes to install it. Once that's finished, open platforms Android and Android Studio, not in finder. So I have an alias for Android Studio platforms Android. And then under app, if it does prompt you to update Gradle, you can click OK. That's fine. And then Android manifest, there will be this launch mode specified right here. I'm going to change that to single task instead of single top. And then up here, you can see your app pixel two I've already configured. If you don't have any AVDs or Android virtual devices configured, you'll have to go to this button here and add them. You can click create virtual device. And then you can specify, you know, pixel three, pixel two, whatever you like there. So I've already done that. And I can just run it. And then once that's running, you do have to run this a B D reverse to open ports between that virtual device and your local machine. So I'm just opening up TCP 8080 for J hipster. And if we go back to our device here, and we click sign in, try signing in again. Oh, I know what it was. Since J hipster actually goes ahead and grabs the information when it starts up, you have to have that ABD going before it starts. So it's kind of one of the problems with the emulator. So we should be able to start this again, just restart. So now grab that information from octa instead of the key coke stuff. And now we can hit demo, my super secure password. And we're logged in. If we go to entities, we can see that album is there. And if we were to go to photos, we deleted that photo, there it is. So there we are looking good. And that's it. So I hope you've enjoyed this screencast of creating an ionic application with J hipster. Follow my team octa dev on Twitter. You can also follow me on Twitter at mrable and never build off again. And subscribe to our YouTube channel. We try to post new videos every week or so. Hope you have a nice day. Happy Halloween.