Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Qt App Development - Cross-Platform Development for Android, iOS, Windows Phone and more!

12,726 views

Published on

How to create a cross-platform native app? What is Qt and which platforms does it support?

Get the latest information on the open source, C++ based framework that lets you target Android, iOS and Windows Phone - plus desktop and embedded platforms! Also contains info on contained UI technologies, the Qt dual-licensing model and the roadmap.

Published in: Software

Qt App Development - Cross-Platform Development for Android, iOS, Windows Phone and more!

  1. 1. Andreas Jakl [@andijakl] mopius.com Qt App Development 1 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Digia, Qt and their respective logos are trademarks of Digia Corporation in Finland and/or other countries worldwide.
  2. 2. Andreas Jakl • Startup founder & app developer – @andijakl, @mopius – andreas.jakl@mopius.com – mopius.com • History – Nokia: Technology Wizard – FH Hagenberg, Mobile Computing: Assistant Professor – Siemens / BenQ Mobile: Augmented Reality-Apps 2 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  3. 3. 3 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com From Your Idea to the Store Choose target market(s) for your app Europe, America, Africa, Asia, etc. Select target platform(s) Andorid, iOS, Windows Phone, BlackBerry, Firefox OS Choose development technology HTML5, C++, C#, Java, ObjectiveC, Swift Design, develop & test Distribute ... and get famous and rich!
  4. 4. 4 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Agenda What? Why? Where? How? When? Now!
  5. 5. 5 Qt – What? Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  6. 6. Multi Screen • Computing world today – Laptop, Phones, tablets – TV – Car IVI – Wearables – Virtual and augmented reality – Specialized devices – etc. 6 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  7. 7. 7 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Multi Platform App Development Windows | Mac | Linux Android | iOS | WinRT | BlackBerry* | Sailfish* Embedded Linux | Embedded Android | Windows Embedded Integrity | QNX | VxWorks Native apps Use operating system and its functions directly (different code for networking, GPS, etc.) * Community support only
  8. 8. 8 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Multi Platform App Development Native apps Use operating system and its functions directly (different code for networking, GPS, etc.) Your App Qt framework Same code works on all platforms, covers many usecases (GPS, etc.) (if needed, direct access is still possible) * Community support only Windows | Mac | Linux Android | iOS | WinRT | BlackBerry* | Sailfish* Embedded Linux | Embedded Android | Windows Embedded Integrity | QNX | VxWorks
  9. 9. 9 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  10. 10. 10 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com What is Qt? Developer Publish to – Windows – Linux – Mac – Embedded – Android – iOS – etc. App Source Code Using Qt SDK for – Dev. environment – Testing – Translation – Help Using Qt framework for – User Interface – Networking – Location (GPS) – Web integration – ...
  11. 11. 11 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Qt 5 Demo www.youtube.com/watch?v=vhWS_bN-T3k
  12. 12. 12 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Qt 5.4 youtube.com/watch?v=wMs1pSZMnG0
  13. 13. 13 Qt – Why? Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  14. 14. Qt – What’s Inside? • Cross-Platform – Same source code for 15 platforms – Maximum performance – native apps! • Generic – User Interface – Declarative UI, animation, gestures, multi-touch, 3D (OpenGL) – Web (Chromium-based) & JavaScript engine included – Multimedia (audio, video), Sensors, Bluetooth, Positioning – Networking, XML – SQL, files, app settings – Container classes, object communication, threading, unit testing – doc.qt.io/qt-5/qtmodules.html • Extend – Include any 3rd party C++ library / code 14 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  15. 15. 15 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Qt: On Your PC already! … and many, many more! All trademarks and logos are property of their respective owners. More information: http://www.qt.io/qt-in-use/ http://lumiaconversations.microsoft.com/2011/03/15/10-qt-use-cases-you-didnt-know/
  16. 16. 16 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  17. 17. 17 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com The Qt Company Trolltech Nokia Digia Qt Company (owned by Digia)
  18. 18. 18 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Qt.io One product. One ecosystem. Integrates: qt-project.org and qt.digia.com
  19. 19. 19 Qt: Free vs. Commercial Open Source qt.gitorious.org Qt can be used in commercial, closed-source apps Changes to Qt source must be shared Additional UI controls (charts, etc.) More modules (Qt Quick Compiler, etc.) More tools (profiling) Support options Free (LGPL v2.1 / v3 license) Commercial Licenses Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com qt-project.org/legal.html
  20. 20. Qt Packages • Community – open source – GPL / LGPL (v2.1 -> v3) • Indie Mobile – commercial subscription, mobile platforms only – €20 / month • Professional – commercial subscription, mobile + desktop – €109 / month • Enterprise – perpetual commercial license, embedded + mobile + desktop, device creation 20 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  21. 21. Embedded & Internet of Things • Increasing use of touch screens • Need for simple to configure & flexible stack • Machine to Machine (M2M) communication 21 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  22. 22. 22 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Cross-Platform Alternatives C# Commercial HTML5 (e.g., Apache Cordova) JavaScript Open Source many more …
  23. 23. 23 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Number of Target Platforms
  24. 24. 24 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Top 10 App Quality
  25. 25. 25 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Time Savings
  26. 26. 26 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Cost Performance Ratio
  27. 27. 27 Qt – Where? Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  28. 28. 28 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Technologies & Platforms C++ OpenGL QML HTML5 CSS3 JavaScript Windows Mac Linux Embedded Linux Embedded Android Windows Embedded Integrity QNX VxWorks WinRT Android iOS BlackBerry Sailfish
  29. 29. Android • Full integration – Android 2.3.3+ (API level 10) – Originally based on community port – Optional: Ministro – Avoid multiple Qt installations on device – Issues with Android 5.0 • Qt 5.2+ 29 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  30. 30. iOS • Full iOS support – iPhone 3GS+ – iPad 2+ • Device deployment & publishing – Qt Creator integration – OS X & Xcode required – iOS Developer Program membership required • Qt 5.2+ 30 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  31. 31. Qt on Windows Runtime • Compliant with Windows Store – Windows 8.1+ – Windows Phone 8.1+ • Feature set – Qt Essential modules – Geopositioning – Qt Quick Enterprise Controls – Engin.io – Qt Quick Compiler – Multimedia • Qt 5.4+ 31 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  32. 32. BlackBerry 10 • Qt as major dev framework in BB10 – QNX Operating System – Cascades UI framework (based on Qt 4.8) – Qt 5 possible (as overlay for SDK) 32 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  33. 33. Jolla / Sailfish OS • Smartphone OS – Builds on MeeGo / Mer / Nemo foundation 33 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com jolla.com sailfishos.org
  34. 34. Ubuntu for Phones • Apps: HTML5 and native (Qt) – Qt 5 based – QML toolkit – www.ubuntu.com/phone – developer.ubuntu.com/apps/qml/ 34 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  35. 35. Symbian & Qt – Works on S60 3.1+ (E71, E72, 5800, N97, N8, X7, 700, 808, etc.) * – Last Symbian phone: Nokia 808 PureView – Qt 4.8 35 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com * Qt can be installed on all compatible devices. Not all devices are enabled for Qt content in the Nokia Store. Current list of Nokia Store device deployment support for Qt apps: http://www.developer.nokia.com/Distribute/Packaging_and_signing.xhtml Series 60 1.0 Series 60 2.0 (+ 3 FPs) S60 3.0 S60 3.1 S60 3.2 S60 5.0 = Symbian^1 Symbian^2 Symbian^3 Qt Compatibility Nokia E71 (S60 3.1, 2008) Qt Pre-Installed Nokia 700 (Nokia Belle, 2011) Symbian Anna Nokia Belle Deprecated (only Qt 4)
  36. 36. Harmattan • Open Source Linux for Mobile Computers – Based on Maemo and MobLin → transformed to Tizen by Samsung (HTML5-based apps) • Nokia N9 – MeeGo 1.2 Harmattan – Only product with OS 36 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Deprecated (only Qt 4)
  37. 37. Raspberry Pi • Qt 5 runs on Raspberry Pi – $25 / $35 hardware – 3D-accelerated Qt Quick, 60 FPS – www.raspberrypi.org 37 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  38. 38. Qt for Device Creation 38 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com * http://qt.digia.com/QtEnterpriseEmbedded
  39. 39. Qt for Device Creation 39 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com • 2D Renderer for devices without OpenGL • Wayland for multi-process support • Qt Creator deployment + wizard for flashing device images • Virtual keyboard blog.qt.digia.com/blog/2014/07/04/making-an-android- device-boot-to-qt/
  40. 40. Qt for Device Creation 40 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com * http://qt.digia.com/QtEnterpriseEmbedded
  41. 41. Qt Cloud Services 41 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com • Backend as a service + Platform as a service – APIs to store & retrieve cloud data – Included server maintenance, load balancing & backup – Server-side dev possible – C++ & QML support, REST access • https://qtcloudservices.com/
  42. 42. Qt Cloud Services 42 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  43. 43. Qt WebEngine • Module for embedding web contents – Simple to create a fully functional browser – Full support for Qt Widgets and Qt Quick – Great performance – Full compliance with latest web standards • LGPLv3 or commercial 43 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  44. 44. 44 Qt – How? Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  45. 45. Developer Environment Setup • One-click installation – IDE – Tool-chains – Documentation – Examples 45 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Compiler Qt SDK works on Windows, Linux, Mac Tool-Chain DocumentationIDE Examples
  46. 46. Qt Creator • Complete IDE – C++, QML, JavaScript – Same dev experience for all platforms • Development – One-click deployment to desktop, iOS, Android, WP – Syntax highlighting, autocompletion – UI Designer – Static code analyser – Profiler 46 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  47. 47. 47 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Start: Application UI C++ QML / JavaScript HTML / JavaScript / CSS Other QWidgets QPainter OpenGLQtWebengine All these can be mixed in the same app if needed Qt Quick Qt Quick Controls
  48. 48. QWidgets • UI Elements (QLabel, QPushButton, etc.) – Use platform UI design – Support style sheets – Drag & drop UI designer 48 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Great for desktop. Static layouts make effects difficult. Small UI, different interaction paradigms.
  49. 49. QPainter • Low level 2D paining engine – Forms, gradients, transparency, transforms – QGraphicsView: scene graph for 2D scene management 49 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Well-known concepts Full and direct control over appearance No ready-made common UI components available Development focus on Qt Quick
  50. 50. Qt Quick • Qt Quick – QML language and JavaScript – Declarative syntax, animations and states – Drag & drop UI designer 50 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Very easy to make slick, fluid UIs. Most important for mobile devices! Still different UI controls for some platforms (Blackberry) * Project page: https://bugreports.qt-project.org/browse/QTCOMPONENTS
  51. 51. Qt Quick Controls 51 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com • QML UI controls – Native look and feel – Custom design: Style API • Layout managers
  52. 52. OpenGL • Low level – Basic setup provided by Qt – Includes OpenGL ES 3.0 / 3.1 – Or: integration with QtQuick 52 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Complete control over GL Good if you have existing codebase & assets, cross-platform Pure OpenGL is hard work Angry Birds and Bounce by Rovio
  53. 53. Qt Webengine • Open source browser engine – Display HTML(5) and JavaScript – Combine Qt QML / C++ and web code if needed to get best of both worlds • Qt WebView: embed native web view on Android & iOS 53 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Use your existing web skills to create the UI Reuse web components (online help, etc.) Complex UIs and interaction probably more difficult Less performance than native code (but improving)
  54. 54. 54 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Recommendations ... QPainter Qt Quick OpenGL Web QWidgets Desktop App Mobile App Game Recommended OK Not recommended
  55. 55. 55 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Hello World #include <QApplication> #include <QPushLabel> int main(int argc, char *argv[]) { QApplication app(argc, argv); QLabel helloLabel("Hello World"); helloLabel.setAlignment(Qt::AlignCenter); helloLabel.showMaximized(); return app.exec(); } import QtQuick 2.4 Rectangle { width: 360 height: 360 Text { anchors.centerIn: parent text: "Hello World" } } ~ 300 lines of code, ~ 15 files Native Symbian C++ Qt C++ Qt Quick QML language
  56. 56. QML • Describe UI by tree structure of property bindings – Properties dynamically evaluated – Communication through signals & slots – Bindings to C++ code possible – Animate properties using states and transitions 56 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com import QtQuick 2.4 Rectangle { width: 200 height: 200 Image { source: "QtLogo.png" anchors.centerIn: parent } }
  57. 57. QML • Interactivity – Interact with mouse / touch – Execute JavaScript in signal handlers 57 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com import QtQuick 2.4 Rectangle { width: 200 height: 200 Image { source: "QtLogo.png" anchors.centerIn: parent } MouseArea { anchors.fill: parent onClicked: parent.color = "green" } }
  58. 58. QML • Dynamic property update – Move image with mouse 58 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com import QtQuick 2.4 Rectangle { width: 200 height: 200 Image { source: "QtLogo.png" x: myMouse.mouseX y: myMouse.mouseY } MouseArea { id: myMouse hoverEnabled: true anchors.fill: parent onClicked: parent.color = "green" } }
  59. 59. QML • Qt Quick Controls – Native-looking UI controls – Custom styling possible – Not 100% cross-platform (e.g., Blackberry: own UI) 59 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com import QtQuick 2.3 import QtQuick.Controls 1.2 ApplicationWindow { title: "My Application" Button { text: "Push Me" anchors.centerIn: parent } }
  60. 60. 60 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Qt Quick & Qt C++ Quick Prototype Viewer on PC & mobile: Testing 100% pure QML directly Deployable App Qt C++ app to load and show QML Can include C++ for app logic
  61. 61. 61 Qt – When? Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  62. 62. Timeline • Qt 5.4 – December 10th, 2014 – http://qt-project.org/wiki/Qt-5.4-release • Qt 5.4.1 – Bug-fix release – https://bugreports.qt-project.org/browse/QTBUG/fixforversion/14400 • Qt 5.5 – April 28th, 2015 – Bluetooth (LE) on Windows RT, iOS – In-App Purchasing on Windows RT – Native dialogs and more pop-ups on iOS – Improved QML/JS <> C++ integration – New garbage collector – http://qt-project.org/wiki/Qt-5.5-release – https://bugreports.qt-project.org/browse/QTBUG/fixforversion/14200 • Qt 6.0 – https://bugreports.qt-project.org/browse/QTBUG/fixforversion/12127 62 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  63. 63. 63 Qt – Now! Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  64. 64. 64 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Download qt.io/download/
  65. 65. Where to find help? • Qt SDK – Help, examples • Discussion boards, wikis – Qt Project: qt-project.org • Community – www.qtcentre.org 65 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com
  66. 66. Thank You. 66 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com Andreas Jakl [@andijakl] mopius.com

×