Building a Euro 2024 App with APEX and AI Assistance

Lee Burgess Jul 9, 2024 10:00:26 AM
Building a Euro 2024 App with APEX and AI Assistance
10:37

With the release of Oracle APEX 24.1, the inclusion of AI-assisted development features has revolutionised how we approach application development. In this blog post, I'll share my experience building a basic Euro 2024 stats application using these cutting-edge tools. This application provides real-time statistics and insights for the Euro 2024 tournament, showcasing how AI can streamline the development process and enhance both functionality and user experience. Today, I will walk you through my steps (including all the times it didn't quite go to plan!) and give my opinions on the new AI assistance features.

My high-level approach:

  • Find a suitable API to supply the data
  • Create the REST Data source
  • Synchronise the tables with the API
  • Set up AI Credentials in APEX
  • Create an application using the Generative AI functionality
  • Make some AI-Assisted changes

 

Find a suitable API to supply the data

As the theme of this blog is the utilisation of AI, it would be rude not to use ChatGPT to find me a list of free Euro 2024 APIs I could use for my app. So, I did. I tested a few out and found one I liked from rapidapi.com. It had some useful basic info, which is all I was looking for.

Building a Euro 2024 App with APEX and AI Assistance
Create the REST Data source

I need to set up my REST Data sources. This can only be done within an application, so I created a skeleton application purely for this purpose (ultimately, I want to use the generative AI feature to create the final app once the data and tables are in place, so I need to use this workaround for now).

Once the application is created, I add my REST data sources using the API endpoints and key. More information can be found here: Setting up a REST data source.

Synchronise the tables with the API

As this is not standing data, we need to get the latest data from the APIs at regular intervals. Data synchronisation was introduced in APEX v19.1 and allows us to allocate tables that are refreshed from API data at user-defined intervals. We can either select current tables to use or let APEX create them based on the data profile of the returned JSON. The latter is perfect for my needs in this case and is what I did.

Building a Euro 2024 App with APEX and AI Assistance

More information on Data Synchronisation can be found here.

After an initial synchronisation, I have all my tables filled with the latest data. I set them to refresh every hour.

Building a Euro 2024 App with APEX and AI Assistance
Set up AI Credentials in APEX

This is a pre-requisite for what comes next if you haven't done so already - you can find out how to link APEX to your AI provider here.

Create an application using the Generative AI functionality.

Now we have our tables and data sources in place we are ready to create our application using the new Generative AI creation feature. 

Building a Euro 2024 App with APEX and AI Assistance

When you select this option, an APEX Assistant modal appears, asking me to describe the app I want to make. It can't be this easy, can it?

I describe a rough idea of my app, and it returns four pages with ideas on how to display the data for each.

Building a Euro 2024 App with APEX and AI Assistance

This sounds ok, but I think an interactive report of players is boring, so let's ask to change it: 

Building a Euro 2024 App with APEX and AI Assistance

Awesome! Let's go ahead and hit Create application to see what it comes up with.

Building a Euro 2024 App with APEX and AI Assistance

I'm taken to the more familiar 'Create an Application' screen, and it has added the pages mentioned above. I hit create and wait for my app to cook.

So here are the pages it created:

Firstly, we have a Teams page complete with a card for each team, the coach's name and the country's badge:

Building a Euro 2024 App with APEX and AI Assistance

This is a pretty good start. It's basic but is a good base to work from.

Next, we have a Players faceted search page:

Building a Euro 2024 App with APEX and AI Assistance

It has included all the ID data, and there are some facets in there that I didn't ask for, but again, we have something to work on.

The top scorer chart doesn't look quite right. I wrote this at the last round of group stage matches, and I'm sure there are a couple of players on more than 1 goal, so we will need to tweak this. But at least we have a chart linked to the data. 

Building a Euro 2024 App with APEX and AI Assistance


Finally, we have the top assisters bar chart:

Building a Euro 2024 App with APEX and AI Assistance

It's fairly uninspiring, but I'm not sure what I expected.

It seems to have struggled with the charting setup, but it's not a bad attempt.

My Initial reaction to the Generative AI application creation is positive. It has saved me time and gave me a base to work with. For reporting on more standard datasets (as you see in most demos, 'Sample HR data come on down…'), you would probably get close to the desired outcome, however, for things like charts, it seems to struggle slightly to get what you require. Perhaps a more detailed prompt would have given me a better result.

Make some AI-assisted changes

So now we have our base pages, let's use the AI-assisted SQL Authoring and General Knowledge queries to make some enhancements. I want to add a logo to our app, as it looks a bit dull. I'm going to pretend I don't know how to do this and try out the APEX assistant. Currently, you can only access it via the code editor or SQL workshop (although I have an APEX idea to add a button accessible from everywhere here. If you agree, please give it a like).

Building a Euro 2024 App with APEX and AI Assistance

Not quite correct, let's rephrase:

Building a Euro 2024 App with APEX and AI Assistance Image 13

I mean, it's not far away, but the User interface is not found by going into Themes, and there's no such thing as the #WORKSPACE_IMAGES# button. If I were a new user, this hallucination would be pretty confusing.

