diff --git a/js/client/Readme_en_us.md b/js/client/Readme_en_us.md new file mode 100644 index 0000000..c524d83 --- /dev/null +++ b/js/client/Readme_en_us.md @@ -0,0 +1,364 @@ +## Usage + +###Configuração +Para usar o funifier em produção, insira a seguinte linha na tag head de todas as paginas que deseja habilitar: + + +```html + +``` + + +### Iniciação Async mode +Para iniciar o funifier de maneira assincrona, insira uma função antes do script do funifier: + +```javascript +window.funifierAsyncInit = function(){ + Funifier.init({ + apiKey : 'SUA API KEY' + }); +}; +``` + +Dessa maneira, assim que o funifier tiver sido processado, irá chamar a função 'funifierAsyncInit' caso exista. + +### Iniciação Sync mode + +Você pode inicializar também o funifier a qualquer momento após o carregamento do script do funifier chamando seu método de inicio: +```javascript + Funifier.init({ + apiKey : 'SUA API KEY' + }); +``` + +#Documentação + +##Componentes +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. + +Funifier contêm os seguintes componentes: + +- [jquery](https://jquery.com/): `Funifier._$` 1.11.1 +- [async](https://github.com/caolan/async): `Funifier._async` +- [lodash](https://lodash.com/): `Funifier._` +- [validator](https://github.com/chriso/validator.js): `Funifier._validator` +- [mustache](https://github.com/janl/mustache.js/): `Funifier._mustache` +- [headjs](http://headjs.com/): `Funifier.headjs` +- [magnificPopup](http://dimsemenov.com/plugins/magnific-popup/): `Funifier._$.magnificPopup` +- [qs](https://github.com/hapijs/qs): `Funifier._qs` + +Para a documentação dos componentes acima, verifique no site do respectivo componente. + +### Métodos +* [`init`](#init) +* [`listen`](#listen) +* [`unlisten`](#unlisten) +* [`api`](#api) +* [`track`](#track) +* [`auth`](#auth) + * [`authenticate`](#authenticate) + * [`isAuthenticate`](#isAuthenticate) + * [`logout`](#logout) + + +--------------------------------------- +### init(config, callback) + +Utilizado para iniciar a api do funifier. +Recebe como parâmetro um objeto e um callback. + +__config__ +* `apiKey` : String - Apikey configurada no studio. +* `hideInline` : Boolean - Define a exibição do modo inline para admin. __default__ : false +* `showNotification`: Boolean - Exibir/ocultar as notificações. __default__ : true +* `disableCustomCss` : Boolean - Define se o funifier ira carregar o css dos widgets. __default__ : custom-{api_key}-v{version}.css. +* `disableCustomJs`: Boolean - Define se o funifier ira carregar o js com as funções de widgets. __default__ : custom-{api_key}-v{version}.js. +* `url` + * `service` : String - Url do service. __default__ : '//service2.funifier.com/2.0.0/' + * `client` : String - Url do client. __default__ : '//client2.funifier.com/2.0.0' + * `studio` : String - Url do studio. __default__ : '//studio2.funifier.com' + * `css` : String - Caminho de css para sobrescrever o padrão. __default__ : null + * `js` : String - Caminho do js para sobrescrever o padrão. __default__ : null + +__callback__ + +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. + +Parâmetros: +* `err` Recebe um erro caso tenha um + +__Exemplo__ + +```js +Funifier.init({ + apiKey : 'SUA API KEY', + hideInline: false, + url : { + css : 'http://www.meudominio.com/custom-css-replace.css' + } +},function(err){ + if(err){ + console.log('Ocorreu um erro'); + } +}); +``` + +--------------------------------------- +### listen(name, callback) +Monitora um evento do funifier +* `name` : String - Nome do evento a ser monitorado +* `callback` : Function - Função a ser executada. + +--------------------------------------- +### unlisten(name) +Para remover eventos do funifier monitorados pelo listen. +* `name` : String - Nome do evento a excluir o listen. +* +--------------------------------------- +### api(endpoint,params,callback) +Método para comunicação com o service. + +* `endpoint` : String - Metodo a ser requisitado no service. +* `params` : Object - Parâmetros a ser enviado para o service. +* `callback` : Function - retorno + +__Exemplos__ + +```js +Funifier.api('get_leaderboard', + {sort: 1, limit: 10, view: 0, group : 1}, + function(err,data){ + if(err==null){ + alert('Lista de leaderboards recebida') + console.log(data); + }else{ + alert('Ocorreu um erro :(') + } + } +); +``` + +```js +Funifier.api('get_widget_data', + null, + function(err,data){ + if(err==null){ + alert('Retorno recebido') + console.log(data); + }else{ + alert('Ocorreu um erro :(') + } + } +); +``` + +--------------------------------------- +### api(endpoint,params,options,callback) +Método para comunicação com o service. + +* `endpoint` : String - Metodo a ser requisitado no service. +* `params` : Object - Parâmetros a ser enviado para o service. +* `options` : Object - Parâmetros adicionais. +* `callback` : Function - retorno + +__Exemplos__ + +```js +Funifier.api('get_leaderboard', + {sort: 1, limit: 10, view: 0, group : 1}, + {type:'GET',contentType:'application/json'}, + function(err,data){ + if(err==null){ + alert('Lista de leaderboards recebida') + console.log(data); + }else{ + alert('Ocorreu um erro :(') + } + } +); +``` + + +--------------------------------------- +### track(options,callback) +Traqueia uma ação + +__options__ +* `action` : String - Id ou nome da action. +* `attributes` : Array - lista de atributos, opicional. + +__callback__ + +Função executada apos o track. +* `err` - Recebe um erro ou nulo. +* `data` - Response do servidor. + +__Exemplo__ + +```js +Funifier.track({ + action: 'visitarPagina' +},function(err,data){ + if(err==null){ + alert('Action traqueada') + } +}); +``` + +--------------------------------------- +### auth +####authenticate(options,callback) +Função usada para autenticar jogadores. + +__options__ +* `auth_mode` : String - Tipo de autenticação, valores disponiveis. + * facebook + * google + * IMPLICIT + * PASSWORD +* `player` : String - Id do jogador, requerido para auth_mode 'IMPLICIT' e 'PASSWORD'. (String) +* `password` : String - Senha do jogador, requerido para auth_mode 'PASSWORD' +* `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') + +__callback__ + +Função que de retorno. (Não é executada caso o auth_mode for facebook ou google e modal for igual a false ) +* `err` - Recebe um erro ou nulo. +* `data` - Response do servidor: + +__Exemplo Facebook__ + +```js +Funifier.auth.authenticate({ + auth_mode: 'facebook', + modal: true +},function(err,data){ + if(err==null){ + alert('Seja bem vindo') + } +}); +``` + +__Exemplo via Senha__ + +```js +Funifier.auth.authenticate({ + auth_mode: 'PASSWORD', + player: 'jogador1' + password: 'pass@123' +},function(err,data){ + if(err==null){ + alert('Seja bem vindo') + } +}); +``` + +####isAuthenticate(callback) + +Verifica se o jogador está autenticado. + +__callback__ + * `isAuthenticate` :Bollean + +__Exemplo__ + +```js +Funifier.auth.isAuthenticate(function(_isAuthenticate){ + if(isAuthenticate){ + alert('Seja bem vindo, você está autenticado'); + }else{ + alert('Desculpe, faça login, você não está autenticado'); + } +}); +``` + +####logout(callback) + +Efetua logout do jogador. + +__callback__ + * `err` + * `data` + +__Exemplo__ + +```js +Funifier.auth.logout(function(err){ + if(err==null){ + alert('Jogador deslogado com sucesso'); + }else{ + alert('Ocorreu um erro'); + } +}); +``` + + + +## Widget + +A estrutura basica de um widget: +```javascript +var ct = '
Hello World!
' +render(ct,function(config){ + var elemento = config.element; + elemento.find('a').click(function(){ + alert('Você clicou no link'); + }); +}); +``` + +O método render recebe uma string ou um objeto jquery e um metodo de retorno onde pode-se incluir eventos. + +Dentro do script você tem acesso a variável 'json' ,'theme_html', '$' e 'jQuery'. +O jquery disponível no widget é um jquery do objeto Funifier, caso queira acessar o jquery da pagina, use window.$ ou window.jQuery. + +A variável json está disponivel em alguns tipos de widgets. + + +Você pode usar o mustache para renderizar seu html. + +```javascript +Funifier.auth.isAuthenticate(function(isAuthenticate) { + json.isAuthenticate = isAuthenticate; + var str = Mustache.render(theme_html,json); + render(str,function(config){ + var el = config.element; + //your code + }); +}); +``` +Você pode requisitar um recurso no servidor antes de renderizar. + +```javascript +Funifier.auth.isAuthenticate(function(isAuthenticate) { + Funifier.api('get_widget_data', {include_challenges: true}, function(err,json){ + json.isAuthenticate = isAuthenticate; + var str = Mustache.render(theme_html,json); + render(str,function(config){ + var el = config.element; + //your code + }); + }); +}); +``` + +## Debug + +Por padrão o Funifier Client não exibe qualquer informação de error/info no console sendo necessário habilitar. +Para habilitar todas as mensagens do funifier, abra o console javascript e digite: + +```javascript + Funifier.debug.enable('*'); +``` + +Você pode habilitar o log para mensagens específicas: +```javascript + Funifier.debug.enable('Funifier:social:*'); +``` +```javascript + Funifier.debug.enable('Funifier:core:*'); +``` +Caso queira desabilitar as mensagens: +```javascript +Funifier.debug.disable(); +``` \ No newline at end of file