📋 👩🏼‍🤝‍👩🏻 🥪 उबंटू टच के लिए Google कार्य ⏺️ 🤷🏻 🐪

उबंटू टच वितरण के लिए एंड्रॉइड के लिए एप्लिकेशन और क्यूटी 5 को जोड़ने के बारे में खबर के बाद , मैंने यह देखने का फैसला किया कि उबंटू एसडीके क्या है और एक साधारण एप्लिकेशन लिखें। पसंद Google कार्यों पर गिर गई, अब आवेदन oauth प्राधिकरण पास करता है और चयनित सूची से कार्य प्राप्त करता है। आवेदन कोड जीथब पर उपलब्ध है । QML के साथ परिचित होने से कोड की समझ सरल हो जाएगी, इस पृष्ठ पर कुछ लिंक एकत्र किए गए हैं ।

स्थापना

वर्तमान में, Ubuntu के लिए पैकेज आधिकारिक तौर पर 12.04 से शुरू हो रहे हैं ।
स्थापना के बाद, क्यूटी निर्माता उबंटू से अतिरिक्त विकास उपकरण और इंटरफ़ेस के लिए घटकों के एक सेट के साथ उपलब्ध होगा। मैं साइट पर एक उदाहरण के साथ प्रारंभिक परिचित शुरू करने की सलाह देता हूं ।
मैंने अधिक लचीलेपन के लिए एक नया क्यूटी क्विक 2 एप्लीकेशन प्रोजेक्ट बनाया। आप कोड को main.qml में कॉपी कर सकते हैं और एप्लिकेशन चला सकते हैं। QQmlComponent में आउटपुट : घटक तैयार नहीं है कंसोल एक छोटा बग है , लेकिन SDK अभी भी पूर्वावलोकन स्थिति में है।

प्राधिकरण

एपीआई के साथ काम करने के लिए, आपको कंसोल में एप्लिकेशन को पंजीकृत करना होगा। चरण 2 में विस्तृत विवरण : अपना आवेदन पंजीकृत करें
हमें उपयोगकर्ता को एप्लिकेशन का प्राधिकरण पृष्ठ दिखाना होगा और टोकन प्राप्त करना होगा। QML लंबे समय से आसपास है और एक आधार के रूप में मैंने qml-google-टास्क प्रोजेक्ट से कोड लिया। दो GoogleOuth.qml फ़ाइलें प्राधिकरण - जीयूआई और google_oauth.js - तर्क को लागू करती हैं।
QtQuick 2 के साथ काम करने और उबंटू के घटकों के साथ एकीकरण के लिए GoogleOuth.qml को संशोधित करें ।

कोड

import QtQuick 2.0 import QtWebKit 3.0 import Ubuntu.Components 0.1 import "google_oauth.js" as OAuth Page { id: google_oauth title: i18n.tr("Login") anchors.fill: parent property string oauth_link: "https://accounts.google.com/o/oauth2/auth?" + "client_id=" + OAuth.client_id + "&redirect_uri=" + OAuth.redirect_uri + "&response_type=code" + "&scope=https://www.googleapis.com/auth/tasks" + "&access_type=offline" + "&approval_prompt=force" property bool authorized: accessToken != "" property string accessToken: "" property string refreshToken: "" signal loginDone(); onAccessTokenChanged: { console.log('onAccessTokenChanged'); if(accessToken != ''){ console.log("accessToken = ", accessToken) loginDone(); } } function login(){ loginView.url = oauth_link } function refreshAccessToken(refresh_token){ OAuth.refreshAccessToken(refresh_token) } Flickable { id: web_view_window property bool loading: false anchors.fill: parent WebView { id: loginView anchors.fill: parent onUrlChanged: OAuth.urlChanged(url) } } }

Google_oauth.js में हम कंसोल में प्राप्त ग्राहकों के लिए client_id client_secret और redirect_uri को बदलते हैं।
हम GoogleOuth.qml कोड को थोड़ा बदलकर काम की जाँच कर सकते हैं:

कोड

 import QtQuick 2.0 import QtWebKit 3.0 import Ubuntu.Components 0.1 import "google_oauth.js" as OAuth Page { id: google_oauth title: i18n.tr("Login") anchors.fill: parent property string oauth_link: "https://accounts.google.com/o/oauth2/auth?" + "client_id=" + OAuth.client_id + "&redirect_uri=" + OAuth.redirect_uri + "&response_type=code" + "&scope=https://www.googleapis.com/auth/tasks" + "&access_type=offline" + "&approval_prompt=force" property bool authorized: accessToken != "" property string accessToken: "" property string refreshToken: "" signal loginDone(); onAccessTokenChanged: { console.log('onAccessTokenChanged'); if(accessToken != ''){ console.log("accessToken = ", accessToken) loginDone(); } } function login(){ loginView.url = oauth_link } function refreshAccessToken(refresh_token){ OAuth.refreshAccessToken(refresh_token) } Flickable { id: web_view_window property bool loading: false //anchors.fill: parent //  width: 800 height: 800 WebView { id: loginView anchors.fill: parent onUrlChanged: OAuth.urlChanged(url) } } //  Component.onCompleted: { console.log("onCompleted") login() } }

और qmlscene उपयोगिता को चलाने के लिए, GoogleOuth.qml फ़ाइल (क्यूटी निर्माता में यह मेनू में उपलब्ध है: उपकरण > बाहरी > क्यूटी क्विक > क्यूटी क्विक 2 पूर्वावलोकन , वर्तमान में खुली हुई फ़ाइल लॉन्च करता है)
प्राधिकरण के बाद, लॉग में निम्नलिखित पंक्तियाँ दिखाई देनी चाहिए:
onAccessTokenChanged
accessToken = xxxx.xxxxxxxxxxxxxxxxxxxxxxxxxxxx

नेविगेशन

संरचनात्मक रूप से, इंटरफ़ेस एक MainView पेज का एक सेट है , जो एंड्रॉइड में टुकड़ों के समान है। सादगी के लिए, मैंने अलग-अलग फाइलों में पेज बनाया, main.qml में पेजस्टैक, पेजों के बीच नेविगेशन के लिए जिम्मेदार और स्विचिंग पेजों के लिए कोड बना रहा।

कोड

 import QtQuick 2.0 import Ubuntu.Components 0.1 import "tasks_data_manager.js" as TasksDataManager MainView { objectName: "mainView" applicationName: "UTasks" id: root width: units.gu(60) height: units.gu(80) PageStack { id: pageStack Component.onCompleted: push(taskLists) //   TaskLists { id: taskLists visible: false onItemClicked: { var item = taskLists.curItem console.log("onItemClicked: ", item) tasks.title = item["title"] TasksDataManager.getMyTasks(item["id"]) pageStack.push(tasks) } } //    Tasks { id: tasks visible: false } //    GoogleOAuth { id: google_oauth visible: false onLoginDone: { pageStack.clear() pageStack.push(taskLists) console.log("Login Done") //tasks.refreshToken = refreshToken settings.setValueFor("accessToken", accessToken) settings.setValueFor("refreshToken", refreshToken) TasksDataManager.getMyTaskLists() } } } //       Component.onCompleted: { console.log("onCompleted") if (settings.getValueFor("refreshToken") === "") { pageStack.push(google_oauth) console.log("google_oauth") google_oauth.login() } else { pageStack.push(taskLists) google_oauth.refreshAccessToken(settings.getValueFor("refreshToken")) } } }

परिरक्षण

उपयोगकर्ता से प्राधिकरण का अनुरोध नहीं करने के लिए, हर बार टोकन को बचाने के लिए आवश्यक है। QML 2 में, SQLite के साथ काम उपलब्ध है, लेकिन एक पंक्ति के लिए, मैं SQL का उपयोग नहीं करना चाहता था। मैंने एक छोटा C ++ क्लास टास्कसेटिंग लिखा - QSettings पर एक रैपर। C ++ ऑब्जेक्ट के साथ QML से काम करने के लिए, आपको Q_INVOKABLE के रूप में कॉल की गई विधियों को चिह्नित करना होगा और ऑब्जेक्ट को संदर्भ में जोड़ना होगा:

 viewer.rootContext()->setContextProperty("settings", &settings);

उसके बाद, QML में, आप getValueFor तरीकों का उपयोग कर सकते हैं और मान सेट करने के लिए ValueFor सेट कर सकते हैं:

 settings.setValueFor("refreshToken", refreshToken) if (settings.getValueFor("refreshToken") === "") {

कार्य सूची

इंटरफ़ेस TaskLists.qml है ।
Ubuntu से ListItems का उपयोग करते हुए सरल सूची दृश्य

कोड

 import QtQuick 2.0 import QtQuick.XmlListModel 2.0 import Ubuntu.Components 0.1 import Ubuntu.Components.ListItems 0.1 import Ubuntu.Components.Popups 0.1 Page { id: taskLists title: i18n.tr("Lists") anchors.fill: parent ListModel { id: taskListsModel ListElement { title: "My" } } Flickable { id: flickable anchors.fill: parent ListView {// id: taskListsView model: taskListsModel anchors.fill: parent delegate: Standard { text: title //    progression: true //  onClicked: { console.log("index: ", index); taskListsView.currentIndex = index curItem = taskListsModel.get(index) itemClicked() } } } } }

कार्य कार्यों में तर्क कार्यान्वित किया जाता है_डेटा_मनगर । Js , हमें getMyTaskLists () फ़ंक्शन की आवश्यकता है। Onload की सामग्री को इसमें बदलें

 taskLists.itemsList = result["items"];

TaskLists.qml में हम तत्वों की सूची जोड़ते हैं और इसके परिवर्तन की प्रक्रिया करते हैं:

  property variant itemsList; signal itemClicked(); onItemsListChanged: { taskListsModel.clear() if(itemsList === undefined) return for(var i = 0; i < itemsList.length; ++i) { console.log("append:", itemsList[i]["title"], itemsList[i]["id"]); var item = itemsList[i] taskListsModel.append( item ); //    } }

और अंत में, सूची आइटम पर क्लिक करने के लिए एक हैंडलर जोड़ें

 property variant curItem; onClicked: { console.log("index: ", index); taskListsView.currentIndex = index curItem = taskListsModel.get(index) itemClicked() }

जब आप किसी तत्व को क्लिक करते हैं, तो main.qml में हम सूची में स्विच करना लागू करते हैं

 onItemClicked: { var item = taskLists.curItem console.log("onItemClicked: ", item) tasks.title = item["title"] TasksDataManager.getMyTasks(item["id"]) pageStack.push(tasks) }

कार्य सूची को डाउनलोड करना सूची को लोड करने के समान किया जाता है। कोड को रिपॉजिटरी में देखा जा सकता है।

डेस्कटॉप संस्करण से स्क्रीनशॉट:

जारी रखने के लिए ...

उबंटू टच के लिए Google कार्य

स्थापना

प्राधिकरण

नेविगेशन

परिरक्षण

कार्य सूची

More articles: