Create an App with AI & no coding

In this tutorial we will explore how to create an app that can be published to playlists and run locally on the players (together with other content) using AI - no coding skills required!

The method used here works if the app is completely self-contained, and does not require any editable template fields and no integration with Dise player APIs. It is based on the Web App (boilerplate) found in the Dise App Library.

The example of this tutorial is a “Quote of the day” app which shows a random motivational quote:

The same method can be used to create much more advanced applications, such as live dashboards, interactive touch screen applications, games, etc.

In this example, we let the AI do all the work, including the graphical design and collecting good quotes from the Internet.  But we could easily have given it a finished design or some design guidelines to work from.

ChatGPT Codex desktop application was used when creating this tutorial, but Claude Code should work equally well.

Step-by-step tutorial

Create a new project with a local folder to work from.
In this example, we call the folder and the project Quote of the day.

Now take the time to write a good prompt, describing what you want in as much detail as possible.  
In this example:

I would like to create a single-page web application which shows one motivational quote randomly selected from a json file containing many quotes.

The application is designed to be shown in on a digital signage screen and therefore should be in a resolution of 1920x1080 pixels. It should use a minimalistic design, with black text on a blank white background. The quote should be formatted and use typography as is common for quotes, with the name of the credited author below the actual quote.

First, create a json file "quotes.json" and populate it with some good quotes. Structure the json file such that for every quote, we separate the actual quote and the author. Please search the web and find: general motivational quotes suitable for a business context, a good collection of quotes from Oscar Wilde and a good collection of quotes from Mark Twain. Store all those quotes you find the json file.

Then, go ahead and create the application!

You should now have a working app that you can try out directly from with the AI tool. If unsure where to click, just prompt:

Now run the app

If necessary, iterate with more prompts until you are happy with the result.

Now we want to wrap up our application as a Dise app package, which we can then upload to the Dise portal as a template:

Now I would like to package this as a Dise app as described in Web App (boilerplate).

Download the boilerplate zip and create a new zip by strictly following the exact instructions in the document, steps 1 to 4. Do not touch the structure or contents of the boilerplate zip, other than template.json, icon.svg, and the app folder.

The name in template.json should be set to "Quote of the day". Please create a nice thumbnail that we can use both as thumbnail and icon. Do not attempt to upload to the Dise CMS, I will do that myself.

And voilà!  We have a zip file we can upload, with a nice icon:

Finally, we can create a Message and publish it to a playlist: