uikit konnect
White

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

Konnect-UIKit

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

Philosophy

  • 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.

Dependency

For UIKit

For Konnect SDK

Note

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

Usage

Configuration and Initialise

  KonnectUIKit.config({
    keyboardOption : {
      stampUrl:"https://ec2-54-168-145-221.ap-northeast-1.compute.amazonaws.com:4430/stamp/index.json",
      snippetUrl:"https://ec2-54-168-145-221.ap-northeast-1.compute.amazonaws.com:4430/teikeibun.json"
    },
    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.
    },
    botUrl:"https://ec2-54-168-145-221.ap-northeast-1.compute.amazonaws.com:4430/bot/index.json",
    templatesUrl:"./templates"
  });

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

  KonnectUIKit.initialize(appName,domain,sdkOption);

Create and bind vue instance.

  KonnectUIKit.createXXXView({
    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`.**/,
      myFunc:function(){}
    },
    computed:{  /** Optional: computed option for vue instance. All built in functions are prefixed with `kuiXXX`.**/,
      myComputed:function(){}
    },
    // and other options ....
  }, function(v){/**callback: created vue instance will be passed**/});

Templates

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.

Development

Requirement

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

Editor

Setup

cd uikit
npm install
npm install -g gulp bower

Build

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

Test

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

TODOs

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

See also sample

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Dang Thanh Tung

1 bài viết.
7 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
1 bài viết.
7 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á!