I was hoping that the APEX documentation would have been fed into the AI model using RAG (Retrieval Augmented Generation), allowing users to query and receive accurate feedback. But, this doesn't appear to be the case, so hopefully, this will be in later releases.

Luckily, I know how to do this, therefore, I can add my logo with the link to the file in static files in User Interface. With a few tweaks to the theme, the app looks better already.

Building a Euro 2024 App with APEX and AI Assistance

It looks like the team names and managers are all lowercase. Let's use the assistant to fix this:

Building a Euro 2024 App with APEX and AI Assistance

I insert this code, validate and run and - 

Building a Euro 2024 App with APEX and AI Assistance

Beautiful.

Let's make some changes to the player's faceted search screen. There are a lot of ID columns that we don't want to be visible to the end user:

Building a Euro 2024 App with APEX and AI Assistance

If I open the APEX assistant from the query of the player's classic report, I can ask it to remove the ID columns: 

Building a Euro 2024 App with APEX and AI Assistance

…or not. OK, let's try changing to the 'General Assistance' option and select Building a Euro 2024 App with APEX and AI Assistance Image 19.

Building a Euro 2024 App with APEX and AI Assistance

Now, we are getting somewhere. I click insert and validate my new query and, we are good.

There are still a few things I would change in this report. Let's get productive and fix them all with one prompt:

Building a Euro 2024 App with APEX and AI Assistance

Again, I insert, validate and run and…

Building a Euro 2024 App with APEX and AI Assistance

Much better!

OK, in hindsight, a pie chart is a ridiculous way to display the top scorers. Let's delete this chart and create a simple classic report using the assistant.

Building a Euro 2024 App with APEX and AI Assistance

Close, but not quite right. On validation, I'm getting an error:

Building a Euro 2024 App with APEX and AI Assistance

 Let's try out the new Debug Assistant. I click – 'Help me fix this'.

Building a Euro 2024 App with APEX and AI Assistance


This elaborates on the error and gives me guidance on how to sort.

All the data can be found in my EURO_SCORERS table. We don't need the suggested join.

Building a Euro 2024 App with APEX and AI Assistance

 

I will try again and be more specific in my prompt:

Building a Euro 2024 App with APEX and AI Assistance

It has got the columns correct but ignored my capitalisation request completely.

I will add these in manually and run.

Building a Euro 2024 App with APEX and AI Assistance

I'll be honest, for such a simple query, I had to type lots of words and for the output to still not be correct. I am starting to question whether this will save me any time…

Let's stick with it, I want to change the assist chart to a classic report, but I want to add some aggregate data, hopefully, the assistant can help us out:

Building a Euro 2024 App with APEX and AI Assistance

*sigh

Let's try 'General Assistance'.

Building a Euro 2024 App with APEX and AI Assistance

Close, but for some reason, it has added team_name and minutes_played instead of the correct column names without the underscore. I can select 'Use Selection' in the code editor and ask it to refactor.

Building a Euro 2024 App with APEX and AI Assistance

I give up at this point and manually amend the query.

It did understand my aggregation request, but the simpler tasks of changing column names failed miserably.

We got there in the end:

Building a Euro 2024 App with APEX and AI Assistance Image 32

The assistant is contextual. If you are in a code editor, it is primed to assist with PL/SQL and SQL. Let's create a JS dynamic action and try getting some help to generate some JS in the editor:

Building a Euro 2024 App with APEX and AI Assistance

Building a Euro 2024 App with APEX and AI Assistance

It worked the first time as expected and gave me some insight into how it works, great.

Conclusion

I must be honest here and say that my experience with the AI Assistant was one of mostly frustration. Most times it didn't do quite as I asked, even with clear prompts. I found myself writing large prompts to try and change a couple of lines in a simple query.

I purposely overused the assistant to test it out and tried to come from the perspective of a new developer, and I feel it did the job OK, but it is not quite the complete 'no-code' experience just yet.

The app creation tool was really cool, and I will definitely be using this as it saved a lot of time creating the base pages and components I can tweak.

The AI-assisted debugging tool was nice. It would explain the error and, where possible, make the change for you at the click of a button which I liked.

Given my issues around the Query Builder, it would also be nice if it offered the context switch to General Assistance in cases where it can't help.

I currently use external AI tools to assist with more complex SQL functionality, CSS and JS assistance, so having the ability to do this from within the application will save me some time. I would like to see a button always visible on the builder. So we can access the assistant without having to be within a code editor for my last point to be pertinent.

Overall, the introduction of AI into APEX is exciting, and for a first iteration, this is an excellent attempt and will only improve.
Will it be enough for new, inexperienced users to build queries on simple datasets without much SQL experience? Most likely. For more experienced users, I still think it will be quicker and more accurate to write our own queries currently. However, I can see the balance shifting towards AI very shortly. 

24.1 really is a groundbreaking release. While the AI features (quite rightly) take the spotlight, there are a host of improvements. Check them out here.

For more information, check out our Oracle APEX Services, and if you liked this blog, check out our other APEX blogs here.

Subscribe to Oracle APEX Insights if you want to stay tuned for more APEX updates.