How to use the Ubuntu Online Account API to create a Weibo qml app

In this article, we will use the online account API provided by the Ubuntu SDK to access the Weibo API and display what is needed. The focus of this article is to show how to use the Online account API. We will create a simple QML application. We finally display the following screen:

More information on QML application development can be found at address: https://developer.ubuntu.com/zh-cn/apps/qml/

1) Create a basic application
We still use our Ubuntu SDK as before to create a basic Weibo QML application.






This allows us to create a basic Weibo QML application. You can use the hotkey Ctrl + R to run it though it's not going to do anything.

2) files required to join the online account

We can refer to the article for a deeper understanding of the online account API. To be able to access, you need to create the following files:
1) weibo.application
Its specific content is as follows:

<?xml version= "1.0" encoding= "UTF-8"?>
<application>
  <description>weibo qml</ description>
  <desktop-entry>weibo.ubuntu_weibo.desktop</desktop-entry>
  <services>
    <service id= "Qml-weibo.ubuntu_qmlweibo" >
      <description>watch your favorite Weibo messages</ description>
    </service>
  </services>
</application>

2) Weibo.service
The specific content of this is:

<?xml version= "1.0" encoding= "UTF-8"?>
<service>
  <type>sharing</type>
  <name>weibo qml</name>
  <icon>qml-weibo.png</icon>
  <provider> qml-weibo.ubuntu_plugin</provider>
  <translations>unity-scope-weibo</translations>
</service>

3) Create a directory of plugin files and create them under it
A) main.qml, the contents of which are:

Import Ubuntu.OnlineAccounts.Plugin 1.0

Oauthmain {}

b) Qml-weibo.ubuntu_plugin.provider, the contents of which are:

<?xml version= "1.0" encoding= "UTF-8"?> <provider> <name>Weibo</name> <icon>weibo/ Icon.png</icon> <translations>unity-scope-weibo</translations> <plugin>generic-oauth< /plugin> <domains>.*weibo\.com</domains> <single-account>true</single-account> < template> <group name= "auth" > <setting name= "method" >oauth2</setting> <setting Nam
          E= "mechanism" >web_server</setting> <group name= "Oauth2" > <group name= "Web_server" > <setting name= "Host" >api.weibo.com</setting> <setting name= "Authpath" &GT;OAUTH2/AUTHORIZE&L t;/setting> <setting name= "Tokenpath" >oauth2/access_token</setting> <setting name= "R Edirecturi ">https://api.weibo.com/oauth2/default.html</setting> <setting name=" Responsetype ">code </setting> <setting NamE= "ClientId" >your developer key</setting> <setting type= "as" name= "allowedschemes" >[' https ', ' http ']</setting> <setting name= "Clientsecret" >your developer Secret</setting> <settin G Name= "Forceclientauthviarequestbody" type= "B" >true</setting> </group> </group> <
 /group> </template> </provider>

In the above file, be sure to enter your own " Your Developer Keyand Your developer Secret”。 This you need to apply on the Weibo API's website. The schema for the entire file is:



4) Modify the Manifest.json file as follows：

{
    "name": "Qml-weibo.ubuntu",
    "description": "Description of Qml-weibo",
    "architecture": "All",
    " Title ":" Qml-weibo ","
    hooks ": {
        " Qmlweibo ": {
            " account-application ":" Weibo.application ",
            " Account-service ":" Weibo.service ",
            " AppArmor ":" Qmlweibo.apparmor ",
            " desktop ":" Qmlweibo.desktop "
        },
        "Plugin": {
            "Account-provider": "Plugin/qml-weibo.ubuntu_plugin.provider",
            "Account-qml-plugin": "Plugin/qml"
        }
    ,
    "version": "0.1",
    "maintainer": "Xiaoguo, Liu <xiaoguo.liu@canonical.com > ",
    " framework ":" Ubuntu-sdk-14.10 "
}

Some settings for account and plugin are added here.

5) in order for the. Service,.application and. provider files to be displayed properly, we add the following to the "Qml-weibo.qmlproject"：

    Files {
        filter: "*.service"
    }
    Files {
        filter: "*.application"
    }
    Files {
        filter: "*. Provider "
    }

Here, we have basically modified or added the files we need.

3) Designing the app's UI

We are here to modify our Main.qml file. We used a column layout manager to manage our controls.
Use a ListView (Accountslist) to display all of our relevant accounts. This can be seen in "system settings" in the "account"
Use a button called "createaccountbtn" to create a Weibo online account to use another listview (weibolist) list to display the content of Weibo

Import QtQuick 2.0 Import ubuntu.components 0.1 import Ubuntu.Components.ListItems 0.1 as ListItem import UBUNTU.ONLINEACC
    Ounts 0.1 Import Ubuntu.OnlineAccounts.Client 0.1 import "Weiboapi.js" as API/*!
\brief MainView with a Label and Button elements.

    */MainView {id:main//ObjectName for functional testing purposes (AUTOPILOT-QT5) ObjectName: "MainView" note!
     ApplicationName needs to match the "name" field of the click Manifest ApplicationName: "Qml-weibo.ubuntu"/* The enables the application to change orientation when the device is rotated.
    The default is False. 

    *///automaticorientation:true Property string Accesstoken: "" Width:units.gu (+) Height:units.gu (90) Page {id:root clip:true title:i18n.tr ("Weibo") Column {Spacing:uni Ts.gu (2) width:parent.width ListView {id:accountslist anchOrs.horizontalCenter:parent. Center anchors.verticalCenter:parent.
                Center height:contentheight width:parent.width spacing:units.gu (1)
                    Model:accountsmodel Delegate:rectangle {Id:wrapper Width:accountsList.width Height:units.gu (Ten) color:accts.enabled? "Green": "Red" Accountservice {id:accts Objecthand Le:accountservicehandle onauthenticated: {console.log ("Reply:" + JS
                            On.stringify (reply));
                            var obj = json.parse (json.stringify (reply)); Console.log ("Accesstoken:" + obj.)
                            Accesstoken); Main.accesstoken = obj.

                            Accesstoken;
          Make the Authenticate button Invisile                  Accountslist.visible = false;
                        Start to get the data api.getstatus (); } onauthenticationerror: {Console.log ("Authentication failed, code" 
                            + error.code)//AccountsList.headerItem.text = "Error" + Error.code
                        Authenticatebtn.text = DisplayName + "Error" + Error.code + "Please do it Again";

                        }} Button {id:authenticatebtn Anchors.fill:parent Anchors.margins:units.gu (2) Text:
                            i18n.tr ("Authenticate%1"). Arg (model.displayname + "+ model.providername) onclicked: {
      var params = {} accts.authenticate (params)                  }}}} Button {Id:creat
                EACCOUNTBTN Anchors.horizontalCenter:parent.horizontalCenter Width:parent.width
            Height:units.gu (8) text:i18n.tr ("Request access") onClicked:setup.exec () } listmodel {Id:modelweibo} ListView {ID 


                : Weibolist width:parent.width height:parent.height spacing:units.gu (1)
                    Model:modelweibo Delegate:rectangle {width:parent.width
                        Height:units.gu (8) Color: "Lightgrey" Borderimage {
                        Id:image Source: {return json.parse (' + json.stringify (user) + '). Profile_image_url}Width:parent.height; Height:parent.height Border.left:5; Border.top:5 Border.right:5;
                        Border.bottom:5} Column {Spacing:units.gu (1)
                        X:image.width + Ten Width:parent.width-image.width-20

                            Height:parent.height Text {Id:title
                            Text: {return json.parse (' + json.stringify (user) + '). Name}} Text { 
                    Id:subtitle text: {return Model.text}} }}}}} Accountservicemodel {Id:accountsmode L//servicetype: "" ApplicationID: "Qml-weibo.ubuntu_qmlweibo"} Setup {Id:setu
     P   ProviderID: "Qml-weibo.ubuntu_plugin" ApplicationID: "Qml-weibo.ubuntu_qmlweibo" onfinished: {
        Createaccountbtn.visible = false; }} component.oncompleted: {if (Accountsmodel.count = = 0) {//If there is no such an acco
        UNT, we need to create such one setup.exec (); } else {//Hide the button since the account has already been created createaccountbtn.visible =
 False}}}

We have designed weiboapi.js files to help us get the specific content of Weibo:

Weibo//home Status function weibohomestatus (token, page, observer) {var url = "Https://api.weibo.com/2/statuses/home_timeline.json?acce

    Ss_token= "+ token +" &page= "+ page Console.log (" Home status Start ... ") console.log (" url: "+ URL);
    var doc = new XMLHttpRequest ();
                Doc.onreadystatechange = function () {if (doc.readystate = = xmlhttprequest.headers_received) {
            Console.log ("Home status in Progress ...");
                    } else if (doc.readystate = = Xmlhttprequest.done) {if (doc.status! = 200) { Console.log ("!!!
                    Network Connection failed! ") Observer.update ("error", Doc.status)} else {Console.log ("--Home STA

                    Tus succeeded! "); if (Doc.responsetext = = null) {Observer.update("null", Doc.status)} else {//Console.log ("Home Status:done" + doc.responsetext) Console.log (
                        "Some Data received!")
                        var json = json.parse (' + doc.responsetext+ ');
                    Observer.update ("Fine", JSON);
    }}}} doc.open ("GET", url, True);
    Doc.setrequestheader ("Content-type", "Application/json");
Doc.send (); } function GetStatus () {///We can get some data from the web and display them console.log ("going to get some dat
            A from web ") function observer () {} Observer.prototype = {update:function (status, result) {

            Console.log ("Got updated!"); if (Status! = "Error") {if (result.error) {Console.log ("Result.error:" + Result.erro
                R); }else {console.log ("Got updated1!");
                    for (var i = 0; i < result.statuses.length; i++) {modelweibo.append (result.statuses[i])
            }}}else{Console.log ("Something is wrong!");
}}} weibohomestatus (Main.accesstoken, 1, New Observer ());
 }

The source of the entire application in the address
Https://github.com/liu-xiao-guo/weiboqml
When all the account files have been successfully created, we can see all the files in the following directory on the phone: