QMLおよび新しいYandex.Disk REST APIについて

こんにちは、友達！

最近、Ubuntu SDK（QtQuickベース）と沈黙に関するQtQuick \ QMLトピックに関する記事がハブに完全に表示されなくなりました配布キット）。 私はこの記事を書くことでこの状況を修正するために私の能力を最大限に活用したかったのです！ 広大さを把握しようとする価値はないので、おそらく、Ubuntu SDKの下のアプリケーションで、大量のC ++コードをQMLコードでどのように置き換えたかについての話から始めましょう。 それがあなたにとって興味深いものになったが、それがまたわかりにくいかもしれない、そしてここYandex.Diskなら、私はカットをお願いします！

エントリー

遠くから始めますが、簡単に試してみます-数年前、私はMeeGo（！）用のクラウドストレージのクライアントを作成したかったのです。 Yandex.DiskがAPIを開いたのはその瞬間でした。 C ++ \ Qtを使用してWebDAV APIサービスをすばやく実装し、QMLを使用してGUIを実装しました。 シンプルで信頼性の高いプログラムで、ほとんどのレビューは肯定的です（ログイン方法がわからなかった人を除いて= \）。

しばらくして、Ubuntu Phoneの基本的なアプリケーションのオープンソース開発に参加することにしました。これが、Ubuntu SDKに精通し、RSSリーダー「Shorts」に取り組んだ方法です。 一方、Ubuntu App Showdownが近づいていました。 MeeGoからUbuntu Phoneにコードを転送するのは実際には簡単なので、「Ported Applications」カテゴリ（任意のOSから移植可能）にクライアントと共に参加することにしました。 技術的な理由で勝ちませんでした。 それにもかかわらず、結果はUbuntu Phone用の優れたYandex.Diskクライアントでした。 しかし、それにも欠点がありました-C ++パーツはARM専用に構築されたため、結果として、クロスプラットフォームはパッケージレベルで失われました。

そしてつい最近、Yandexから、本番環境での新しいドライブREST APIのリリースに関する通知を受け取りました。 このAPIを純粋なJavaScriptで実装することをすぐに考えました。 知らない人のために、QML（厳密には言えません）にはJavaScriptが含まれています。つまり、この言語のすべての機能をQtライブラリの機能（プロパティ、信号など）と組み合わせて使用​​できます。柔軟な組み合わせ）。 結果は、Yandex.Diskクライアントの完全なクロスプラットフォーム実装になります（もちろんQtがあるすべてのプラットフォーム）。

ベースラインと目標

そのため、Yandex.Diskのコンテンツに対してさまざまな操作（コピー、移動、削除、パブリックリンクの受信など）を実行できる既製のアプリケーションがあります。 ネットワーク部分はC ++ \ Qtを使用して実装され、表示されたデータのモデルを保存します。 タスクは新しいサービスAPIに切り替えて、UIコードを変更せずにJavaScriptで既に実装しています。

REST APIの実装

WebサービスAPIを実装するための簡単な手法を開発しました。 これは、プロパティとメソッドのカスタムセットで非常に軽量なQtObject型を使用することで構成されています。 概略的には、次のようになります。

QtObject { id: yadApi signal responseReceived(var resObj, string code, int requestId) property string clientId: "2ad4de036f5e422c8b8d02a8df538a27" property string clientPass: "" property string accessToken: "" property int expiresIn: 0 // Public methods... // Private methods... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

responseReceivedシグナルは、XMLHttpRequestからの非同期応答が到着するたびにAPIオブジェクトによって送信されます（以下を参照）。 「accessToken」および「expiresIn」プロパティは、外部からのOAuthによる承認後に設定されます（WebViewはこのタスクのログインページで使用されます-yadApi URLにトークンの受信を要求し、クリックして、データを入力するようにユーザーに要求し、成功するとトークンを受信します）彼の生涯）。

そして、ここに公開APIメソッドの1つがあります-ファイルの削除：

 function remove(path, permanently) { if (!path) return var baseUrl = "https://cloud-api.yandex.net/v1/disk/resources?path=" + encodeURIComponent(path) if (permanently) baseUrl += "&permanently=true" return __makeRequst(baseUrl, "remove", "DELETE") }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それは非常に簡単です-要求URLは渡されたパラメーターから形成され、__ makeReuqest内部メソッドに渡されます。 次のようになります。

 function __makeRequst(request, code, method) { method = method || "GET" var doc = new XMLHttpRequest() var task = {"code" : code, "doc" : doc, "id" : __requestIdCounter++} doc.onreadystatechange = function() { if (doc.readyState === XMLHttpRequest.DONE) { var resObj = {} if (doc.status == 200) { resObj.request = task resObj.response = JSON.parse(__preProcessData(code, doc.responseText)) } else { // Error resObj.request = task resObj.isError = true resObj.responseDetails = doc.statusText resObj.responseStatus = doc.status } __emitSignal(resObj, code, doc.requestId) } } doc.open(method, request, true) doc.setRequestHeader("Authorization", "OAuth " + accessToken) doc.send() return task }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記のコードでは、約束されたXMLHttpRequestを見ることができ、結果を得るためにシグナルを送信します。 さらに、要求オブジェクトが生成されます-これはオペレーションコード、識別子、およびXMLHttpRequest自体です。 将来的には、キャンセル、結果の処理などに使用できます。 突然誰かが「__emitSignal」に興味を持つようになった場合-それは簡単に実装されます：

 function __emitSignal(resObj, operationCode, requestId) { responseReceived(resObj, operationCode, requestId) }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このようなコードは、信号の送信をログに記録して傍受するために使用できます。 内部関数「__preProcessData」については、何もしません（！）。これは将来のブックマークです。 実際、これに関しては私が苦い経験から学んだということです。SteamAPIを使用する場合、64ビットの数値が引用符で囲まれていなくても、JSON'eの回答になることがあります。 その結果、JavaScriptはそれらを二重であると認識し、精度が失われ、長生きする悲しみの悲しみを失います！ 解決策は、入力データの前処理、数字の引用、および文字列と同様にそれらを使用することでした。

概して、すべて-ひとつずつ、必要なすべてのAPIメソッドが実装されました。つまり、フォルダーの作成、コピー、移動、削除、読み込み、宣伝のステータスの変更です。 合計で、140行（！）のコード行がQML \ JSにあり、WebDAVプロトコル実装のC ++ \ Qtにある他の1,000行のコードを機能的に完全に置き換えました。

レイヤー実装

C ++でのWebDAVプロトコルの実装は非常にシンプルで透過的でしたが、QMLから直接使用するのは不便でした。 古いバージョンでは、特別なBridgeクラスが仲介として作成され（名前はla KO）、サービスでの作業が容易になります。 新しいバージョンではこのアプローチを放棄せず、古いBridgeを同じメソッドとプロパティのセットを持つ同じ名前の新しいQMLタイプに慎重に置き換えます。 いわば、独自のAPIを維持するために、UIは同じ関数を呼び出し続けますが、完全に異なるエンティティのものです。 繰り返しますが、概略的には次のようになります。

 QtObject { id: bridgeObject property string currentFolder: "/" property bool isBusy: taskCount > 0 property int taskCount: 0 property var tasks: [] function slotMoveToFolder(folder) { if (isBusy) return // .... code } function slotDelete(entry) { __addTask(yadApi.remove(entry)) } property QtObject yadApi: YadApi { id: yadApi onResponseReceived: { __removeTask(resObj.request) switch (resObj.request.code) { case "metadata": // console.log(JSON.stringify(resObj)) if (!resObj.isError) { var r = resObj.response currentFolder = __checkPath(r.path) // Filling model } // !isError break; case "move": case "copy": case "create": case "delete": case "publish": case "unpublish": __addTask(yadApi.getMetaData(currentFolder)) break; } // API property ListModel folderModel: ListModel { id: dirModel } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、自分のクラスを置き換えるには、「currentFolder」および「isBusy」プロパティが必要でした。 最初のプロパティは、ナビゲーション用の現在のディレクトリパスを格納するために使用されます。 「slotMoveToFolder」メソッドで最新に維持されます。 また、実行されたリクエスト（__addTask、__ removeTask、tasks配列とそのtaskCountの長さ）を考慮して、いくつかのプロパティとメソッドが追加されました。 ただ QOである必要はなく、配列に長さがあると言ってください-プロパティにより、QMLでバインディングを実行できます。このケースは、将来的にはisBusyでのみ使用されます ）。 以前のように関数の命名を残しました-「スロット」プレフィックスで始まります（クラスのC ++バージョンでは、2つの方法でQMLからメソッドの可視性を達成できました：それらをスロットにするか、Q_INVOKABLEを使用します）。 簡潔にするために、再び、指定されたディレクトリに削除して移動する方法のみを残しました。他のすべては、ソースコードのフルバージョンにも存在します。 タイプBridgeのメソッドは、UIから直接呼び出されます。

新しいBridgeの機能の1つは、上記のAPIの実装です-YadApi。 また、作成の場所で、操作の完了に関するシグナルをリッスンし、関連するアクションを実装します。 したがって、たとえば、名前を変更または削除すると、ディレクトリの内容がリロードされます。

データモデルdirModelには特に注意が払われます。 以前の実装では、古典的なシナリオに従ってQAbstractItemModelから継承されたFolderModelクラスがありました-私自身の役割（Qtに精通している人なら誰でも少なくとも彼らが話していることを理解するでしょう）などを導入します。 現在、これらはすべて、JSオブジェクトを格納できる標準のListModelを使用して簡単に破棄されています。 このモデルは次のように入力されます。

 dirModel.clear() var items = r._embedded.items for(var i = 0; i < items.length; i++) { var itm = items[i] var o = { /* All entries attributes */ "href" : __checkPath(itm.path), "isFolder" : itm.type == "dir", "displayName" : itm.name, "lastModif" : itm.modified, "creationDate" : itm.created, /* Custom attributes */ "contentLen" : itm.size ? itm.size : 0, "contentType" : itm.mime_type ? itm.mime_type : "", "publicUrl" : itm.public_url ? itm.public_url : null, "publicKey" : itm.public_key ? itm.public_key : null, "isPublished" : itm.public_key ? true : false, "isSelected" : false, "preview" : itm.preview } dirModel.append(o) }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

互換性のために、モデルのプロパティ名も古いバージョンのままにしておく必要がありました。 これは、モデルのC ++実装で非常に大きなクラスを得たということではありませんが、標準モデルとそのような小さなデザインを使用してそれを取り除くことは非常に素晴らしいです！

おわりに

最終的に、Yandex.DiskクライアントでC ++を完全に放棄しました。 私は、プラスに何か悪いものがあるという事実に決して傾向がありません。 いや！ 私の記事の目的は、純粋なQMLの可能性を示すことでした-主要なタスクはUIを開発することですが（実際にはこの記事では説明していませんが）、本当に多くのことができます。 また、コードはシンプルで明確に見えますが、CSS計算機の実装とはまったく異なります 。

ご清聴ありがとうございました！ コードはlaunchpad'eにあります。



PSQuestionsを歓迎します。記事の一部をより詳細に公開したいのであれば、お願いします！

PSS次の記事では、Ubuntu SDKの主要な側面とツールに取り組む予定です。