sudo add-apt-repository ppa:ubuntu-sdk-team/ppa sudo apt update && sudo apt install ubuntu-sdk

Transcription

1 Ubuntu App Development - condensed Ubuntu App Dev School

2 Workshop: Getting set up If you use Ubuntu or Ubuntu 14.10: sudo add-apt-repository ppa:ubuntu-sdk-team/ppa sudo apt update && sudo apt install ubuntu-sdk If you use Mac or Windows: Install VirtualBox Copy.ova file from USB stick. Launch it.

3 Defining the future of computing Ubuntu now runs on smartphones, desktop, servers and powers the cloud Brings a fast and beautiful user experience to any phone A quality core of apps with a fast-evolving app ecosystem Ubuntu SDK with full native and HTML5 support Differentiation without fragmentation

4 Content, not controls Design and UX at the core Maximised room for content Effortless and efficient navigation Gestural interface: swipes and edges Scopes neatly organise it

5 Unity The Launcher is revealed with a left swipe Contains quick access to favourite apps Shows currently active apps and can switch between them Apps can be rearranged or pinned to the Launcher with a long press The above integration comes for free Additional integration points Count indication Progress indication Urgency indication

6 Unity Indicators provide quick and consistent access to frequent system functions Notifications from various sources are unified in the notification center Tap once on an app indicator to scrub left and right through the other ones Notify OSD provides unintrusive, dismissable or actionable notifications with snap decisions Integration points Message counts Activity notification

7 Unity Scopes bring relevant content to users via search plugins Highly modular, scopes enable customisation of the environment without platform modification Tip: in the Scopes view, you can pull up the Scope management screens from the bottom. Aggregating scopes organize the content and act as containers for multiple related scopes

8 Ubuntu is community Ubuntu is planned and developed in the open, you can influence it too! 12 core apps were created by teams of community volunteers

9 The Ubuntu SDK Ubuntu features a full-blown Software Development Kit The SDK enables developers to create and maintain apps throughout their full lifecycle, from start to publish Holistic approach: a powerful IDE with device access, a GUI toolkit and extensive documentation, all included Based on the proven and popular Qt framework and development toolset Programming languages are QML, Javascript and optionally C++. The web is also a first class citizen, with different degrees of integration: webapps, HTML5 foundations and HTML5 platform access

10 The Ubuntu SDK Qt Creator is the SDK s Integrated Development Environment (IDE) A feature-rich IDE for advanced code editing Intuitive visual debugger Device connectivity: easily run apps on the phone during development Emulator and graphical click app packager

11 The Ubuntu SDK The UI Toolkit provides widgets for the unique Ubuntu look and feel A collection of the essential building blocks to create Ubuntu apps Carefully crafted by designers and implemented by developers The toolkit's widgets enable visual and behavioural integration Not a requirement to use the toolkit, but strongly recommended for the best integration and UX consistency Written in QML, there is also an HTML5 theme available Use the Showcase app to see the toolkit in action

12 The Ubuntu SDK developer.ubuntu.com is the information hub for creating Ubuntu content A central resource for guides and learning material to write apps, scopes, website integration and cloud charms Each area includes technology overviews, tutorials, a cookbook with developer recipes and API references The developer blog features news and interesting updates around Ubuntu app development Provides access to the Software Store to publish and maintain Ubuntu apps A gateway to community support on askubuntu.com: an Ubuntu Q&A website powered by Stack Exchange

13 The Ubuntu application model New application model, optimized and secure Applications are isolated and protected from each other by default Takes advantage of platform technologies, notably AppArmor Applications must ask permission to the OS to access user data Optimized to save battery life and memory usage background applications are suspended, unless they explicitly require it via dedicated APIs Simplified installation and packaging the application integrates its own dependencies (libraries) uninstalling the app removes them as well

14 Taking Ubuntu to market Backed by Canonical Daily engagements with OEMs, ODMs and mobile operators Strong hardware enablement partnerships with top brands All major OEMs partnered up with Canonical. Experts in Linux on ARM since 2008 Custom engineering

15 A cadence to rely upon Ubuntu is released every six months The first phone release was Regular releases are supported for 9 months Long Time Support (LTS) releases are supported for 5 years The next Ubuntu will be a Long Time Support (LTS) release Stable releases use the year.month version naming convention (e.g ) Development releases use the Awesome Animal naming convention (e.g. Trusty Tahr) Nine years, 19 releases all on time

16 The Ubuntu Carrier Advisory Group The CAG enables mobile operators to shape Ubuntu s mobile strategy Members receive advance confidential briefings and provide industry insights to ensure Ubuntu meets their needs Opportunity to be a launch partner and ship Ubuntu in their markets

