uikit konnect

Dang Thanh Tung viết ngày 23/05/2015


Konnect-UIKit is a UI-Framework for Konnect client in browser.


  • Reactive

UIKit is based on Bacon and Vue.
Message from Konnect-Server is treated as a stream with the power of Bacon.
Cached data by Konnect-SDK is binded to view with the power of Vue.
UIKit connect them each other and all events and change of data will effect to the UI.

  • Hackable

UIKit's APIs accept Vue option and return Vue instance.
You can add your own date and methods, filter etc. to that instance.
UIKit's built in data are saved under the kui namespace, and methods are prefixed with kui.
Templates are also customizable as Vue.js way.


For UIKit

For Konnect SDK


jQuery and TwitterBootstrap is just for sample implementation.
UIKit does not need jQuery and TwitterBootstrap.


Configuration and Initialise

    keyboardOption : {
    profileFunc: {
      getMe      : getMeFromSocial,       // getMe should be a thenable function
                                          // function(done, reject, userId, token){
                                          //    // do something
                                          //    done({name:`name of user`, id:`id of user`, imgUrl:`img url of user`})
                                          // }
      getContacts : getContactFromSocial, // getContacts should be a thenable function
                                          // function(done, reject, userId, token){
                                          //    // do something
                                          //    done([{name:`name of c1`, id:`id of c1`, imgUrl:`img url of c1`}, {name:`name of c2`, id:`id of c2`, imgUrl:`img url of c2`})
                                          // }
    authFunc: {
      authenticate: socialLogin,          // authenticate should be a thenable function
                                          // function(done, reject, userId, password, event){
                                          //    // do something
                                          //    done({
                                          //      userId: authResult.id,
                                          //      password: authResult.access_token
                                          //    });
                                          // }
      disconnect:  socialLogout          // socialLogout should be a thenable function
                                          // function(done, reject){
                                          //    // do something
                                          //    done();
                                          // }
    fileServer : {
      upload:"https://ec2-54-168-145-221.ap-northeast-1.compute.amazonaws.com:4430/userapi/upload",       //URL string or function,
                                                                                                          // if url is specified, Konnect-Server is used as file server,
                                                                                                          // if function is specified, function must be a thenable and called with formData
      download:"https://ec2-54-168-145-221.ap-northeast-1.compute.amazonaws.com:4430/userapi/download"    //URL string or function, if url is specified, Konnect-Server is used as file server
                                                                                                          // if function is specified,  function must be return "url" for img tag. this is not thenable fucntion.

  var appName = "KONNECT-WEB-DEMO",
      domain  = "ec2-54-168-145-221.ap-northeast-1.compute.amazonaws.com:4430",
      sdkOption = {world:"mobilus_battle"};


Create and bind vue instance.

    el:         "#app", /**  Required: element or querySelectorString for vue.$el **/,
    templateId: "template_id", /** Required: String this must be**/,
    data:{       /** Optional: data option for vue instance. `kui` is reserved by uikit**/,
      copyright:"Copyright (c) 2014 Mobilus All Rights Reserved."
    methods:{  /** Optional: methods option for vue instance. All built in functions are prefixed with `kuiXXX`.**/,
    computed:{  /** Optional: computed option for vue instance. All built in functions are prefixed with `kuiXXX`.**/,
    // and other options ....
  }, function(v){/**callback: created vue instance will be passed**/});


Template files must be saved in directory at config.templatesUrl.
It's name should be corespond to id. Like templates/MY_TEMPLATE_ID.html.tpl
It's first line must be <script type="konnect-template" id="MY_TEMPLATE_ID">
when KonnectUIKit.createXXX was called,
UIKit fetch template from server or cache, and use it for the vue instance.
You can use all v-directives and access instance's data from templates.



  • NodeJS and NPM,git, python(for local ssl server)



cd uikit
npm install
npm install -g gulp bower


cd uikit
gulp lint        # This command run jshint
gulp compress    # This command create minified file
gulp copy        # This command copy files to sample/lib directory

cd ./sample
bower install    # This command install dependencies for sample application

Run sample app on local ssl server

cd uikit
python tools/sslServer.py   # This command start sample application on local ssl server at https://localhost:4443/sample


gulp test   # This command is not implemented yet, write tests please.


  • support i18n
  • write tests
  • write documents
  • write other examples

See also sample

Bình luận

{{ comment.user.name }}
Bỏ hay Hay
Male avatar
{{ comment_error }}

Hiển thị thử

Chỉnh sửa


Dang Thanh Tung

3 bài viết.
12 người follow
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
17 1
Loạt bài viết này mình sẽ giải thích từ khái quát đến cụ thể, bóc tách từng phần trong cách thức hoạt động của blockchain và bitcoin để làm rõ nhữn...
Dang Thanh Tung viết hơn 2 năm trước
17 1
5 2
Ứng dụng phi tập trung ( decentralized application ) Phương thức xác minh danh tính phía client sử dụng chữ ký điện tử và lưu trữ quản trị databas...
Dang Thanh Tung viết 2 năm trước
5 2


{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}

{{userFollowed ? 'Following' : 'Follow'}}
3 bài viết.
12 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!