Jmix Windturbines: A New Jmix 2.x Demo Showcasing Efficient Mobile App Development

Announcements
#1

Hi everyone,

We’re thrilled to introduce a new demo project that showcases the mobile capabilities of Jmix. This project responds to a frequent request for a practical example of how Jmix can be used to efficiently build Progressive Web Applications (PWAs) and mobile apps.

Jmix Windturbines

The Jmix Windturbines example demonstrates how to create robust, cost-effective mobile business applications using Jmix 2 and Vaadin 24. It highlights the seamless integration of PWAs, delivering mobile experiences with minimal cost and effort while leveraging Jmix and Vaadin’s powerful features.

The business use case for our Jmix Windturbines application is the maintenance and inspection of wind turbines. Field technicians use the app to access critical information about the turbines, perform inspections, document findings, and report on maintenance activities.

Demo

Explore the Jmix Windturbines app by checking out the live demo here: https://demo.jmix.io/windturbines.

The sources of the demo you can find in the corresponding Github repository: GitHub - jmix-framework/jmix-windturbines: Mobile first Application for performing field-maintenance on wind turbines, developed using Jmix

1-inspection-list

2-turbine-list

3-turbine-details

4-inspection-detail-1

5-inspection-detail-2

6-inspection-detail-3

7-home-screen

8-full-app-screen

9-login-screen

Blog Post

For more insights on how to effectively use Jmix to build fast, efficient, and cost-effective mobile applications, check out our new blog post: Build Cost-Efficient Mobile Business Apps with Jmix 2 and PWAs.

In the coming weeks, we’ll publish a follow-up post with technical insights on building mobile-optimized Jmix applications like Windturbines. Stay tuned, and in the meantime, feel free to explore the demo and share your feedback!

5 Likes
#2

Great work - both in demo and in article, Mario!

#3

Great work! Cannot wait to see the post on the technical insights on building this mobile-optimized application. I will like to know what makes it different from the normal Jmix 2 web application.

Thanks

1 Like
#4

Great work, elaborative article. Eagerly waiting for a video tutorial.

#5

Thanks @mario

I have created mobile app based on this project but it is showing addressbar (but windturbine don’t show address bar)

What setting i have to do? please guide.

#6

It was due to ssl. now solved

#7

Hi @mario
Great work!
I tried to run the demo from my mobile but i see the address bar, how is the address bar can be hidden?

#8

@mortoza_khan You have to install the PWA or open the demo in chrome and them “add to home screen”

regards

1 Like
#9

Thank you, will try

#10

Hi everyone,

as mentioned before we released the second blog post containing the technical information on how to implement a PWA in Jmix like the Wind Turbines app.

You can find it here: Architecting and Implementing Mobile Business Apps with Jmix 2 and Vaadin Flow – Jmix

It mainly covers the following areas:

  1. Vaadin Flow & Progressive Web Apps (PWAs): Overview of how Vaadin Flow can be used to build PWAs that provide app-like experiences directly in web browsers, focusing on mobile accessibility and user experience.
  2. Architecture Options for Mobile Apps in Jmix: Exploration of various architectural approaches to build mobile apps using Jmix, including considerations for backend, frontend, and UI elements tailored for mobile devices.
  3. Implementing Mobile-Optimized Features in Jmix: It provides insights into building PWAs within Jmix and highlights techniques such as utilizing CSS for responsive design and implementing virtual lists to enhance performance and user experience on mobile platforms.

Cheers
Mario

2 Likes