17 foundations the platform

18 Platform overview Full Ubuntu (Linux) system, with thin Android layer for device access Unity is the Ubuntu shell The Ubuntu SDK provides transparent API access to services and devices

19 The application model The application model, in particular its lifecycle, has been designed to be simple, secure and to effectively manage power consumption An application is a self-contained piece of user-visible software Applications are suspended when not in the foreground

20 Platform overview Defining the Ubuntu roadmap Ubuntu is planned and developed in the open Every 3 months, at the public Ubuntu Online Summit (UOS) we discuss and plan next cycle's features The community participates in shaping Ubuntu during planning and implementation Every UOS topic is scheduled as a 1h discussion session, after which a blueprint with work items and assignees is defined The implementation status is tracked in a burn-down chart at status.ubuntu.com

21 Convergence The road to convergence The choice of technology (QML) certainly eases the task But it's not only about widget adaptation behaviours and design need to adapt to form factors as well Indicators in Ubuntu had a convergent codebase, others are following. The first LTS to be converged is planned to be Another significant milestone will be merging the desktop and phone shells Unity 8, now running on phones will eventually replace Unity 7 on the desktop. Available on the Desktop, non-default. Convergence will require changes in the foundations (e.g. Mir, image-based updates)

22 Qt/QML and web-based apps Qt/QML or web, your choice Full support for both Qt/QML and HTML5 Go Qt/QML for the best integration or for resource-demanding applications Go web to use Internet technologies or to port existing HTML5 apps Hosted Web apps for site integration Local HTML5 foundations for most needs Local HTML5 platform access for device integration (camera, sensors )

23 Native apps Write native apps to exploit the full power of the phone Native apps are written in QML, a truly RAD language to describe user interfaces and their transitions JavaScript embeds naturally and provides the glue for more complex logic Use C++ for resource-demanding or time-critical apps C++ developers say that the Qt framework and classes brings back sanity to this language! If you use C++, the easiest is to write a QML plugin: let C++ do the backend work and use QML for the frontend

24 ubuntu app development the platform ubuntu app development QML - a quick overview

25 QML structure Brief example of QML notation: Rectangle { id: canvas width: 200 height: 200 color: "blue" } QML is declarational. You point out what kind of object you need and then specify all its attributes. The Ubuntu SDK will auto-complete available attribute and method names, etc. Specifiying an id lets you refer to the object elsewhere.

26 QML structure Objects can be nested: import QtQuick 2.0 Rectangle { id: rect width: 300 height: 300 color: "orange" Image { id: logo source: "/usr/share/icons/ubuntu-mobile/apps/scalable/calculator.svg" anchors.centerin: parent height: rect.height / 2 width: rect.width / 2 } } Note how rect is referred to in the definition of the Image object.

27 QML structure QML imports To use functionality and assets (like JavaScript bits) from certain modules in your app, you need to first import the module. You can do this by adding a line like the following at the top of your code: import <ModuleIdentifier <Version.Number [as <Qualifier] For example: import QtQuick 2.0 The <Version.Number is a version of the form MajorVersion.MinorVersion which specifies which definitions of various object types and JavaScript resources will be made available due to the import.

28 Connecting components together Objects can respond to signals and property changes from themselves or other objects. All signals are given an onsignal handler, and all properties are given an onpropertychanged handler: Rectangle { id: rect color: "orange" oncolorchanged: { console.log( Rectangle s color has changed ) } Button { id: changecolor text: "Change Color" anchors.centerin: parent onclicked: rect.color = grey } } Pressing the button fires its clicked signal, which you can react to be setting the onclicked handler Changing the rectangle s color property to grey results in a call to the oncolorchanged handler

29 ubuntu app development the platform ubuntu app development some design building blocks

30 Design building blocks Checkbox Use a checkbox to allow your user to enable or disable multiple items in a group. If there is just one item in a group, phrase the item as an action and use the switch. Item { CheckBox { checked: true } }

31 Design building blocks Switch Use a switch to allow your user to perform an action by turning it on or off. Item { Switch { checked: true } }

32 Design building blocks Button Column { Button { text: "Send" onclicked: print("clicked text-only Button") } Button { iconname: "compose" gradient: UbuntuColors.greyGradient onclicked: print("clicked icon-only Button") } Button { iconname: "compose" text: "Icon on left" iconposition: "left" onclicked: print("clicked text and icon Button") } }

33 Design building blocks Check out to learn more about which building blocks are available and when to use them. Find all docs at: developer.ubuntu.com