ライブデバイスでのモバイルQMLアプリケーションのデバッグとプロトタイピングの高速化

こんにちは



Android / iOS / Embedded向けのQMLアプリケーションを開発するときに、作業時間を最適化する簡単な方法を共有したいと思います。



おそらく私が誰かに言ったことは虐殺のように思えるかもしれませんが、今のところ私はそのような基本的な方法について読んでいません。



問題の本質は、あらゆる言語のモバイルアプリケーションを開発、デバッグ、またはプロトタイピングするとき、通常は常に同じ手順を踏むことです。コードの編集、デプロイ、起動です。 無限へと続きます。 モバイル開発の場合、コードの展開フェーズは2〜10分という印象的な時間に及ぶ可能性があり、その間は基本的に何もする必要はありません。 おそらく一部の人にとっては良いことですが、自分の時間を大切にしている人にとっては確かではありません。 一般に、私は、物事のこの状態だけで私を驚かせるわけではありません;-)



状況はネイティブ開発ツール、たとえばAndroidの場合に悪化します。Androidでは、オプションなしで、デバイスで次回起動する前に常にJavaコードを再コンパイルする必要があります。



一見Qtにも同じ問題があります-プロジェクトの新しいビルドはそれぞれ、長時間デバイスに展開されます。 特徴は1つだけです。結局、Qt / C ++ではなく、純粋なQMLでアプリケーションを作成できます。 この場合、アプリケーションのC ++部分のロジックを変更しなければ、ターゲットプラットフォーム用に何もコンパイルする必要はありません。 そのため、アプリケーションファイルのqmlセットを更新し、デバイスでアプリケーションを再起動するだけでいいでしょう。 結局、10回の打ち上げにかかる時間を節約するには、少なくとも1時間は必要だったでしょう!



潜在的な機会があるので、それを使用しないのは罪です。 キャットの下で私がしたことを読んでください。



トピックに関する情報を掘り始めたとき、私は最初にかつて有望なQMLライブプレビュープロジェクト( ハブに関する記事 )に出会いました。 それは魔法であり、私が必要としていたもので、このQt Creatorモジュールのみが一般的なコードベースから除外されました( commitへのリンク )。 Digiaが何かを泥だらけにして商用版に転送したか、不安定だったのかもしれません。 知りません 主なことは、彼はもういないということです。



一般的に、回避策を探す必要がありました。 リソースをロードするときのネットワーク透過性などのトピックをカバーするQtドキュメントページで見つかりました。 アイデアは、QtとQMLはQMLファイルとフォント、画像などのリソースをどこにロードするかを気にしないということです。 ソースは、ローカルディスク、Qtリソース(qrc)、smb-ball、またはhttp-serverです。



実装のアイデアはすぐに生まれました! ルートサーバーをプロジェクトとするローカルマシンにHTTPサーバーをデプロイし、アプリケーションのC ++部分のリソースをロードするためのスクリプトを変更し、デスクトップでヘルスをチェックし、モバイルでそれを収集し、モバイルでヘルスをチェックし、喜ぶ!



アルゴリズムの完全な説明:

1)PCとデバイスが同じローカルネットワーク上にあることを確認します。



2)プロジェクトをQt Network Transparentおよび特定のテンプレートの要件に合わせます:

-/ assetディレクトリ内のすべてのリソース。

-/ qmlディレクトリ内のすべてのqmlファイル。

-qmlディレクトリ内では、ディレクトリファイル構造は最大2レベルでなければなりません。

-タイプimport "dir"のすべてのインクルードは、Dirとしてimport "dir"という形式に縮小されます。

-サブディレクトリ内のコンポーネントへのすべての呼び出しは、フォームMyComp {...}からフォームDir.MyComp {...}に渡されます。



3)nginxをダウンロード、構成、および実行します。 デフォルト設定では、ポートとルートディレクトリの2つのパラメータのみを変更する必要があります。 次に、nginxを実行します。 例:

server { listen 8085; ... location / { root D:/Dropbox/work/anyway;
      
      





4)qmlファイルをロードする場所のmain.cppファイルで、ロジックを次のように変更します。

  bool qmlDebug = true; QString url = "http://192.168.1.22:8085/"; QString qmlLoadPrefix; QString assetsLoadPrefix; QNetworkAccessManager NAManager; QUrl qurl (url+"qml/main.qml"); QNetworkRequest request(qurl); QNetworkReply *reply = NAManager.get(request); QEventLoop eventLoop; QObject::connect(reply, SIGNAL(finished()), &eventLoop, SLOT(quit())); eventLoop.exec(); if (reply->error() != QNetworkReply::NoError) { qmlDebug = false; qDebug() << "Error loading qml by network. Load from resources!"; } if (qmlDebug) { qmlLoadPrefix = url+"qml/"; assetsLoadPrefix = url+"assets/"; } else { qmlLoadPrefix = "qrc:/"; assetsLoadPrefix = "qrc:/"; } engine.rootContext()->setContextProperty("qmlLoadPrefix", qmlLoadPrefix); engine.rootContext()->setContextProperty("assetsLoadPrefix", assetsLoadPrefix); engine.load(QUrl(qmlLoadPrefix+"main.qml"));
      
      





ここで、ローカルネットワーク上のPCのURL、および2つの変数qmlLoadPrefixとassetLoadPrefixを設定します。 推測するのは難しくありません。これらは、現在のアプリケーション構成に応じて、アプリケーションリソースとqmlファイルにアクセスするための単なるプレフィックスです。 そのため、アクティブな開発フェーズでは、http経由で必要なリソースをすばやくダウンロードできます。アプリケーションがリリースされたら、アプリケーション自体のリソースファイルからすべてをダウンロードできます。



5)さて、最後のステップは、プロジェクトのすべてのqmlファイルで、タイプ「qrc://myImg.png」のすべての出現をassetLoadPrefix +「myImg.png」に変更することです。



それだけです。 Qt Creatorの左側のツールバーにある大きな緑色の「再生」ボタンではなく、「アプリケーション出力」セクションの下部のツールバーにある小さな「再生」ボタンを使用して、デバッグアプリケーションを起動する必要があることに注意してください。 確かに、このボタンはQt Creatorを起動した直後には使用できず、古い方法でアプリケーションを初めて起動する必要がありますが、それを使用するだけで十分です。 同時に、必要なすべてのデバッグメッセージもQt Creatorログに書き込まれます。完全なデバッグが必要な場合は、通常どおり機能します。



もちろん、これはそれほどホットなハックではなく、C ++コードを作成するときにアプリケーションを再構築することからあなたを救うことはできませんが、この形式でも、プラットフォームのいずれかでアプリケーションを開発するとき、はるかに便利です。



コメントで、Qtアプリケーションの開発プロセスのさらなる最適化と、iOSおよびAndroidのネイティブアプリケーションに対するそれらの利点に関する私の考えと提案を共有することをお勧めします。



All Articles