August 2, 2017 at 14:11Sailfish OS development through the eyes of an iOS developer
Hello, Habr!
The other day, a charming smartphone, colors # F9403E, got into the e-Legion office. By identifying marks, it was possible to establish his model - Jolla C and OSes - Sailfish OS. The manufacturer’s website provided us with data on the characteristics of the device and provided information on where to start development.
Under the cut you will learn how the process of creating, debugging and installing a mobile application for the Sailfish OS took place.
The specifications for the smartphone 2016 are not outstanding, but it is not only a matter of hardware, but also how the software is implemented.
Support for Android applications has been announced for the OS, but why do porting if you can write a “masterpiece” using native development tools.
In India and China, large corporations are collaborating with Jolla, the developer of Sailfish OS, to create an alternative OS that avoids the security and licensing problems Android has. Attention is also focused on the new UX / UI as an opportunity to attract customers who use other platforms. In Russia, they decided to take up development under Sailfish with an emphasis on the public sector and government needs. You can familiarize with this information in other articles on Habré , the Jolla website or on the WMD website
When I started development for iOS, I had to face some difficulties. A Mac OS X device is a prerequisite for Xcode. I did not have it. There were two options: a hackintosh or a virtual machine.
Now macOS is my main operating system, so the presence of the Jolla SDK, tested on Mac OS X, pleasantly surprised me. And the USB flash drive with the Windows installer remained dusty on the table.
Also declared support for other platforms:
And again the link to the official website:
The process is very simple, no “dancing with a tambourine” was needed. The installer independently configures the connection with the virtual machine and activates the necessary components for debugging the application.
As a development environment, Qt Creator is used.
IDE is not as functional as Xcode out of the box, but it crashes less and syntax highlighting does not fall off :)
To develop the UI, QML is used - Qt Meta Language. You can use C ++ or Python to write logic if you have more experience working with these languages.
I chose QML, because its capabilities are enough to implement a simple application. QML is a declarative programming language that describes visual elements and their interactions. The syntax is similar to JSON, the code is easy to read and understand.
To implement basic types and elements, Qt Quick is used. You get:
By analogy with iOS and Android, I searched for this information on the manufacturer’s website. As it turned out, the Qt site is better suited for these purposes. doc.qt.io It contains more documentation and more interesting code examples.
Jolla invites developers to use their own QML module “Sailfish Silica”. The module is designed to create elements with the style of Sailfish. The implementation of these components can be found in the preloaded Components application , and the documentation is distributed as part of the SDK or on the Jolla website .
It also serves to design the application in colors corresponding to the main theme chosen for the smartphone.
The concept is somewhat reminiscent of the use of UIAppearance from iOS, only the settings are not limited by the application.
Creating an interface from standard elements is sometimes even easier than in iOS. Create a button, specify the position and offset relative to other elements. Done. Perhaps with the same ease I was able to work with the interface only starting with iOS 9, when the NSLayoutAnchor class was added .
Unfortunately, not everything is so good with customization - in some cases you will have to create an element yourself. Also, the implementation of SilicaWebView , which was never able to be used in the application, caused complaints , the component constantly crashed when trying to display information. Instead, I used the standard WebView, входящий в состав QtWebKit.
При работе с web возникли и другие проблемы. Я запустил приложение на следующий день после начала разработки и вместо списка новостей увидел пустой экран. Несколько часов ушло на поиски решения проблемы. Как оказалось, приложение и встроенный в ОС браузер перестали загружать данные по HTTPS. Пару минуты меня мучила совесть, после чего HTTPS превратился в HTTP.
Что касается остальных модулей приложения, их реализация не вызвала особых сложностей. Берём зарекомендовавший себя паттерн MVC, добавляем немного биндинга, щепотку делегирования, обильно посыпаем анимацией, перемешиваем… Получаем на выходе новостное приложение, написанное за пару ночей в попытках попробовать себя в разработке под новую платформу.
As I wrote earlier, the process of launching the application practically did not cause problems. Before installing the SDK, we place a supported version of VirtualBox on the computer, and the installer takes care of the rest.
Next, select the platform to run, click the Start button and launch the application.
The emulator works without any complaints: everything happens stably and quickly. At one time, I had the chance to work with one of the first versions of Android emulators, the 5-minute launch of which caused pain and panic attacks. Yes, now he is doing much better, but the sediment remains.
Small problems, however, arose when the application was launched multiple times. Old instances of the application do not end, as a result of which you have 5-9 simultaneously running instances of the program. After reaching a certain maximum number, the new version does not start, you have to complete the old instances manually.
Running debugging on the device took a little longer. Without studying the documentation, the process was intuitive. After wandering around the settings and pressing all the appropriate buttons, I found the ability to launch the application on the device with the specified IP address. I connected the phone to the WiFi network, entered the address and clicked Start again. Two minutes of waiting, and my program started on Jolla C. Apple heard our prayers and a bunch of Xcode 9 + High Sierra + iOS 11 will allow us to do the same miracles.
I will not talk about the prospects of this platform in Russia, there are enough articles on this subject, and I don’t want to start another holivar.
As a user, I liked the responsiveness of the device, the ability to interact with the application directly from the main screen, changing the design of all applications after changing the main theme and the intuitive interface.
From the point of view of the developer, there were also many positive impressions.
The entry threshold is quite low, in a couple of days it was possible to create a simple but functional application. At the same time, there is the possibility of using C ++ for more resource-intensive and complex tasks, only stingy documentation on the manufacturer’s website depresses.
The interface and UI elements are easy to implement, but there isn’t enough guidance and vision from Jolla. Instead of a guideline on the site, I found 1 page devoted to UX, the main idea of which is expressed in three words: “Simply Beatiful, Logical, Magical”. But what an expanse for designers! You can implement the most daring ideas.
I will be glad to meet Sailfish developers and your feedback on this article!
Have a nice day and good code!
UPD: Thanks @kirikch for the informative comment with corrections and additions.
The other day, a charming smartphone, colors # F9403E, got into the e-Legion office. By identifying marks, it was possible to establish his model - Jolla C and OSes - Sailfish OS. The manufacturer’s website provided us with data on the characteristics of the device and provided information on where to start development.
Under the cut you will learn how the process of creating, debugging and installing a mobile application for the Sailfish OS took place.
The specifications for the smartphone 2016 are not outstanding, but it is not only a matter of hardware, but also how the software is implemented.
Support for Android applications has been announced for the OS, but why do porting if you can write a “masterpiece” using native development tools.
Spin-Off: who needs it and why
In India and China, large corporations are collaborating with Jolla, the developer of Sailfish OS, to create an alternative OS that avoids the security and licensing problems Android has. Attention is also focused on the new UX / UI as an opportunity to attract customers who use other platforms. In Russia, they decided to take up development under Sailfish with an emphasis on the public sector and government needs. You can familiarize with this information in other articles on Habré , the Jolla website or on the WMD website
Development environment
When I started development for iOS, I had to face some difficulties. A Mac OS X device is a prerequisite for Xcode. I did not have it. There were two options: a hackintosh or a virtual machine.
Now macOS is my main operating system, so the presence of the Jolla SDK, tested on Mac OS X, pleasantly surprised me. And the USB flash drive with the Windows installer remained dusty on the table.
Also declared support for other platforms:
- Ubuntu 14.04 32/64 bit
- Windows 8 32/64 bit
- OS X 10.9.2
And again the link to the official website:
- Install VirtualBox (needed to run the emulator)
- Download the Sailfish SDK distribution
- Choosing the components to install
- We agree with the license agreements
- ...
- PROFIT !!!
The process is very simple, no “dancing with a tambourine” was needed. The installer independently configures the connection with the virtual machine and activates the necessary components for debugging the application.
As a development environment, Qt Creator is used.
IDE is not as functional as Xcode out of the box, but it crashes less and syntax highlighting does not fall off :)
Code and language
To develop the UI, QML is used - Qt Meta Language. You can use C ++ or Python to write logic if you have more experience working with these languages.
I chose QML, because its capabilities are enough to implement a simple application. QML is a declarative programming language that describes visual elements and their interactions. The syntax is similar to JSON, the code is easy to read and understand.
To implement basic types and elements, Qt Quick is used. You get:
- a set of visual components for input / output of information and the ability to animate these components
- network and local storage tools
- means for binding and signal processing
By analogy with iOS and Android, I searched for this information on the manufacturer’s website. As it turned out, the Qt site is better suited for these purposes. doc.qt.io It contains more documentation and more interesting code examples.
Jolla invites developers to use their own QML module “Sailfish Silica”. The module is designed to create elements with the style of Sailfish. The implementation of these components can be found in the preloaded Components application , and the documentation is distributed as part of the SDK or on the Jolla website .
It also serves to design the application in colors corresponding to the main theme chosen for the smartphone.
Label {
text: "Hello habrahabr!"
color: Theme.highlightColor
x: Theme.horizontalPageMargin
width: parent.width - x*2
font.pixelSize: Theme.fontSizeSmall
wrapMode: Text.Wrap
}
The concept is somewhat reminiscent of the use of UIAppearance from iOS, only the settings are not limited by the application.
Creating an interface from standard elements is sometimes even easier than in iOS. Create a button, specify the position and offset relative to other elements. Done. Perhaps with the same ease I was able to work with the interface only starting with iOS 9, when the NSLayoutAnchor class was added .
Unfortunately, not everything is so good with customization - in some cases you will have to create an element yourself. Also, the implementation of SilicaWebView , which was never able to be used in the application, caused complaints , the component constantly crashed when trying to display information. Instead, I used the standard WebView, входящий в состав QtWebKit.
При работе с web возникли и другие проблемы. Я запустил приложение на следующий день после начала разработки и вместо списка новостей увидел пустой экран. Несколько часов ушло на поиски решения проблемы. Как оказалось, приложение и встроенный в ОС браузер перестали загружать данные по HTTPS. Пару минуты меня мучила совесть, после чего HTTPS превратился в HTTP.
function requestUrl(source) {
var url = "http://newsapi.org/v1/articles?"
url += "source=" + source
url += "&apiKey=" + apiKey
return url
}
if (status === XMLHttpRequest.DONE) {
var objectArray = JSON.parse(req.responseText);
if (objectArray.errors !== undefined) {
console.log("Error fetching tweets: " + objectArray.errors[0].message)
} else {
for (var key in objectArray.statuses) {
var jsonObject = objectArray.statuses[key];
news.append(jsonObject);
}
}
if (wasLoading == true) {
newsObject.isLoaded()
}
}
Что касается остальных модулей приложения, их реализация не вызвала особых сложностей. Берём зарекомендовавший себя паттерн MVC, добавляем немного биндинга, щепотку делегирования, обильно посыпаем анимацией, перемешиваем… Получаем на выходе новостное приложение, написанное за пару ночей в попытках попробовать себя в разработке под новую платформу.
Эмулятор и реальный смартфон
As I wrote earlier, the process of launching the application practically did not cause problems. Before installing the SDK, we place a supported version of VirtualBox on the computer, and the installer takes care of the rest.
Next, select the platform to run, click the Start button and launch the application.
The emulator works without any complaints: everything happens stably and quickly. At one time, I had the chance to work with one of the first versions of Android emulators, the 5-minute launch of which caused pain and panic attacks. Yes, now he is doing much better, but the sediment remains.
Small problems, however, arose when the application was launched multiple times. Old instances of the application do not end, as a result of which you have 5-9 simultaneously running instances of the program. After reaching a certain maximum number, the new version does not start, you have to complete the old instances manually.
Running debugging on the device took a little longer. Without studying the documentation, the process was intuitive. After wandering around the settings and pressing all the appropriate buttons, I found the ability to launch the application on the device with the specified IP address. I connected the phone to the WiFi network, entered the address and clicked Start again. Two minutes of waiting, and my program started on Jolla C. Apple heard our prayers and a bunch of Xcode 9 + High Sierra + iOS 11 will allow us to do the same miracles.
Impressions
I will not talk about the prospects of this platform in Russia, there are enough articles on this subject, and I don’t want to start another holivar.
As a user, I liked the responsiveness of the device, the ability to interact with the application directly from the main screen, changing the design of all applications after changing the main theme and the intuitive interface.
From the point of view of the developer, there were also many positive impressions.
The entry threshold is quite low, in a couple of days it was possible to create a simple but functional application. At the same time, there is the possibility of using C ++ for more resource-intensive and complex tasks, only stingy documentation on the manufacturer’s website depresses.
The interface and UI elements are easy to implement, but there isn’t enough guidance and vision from Jolla. Instead of a guideline on the site, I found 1 page devoted to UX, the main idea of which is expressed in three words: “Simply Beatiful, Logical, Magical”. But what an expanse for designers! You can implement the most daring ideas.
I will be glad to meet Sailfish developers and your feedback on this article!
Have a nice day and good code!
UPD: Thanks @kirikch for the informative comment with corrections and additions.