Create iPhone Apps Using Forge Viewer and React Native

MICHAEL BEALE: All right, welcome, everybody. My name is Michael Beale. I am one of the software developers on the Forge team. I recently joined the Forge team back in June, and so you have to go easy on me. But before that I was working on the viewing technology that made large models appear in the browser.

You guys probably know it as the Forge Viewer. So if you guys have any questions about how on earth you'd get such large models crammed into a browser, come talk to me, I will be down at the answer bar later this afternoon, along with the rest of the Forge team. So quick question, who's used Forge in the room? Show of hands. Fantastic. So you can find me on Twitter, my hashtag is micbeale, and I have a blog on the Forge web site, you can go to that URL.

So we're going to learn a few things today. This is a handout, which didn't quite make it for some reason onto the app, but it'll be appearing in my-- it appears in my GitHub repo, which you'll have a link at the end of the talk you can grab. I'll probably also post the slide deck. So we're going to learn a few things in this talk. I'm going to show you guys a little bit about what React Native is, and you're going to learn how to develop a native app using this native, this React Native framework, and it's going to use your existing web skills. We're going to tackle it in three parts.

The first part, it's going to be the Hello World example. It's really simple and you'll get a flavor for how to do React Native mobile development. The second part will add to that, and will add some basic native UI. And these are sort of common UI that you'll probably end up using again and again. And then the last part is we'll connect that sort of shell app, the skeleton, and we'll add the network access into the Forge APIs with a log in.

So hopefully along the way you'll pick up a few of these useful tips that you can extend later to do things like [? year-end ?] customizations. So a quick introduction, I guess, is, sort of, why are we doing this? Why are we developing mobile? So mobile improves the communication between the job site and the office. It's key to improving things like project schedule, addressing safety issues, and ultimately improves the bottom line if you are improving communication. The old ways of sort of using pen and paper, email, phone calls, they're kind of getting augmented. You see it on the job site with mobile devices and iPads.

So if you look on the app store, you'll probably notice too there's just a lot more of these apps that target this industry. So there's apps for things like snapping a photo for taking an issue, an RFI, or maybe it's something to do with a database access to sign off an inspection list or a punch list, there's an app for that. So if you're thinking of building any of these apps, the Forge platform is here to provide tools for you to access that data. So let's talk a little bit about Forge. Forge taps into the reach datasets of a lot of Autodesk products, probably the ones that you guys in the room are used to, familiar with, things like BIM, BIM team, Fusion Team, Collaboration For Revit, and then Navisworks, AutoCAD, and some of the newer things like the ReCap API, which we just announced.

So if you're doing sort of photogrammetry stuff, you can build a mobile app that views photogrammetry and does measure and markup. So the mobile platforms that we're building, it sort of give you a new opportunity for diversifying and differentiating your business, if you're not already building a mobile app. And the Forge platform is here to help basically access that rich study you have and connect it with the Forge APIs and, ultimately, your data. So this talk is going to show you one way, there's multiple ways of building mobile apps, but this talk is going to target one way in particular.

And the reason I'm talking about React Native is because it leverages your web developer skills. If you've already got a web team, and most of the Forge viewing technologies are web based already. So this is a nice sort of segue into going from a web browser into mobile development. So you can find more information about Forge, if you are not familiar with it, at developer.autodesk.com. We have a whole bunch of APIs, and the one that I'm sort of talking a lot about today is around sort of BIM 360 data management and model derivative APIs.

So what are we going to build today? Well, the first thing you guys need to know is the GitHub repo where this code is. So if you go to github.com/wallabyway/forgeApp, you can find the source code. Wallabyway is a reference to Australia, which is where I'm from. So we're going to build a pretty simple Forge viewing app. It's going to have some key components, which I sort of briefly mentioned. And the two ones that I am sort of hoping you guys will pick up on is a simple file list and the navigation UI component.

And then we'll look at some of the basic Forge APIs that we're going to need to do authentication, and then also use RESTful calls to pull in, browse the A360 file list. So I've got a quick little video here of what this app looks like. Does anyone want to see a live demo instead? All right, let's do that. So while it's doing that, you can see on the screen, what's the video I talk, it's kind of more interesting when it's a live demo. So let's quickly do that. All right, that's me. That's not what we want. Let's get to the phone.

With a bit of luck. Excellent. So this is my phone in my hand here. If you guys, if you guys want to try this app yourself, there's an app on the app store called Expo, it's also on Android. If you install that, you can then-- you'll see the screen here. There's a couple of apps here. But there's a button that says scan QR code, tap on that, we'll go to, what I'm looking at now, which is you guys. You can't see that. I can see it. So it comes up with-- Hang on. I'm learning what to do. Let's just do this. There we go. That's better.

There you guys are. You can wave if you like. And we're going to scan this QR code that's on my screen. And so it scans it. What that's doing is pulling down the bundle, the application that I've been working on. And this is it here. I've already logged in, but what I'll do is I'll just quickly log out and log back in so you can see what's going on. Oh, yeah, good point. So I'm going to type in my log in. A quick password. I mean a lot of authentication, so I'm letting my phone access Forge.

And here I've got a list of files. I'm literally just browsing through just some example files that I've already got. And with a bit of luck, I'll just quickly find a nice building, say, this one. And see the properties of the file, who created it, the size. When I click on view it switches tabs and with a bit a luck it loads my house in 3D. So I just do a quick operation like sectioning, and I can drill down to, say, the first floor and have a look here, it's going into the kitchen, just for a quick example. All right, that's my-- and I can flip back and then browse for other files and folders.

So that's what we're building. And let's keep going. So you can try that on your phone right now. The QR code is the same QR code I just scanned. Yes, so to build this we'll build this in the three parts I mentioned, the Hello World app, the shell app, and then the final app, which adds the-- is the more complex part of it. And then I'll finally wrap up the talk with some pointers on where to take the sample code after that. So things like, maybe you want to add a chat mechanism, this has only got two tabs on it. You probably want to add settings.

Take some photos with it, so you want to do some sort of inspection. Well, maybe you want to get fancy and you want to add the new Apple AI kit for augmented reality. There's a great demo downstairs in the exhibit hall, I highly recommend you check it out. It was an app we built for Connects Tech, and it's an augmented reality app for where they can add markers and issue tracking to a central system using your iPhone or your iPad. So what is React Native? Well, React Native was originally-- it was originally built by Facebook. It was originally developed by Facebook, and it's been sort of picked up by a lot of other companies. It's an open source product.

And it was originally React Native itself is a flavor of React, and hang on a second, I've lost my place here. I'll just wing it. So originally written by Facebook, and it's picked up by the community. You'll see a lot of flagship apps now being made with React Native. A lot of conference apps. If you've seen the more polished ones like Oculus Kinect 4 was done recently. Airbnb, if anyone uses Airbnb. Uber is made with React Native, and a host of other ones. Walmart and a bunch of others. So it's quite popular.

One of the tools to use to help you build React Native apps is what we're going to use today called Expo. It takes a lot of pain if you're getting started. If you're a little more advanced and familiar with React you can just simply use a command line. All right, so why? Why are we even here? What's the point of React Native? The alternative, and some of the things I come across when I'm consulting is web companies or companies that have a web solution and they look at targeting mobile using something like Cordova or Ionic, which is a web based HTML5 based mobile solution.

And those apps, while they seem good to start off with, they start to fall apart with little things like animation jank, or that day time pick up, or you're probably familiar with that airline app that you never use where you click on the password and then the keyboard pops up over the top of it and then you have to scroll off and find it. Those are sort of typical examples of where the HTML5 solutions seem to fall down. Because React Native is using native UI, all of the UI and controls animate the way that Apple intended and the way Google intended, you push the button in Google and you see that little ripple effect, those sort of things are really hard to emulate in HTML5. But when you're running them in a native control, running them in native, all that comes for free.

So then the other side of it is, if you do write a native app, it's going to cost you in development time. You're going to need a team to build the swift Xcode or iPhone solution, and then you're going to need another team to build the Android solution, or you can try to keep those two code bases in sync. It's one of those expensive development maintenance costs. Compared to React Native, it's a single code base, it's just JavaScript. On top of that, there's a really great React Native community, because it's JavaScript, you tend to find a lot more sample code. And as I said before, you can probably use your existing web team.

So the other reason that I kind of like React Native is that, if you guys have ever seen the TV series Silicon Valley? Show of hands, anyone? All right. So you guys probably-- for those who haven't seen this, I thought I'd just give you a quick demo of what it's all about. So this app was written with React Native. You're not supposed to hear that.

[LAUGHTER]

Turn that off.

[VIDEO PLAYBACK]

There's a few things I can't have them-- do pizza.

- Not hot dog.

[END PLAYBACK]

That's it. All right. So that's the other reason why I really wanted to write this stuff in React Native. All right, so let's get started. So the first thing we're going to do is install Expo on your Windows machine or on your Mac. And we'll create an empty project, we'll share it to the phone. We can scan a QR code and then we'll just edit and repeat. That's pretty much the lifecycle. So, well, it looks something like this. I'll just quickly show you Expo.

So I've got Expo loaded here. Normally I would click on Create New Project. And I'll call it Test Two. I'll hit create, and that will end up producing me this little bundle. Existing project. It will show me this little app.js file, which I'll show you in text editor. So can everyone see the text on the screen here? So in my iPhone simulator, it looks like this. So we've got a basic set up here. What Expo does is let's you control everything, so I'm going to open up the-- I'm going to open up this app in my simulator here to the right.

You can also target the mobile phone in my pocket, but just for simplicity, I'm going to keep it on the screen. You normally just click this share button and scan it with a QR code. So if you're on a Windows machine and you want to do Apple development, this is a pretty good solution. Normally you need Xcode. So let's take a little look at the code. So this is a basic React Native code. Who in the audience has sort of done a little bit of React development? Got one. A couple. OK. So in React you would normally use-- in HTML, you'd use a div, in React Native they kind of defined a couple of things. They defined a view and text, and that's effectively a div but with a slightly different name.

If I change this text now, if I, say, change this to Hello World, I hit Save. And you see on the iPhone here, it's pulling in a new bundle, and then you'll see the change appear on the right. So the software development lifecycle-- this is the software development lifecycle for development. You see it's fairly quick. We can speed it up. There's a couple of things called hot reloading, which makes really what React Native, it makes it shine, but I'm not going to do that right now, we'll stick to the basics. So that's our Hello World app. We just edit the code and repeat.

So that's the start. Let's take a look at some-- let's add some UI. So to the right, you can see a shell app, and this is what it looks like. It looks like the final app, the one exception is that it's just dummy data in there. I put in just some static text. And we'll focus on just the shell app for right now, so we can just focus on the UI and not get too involved with the Forge API. So take a look at the design. It's pretty straightforward. It's not sexy. It's a simple tab at the bottom, you click between those two different views.

And those two different views, one of them is going to represent a file browser, and the other one is going to represent our 3D viewer. So if you have a closer look you can-- there's some UI components here that are important. The first one is this thing called React Navigation, and that handles the tabs and the views. And the FlatList handles-- this component called FlatList handles this list. And then the last part is a web view that we use for the viewer. I know, I should probably go full screen. So, yeah, React Navigation.

This is kind of neat. Navigation turns out to be pretty darn tricky. And so when React Native first came along, Facebook came up with a very basic solution for navigation. It wasn't too bad, but a lot of these big companies like Airbnb, which have a couple of hundred developers on just the mobile solution, they needed more performance, they needed smoother animation, they needed to do a couple of changes to it. Another one, Wix, also had a solution. And I found when I was going along to some of these React Native meet ups in San Francisco, they were all kind of juking it out who was going to have the final common accepted way to do navigation.

Well, the nice thing is they finally got together and they came up with this solution, and you can find it at reactnavigation.org. And that's what we're going to use today. So let's build our shell app. So the first thing we need to do is install React Navigation. We'll jump to a command line. We're going to copy some files from the GitHub repo. That looks fairly complicated, but it's all on the Github repo, if you're familiar with Github. And then we'll just show-- I'll show that on the simulator.

So let's take a quick look at what that looks like. So for my project, I open up a terminal, and that takes me to that root folder of my app. And I'm going to use Yarn instead of NPM, and I do React. Yarn add React Navigation. And this will go and add this React Navigation component. And it's the only time we're going to hit the Command line for now. It seems a little intimidating, but it's the start of doing a whole lot more once you get familiar with it. So we've just added-- we've added this new component.

Now, the next part is to add our source code, which I've got pre-prepared in step two here. So I've got an app.js file, and I've got these three files, which I'm just going to replace over the top of my app. Place. And you'll see the app automatically just update. Hopefully it just works. Woo hoo. All right. So we've got ourselves a shell app. When I click on a folder, it just keeps going to the same kind of folder. If I click on Project, et cetera. I have this sort of a stacked navigation as it's called.

I also have this tab view at the bottom switching between two views. You'll probably notice too that when I click on my file 3D, that it jumps to the viewer navigation tab. So let's take a quick look at the code. Discussing the code. That's the GitHub repo, I should have mentioned that. So app.js, it's changed a little bit. We now have-- we've replaced the Hello World and we've put in this tab navigation. This is the code for it on the right, the thing to take note really here is we've added a whole bunch of code that looks at switching between two different tabs.

We've got a file tab and a viewer tab. And I've set up two different screens that attach to those icons, those buttons. There's a screen called FileList and a screen called Viewer. I don't know if you can see that. And those two screen files live in two different files. One file is called FileList, and the other file is called Viewer. And so we've basically got one screen per file. It's nice and simple.

There's also another file here called Styles, which I'll talk about. So let's move into the FileList file, and that's our file browser. The key UI element in this one is the list view. Now, in React Native there's a couple of different list view controls. We're using a thing called FlatList, and it's really ideal, it simply renders static lists, really, really, really long static lists, like Facebook, that go forever, and it renders them really well, really efficiently. In this case, we've just got a simple static [INAUDIBLE] representation here. There's our project A, folder A, Project B, and the 3D files.

And we're going to record this JSON object as a state in the constructor. And then we'll feed it into the FlatList component here. This is our data. And then the last part of-- really, the next kind of part of this is, what happens when I click on one of those items in the file list? So this is the on press event. On press does-- the most important thing here is that it runs this navigate method, which is part of React Navigation, and it goes to our links screen. The link screen is this particular file.

And so that's why we've got this recursive behavior, a stack, that as we browse through a tree, we're adding onto a stack calling recursively itself. Let's move on to-- and you can see this moving here in the video. So styling, and this is-- arguably, this is probably bad practice, but it's kind of helpful for this tutorial. In the Styles file, I've basically taken all of the style sheet information from each component, which normally goes with each user, each UI component, and I've pulled it into a single bundled file called Styles.js. And the reason I did that was, we're going to treat that like a theme, so we've got this current look, and all I'm going to do is make a single file change to Styles to restyle and re-skin our user interface.

It'll give it a little bit more pop, and that's why you can see on the right now it kind of looks a little bit more like, I guess, Facebook. Anyway. All right. So so far we've created a shell app, and it's got this dummy data. But the tricky part is we need to somehow replace the dummy data with real data from the Forge service. So we're going to need to do a couple of things. We're going to need to add a login button. So some way to say, sign in, here's my username and password.

We're going to need some network code, and that network code is going to retrieve information from Forge and then put that in place of our dummy data. And then when we click on that navigate-- when we click on a file, we want it to navigate to this view and launch our web view with the Forge Viewer. And then there's one other small little thing, which we're probably just going to brush through, and that is the-- there's a properties page on the file. And that properties page just shows a thumbnail and some properties about who created this 3D file and 3D file, and when it was created, and a couple of other properties, which you can find on the Forge APIs.

So let's-- before we go too much further, we also need to talk a little bit about three legged authentication. So the three legged authentication is probably going to need a little bit-- it's going to need an architectural diagram to sort of explain what's going on. You can see I'm logging in here. That this first part of that log in has quite a tricky handshake, but that's kind of key to why we have three legged authentication. It's an important part of security.

So let's take a quick look at this diagram. Very quickly. We have the end user, which is me, and I have my iPhone, I have the Forge service, and I have this thing call the Expo server, and I'll talk about that at the end of the talk. As an end user, I'm presented with a-- sorry, a first maker request to log in. My phone goes to the Forge service and it's presented with a web page of a log in. It's directed-- It displays, essentially, a web page of our Autodesk username and password log in. Once I've clicked on the Login button, I'm presented with a consent form, which is what you saw before with allowing data.

And that specifies the scope of what I'm being allowed to access inside Forge. And then the last part is, once I hit OK, that Forge web page, that authentication page, will redirect my browser to a callback, which I specified, which goes to the Expo server, from the Expo server it has now captured the access token, and from the access token, knowing my phone's session, it then sends the access token to my phone. That sounded awfully complicated, but it's how we do three legged OAuth. And thankfully, there's a library that just sort of takes care of most of this stuff.

All right, so to get going with this last part, we need to do a couple of things. The first one, we need to configure our authentication on the Forge server. And what I'll do to speed things up a little bit is I'll go to our steps, I'll grab the source code, and just show you how this is going to go, how this is going to work. So what I'm doing right now is essentially going to the GitHub repo and copying the final app, well, second final app, I should say, over the top of the Hello World app-- sorry, the shell app. And then you can see the phone on the right here is updated. Now, if I try to log in at this point, it's going to fail because I haven't told Forge that I've got any kind of permission to some app.

There's no information for Forge to authenticate correctly with. So it's seeing, oh, someone's trying to authenticate, do you want to go ahead and try to authenticate? And it's going to say, oh, oops, I can't do that. I don't know who this is. It's a no go from Forge. So let's fix that. And the way to do that is. So from my slides, we're going to go to the Forge developer site, we're going to create a Forge app, and that Forge app will provide you with a client ID and a secret. And then also, an OAuth callback. And I'm showing it on that diagram there.

So I pre-created this app. I cheated. And I've got a client ID here. I'm going to copy this client ID and I'm going to put it into our source code, which is not showing up. So I'll make it show up. So we've got an app file there that hasn't changed, but what has changed is we have this new file called store.js. And this is handling all of our network code. What we need to do is copy that client ID that we had from the Forge app, and we're going to put that into this little section here. It just so happens it's the same thing.

And then the last part is to update the callback on the Forge app. So if we scroll down here, the callback currently is pointing to the barcode scanner that I first showed you in the live demo. So I need to change that to the app that I just created called Test Two. So if I go down to-- I don't know if you guys can see that. Let me just zoom in. This is the callback. I'm going to change the app from Forge app to Test Two, which is the name of the Expo, is the name of this Expo test. And I'll hit Save. So now, what I've done essentially is I've told Forge that you're going to be expecting a callback from this Expo server.

So when you get some kind of callback, it's going to be signed in a particular sort of way, that I know it hasn't been-- it's not fraudulent, someone hasn't swizzled the signature. And then Forge is going to-- it'll verify that callback and then it will perform a callback. So let's try that right now. So when I click on the Login button, we go back to the Forge asking for consent, but this time it said, oh, OK, yeah, I can see that this is the right callback, we're good. Let me show you the Login box. And I log in. It now asks me for consent that this particular app is making a request.

So this user is making a request for data read, only data read, no write. And I'm going to allow that. And we log in. And so I can see a list of files, list of hubs, I should say, in my app. So what's changed? Let's get back to the slides. I gave you the demo. So what's changed? In my source code here, I'll just make sure I've got that nice and big. We'll start with the file list.

This is a little bit hairy, so I'll just focus on the more important parts. So the first part is, the static list that we saw before is now gone, and it's been replaced with a request to store.js. So here's the-- where's that file has gone? File FlatList. So from FlatList I'm pulling now this state.list as before, but this time when it does a refresh. Where is it? Where's my refresh? There it is. Handle refresh. I'm updating-- I'm making a request to-- there we go. Handle refresh. I'm doing a request, a network request essentially, to this store singleton to get GitHubs, and then set the list, the file list that we saw before, and so it populates the view, it populates that FlatList.

So that's the method to handle refresh. It processes the Forge DM data into the folder navigation. So we also added a log in and a log out button. And you can see that here. It's basically switching a UI component from button log out to button log in depending on the state. And then we also added a couple of nice things like a spinner in the FlatList. When you're refreshing, if it set state to true, then you'll see that little spinner icon, and if it's set to false, it's animated and disappears. And then we also added some file details.

So when you saw a picture of the house with the user creator, the person, the author, I should say, when the file was last modified, and the size of the file, that was all created here. So some really basic UI elements here as you can see if I can zoom in any further. And you can see there's a bunch of text elements. Something that says file, created, latest, author, and modified. So then the last key part of this particular sample is the store.js file. The store.js file, it's a singleton class, and you can see that at the very bottom here.

It's kind of acting as a central application state. I don't recommend this if, when your app starts to get far more complicated, you're going to probably want some state management, and I recommend something like MobX, or as everyone uses Redox. But this is a very simple-- we're doing a very simple app. So this store.js file, it also handles the I/O, and you can see that with the fetch request I'm doing here. And I tag into the head of the authorization token, and that's how, once I've logged in, and I've got my access token, all of my requests to the Forge service need to have that authorization. And that's how we get the security we're looking for.

And then the last part in this-- this is one of those nice things about having a native app as opposed to a web browser, is we want a phone to remember us logging in. So you know when you go to a web page, you type in login, and then you close the browser, and you come back again, and you have to log in all again. Whereas on your phone you've got Facebook or WhatsApp or some application that you've logged in once, and then most of the time you never have to log in again unless you uninstall and reinstall the app. So how do we do that same thing with React Native?

We're using a persistent called AsyncStorage. Very simply, it basically persists a key store. In this case, in the constructor, I'm getting a thing called an access token, which I've previously stored during a log in session. So here's the log in method, AuthSession does the redirection and handles that log in. And then when I close the app and restart it again, I'm pulling that access token to-- I check that access token to see if it's valid and then I log in, so I don't have to present the log in box again. All right, we are running out of time here. So there's two more things we have to do, really quickly, just to sort of complete the example.

We're going to switch out the viewer with the sort of HTML black toolbar with our own custom Native toolbar. So one of the things you'll find with, when you sort of view some of these mobile, these web pages on mobile devices, the buttons aren't quite right, they're too small, and you go to click around, so we want to add our own toolbar. And we'll do that by, first of all, switching to the headless viewer, and that's a one line change. In our HTML code there is this line, you can see here, that says private-- I can't even see the cursor. There we go. You can see this line here.

We'll change this one line from GUI View 3D to viewing.viewer3D. And that will remove the toolbar, and actually it will also take a lot of handling of things like touch events and a bunch of other things that can improve our performance with a native app. I could talk for days about just that. All right, and then the last part is, let's add our custom toolbar. So here's what the UI is going to look like. It's really quite simple. It's got its little view, which we color, and then it's got three buttons and a slider.

And the nice thing is it's done in native land, so I don't have to style this button with blue, make sure there's a drop shadow, I don't have to make sure that when I touch the button it does a brief animation, et cetera, et cetera. That's all given to me by the native, by Apple. So and it looks and feels just like every other Apple native app. So to do that, I'm going to copy the last part of my example. Steps. Last part. And you'll see my simulator restart. And I'll switch to the viewer. It won't load anything, but you can already see there's a working toolbar here with a slider.

And then to really sort of show that last part, what I'll do is I'll publish this app with Expo, so you can sort of see the sort of final step. And what I do is I click on the Publish button. What that does is it wraps up two bundles, a bundle for Apple, and a bundle for Android. It's sort of all done in the background, so you don't have to do anything. And hopefully, once that's finished publishing we can see that app. While it's doing that, that's going to take a little while, I'll quickly just to talk about the change that we just made.

So this is the code for our toolbar, very simple. In my render code I have my web view, and at the bottom of it I have this thing called section toolbar. And this is going to be a sectioning tool that I showed you before, but with a slider control, so I run my finger back and forth and it will perform a section. The section tool it's made up of, actually I've got a slide for this. That's even better. Yes, so I've got-- this is the code. I've got the slider that's represented with just a simple wood slider. I have some iconic or ion icons buttons, which we used before in the tab.

And then the next interesting part is that, what happens when I click that button? So if I click a button, what I want to do is change the state. I've got this central state of, what is the mode of sectioning, is it a vertical section, an X section, or a Z section? And then I'm going to highlight the button accordingly. So when I click the onPress button it calls this method called onToolbarClick, and then it sets the section direction, and then a section plane. So I have my app here, which I'm going to quickly log in. And I'll log in [? too ?] quickly. The last part. Oh, that's not right. [INAUDIBLE].

Oh, I actually didn't need to do that. That didn't work. Let's try again. There we go. So you can see my screen now. I'll quickly log in again. Because I'm using a different app at this-- I used a completely different app this time, so it doesn't have any of my previous authentication. Well, now, everyone's got my password. I'll be changing it, believe me. Right at the end. I'm going to skip ahead. And essentially, the video you saw earlier was the same thing, I was just trying to show off.

All right, let's go back to the last part of this. So I showed you the custom toolbar and one of the frameworks I used was this thing called Ionic Framework. And that's what is-- it contains a list of lots of different icons to style your own app. And that's it. That's pretty much my final app. And the source code is available on GitHub. Take a look. I'll show you that in a minute.

And the last part I wanted to talk about was, what are some of the future components that you can-- where can you take this app next? So I mentioned doing some sort of chat app. There's a great open-source component called Gifted Chat, and it looks just like this on the right hand side. It takes a lot of the styling and all the stuff that I just did for the toolbar, and you get it for free. There's components for taking photos, for scanning QR codes, which we've been doing, and then doing more things that are native related, such as push notifications that appear on your lockscreen, Google Maps, or Mapbox. Or even something simple like the side-draw.

So that file browser and that file list, we could easily move that view into a side panel draw, so it would look a lot more like the BIM 360 Docs app, for example. And then the last part is offline. And the offline component is done really, really quite easily with a component called the WK Web View, and that accesses the local file storage, which you can then manage. I didn't have enough time to go through that in our slide deck, but you can find it on the GitHub repo, as well as in my handout notes, on how to use the case manifest in order to do some basic offline stuff.

So what are the three takeaways for you guys? We've learned a little bit about mobile development with React Native. I've shown you some common UI tools, text, view containers, slider, web views, and navigation, and then I've also shown you a couple of Forge APIs, the authentication and model derivatives service. And that is my talk. I can go into further detail with some questions if you guys would like. So any questions?

AUDIENCE: So how does the [INAUDIBLE] authorization [INAUDIBLE] presentation? How is it [INAUDIBLE]?

MICHAEL BEALE: With single SSO, so--

AUDIENCE: [INAUDIBLE].

MICHAEL BEALE: Right. If you have your own Active Directory service in your own company, yeah, you could use the OAuth-- there's a thing called-- I'll show you in the code. The component that I'm using it's called AuthSession. Let me just quickly find it. I'm just blanking out. Yes, so this is the component here called AuthSession. This AuthSession points to any, effectively, SSO compatible service.

So in this case, Forge has single sign on, but if you've got your own service that does single sign on, like Facebook or Google, you could simply point, this is the Auth URL, you could simply point this to that server, and then it would try to authenticate to that server with single sign on. So this is the standard three legged authentication stuff. In this case, I'm using Forge, so this is for the developer.api.autodesk.com. Yeah.

AUDIENCE: [INAUDIBLE].

MICHAEL BEALE: That's a great question. In this tutorial, in this sample-- also, repeating the question, does this do refresh tokens? The answer is no. In this tutorial, I did not add the three lines of code to add the refresh token, I didn't want to complicate the tutorial. It's trivial to do. It's a matter of essentially testing the endpoint test an endpoint on Forge, for example, to see, oh, do I get a 404 back, or 503 era back? In which case, I'm not authenticated. In that case, use the refresh token to convert that to an access token and install that instead.

So it's just a little bit of a hop, skip, jump than the other source, the other Github repo we have has that extra code in it. But for this tutorial, I didn't put it in. These are great questions, by the way. Out of curiosity, how many people in the room have an iPhone? Pretty much everyone. OK, just checking. Yeah, I think that's a wrap. I've got another question.

AUDIENCE: So we are using Expo obviously because it's got the [INAUDIBLE]. Is, how far can we customize [INAUDIBLE]?

MICHAEL BEALE: Yeah. That's another good question. I think one of the-- so why use Expo? Why not just use Xcode and those tools? Literally, the barrier of entry to get the Hello World app, it gets really complicated when somebody walks into the tutorial with a Windows machine. And that just makes me, OK, I can't-- to get that working with NPM correctly, maybe there's a bad editor involved or something. It's so much easier to just use the Expo app, it's free, and it does all that heavy lifting for getting NPM working correctly and QR code scanning, the publish service.

So a nice thing is, everyone in this room right now with an iPhone can install that app without me needing to publish to the Apple App Store. I just piggyback off the Expo service. I can give you a QR code-- give a QR code to my customer, and they can test out the app, a native app. Yeah, question.

AUDIENCE: So then effectively Expo is just bundling all the bad kind of services and all the [INAUDIBLE].

MICHAEL BEALE: Exactly.

AUDIENCE: [INAUDIBLE] get your prototype [? together quickly. ?]

MICHAEL BEALE: Yeah. I didn't mention this-- I mentioned in the handouts, I do say that at some point, when it's time to publish to the app store, you can read the instructions on the Expo side and they go through in detail the process you need to, to do what's called ejecting your app. It's like, if you're familiar with CRNA, they create native-- sorry, create React Native app. So it's exactly the same as that. You've got to eject, and then upload to the app store certification, and then make a true app. This takes all of that. It's the start of that cycle before you can get to the final polished app before pressing that final button. All right, I think we're done.

[APPLAUSE]