18 Qt, QML and Felgo Tutorials & Resources for Beginners (2024 Update)

If you’re new to Felgo or coding, then you’re most likely new to Qt and QML too. Qt and QML go hand in hand along with Felgo to help you make cross-platform apps in just a few days. Although it’s the easiest way to make your app, if you’re just starting your coding journey, you might be struggling to get to grips with all the new info you need to take in. Thankfully, there is lots of information online, QML and Qt tutorials to help you out.

This blog post was created to gather all the necessary resources that you’ll need to get started with mobile app development:

The differences between Qt, QML and Felgo
The Best Qt Tutorials

Getting Started with Felgo
Introduction to Qt - Qt Creator
Creating QML objects
Communication between QML Objects
First steps with QML
C++ and Qt tutorial
Felgo tutorials for mobile, embedded and web development
Entity-based game design
Writing a widget-based application with Qt 5

The Best Qt Resources

Books
Whitepapers
Demos and Examples
Webinars
Qt World Summit Talks
Best Practices of Qt
Qt Wiki Learning Portal
Qt Training and Workshops
Professional Qt Services and Development Support

Learn more about the differences between Felgo, QML, and Qt and take advantage of these tutorials and resources to boost your coding power.

The Differences between Qt, QML and Felgo

As a newcomer, you might have a lot of questions about the differences between these three terms. Qt, QML and Felgo are all separate entities but they all interact when you create your app with the Felgo SDK.

Qt is a cross-platform application framework. An application framework is the software that developers use to implement the standard structure of an application. Cross-platform refers to the fact that an application only needs to be written once but works on different systems. Therefore, your apps created with Qt can run on iOS, Android, Windows, and other systems, all without having to write separate codes for them!

QML is a user interface markup language. A user interface markup language renders and describes graphical user interfaces and controls. QML is a part of the Qt framework. However, as QML was created initially for the rapid creation of UIs and animations, you can now use it for writing your app or game logic with a component-based approach. Also, you can mix JavaScript with QML easily and make any app or game you like with it.

Like Qt, Felgo is also a cross-platform application framework. The difference, however, is that Felgo adds a large number of components, elements, and other features to the existing Qt framework to make it even easier for developers to make their mobile apps and games. So we recommend using this slightly modified framework, as it speeds up development and reduces the amount of coding involved.

The Best Qt Tutorials

1. Getting Started with Felgo and Qt Creator

Felgo-tutorial

Now that you know the differences between the 3 terms, it’s time to get hands-on with them using a short QML tutorial. To start learning about Qt and Felgo, you’ll need to open up Qt Creator. This is a powerful IDE (Integrated Development Environment), available on all operating systems that will allow you to create cross-platform apps and games.

Qt Creator is included in your Felgo installation and you can learn how to set up your projects using an essential tutorial called Getting Started with Felgo and Qt Creator. This will guide you through the process of creating a new project and teach you a few simple rules of QML. This quick Qt tutorial is an absolute must for anyone learning Qt for the first time.

If you are more of a visual learner, you can also download the Getting Started with Felgo Webinar. You can watch how to properly set up your app development environment from a Felgo expert.

2. Introduction to Qt – Qt Creator IDE Overview Tutorial

After you have completed the first Qt tutorial, this video will show you some more examples of just how powerful Qt Creator is. You will see the functionality of different parts of the framework and get more acquainted with the interface itself. Make sure to check out the Examples section on the Welcome tab within Qt Creator after you have downloaded Felgo. You will find a repertoire of amazing demos and possibilities with Qt, QML, and the Felgo SDK.

3. Creating QML Object

Once you know Qt Creator, you can start making your own app or game. The basic elements of any project made with Qt or Felgo are QML objects. QML objects include things like buttons, switches, etc. Learning how to implement these objects will help you throughout your coding career, so it’s important to understand them before going any further. Creating QML Objects is a great starting point for beginners, so make sure to check it out. This QML tutorial will teach you the absolute basics of coding with Qt and Felgo.

4. Communication between QML Objects

For your app or game to have a level of functionality, your QML objects must be able to communicate with each other. Communication between QML Objects is a very user-friendly introduction to this subject and will teach you enough to start doing the really enjoyable stuff with your code. This is an essential part of coding both for apps and games, so definitely go through this Qt/QML tutorial.

5. First Steps with QML

First Steps with QML

After completing the 3 previous tutorials, there are still a few more concepts to cover in order to gain a comprehensive understanding of Qt, QML and Felgo. The next tutorial to check out will go back over some of the same material covered in the previous tutorials but it will also expose you to some more essential Qt concepts. First Steps with QML is The Qt Company’s own essential getting started tutorial and isn’t to be missed. It brings you through setting up controls within apps and handling user input.

6. C++ and Qt Tutorial

This long playlist of YouTube videos might look dated, but is still one of the best Qt tutorials out there if you are looking to learn C++ and the Qt framework. Note, that these videos show you the workings of Qt 4, which has been replaced by Qt 5. Most of the code in these videos is still going to work however, but you might run into a few small problems. If you look on the bright side though, finding solutions to these issues will be a great development training for you. This is a good Qt tutorial for anyone wanting to develop in the Qt core framework, without any extra features and a simplified workflow.

7. Felgo Tutorials for Mobile, Embedded & Web Applications

Although they’re not strictly Qt tutorials, the Felgo tutorials teach you a lot about Qt for mobile, web and embedded app development. Compared to the previously mentioned videos, these tutorials use the Felgo framework, adding useful features and shortening development time. You’ll need to download Felgo or add it to your existing Qt installation to be able to follow these tutorials. The Felgo tutorials will teach you everything from how to get started with your first Android app development to how to avoid C++ models in Qt. And they also explain the most important Qt and QML features in an application-oriented way.

Felgo SDK for Embedded App Development

Qt and Felgo are not only one of the most popular tools for cross-platform development but are also commonly used for embedded systems. Felgo supports embedded app development by providing the following tools and features:

Hot Code Reload for Embedded App Development: you can change your QML & JavaScript code and see the change in real time. This solution allows you to save a significant amount of time during embedded app development.
Felgo Cloud Builds: this feature allows you to build your application in the cloud. With this tool you don’t need to worry about setting up the local toolchains. You can simply automate the entire flow from raw source code to deployable application packages.
Rich User Interface Components: using this set of unique controls and visual components, you can create beautiful graphical UI on your embedded application in no time.
Analytics: after you release your mobile app, you’ll want to follow your users and get to know how they use your application. These features allow you to access powerful analytics tools to analyze user behavior and improve the user experience. You can also draw product roadmap conclusions.
Over the Air Updates (OTA): after the embedded system was shipped to a customer, it’s hard to get access to the system and to update the software. Felgo allows you to replace existing software with an updated version remotely.

8. Entity-based Game Design

This is a fun tutorial that shows you how to make your first simple game. Entity Based Game Design teaches you to make a game by introducing you to entities and physics, two essential concepts to understand if you’d like to make mobile games. Once these are covered, you’ll also learn about particle effects, AI and how to use sounds in your games. This is a great tutorial if you’ve never made a game before because it only takes a quarter of an hour to complete.

Game Design

9. Writing a Widget-based Application with Qt 5

After you have completed some easier tutorials, you might want to jump straight into deeper waters. This long session on YouTube is a great resource to follow along, with detailed explanations of the processes under the hood in a Qt application. This is a Qt tutorial, which does not use any Felgo components. It’s definitely a good way to get an overview on Qt, before starting to use the extras Felgo has to offer.

The Best Qt Resources

10. Books

There are plenty of books published online on the subject of learning Qt. As an example, feel free to visit the Qt Company’s website, where you can browse through a long list of Qt and QML related books.

One of the most popular (and free) books amongst all is the QmlBook by Juergen Bocklage-Ryannel and Johan Thelin. QmlBook is fully open-source and aims to guide the developers through QML, its features, capabilities and best practices. It’s a highly recommended and insightful resource if you’d like to build top-notch Qt applications from start to finish.

qmlbook-felgo

The book covers a wide range of topics from the basics of QML to advanced topics such as code reloading, 3rd party plugins, Cloud Build services or C++ integration. The QmlBook also includes code snippets and real-life examples to help you see the components in action.

Felgo is also featured in the QmlBook. Once you have mastered the basics of QML, you can turn to Chapter 8 and Chapter 19 and start writing beautiful mobile applications with just a few lines of code. Both chapters are dedicated to a specific phase in the mobile app development process.

Chapter 8: Learn App Development with Felgo

In this chapter, the book walks you through the initial steps and the implementation of a simple messaging application. This section shows you how to:

Download and install the Felgo SDK
Write a hello world application with Felgo
Add Navigation component with native look and feel
Build apps for different screen sizes and densities
Implement Felgo components like lists and pages
Persist data to storage
Interact with the underlying operating system

Chapter 19: Improve Your App Development with Felgo

Once you have mastered the basics of Qt, QML and Felgo, it’s time to turn the page to Chapter 19. This chapter covers more advanced topics like Felgo plugins to integrate 3rd party services and Felgo tooling like QML Hot Reload and Cloud Builds.

hot-reload-3 (1)

Hot Reload with Felgo Live allows you to change your QML & JavaScript source code and view the result in realtime. It applies QML, JavaScript and asset changes instantly on every connected device, immediately after saving. This reduces the long waiting times for build and deployment steps to only a couple of seconds.

Cloud Builds is a free development tool that helps you boost your Qt and Felgo development with continuous integration and delivery (CI/CD) for Qt and Felgo projects. A great benefit of this tool is that it is created exclusively for Felgo/Qt and it helps users to build and distribute apps with minimum effort and maximum speed.

With that being said, this book is not only a great place to go if you’d like to advance your skills of QML but is also an excellent choice to learn more about Felgo.

11. Whitepapers

Whitepapers published by Felgo: In-Depth Framework Comparison: React Native, Flutter and Felgo

1200x627-Flutter-React-Felgo-Comparison

Felgo also provides an in-depth mobile app development framework comparison, which compares modern frameworks like Flutter, React Native and Felgo. This comprehensive whitepaper walks you through the ins and outs of cross-platform app development, various development and programming languages, real-world mobile app examples, and cool mobile app features with native look and feel.

Whitepapers published by Felgo: 10% Code, 100% App!

10% Code, 100% App! whitepaper mainly covers the best practices of QML. It is a great resource for you to learn how and why to use QML for Android and iOS applications and how to add native integrations in QML.

Whitepapers published by Qt

Even if you’re a beginner, the two whitepapers The Qt Company has published should be of interest to you. Beyond the Code and Driving the User Interface are free to download and cover two very diverse areas.

Beyond the Code is a great piece on how designers and programmers can work together to deliver successful Graphical User Interfaces for embedded systems. Driving the Automotive User Interface is a little different as it’s a review of the current trend of adding graphical center-consoles to cars. Check them out to get an idea of the range of projects that can be created with Qt, QML and Felgo.

12. Demos and Examples

Whether you are looking for mobile app ideas or you already have an existing application: open-source app demos and examples are very useful free resources. From pre-made mobile apps to feature and UI examples, you can find everything you possibly need throughout the app development lifecycle.

Felgo Developer App for Mobile, Desktop and Web

A great tool that you can use during your app development is called the Felgo Developer App.

felgo-developer-app-all-screens

It showcases many important Qt and Felgo components, and contains more than 20 open-source demo projects. You can try app functionalities and UI concepts on your device while checking the source code at the same time. If you are looking for a great mobile app idea, this is a very useful tool to get inspiration from.

Within the Felgo Developer App, you can find plenty of free resources that you can use for cross-platform apps on Android, iOS, Desktop or Embedded. It offers:

Components: Browse through many important QML components of Qt and Felgo. Every component contains examples that you check out and directly run.
Demos: Browse and try open-source demo applications for different genres, to see how you can implement similar features in your own app.
Search: Search for components, examples and demos for your use-case or industry. For example, type in e.g. “gps” to find related resources faster.

You get the Desktop application along with the Felgo SDK when signing up for Felgo. To directly try the demos, you can also use the Felgo Developer App from your browser. Open the Dev App Web (WASM) version and directly explore all demos and examples.

Find App Demos & Examples on GitHub

felgo-developer-app-desktop-try-demo

Github is a development platform that helps developers to manage their projects, codes, and selection of tools and software. Many different example projects and demos can be found there. You can also access the source code of all demos and examples within the Felgo Dev App there. Together with the Felgo documentation on the website, it’s a powerful reference. Explore the GitHub repository by visiting the Felgo Demos and Examples project.

13. Webinars

The Qt Company has released some great webinars over the years to help developers get to grips with certain topics. First and foremost, make sure to check out Get started with Qt. The other webinar that should be particularly useful to new developers is Introduction to Qt Creator. This webinar is targeted at beginners and could be just the resource you need to get started.

You can also download both of these and watch them later offline. Once you’ve watched them, you can move onto Deep Dive – Qt Quick & Qt Quick Controls or one of the other more in-depth webinars.

Felgo also offers comprehensive webinars where you can learn more about features like QML Hot Reload.

QML Hot Reload: The Real-Time Revolution Webinar

In this resource, you can find out more about Felgo’s hot reloading feature, which also works as a stand-alone application.

Feel free to download the recording and watch the webinar offline.

Getting Started with Felgo Webinar

This webinar is solely created to help you begin your journey with Felgo. It covers topics like how to solve common app development problems and how to use the QML programming language to save a significant amount of code. The video also walks you through the necessary steps you need to take when setting up the development environment, testing your code and integrating useful Felgo APIs.

14. Qt World Summit Talks

The Qt World Summit is an international event that takes place every year. Qt experts from around the world gather to share and discuss what they’ve learned about Qt in the previous 12 months and what they expect to learn in the coming years. Some of the videos are great for new learners as they include sample code that you can follow along with. These videos, in particular, are useful for newcomers:

Introduction to Qt Creator by Tobias Hunger

Getting Started with Qt on Android by BogDan Vatra

Qt on IOS A to Z by Mike Krus

The 8 Mistakes of QtQuick Newcomers by Luca Ottaviano, Develer

Best Practices for Qt on Mobile (iOS & Android) - Felgo @ QtVTC20

15. Best Practices of Qt

Best Practices of Qt on Mobile Shared by Felgo

native-navigation

If you would like to start your first Qt project on mobile devices, you should also take the time and read through a comprehensive blog post about the best way to learn and use Qt. This article provides information about areas like the meaning of a great UI; how to publish your iOS and Android app on Apple Store and Google Play, or how to build your app in the cloud.

Depending on your preference, you can either read through the article posted on Felgo’s blog or watch the recording of the talk presented on Qt Virtual Con Tech 20.

Best Practices of Qt Quick

Best Practices are basically a set of Do’s and Don’ts for developers to ensure that there is a certain quality to written code. The best practices are open to discussion and are usually decided on a group basis. You should always try to follow best practices if you’re releasing an app, or going to be working with others on a project. It’s a good thing to learn about these best practices when you start coding to avoid developing any bad habits which can be problematic down the road. This one is definitely for those that are serious about learning Qt.

16. Qt Wiki Learning Portal

The Qt Wiki Learning Portal is the place to go to find even more learning resources. It’s a great collection of examples, demos, and resources for improving your Qt coding skills. Although a lot of the listings here are international language versions of other tutorials, there’s still something here for everyone.

17. Qt Training & Workshops

QtTrainingBanner (1)

Training and workshops are great ways to enhance your software development knowledge and to ensure your users a stable, innovative, and fully-functioning mobile application.

Whether you are just getting your hands dirty with mobile app development or already an advanced Qt developer, there are plenty of visual resources available to help you improve your skills in Qt, QML and Felgo.

Felgo’s online training courses and workshops are carefully constructed by a team of experienced software engineers. Qt experts at Felgo are dedicated to transferring their know-how to you so you can build the best mobile, web, desktop or embedded application on the market.

App Development Master Class with Felgo

The Felgo training sessions are tailored to offer you the best knowledge-sharing experience. Whether you’re just getting started with cross-platform app development, or you are looking to improve your existing Qt and QML skills, the Qt developers at Felgo are ready to share their expertise with you.

Felgo designed each training around a specific topic to provide you a highly engaging and valuable learning experience. The online lessons offer a wide range of theoretical and practical learning material and cover a large variety of topics like:

How to develop Qt apps for Android and iOS platforms
How to master Felgo and QML to boost your development
How to create successful mobile apps with Qt

Personalized Felgo Workshops

While the online courses focus on predefined topics, Felgo offers Qt workshops based on your individual needs. The process is very simple. You share your Qt, QML or Felgo specific challenges and a designated Qt expert from Felgo will help you find a solution to the matter in question. The entirely customized workshops offer you and your development team professional support for mobile, embedded, web or desktop development.

Sign up to one of the Felgo training or workshops and start creating exceptional mobile applications. In case you can’t find the course you are looking for, feel free to get in touch with Felgo directly.

18. Professional Qt Services and Development Support

In addition to workshops and training sessions, you can also take advantage of Qt Consulting & Software Development Services to get support for your project - or even outsource all your Qt app development to Felgo. Choose the package that fits you and your development team the best: