Una breve introducción lírica: en 2017, estaba muy interesado en las meditaciones. Esto fue facilitado por toda una cadena de eventos, favorables y no muy. Durante muchos años he estado interesado y practicando sueños lúcidos, pero antes de eso no tuve que tratar específicamente con meditaciones en su forma canónica. En estos días, muchoslas historias comienzan en los baresLos pasatiempos comienzan con una búsqueda en Google, así que comencé de esa manera. Casi de inmediato, se encontraron las aplicaciones de meditación más populares: Calm y Headspace.

El primero sirvió como un buen punto de partida (excelentes meditaciones educativas para principiantes), el segundo no me pareció útil, no me gustó la presentación. Ambos rechazaron sus planes arancelarios pagados (y debo decir que son muy caros para la Federación de Rusia). Tal vez simplemente no pertenezco a la categoría de personas que necesitan pagar para animarse a hacer algo :) Continuando estudiando Google play, me encontré con dos aplicaciones gratuitas que están cerca de mí en espíritu. El primero es "Meditemos". Todavía lo uso, el segundo se discutirá en el cuerpo del artículo.

solicitud

Entonces, después de una búsqueda bastante larga, se encontró una aplicación completamente discreta, luego se llamó, si no me equivoco, "Meditación. Antonov Alexander". Al final resultó que era posible escuchar las meditaciones de cuatro autores en él, grabadas y compuestas, de hecho, por Alexander, con quien más tarde nos encontramos y nos hicimos amigos. Ensambló la aplicación literalmente a partir de herramientas improvisadas por su cuenta, era algo así como un SPA improvisado que usaba WebView sin ningún marco, casi en HTML simple y mínimo en Java. Parecía regular, y algunas funciones simplemente estaban ausentes (por ejemplo, no podía navegar a través de la grabación, sino activarla desde el principio). Como realmente me gustó el contenido en sí, le ofrecí a Alexander mi ayuda gratuita para actualizar la aplicación, por así decirlo "para devolver algo "sobre la base de" me ayudaron, ayudaré ". En el cuerpo del artículo, trataré de decirle qué problemas encontramos durante el desarrollo, qué decisiones se tomaron y qué sucedió al final. Espero que las recetas individuales del artículo sean útil para cualquiera, pero interesantemente interesante :)

, :

• UI UX

Qt

— (), PHP/HTML. , , , Qt, :

• Qt ( Symbian, MeeGo, Ubuntu Phone Android);
• , ;
• QML, C++. , — JavaScript-like , ;
• iOS ( ).

UI

, , . , , . , . ( ):

"" anchors, Row, Column Repeater. , UI. , ( ):

Button {
id: mainButton
anchors {
    left: parent.left
    right: parent.right
}
height: btnLayout.height + 30
Material.background: "white"
onClicked: stackView.push(Qt.resolvedUrl("qrc:/qml/MeditationListPage.qml"))

Column {
    id: btnLayout
    spacing: 10
    anchors {
        top: parent.top
        topMargin: 15
        left: parent.left
        right: parent.right
        margins: 10
    }

    Row {
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: (mainButton.width - 4 * 50) / 6
        Repeater {
            model: meditationModel

            RoundedIcon {
                source: Qt.resolvedUrl("qrc:/img/my%1.png".arg(model.index))
                color: model.color
                width: 50
                height: 50
            }
        }
    }

    Label {
        text: qsTr("")
        font.pointSize: 14
        color: "dimgrey"
        anchors.horizontalCenter: parent.horizontalCenter
    }

    Label {
        text: "        ,     "
        anchors {
            left: parent.left
            right: parent.right
        }
        horizontalAlignment: Text.AlignHCenter
        Material.foreground: Material.Grey
        font.pixelSize: 12
        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
    }
}
}

UI , HDPI Qt . , Qt: QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);. " ".

Material design, Android Qt Quick Controls 2 . https://doc.qt.io/qt-5/qtquickcontrols2-material.html. , Material design. UI , attached property Material.accent .

mp3- , QRC. 10-15 . — , 15 . , , pro-:

CONFIG += resources_big

, , , .

, " ". Shorts, , . DarkModeShader.qml:

ShaderEffect {
    fragmentShader: "
        uniform lowp sampler2D source;
        uniform lowp float qt_Opacity;
        varying highp vec2 qt_TexCoord0;

        void main() {
            lowp vec4 p = texture2D(source, qt_TexCoord0);
            p.r = min(0.8, (1.0 - p.r) * 0.8 + 0.1);
            p.g = min(0.8, (1.0 - p.g) * 0.8 + 0.1);
            p.b = min(0.8, (1.0 - p.b) * 0.8 + 0.1);
            gl_FragColor = vec4(vec3(dot(p.rgb, vec3(0.299, 0.587, 0.114))), p.a) * qt_Opacity;
        }
    "
}

:

StackView {
    // ...
    layer.effect: DarkModeShader { }
    layer.enabled: optionsKeeper.isNightMode
}

.. , isNightMode. Qt / ( , ).

, — . - , — !

Qt Multimedia, Audio. mp3, , — , :

Audio {
    id: audioPlayback
    source: meditAudioSource
}
// ...
Slider {
    anchors {
        left: parent.left
        right: playBtn.left
        verticalCenter: parent.verticalCenter
    }
    from: 0
    to: audioPlayback.duration
    value: audioPlayback.position
    onMoved: audioPlayback.seek(value)
    Material.accent: meditColor
}

Settings Qt.labs.settings (, , labs):

import Qt.labs.settings 1.0
// ...  boilerplate- ,        .
property Settings settings: Settings {
    property bool isNightMode: false
}

2018 , .

, , 2020, , - , — ( ). , — — :)

, JSON- . . HTTP- QML- XMLHttpRequest ( JSON QML). .

. QML LocalStorage, SQLite. JS-, QML, :

// databasemodule.js
.pragma library // I hope this will prevent the waste of memory.
.import QtQuick.LocalStorage 2.0 as SQL

function getMeditations() {
    ...
}

// TransferManager.qml
import "databasemodule.js" as DB
...
var syncedItems = DB.getMeditations()

:

var db = SQL.LocalStorage.openDatabaseSync("AMeditation", "", "Main DB", 100000)
...
db.transaction(function(tx) {
    dbResult = tx.executeSql("SELECT * FROM meditations")
    console.log("meditations SELECTED: ", dbResult.rows.length)
})

.. , transaction callback. ( , Qt ).
. openDatabaseSync . , ( , ). . , , , . [" ", " ", " "]:

var migrations = [
    {'from': "", 'to': "1.0", 'ops': function(transaction) {
        transaction.executeSql("CREATE TABLE meditations ( \
            id  INTEGER PRIMARY KEY 
            ...
            status  TEXT);")
    }}
    ,{'from': "1.0", 'to': "1.1", 'ops': function(transaction) {
        transaction.executeSql("ALTER TABLE meditations ADD quality TEXT;")
    }}
]

, ( — , - ).

C++

QML, C++. . Ubuntu Phone. . QML — . C++- QML :

engine.rootContext()->setContextProperty("networkManager", new NetworkManager());

QML - :

//  .
var isSucces = networkManager.download(downloadUrl, currentDownload.localUrl)
...
//  .
Connections {
    target: networkManager

    onDownloadOperationProgress: {
        d.currentDownload.current = current
        d.currentDownload.total = total
    }
    ...
}

C++-, QML- singletone :

// cpputils.h
class CppUtils : public QObject
{
    Q_OBJECT
public:
    explicit CppUtils(QObject *parent = nullptr);
    ~CppUtils();

    Q_INVOKABLE bool removeFile(const QString& fileName) const;
    static QObject *cppUtilsSingletoneProvider(QQmlEngine *engine, QJSEngine *scriptEngine);
};

// main.cpp
qmlRegisterSingletonType<CppUtils>("AMeditation.CppUtils", 1, 0, "CppUtils", CppUtils::cppUtilsSingletoneProvider);

.. , cppUtilsSingletoneProvider, Q_INVOKABLE — "" QML. QML :

import AMeditation.CppUtils 1.0
// ...
CppUtils.removeFile(cd.localUrl)

, - . — . , - , . , . QML (QNetworkAccessManager). . :

// cachingnetworkmanagerfactory.h
class CachingNetworkAccessManager : public QNetworkAccessManager
{
public:
    CachingNetworkAccessManager(QObject *parent = 0);
protected:
    QNetworkReply* createRequest(Operation op, const QNetworkRequest &req, QIODevice *outgoingData = 0);
};

class CachingNetworkManagerFactory : public QQmlNetworkAccessManagerFactory
{
public:
    CachingNetworkManagerFactory();
    QNetworkAccessManager *create(QObject *parent);
};

// cachingnetworkmanagerfactory.cpp

QNetworkReply* CachingNetworkAccessManager::createRequest(Operation op, const QNetworkRequest &request, QIODevice *outgoingData)
{
    QNetworkRequest req(request);
    req.setAttribute(QNetworkRequest::CacheLoadControlAttribute, QNetworkRequest::PreferNetwork);
    return QNetworkAccessManager::createRequest(op, req, outgoingData);
}

QNetworkAccessManager *CachingNetworkManagerFactory::create(QObject *parent) {
    QNetworkAccessManager* manager = new CachingNetworkAccessManager(parent);

    QNetworkDiskCache* cache = new QNetworkDiskCache(manager);
    cache->setCacheDirectory(QString("%1/network").arg(QStandardPaths::writableLocation(QStandardPaths::CacheLocation)));
    manager->setCache(cache);
    return manager;
}

.. setCache , createRequest . — , .

Android

SDK NDK. Linux- , Windows - (, , QtCreator 4.12 NDK, ). NDK Clang. arm_v7 (32 ), arm_v8a (64 ; Google play 2019 ). Google play.

, , .

• Qt pet-, Android. ;
• AMeditation ( UI " 2.1. ") 10+ 250 , ( , , ).
• , , !
• iOS .

En general, desarrollar en Qt es divertido, ¡hacer algo gratis y también para el alma!

PD Estimados residentes de Khabrovsk, espero que no lo cuenten como publicidad: la aplicación es fundamentalmente gratuita y no comercial, quería contarles sobre esta y la historia de su creación a aquellos interesados, al igual que compartir enfoques de desarrollo encontrados con éxito.
PSS La aplicación tiene su versión gemela 1.1 con entradas más antiguas, que tiene otras 5k + descargas y 100 revisiones. Probablemente lo saquemos de la tienda pronto.