How to create a microblog HTML5 application using the Ubuntu online account API

In this post. We will use the Ubuntu SDK to provide the online account API to access the Weibo API and display the required content. The focus of this article is to show how to use the online account API in HTML 5. We will create a simple HTML 5 app. We finally display the following images for example:

watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvvwj1bnr1vg91y2g=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/center "width=" "height=" >

Many other information about HTML5 application development can be in the address: https://developer.ubuntu.com/en/apps/html-5/

1) Create one of the most important applications
We still use our Ubuntu SDK to create one of the most important Weibo HTML 5 apps.

watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvvwj1bnr1vg91y2g=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/center "width=" "height=" >

watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvvwj1bnr1vg91y2g=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/center "width=" "height=" >

watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvvwj1bnr1vg91y2g=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/center "width=" "height=" >

This allows us to create one of the most important Weibo HTML 5 applications.

You can use the hotkey Ctrl + R to perform it although it is not able to do anything.






2) Additional documents required for online account

We can take a look at the article to get a deeper understanding of the online account API. In order to be able to interview. You need to create files such as the following:

1)weibo.application

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

2) Weibo.service

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

3) Create a plugin file folder and create it in the following
A) main.qml, the contents of which are:

Import Ubuntu.OnlineAccounts.Plugin 1.0OAuthMain {}

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

<?xml version= "1.0" encoding= "UTF-8"?
 
 
><provider> <name>Weibo</name> <icon>weibo.png</icon> <translations> Unity-scope-weibo</translations> <plugin>generic-oauth</plugin> <domains>.*weibo\.com </domains> <single-account>true</single-account> <template> <group name= "auth" > &L T;setting name= "method" >oauth2</setting> <setting name= "mechanism" >web_server</setting> &lt ; Group name= "Oauth2" > <group name= "web_server" > <setting name= "Host" >api.weibo.com</sett ing> <setting name= "Authpath" >oauth2/authorize</setting> <setting name= "Tokenpath" > oauth2/access_token</setting> <setting name= "Redirecturi" >https://api.weibo.com/oauth2/default.html& lt;/setting> <setting name= "Responsetype" >code</setting> <setting name= "ClientId" >y Our developer key</setting> <sEtting type= "as" name= "allowedschemes" >[' https ', ' http ']</setting> <setting name= ' Clientsecret ' >You R developer Secret</setting> <setting name= "Forceclientauthviarequestbody" type= "B" >true</setting&      Gt </group> </group> </group> </template></provider>

In the above file, be sure to enter your own " Your Developer Keyand Your developer Secret”。 You need to apply for this on the Weibo API site. The schema for the entire file is:

watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvvwj1bnr1vg91y2g=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/center "width=" "height=" >


4) Change the Manifest.json file for example :

{    "name": "Html5-weibo.ubuntu",    "description": "Description of Html5-weibo",    "architecture": "All",    "title": "Html5-weibo", "    hooks": {        "Html5weibo": {            "AppArmor": "Html5weibo.apparmor",            " Desktop ":" Html5weibo.desktop ","            account-application ":" Weibo.application ",            " Account-service ":" Weibo.service "        },        " Account-plugin ": {            " Account-provider ":" Plugin/html5-weibo.ubuntu_ Account-plugin.provider ",            " Account-qml-plugin ":" Plugin/qml "        }    ,    " version ":" 0.1 ",    " Maintainer ":" Xiaoguo, Liu <[email protected]> ",    " framework ":" Ubuntu-sdk-14.10 "}

Some of the settings for account and plugin are added here.

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

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

Here, we have basically changed or added the documents we need.

3) Designing the app's UI
To change our "index.html" file:

<! DOCTYPE html>
The UI here is easy, I just use a list control. Most of our code will be implemented in "App.js":
var token = '; window.onload = function () {Console.log ("This was so cool....!")    var UI = new Ubuntuui ();    Ui.init ();    UI.pagestack.push (' main ');    var API = External.getunityobject (' 1.0 '); var OA = API.    onlineaccounts;    Ui.button (' GetStatus '). Click (auth);    Auth ();        function auth () {console.log ("GetStatus button is clicked!");        var filters = {' Provider ': ' Html5-weibo.ubuntu_account-plugin ', ' Service ': '};            Oa.api.getAccounts (filters, function (accounts) {console.log ("total length:" + accounts.length);                if (Accounts.length < 1) {//SetResults (' No accounts available '); Oa.api.requestAccount ("Html5-weibo.ubuntu_html5weibo", Unescape ("Html5-weibo.ubuntu                        _account-plugin "), function () {Console.log (" Requestaccount callback ... ");                Auth ();                });            Return } ElSE {//SetResults ("Available accounts:" + accounts.length);                } function Authcallback (res) {token = res[' data '] [' accesstoken '];                Console.log ("Accesstoken:" + token);//SetResults ("Accesstoken:" + token);                    Getweibostatus (token, function (statuses) {Console.log ("the length:" + statuses.length); if (statuses) {//Create the ' ul ' element var ul = Document.createel                        Ement (' ul ');//var results = document.getElementById (' results ');                        var results = document.queryselector (' #results ');                        var statuslist = document.queryselector (' #statuslist ');                        var ul = document.createelement (' ul ');                for (var i = 0; i < statuses.length; i + +) {var li = document.createelement (' li ');            Ul.appendchild (LI);                            var aside = document.createelement (' aside ');                            Li.appendchild (aside);                            var img = document.createelement (' img ');                            Img.setattribute (' src ', statuses[i][' profile_image_url ');                            Img.setattribute (' width ', ' 50 ');                            Img.setattribute (' height ', "50");                            Aside.appendchild (IMG);                            var a = document.createelement (' a ');                            A.setattribute (' href ', ' # ');                            a.innerhtml = statuses[i][' text '];                            Li.appendchild (a);                            var right = document.createelement (' label ');                        right.innerhtml = "" Li.appendchild (right);                        } console.log ("It is Done6"); Statuslist.appendchild (UL);                    } else {setresults (' <br><br>error ');            }                });        } accounts[0].authenticate (Authcallback); });        Getaccounts}//auth function Getweibostatus (Accesstoken, callback) {var http = new XMLHttpRequest () var url = "https://api.weibo.com/2/statuses/home_timeline.json?access_token=" + Accesstoken + "&page=" + 1 Co        Nsole.log (' URL: \ n ' + URL) http.open ("GET", url, True);        var statuses = [];                    Http.onreadystatechange = function () {if (http.readystate = = = 4) {if (Http.status = = 200) {                    var response = Json.parse (Http.responsetext); Console.log ("It succeeds!                    Lenght: "); for (i = 0; i < response[' statuses '].length; i++) {var time = json.stringify (response[' Statuse                      S '][i][' created_at ');//  Console.log ("Time:" + time);                        var text = json.stringify (response[' statuses '][i][' text ');//Console.log ("text:" + text); var name = json.stringify (response[' statuses '][i][' user ' [' name ']);//Console.log (                        "Name:" + name);                        var profile_image_url = json.stringify (response[' statuses '][i][' user ' [' profile_image_url ']); Profile_image_url = Profile_image_url.slice (1, profile_image_url.length-1);//Console.log ("Profile_im                        Age_url: "+ profile_image_url);                        var id = json.stringify (response[' statuses '][i][' idstr '); Statuses.push ({' Time ': Time, ' text ': text, ' Na ' Me ': name, ' ID ': ID, ' Profile_image_url ': prof                    Ile_image_url});  }                  Callback (statuses);                } else {Console.log ("error:" + http.status) callback (NULL);        }            }        };    Http.send (NULL);        } function SetResults (data) {var results = document.getElementById (' results ');    results.innerhtml = data; };}; OnLoad

We can use the following sentences to get the interface for the online account API:
   var API = External.getunityobject (' 1.0 ');   var OA = API. onlineaccounts;


Here, we use the HTML 5 online account API to check if there are provider such as the following:
var filters = {' Provider ': ' Html5-weibo.ubuntu_account-plugin ', ' Service ': '};

Suppose not. We use code such as the following to create an Weibo account:
           if (Accounts.length < 1) {                //SetResults (' No accounts available ');                Oa.api.requestAccount ("                    Html5-weibo.ubuntu_html5weibo",                    unescape ("Html5-weibo.ubuntu_account-plugin"),                    function () {                        console.log ("Requestaccount callback ...");                        Auth ();                });                return;            }

When the creation was successful, we used "auth ()" To get access tokens from Weibo. And then we can get the information we need, whatever it is.
The created account can be seen in the "account" in "System settings":


In addition, we can see the files we created in the following folders such as the phone or simulator:


The source code for the entire project is: Git clone https://gitcafe.com/ubuntu/html5weibo.git
 
Copyright notice: This article Bo Master original articles, blogs, without consent may not be reproduced.
 
How to create a microblog HTML5 application using the Ubuntu online account API