Build a Full Stack React Native App with Oracle 23ai

Let's get going. Today, this workshop's about building a React Native app with a new stack from Oracle similar to like Mern or Meme or other stacks, other full stack development that exists today. This is new with Oracle, actually. The 23AI release, it's a significant release. And now you can develop JSON or NoSQL against the Oracle database, and it is the full Oracle database.

Let me introduce myself. I'm Doug Drexel. I worked with Oracle for most of my career. Well, I worked with BEA, which was acquired by Oracle. Lately, I've been involved as a developer evangelist trying to take some of the new features from the database and expose them, new features that people may not be aware of and expose them to the developers.

Let's see. You know, before we get here, I just want to do this. I'm going to assume this. See this GitHub repo, most of the stuff that you're going to need to accomplish this lab, you can just cut and paste from here. Okay? So, be aware of that. I would recommend that everybody, if you don't have the database running, you should just start it now so we can download, and then it'll be done by the time we get there.

So yeah, at the end of this lab, hopefully we will have a walking history application running against the full stack. It's a React Native app. And basically what it does is, based on your location, it shows the nearest point of interest and will tell you about it. I live outside of New York, so this is New York biased, but this is me coming out of Penn Station. The closest attraction would have been the Empire State Building. Do this all locally. We run it using parse server and the new free Oracle Docker database. So database, local free, 23.8i, right? Yeah, it's easy to start. We'll show it. It's an autonomous JSON database. Really, we'll get into this, but it can be many types of databases. And I could easily take this stack and point it at a database instance in the cloud. So it's easy for me to flip back and forth between local development and moving against my cloud-based stack. So parse server, for those of you that don't know it, it's a Node.js express app.

It's what they call an embass server, mobile backend as a service. It provides a full set of APIs for developing mobile and web apps, depending on what front end development stack you're using. And then the front end is obviously going to be the React Native mobile application.

What are you going to need? There's a lot of stuff. Docker, obviously. Node.js, I am using for this lab 20.12, which is the recommended version for parse 7.0.0. An iOS or Android development environment. I do iOS, so we really can't help on the Android side.

SQL client is sort of like a mongo shell, right? It's a client you can use to access your local database instant. And then there are client lives, instant client lives that are used at runtime. So yeah, this is new. And this is part of what makes this stack new, is that Oracle does have a free, a full-featured database image. So I've personally written against a queue. I've run SQL against it. It's the whole thing, all right? And that's due to this new Oracle for use license, which is also new to Oracle, where we can just go and say, yeah, you can use this for your development, and it's free.

So there's two new things, right? The local container and it's free. So it should be pretty simple to start, right? Basically download it. And again, for anybody who came later, refer to this Oracle dash samples, Oracle adapter parts for cut and paste.

OK, so I'm going to get into this more later. But when you connect to the image assist DBA. So now in Oracle, they have this idea that it's a container database. If anybody can help with the chat, that would be cool. Let's see what this one says, but I'm not going to. Oh, super. Thank you. Yeah, exactly. Yeah, so, OK, so this is like a container database. You can have many databases of many types, right? So when you log in assist DBA, you are the administrator of the whole database. Within the database, there can be multiple database instances that each have their own administrator.

Within the database, there can be multiple database instances that each have their own administrator. So if you're like doing a cloud native environment, and you have, you know, the order service and customer service, right, each of those can become PDBs in the database managed by that service team, right? So why we're doing this is because we're going to run a script at the database after you install it. And what this script does is basically enable JSON development against this database instance called free PDB1 which is the default, right? You get it. Any time you start this container, you get this database instance in there with PDB admin as the default administrator of that database instance. You can also just cut and paste this into a soda file, I call it, and just run the command as a script, right? Now, I've prestarted all this stuff. So if I go, docker ps.tray, you can see it's up, it's running, it's healthy. So that piece of the stack is gone. And that's all you should have to do to get the database part of the stack going.

Well, this is what I was talking about, about the container database, right? So, you know, each self-contained PDB could be like analogous to a services bounded context. At the container database level, and this is interesting and useful, I think, you can manage many as one, you can patch them all, you can upgrade them all. The other interesting bit I like here is you can report across all the PDBs in your instance. So if you're capturing metrics and you want to see them on like a global scale, you could do that very simply. All right, so like I was waxy on and on about the new features, and I really do believe it's true, this has been in development for a long time. There's a ton of new features that you can use and innovate on. So some of the features I'm using going forwards, or have used, so I'm using property graphs. What I'm doing with the property graph feature, and this is kind of interesting, especially if any of you are involved with existing Oracle databases that may have huge schemas. You can collect a thing called a SQL tuning set, which basically captures every query that's run against the database. And you take that information and you could turn it into a weighted graph based on join activity. And you can assign affinities, and that becomes the graph. And then I run community detection on there using the info map algorithm. And that sort of finds communities or clusters in the existing database based on joint affinities, which may be useful in sort of combining those communities into one PDB, which then becomes the database for a service. JSON relational duality, I'm using, it's kind of nice. What it does is that it allows you to write JSON views, read, write views on top of existing SQL schema. So that's really useful, right? Because you could take these services and instead of having to query them all and merge it together, you can just write this view on top of it, and it'll just run for you. So like, for example, all right, this is what I am working on, right? So I'm looking at the prototype is like a college database with courses and schedules and stuff, right? Pulling out all the different sort of services out of an existing SQL schema and dividing that into their specific services. And then for gathering data across these different services, I just write these views.

Java stored procedures I will talk about, you can write JavaScript stored procedures now in the database. You want to combine some things together to reduce route trips, that's available. And obviously AI vector search, everybody wants it.

And obviously AI vector search, everybody wants it. This stack has it if you use the NodeDB, Node Oracle DB libraries. Get back here. So that's it. So I hope that we are, you know, have enough time to download the Docker image. So I've been working with the parse folks. And this version works with par 7.0.0, right? And 7.1. Here, let me go into this. Let's show you this. This is the main. This is where, this is public open source. This is where the current build is, right? So I had to add, or I worked with the parse team and they helped, and we made some things like prior to this parse had two database adapters, Mongo and Postgres, right? And they were actually part of the server proper. So what I did when I worked with the parse team was develop, to develop or enhance the way that you can actually construct a storage adapter to be loaded dynamically. And there's a couple changes going into parse that is going to be available in the 7.1 release. So if you were to look at like this branch here, Oracle, this one is actually waiting on the full release. A nice thing here too, is I have GitHub build. It's a full build. It's a lot of what you will be doing here. Really, it's just on an Ubuntu machine running on GitHub. This runs the parse server test suite, and there's still a few failures. It's going to take a look, but you can see there's some stuff here, right? So that's what we were doing, check out parse server, install SQL, install the client, test, run the image, right? So let's very quickly take a look here on the run test. Come on. Go, buddy. All right. It's not. Let me refresh this. I don't know why that's not working. I ran this a while ago. But anyhow, it runs 3100 tests. I think there's 16 failing that I still have to look at.

So there you go. So if you ever want to see that, or like you do GitHub Actions, you can just look at ci.yaml. Okay. Let's go back to this.

So, oh, and what are the features we put in here? Let's talk about that. So one is to run the adapter and identify the adapter module from the command line and load it dynamically. And the other was to set up a test exclusion feature that allowed each specific adapter to decide which tests in the test suite should be excluded. Let's go back to the slides.

Okay. So there you go. So that's why right now you have to do this a little bit of sort of putting the Oracle adapter source in parse server main in the same directory as Mongo and Postgres. Right. And then you run an npm install. These are the Oracle node DB. This has a new feature that I have not been able to play with yet. But it does support vector search. So let's take a look at that real fast. There you go. This is it. These are the Oracle node libraries that I use to build the adapter, right? And they're full featured. And they just released a vector data type, which I have not gotten to play with yet or experiment with. But I want you to know it exists and it's ready to go. Let's see. Let's see if I can find it. I'll show that. I did have a. There was a link if anybody wants it or is interested. Somebody wrote an article on on Medium. Yeah, I like this one. This was good.

Yeah, get a chance and you're interested in that. This is a good article. It talks about the features. Anyhow, back to the slide show.

Okay, and then you need to install the file adapter, the parse file adapter, which uses local storage. And this is a requirement if you use a database adapter as a true adapter. So that's why we're installing this. It creates local storage in the file system. And you can use that to install to upload video and audio and whatever whatever large files you deem necessary.

And then you just build the server with NPMCI. Right. Making assumptions here. But I think most people here should know about Node. I hope. Right. So let's go back. I have one running over here. I started it in this window. Let's take a look at this first. Let's take a look at config dot json. OK, so we built it. Let's see what the next one is.

Oh, I do. All right. We built it. Let's talk about parse server. For those that don't know, it's an express Node.js server. And that works with 23AI. And, you know, I covered I covered the information about where we're at and upstreaming with parse. One thing I like about it is it supported a lot of SDKs.

Right. You can you can develop like today with React Native. I've got a friend, Paul, who made a unity application. I've worked with JavaScript, FQL, Flutter. So you have a lot of options there on the front end. And it does. It has a really large set of APIs. Ready for use and pretty good. We go over here, you can see I like looking at the JavaScript one. But you could see, you know, it's a pretty full featured set. I've done. I haven't used them all. I imagine the test suite is hitting them all up and they do work, but I have used some of the geolocation stuff. I have used some of the push notification stuff. I have used cloud code, so it works pretty well. Now, let's go back here to this slide.

OK, before you start the server, you have to set up a config file, right? You can just cut and paste and plop this in. You can see here now where you define it. The way Parse used to store is you just specified a database URI because the Mongo and Postgres were part of the server, but now it's an adapter. So you specify the location of the module and the connection string, right? This collection prefix is nice. If you have multiple users working on your database instance, you can get a Frank or Paul or Gina or whatever you want to distinguish whose tables belong to who. We're mounting GraphQL. We're mounting the PlayGraph. We're setting a GraphQL endpoint. We are specifying where the file adapter is located. And then you run the server. On the Ubuntu pipeline I showed in GitHub, InstaClient is at version 23.4, which is 23 AI, so I have a match between clients, right? But a lot of my local development is on a Mac, and that's only at 19.16, the Instant Client. So the assumption when you use this stuff eventually is that it's 23 to 24. It's 23 to 23. But if you have an earlier version of the InstaClient, just export this environment variable prior to booting the server, right? And then once you boot the server, basically not much.

Hey, it connected to the connection pool, the connection pool connected to the database instance, and now we have these services offered locally, right? The parse server, the GraphQL, and the PlayGround, which I will show in a little bit. So that worked well.

Okay. All right, so let's make sure it works, right? We're going to use the REST API, so parse, like parses Hello World is something they call game score, right? So let's just run it and hope this isn't anticlimactic. All right, so in this command, you see the headers. Right? We're sending the application ID that we specified in the config. We're sending the information and we're hitting the parse endpoint. This will actually create the collection and stick a document in it. And there we go. Yay. First step achieved. We've actually ran the stack and entered data using the REST API. And that really... not too difficult because I don't want to jinx myself.

Okay. And basically, what you get back is an object ID, all right? So now, remember, earlier I was talking about the container database and PD admin versus sysdba, right? So our partition database or our pluggable database is the correct word, has the user PDB admin. So we're going to sign in as PDB admin and have access to the actual pluggable database as opposed to the container database, which we did before with sysdba. Let's go over here. And this is why you need a SQL CL, right? To do these kinds of things locally. So let's just connect. And we're in. So this... We have commands now for SOTA. This is like the JSON commands you would use. So if I do SOTA list, you'll see this new game score collection. These collections prefixed with the underscore are parse server internal. Collections. So, FYI. Let's take a look. SOTA.

Yeah. Game score. So, duh. And let's take a look at it. By key. And there you go. And to end local stack. Let's see what's out of the browser.

This is nice. It's actually kind of useful. Let's just do this quickly, too. So you can install the parse dashboard and work on this locally also. And we're going to do the same thing. You can install the parse dashboard and work on this locally also. And I have installed it already. We give it the application ID. We tell it the endpoints of RackQL and parse. So let's go take a look at that. All right. There we go. So, let's copy the URL. Let's go over to Chrome and hit it in. And there we go.

Now you'll see, you know, from the kidk.json earlier, I called it application ID. And you can go in there and take a look. Unable to connect to server. Anyway, it worked yesterday. All right. I'm not going to dwell on this. Maybe we'll come back to it as we get through.

I don't know why that's not working. I was using Firefox. Let me try that. Let's see what happened to Firefox. Yeah. Interesting. OK. So that worked with Firefox.

And as you can see, so in here. There is, you know, a browser, right? We have roles, users, and here's the game score collection. You can do all kinds of stuff here and look through it.

There are, there's a webhook. You can write webhooks here. You can actually, this is actually kind of cool. We have a Spring OBS platform that runs on Kubernetes that offers Spring boot services. And using this interface, you can set up webhooks to the Spring boot microservices and offer them almost immediately or extend your parse API almost immediately. Jobs, logs. Here's the push notifications. I've written some stuff on this. I've actually been able to use the Apple push notification service from here. I pushed it from Cloud Code. And let's look at core, right?

But another feature here that we like or I like is the API console. This was very useful in helping me, you know, check out the APIs and see what worked well. You can see here there's the GraphQL console. I am not. So I'm not a GraphQL expert, but I figured out some simple stuff. Right. So from here, you can test things out, right? You have to give it these headers. But this is an example of creating a course class or collection. Right.

And if I run that. You know, we verified that this mutation actually worked. And then if I want to create a course collection exists, right, you just run this. And there you go. Now, if we go back to the browser and refresh our page, you can see we have a new collection called course and a new entry. So it's nice. I like it. It's useful for checking stuff.

Let's go back. So now you have the full stack running with the browser. Let's go back. Where are we here? OK. All right. Well, I guess we're ready to do this bit. Full disclosure, I'm not a super expert at this. And I had some issues yesterday when I was doing pod install. But hopefully, hopefully that doesn't happen today.

