Commit 56da10452064b672feeb0d487fec62941b7f5f39
1 parent
0e67003f
alteração de pastas
Showing
3 changed files
with
364 additions
and
0 deletions
js/client/README.md
0 → 100644
| 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 | |||
| 216 | |||
| 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 |
Readme.md renamed to rest/Readme.md
api-rest.pdf renamed to rest/Readme.pdf
No preview for this file type