Has anyone let Wappler AI create a new page?

Has anyone let Wappler AI create a new page file in a NodeJS project?

Did it go well? Or did the Wappler editor get weird?

Last time I used AI to create a new page file (outside Wappler) it didn't go that well with Wappler editor, some page settings were missing in the tree viewer. I don't know what kind of specific configuration Wappler needs to handle new EJS files

This whole site was 80% created by Claude Sonnet 3.7. It includes an Admin section where the properties are maintained -- AND it is a PWA complete with an Install App button. Created this site to teach me how to use AI in Wappler.

Please note, this is a project that I created outside of my to-do list, hence spent very little time on making sure that the code is 100% Wapplerised.

What I have noticed on the run:

  1. Excellent commenting
  2. Preloads and pre-connects
  3. Great for social media
  4. SEO enhancements
  5. Great versioning of style sheets designed for cache busting.
  6. Optimal accessibility
  7. Great Lighthouse scoreimage

Dislikes:

  1. Many of the extra style rules could have been covered by Bootstrap.

It is a matter of asking questions first, then using the answers to issue the instructions to AI. The site was created in a matter of days.

3 Likes

OMG! Please do a tutorial video on how you did the 'Install App' part! I need do do that. That is even more elegant than using progressier.

1 Like

@brad, have a look at the sw-cache-control that was scripted by Claude for the full 100%. This script includes 2 buttons, namely

  1. Install App
  2. Refresh after a new service worker version (cache busting)

The placing of the buttons for the mobile version are at the bottom of the screen, while those for larger screens are in the navigation bar.

Just ask Claude what the possibilities are like:

Can this app be turned into a PWA?

I'll check your current project structure to see if it can be turned into a PWA (Progressive Web App). Let me examine the layout and project files first.

Reading file main.ejs

Reading folder public

Yes, absolutely! Your [name of app] app can definitely be turned into a PWA (Progressive Web App). I can see you already have a well-structured Wappler application with modern frameworks. Let me add the necessary PWA components to make it work offline and be installable.

Here's what I'll add to make your app a PWA:

1. Web App Manifest - defines how the app appears when installed
2. Service Worker - enables offline functionality and caching
3. PWA meta tags - for proper mobile display and theme integration

Then go through each point as an instruction, not all at once for fear of an overload:

1, Create the Web Manifest
2. Create the Service Worker
3. Create the PWA meta tags

I hope that helps.

2 Likes

Much appreciated Ben! I will give that a try in the morning. Too many beers into the evening to try tonight. :wink:

1 Like

With the new AI Manager as left side panel you can do project wide tasks, so create indeed all kind of pages, server connects, database migrations etc.

So just give it a task and it will do it for you :slight_smile:

3 Likes

I've only used it to create some elements on a page, and so far it's been great. Given me exactly what I was wanting.

Does it have a grasp of Sockets yet @George? I've a Project that needs live updating coming up and will try the AI integration properly from the ground-up.