So basically, we're going to clone the repo. I've already done this. Right. Clone the repo. And I installed. And I had a problem with MPX pod install. But I cd'd into my iOS. Right. I cd'd into my iOS directory, did a pod install, and that seemed to work. So what's next? OK. Let's go take a look at that. And this stuff takes a while, too. Like the build.

I use Xcode. I think I'm up to 15-something. Oh, what's the right here? Let's just make sure. There's our course collection and the database created through the dashboard. I have, at times, been able to run this local stack and push notifications through APNS. This is pretty cool, in my opinion.

OK. Here we go. This is our walk-in history. I ran npm install. I am going to start a simulator. I think this is it. There we go. Put that over there. Hang on. Oh, there it is. I'm just going to minimize this window. Put that over here. Let's start the simulator. All right.

So this is a… Really, it's a simple thing. We have just some places of interest. There's a script. We'll run the script to create the data. Then, basically, we will take the GPS location and run it against this table to find all the places of… Run it against this collection to find all the places of interest that are within two kilometers of the current phone location. All right. So that came up super. So let's go in here.

So that came up super. So let's go in here. You'll see… And this is the way it's set up when you download the repo, right? It's application ID. Like, all this stuff should just work out of the box.

So let's do… Let's go over here. All right. Dot. And populate the database. Done. We're done. You can see over here. Oh, there's some errors. I know what these errors are, right? Like, this is because we keep trying to recreate the collection every time we want to do it. So that's okay.

So now we have… Okay. So that's entered. Let's go over here. Take a look at it. All right. There we go. All right. So that's loaded and entered. So… Next thing is to run this. The next thing is to show you… Here we go. React latest. Nope, not that one. Let's go over here. Block in history. Components.

Components. Location. This is basically the landing page for this simple application. And in the user effect, I connect to the database. Or connect to the server. And then, whole get location. We'll see that soon. But again, this should work right out of the box. I haven't figured out yet how to not put this into the user effect and the specific component and just sort of set this information at the app level. But be it as it may, that's where I'm at.

Okay. So let's go down. All right. So basically, again, we're pointing at the right spot. So let's run it. mpx react-native-run-ios. I'm assuming… So for those of you that never really ran a React Native app, let me go back up here. When you do npm install, this basically installs a React Native template into your project. And all the dependencies you need to run the project. And for macOS, you need to install those dependencies doing this pod install. So that's basically what's happening here. So we'll point to the server. And then we will run our app.

And this starts a metro. Here, let me do it. All right. You'll see that this will start a metro server. This is like the React Native part of the React Native development environment. It's like the interface between the different platforms. So I'm on iOS.

So I'm going to hit I. And let's go over here. Now it's building. So I've kind of said a lot. Wait, good thing I built this earlier. The first time usually takes a while. So it's installing it into my simulator. And it's starting the application. And here we go.

Are there any? I don't know if this is open. I'm getting questions. I guess you could just type them into the chat and I'll look at it at the end of this. But here you go. The app is loaded. It's hit the database. It has found out that the closest attraction to me is two kilometers away. Now the way I set that is over here. Location where I had a custom location. And this custom location is Penn Station in New York City. But let's just give it a new location. Let's see. I'm going to make some up instead of finding my notes. I'm going to go 40.55 and I'm going to go 73.49. And we'll see. There you go. Javits Center. So, yeah, you can actually test it out locally, run different things. So you got a full React Native development stack running locally. It's easy to run it against your cloud database too by just downloading a wallet. And you basically do the same thing.

I kind of switch between the different databases. We do have a stack you can install that uses S3, or an S3 bucket on the Oracle Cloud. So like a lot of these pictures, my friend Mark has an S3 bucket in Oracle Cloud and that's where the stuff is being pulled from.

Let's see what's next. All right. So really, you know, I hope I was able to show how using an Oracle free 23AI and parse server, how easy it is to create a simple React Native mobile application and run it against the stack and do local development. I hope I've also shown you the different features that 23AI offers to mobile and web developers. And there's some opportunities here. I have a product in mind that I'm never going to be able to build at Oracle, but maybe sometime. Some other things I've done with this. So parse has a thing called cloud code, which I really didn't get into in this talk. But I've used that to get messages, to get a callback on messages to a queue for like spatial data, for like, say like a trucking application. You know, you could build a geo fence. And if the truck ever went out of those boundaries, you could get a alert sent to your phone based on the callback.

That's it. Thanks a lot for hanging out with me and learning about the Oracle Stack. All right. Well, any questions, comments, please let me know. Just send it to me at Doug Drexel. You can find me on LinkedIn. And thanks again for hanging out. Have a good day. Bye.