doc / api

Commit cd08b2bffc4f64bc07de5d5e54fb862bdffd6e8e

Authored by esau
1 parent 92fea276

versão em ingles

Inline Side-by-side
Showing 1 changed file with 364 additions and 0 deletions
js/client/Readme_en_us.md 0 → 100644
  View file @cd08b2b
  1 +## Usage
  2 +
  3 +###Configuração
  4 +Para usar o funifier em produção, insira a seguinte linha na tag head de todas as paginas que deseja habilitar:
  5 +
  6 +
  7 +```html
  8 + <script src="//client2.funifier.com/2.0.0/funifier.min.js" type="text/javascript"></script>
  9 +```
  10 +
  11 +
  12 +### Iniciação Async mode
  13 +Para iniciar o funifier de maneira assincrona, insira uma função antes do script do funifier:
  14 +
  15 +```javascript
  16 +window.funifierAsyncInit = function(){
  17 + Funifier.init({
  18 + apiKey : 'SUA API KEY'
  19 + });
  20 +};
  21 +```
  22 +
  23 +Dessa maneira, assim que o funifier tiver sido processado, irá chamar a função 'funifierAsyncInit' caso exista.
  24 +
  25 +### Iniciação Sync mode
  26 +
  27 +Você pode inicializar também o funifier a qualquer momento após o carregamento do script do funifier chamando seu método de inicio:
  28 +```javascript
  29 + Funifier.init({
  30 + apiKey : 'SUA API KEY'
  31 + });
  32 +```
  33 +
  34 +#Documentação
  35 +
  36 +##Componentes
  37 +O funifier tem algumas bibliotecas integradas, que pode ser usado em seus widgets/integrações, note no entanto, que as que tem o prefixo '_' são de uso do core do Funifier e por isso não tem garantia de estar presente numa versão futura.
  38 +
  39 +Funifier contêm os seguintes componentes:
  40 +
  41 +- [jquery](https://jquery.com/): `Funifier._$` 1.11.1
  42 +- [async](https://github.com/caolan/async): `Funifier._async`
  43 +- [lodash](https://lodash.com/): `Funifier._`
  44 +- [validator](https://github.com/chriso/validator.js): `Funifier._validator`
  45 +- [mustache](https://github.com/janl/mustache.js/): `Funifier._mustache`
  46 +- [headjs](http://headjs.com/): `Funifier.headjs`
  47 +- [magnificPopup](http://dimsemenov.com/plugins/magnific-popup/): `Funifier._$.magnificPopup`
  48 +- [qs](https://github.com/hapijs/qs): `Funifier._qs`
  49 +
  50 +Para a documentação dos componentes acima, verifique no site do respectivo componente.
  51 +
  52 +### Métodos
  53 +* [`init`](#init)
  54 +* [`listen`](#listen)
  55 +* [`unlisten`](#unlisten)
  56 +* [`api`](#api)
  57 +* [`track`](#track)
  58 +* [`auth`](#auth)
  59 + * [`authenticate`](#authenticate)
  60 + * [`isAuthenticate`](#isAuthenticate)
  61 + * [`logout`](#logout)
  62 +
  63 +
  64 +---------------------------------------
  65 +### init(config, callback)
  66 +
  67 +Utilizado para iniciar a api do funifier.
  68 +Recebe como parâmetro um objeto e um callback.
  69 +
  70 +__config__
  71 +* `apiKey` : String - Apikey configurada no studio.
  72 +* `hideInline` : Boolean - Define a exibição do modo inline para admin. __default__ : false
  73 +* `showNotification`: Boolean - Exibir/ocultar as notificações. __default__ : true
  74 +* `disableCustomCss` : Boolean - Define se o funifier ira carregar o css dos widgets. __default__ : custom-{api_key}-v{version}.css.
  75 +* `disableCustomJs`: Boolean - Define se o funifier ira carregar o js com as funções de widgets. __default__ : custom-{api_key}-v{version}.js.
  76 +* `url`
  77 + * `service` : String - Url do service. __default__ : '//service2.funifier.com/2.0.0/'
  78 + * `client` : String - Url do client. __default__ : '//client2.funifier.com/2.0.0'
  79 + * `studio` : String - Url do studio. __default__ : '//studio2.funifier.com'
  80 + * `css` : String - Caminho de css para sobrescrever o padrão. __default__ : null
  81 + * `js` : String - Caminho do js para sobrescrever o padrão. __default__ : null
  82 +
  83 +__callback__
  84 +
  85 +Recebe uma função que é executada assim que o funifier terminou de inicializar os objetos para a apiKey informada, sendo, que ja carregou todas as dependencias, scripts e styles.
  86 +
  87 +Parâmetros:
  88 +* `err` Recebe um erro caso tenha um
  89 +
  90 +__Exemplo__
  91 +
  92 +```js
  93 +Funifier.init({
  94 + apiKey : 'SUA API KEY',
  95 + hideInline: false,
  96 + url : {
  97 + css : 'http://www.meudominio.com/custom-css-replace.css'
  98 + }
  99 +},function(err){
  100 + if(err){
  101 + console.log('Ocorreu um erro');
  102 + }
  103 +});
  104 +```
  105 +
  106 +---------------------------------------
  107 +### listen(name, callback)
  108 +Monitora um evento do funifier
  109 +* `name` : String - Nome do evento a ser monitorado
  110 +* `callback` : Function - Função a ser executada.
  111 +
  112 +---------------------------------------
  113 +### unlisten(name)
  114 +Para remover eventos do funifier monitorados pelo listen.
  115 +* `name` : String - Nome do evento a excluir o listen.
  116 +*
  117 +---------------------------------------
  118 +### api(endpoint,params,callback)
  119 +Método para comunicação com o service.
  120 +
  121 +* `endpoint` : String - Metodo a ser requisitado no service.
  122 +* `params` : Object - Parâmetros a ser enviado para o service.
  123 +* `callback` : Function - retorno
  124 +
  125 +__Exemplos__
  126 +
  127 +```js
  128 +Funifier.api('get_leaderboard',
  129 + {sort: 1, limit: 10, view: 0, group : 1},
  130 + function(err,data){
  131 + if(err==null){
  132 + alert('Lista de leaderboards recebida')
  133 + console.log(data);
  134 + }else{
  135 + alert('Ocorreu um erro :(')
  136 + }
  137 + }
  138 +);
  139 +```
  140 +
  141 +```js
  142 +Funifier.api('get_widget_data',
  143 + null,
  144 + function(err,data){
  145 + if(err==null){
  146 + alert('Retorno recebido')
  147 + console.log(data);
  148 + }else{
  149 + alert('Ocorreu um erro :(')
  150 + }
  151 + }
  152 +);
  153 +```
  154 +
  155 +---------------------------------------
  156 +### api(endpoint,params,options,callback)
  157 +Método para comunicação com o service.
  158 +
  159 +* `endpoint` : String - Metodo a ser requisitado no service.
  160 +* `params` : Object - Parâmetros a ser enviado para o service.
  161 +* `options` : Object - Parâmetros adicionais.
  162 +* `callback` : Function - retorno
  163 +
  164 +__Exemplos__
  165 +
  166 +```js
  167 +Funifier.api('get_leaderboard',
  168 + {sort: 1, limit: 10, view: 0, group : 1},
  169 + {type:'GET',contentType:'application/json'},
  170 + function(err,data){
  171 + if(err==null){
  172 + alert('Lista de leaderboards recebida')
  173 + console.log(data);
  174 + }else{
  175 + alert('Ocorreu um erro :(')
  176 + }
  177 + }
  178 +);
  179 +```
  180 +
  181 +
  182 +---------------------------------------
  183 +### track(options,callback)
  184 +Traqueia uma ação
  185 +
  186 +__options__
  187 +* `action` : String - Id ou nome da action.
  188 +* `attributes` : Array - lista de atributos, opicional.
  189 +
  190 +__callback__
  191 +
  192 +Função executada apos o track.
  193 +* `err` - Recebe um erro ou nulo.
  194 +* `data` - Response do servidor.
  195 +
  196 +__Exemplo__
  197 +
  198 +```js
  199 +Funifier.track({
  200 + action: 'visitarPagina'
  201 +},function(err,data){
  202 + if(err==null){
  203 + alert('Action traqueada')
  204 + }
  205 +});
  206 +```
  207 +
  208 +---------------------------------------
  209 +### auth
  210 +####authenticate(options,callback)
  211 +Função usada para autenticar jogadores.
  212 +
  213 +__options__
  214 +* `auth_mode` : String - Tipo de autenticação, valores disponiveis.
  215 + * facebook
  216 + * google
  217 + * IMPLICIT
  218 + * PASSWORD
  219 +* `player` : String - Id do jogador, requerido para auth_mode 'IMPLICIT' e 'PASSWORD'. (String)
  220 +* `password` : String - Senha do jogador, requerido para auth_mode 'PASSWORD'
  221 +* `modal` : Boolean - Define se a autenticação via google ou facebook sera feita atraves de um popup, (opcional usado apenas para auth_mode 'google' e 'facebook')
  222 +
  223 +__callback__
  224 +
  225 +Função que de retorno. (Não é executada caso o auth_mode for facebook ou google e modal for igual a false )
  226 +* `err` - Recebe um erro ou nulo.
  227 +* `data` - Response do servidor:
  228 +
  229 +__Exemplo Facebook__
  230 +
  231 +```js
  232 +Funifier.auth.authenticate({
  233 + auth_mode: 'facebook',
  234 + modal: true
  235 +},function(err,data){
  236 + if(err==null){
  237 + alert('Seja bem vindo')
  238 + }
  239 +});
  240 +```
  241 +
  242 +__Exemplo via Senha__
  243 +
  244 +```js
  245 +Funifier.auth.authenticate({
  246 + auth_mode: 'PASSWORD',
  247 + player: 'jogador1'
  248 + password: 'pass@123'
  249 +},function(err,data){
  250 + if(err==null){
  251 + alert('Seja bem vindo')
  252 + }
  253 +});
  254 +```
  255 +
  256 +####isAuthenticate(callback)
  257 +
  258 +Verifica se o jogador está autenticado.
  259 +
  260 +__callback__
  261 + * `isAuthenticate` :Bollean
  262 +
  263 +__Exemplo__
  264 +
  265 +```js
  266 +Funifier.auth.isAuthenticate(function(_isAuthenticate){
  267 + if(isAuthenticate){
  268 + alert('Seja bem vindo, você está autenticado');
  269 + }else{
  270 + alert('Desculpe, faça login, você não está autenticado');
  271 + }
  272 +});
  273 +```
  274 +
  275 +####logout(callback)
  276 +
  277 +Efetua logout do jogador.
  278 +
  279 +__callback__
  280 + * `err`
  281 + * `data`
  282 +
  283 +__Exemplo__
  284 +
  285 +```js
  286 +Funifier.auth.logout(function(err){
  287 + if(err==null){
  288 + alert('Jogador deslogado com sucesso');
  289 + }else{
  290 + alert('Ocorreu um erro');
  291 + }
  292 +});
  293 +```
  294 +
  295 +
  296 +
  297 +## Widget
  298 +
  299 +A estrutura basica de um widget:
  300 +```javascript
  301 +var ct = '<div><a href="#">Hello World!</a></div>'
  302 +render(ct,function(config){
  303 + var elemento = config.element;
  304 + elemento.find('a').click(function(){
  305 + alert('Você clicou no link');
  306 + });
  307 +});
  308 +```
  309 +
  310 +O método render recebe uma string ou um objeto jquery e um metodo de retorno onde pode-se incluir eventos.
  311 +
  312 +Dentro do script você tem acesso a variável 'json' ,'theme_html', '$' e 'jQuery'.
  313 +O jquery disponível no widget é um jquery do objeto Funifier, caso queira acessar o jquery da pagina, use window.$ ou window.jQuery.
  314 +
  315 +A variável json está disponivel em alguns tipos de widgets.
  316 +
  317 +
  318 +Você pode usar o mustache para renderizar seu html.
  319 +
  320 +```javascript
  321 +Funifier.auth.isAuthenticate(function(isAuthenticate) {
  322 + json.isAuthenticate = isAuthenticate;
  323 + var str = Mustache.render(theme_html,json);
  324 + render(str,function(config){
  325 + var el = config.element;
  326 + //your code
  327 + });
  328 +});
  329 +```
  330 +Você pode requisitar um recurso no servidor antes de renderizar.
  331 +
  332 +```javascript
  333 +Funifier.auth.isAuthenticate(function(isAuthenticate) {
  334 + Funifier.api('get_widget_data', {include_challenges: true}, function(err,json){
  335 + json.isAuthenticate = isAuthenticate;
  336 + var str = Mustache.render(theme_html,json);
  337 + render(str,function(config){
  338 + var el = config.element;
  339 + //your code
  340 + });
  341 + });
  342 +});
  343 +```
  344 +
  345 +## Debug
  346 +
  347 +Por padrão o Funifier Client não exibe qualquer informação de error/info no console sendo necessário habilitar.
  348 +Para habilitar todas as mensagens do funifier, abra o console javascript e digite:
  349 +
  350 +```javascript
  351 + Funifier.debug.enable('*');
  352 +```
  353 +
  354 +Você pode habilitar o log para mensagens específicas:
  355 +```javascript
  356 + Funifier.debug.enable('Funifier:social:*');
  357 +```
  358 +```javascript
  359 + Funifier.debug.enable('Funifier:core:*');
  360 +```
  361 +Caso queira desabilitar as mensagens:
  362 +```javascript
  363 +Funifier.debug.disable();
  364 +```
0 \ No newline at end of file 365 \ No newline at end of file