Arquivos da categoria: Tutoriais

Como ativar o click de botão no Chart.js

Chat.js é uma ótima biblioteca JavaScript para criação de gráficos. Você pode baixá-la no endereço http://www.chartjs.org/, onde também irá encontrar tutoriais e a API dessa biblioteca.

Sua utilização é bem simples e para gerar um gráfico donut que servirá de exemplo para nosso evento de clique, vamos começar importando os arquivos .js:

<script src="~/Scripts/Chart.bundle.min.js"></script>
<script src="~/Scripts/Chart.min.js"></script>

Depois de importados, vamos criar um elemento canvas, no lugar onde desejamos que o gráfico seja exibido:

<canvas id="donutChart"></canvas>

Depois de criado o elemento canvas precisamos iniciar o gráfico utilizando o código abaixo:

<script type="text/javascript">
        // Gráfico donnut
        // Recupera o elemento canvas utilizando javaScript
        var ctxDunut = document.getElementById("donutChart");
 
        // Instancia um novo gráfico no elemento
        var myDoughnutChart = new Chart(ctxDunut, {
            type: 'doughnut',
            data: {
                labels: [
                    "Java",
                    "JavaScript",
                    "Python",
                    "C#"
                ],
                datasets: [
                    {
                        data: [20, 50, 21, 35],
                        backgroundColor: [
                            "#FF6384",
                            "#36A2EB",
                            "#FFCE56",
                            "#C5C5C5"
                        ],
                        hoverBackgroundColor: [
                            "#FF97AC",
                            "#4DADED",
                            "#FFD570",
                            "#D2D2D2"
                        ]
                    }]
            },
            options: {
                scales: {
                    gridLines: [{
                        display: false
                    }]
                },
                legend: {
                    display: true,
                    labels: {
                        fontSize: 9,
                        fontFamily: "Arial"
                    }
                }
 
            }
        });
 
        // Para mais detalhes sobre as propriedades utilizadas e como montar
        // outros tipos de gráficos, acesse a api em http://chartjs.org

O código acima vai resultar no gráfico abaixo:

chartjs - Gráfico criado

Pronto, agora que já temos o gráfico na tela, o último passo é adicionar o evento de clique. A documentação do chartjs, é um pouco vaga sobre como usar o evento de click, porém o processo é bem simples. Ao clicar no gráfico, o Chart.js retorna um conjunto de pontos, onde na posição zero desse conjunto está a fatia que foi clicada (ou o ponto caso seja um gráfico de linhas), com isso só precisamos adicionar o evento de clique ao canvas e capturar essa informação do chart.js conforme o código abaixo:

        $(document).ready(function () {
            $("#donutChart").click(
                function (evt) {
                    var activePoints = myDoughnutChart.getElementsAtEvent(evt);
 
                    if (activePoints.length == 0) {
                        return;
                    }
 
                    alert(activePoints[0]._view.label);
 
                }
            );
        });

Com isso nosso gráfico agora responde aos cliques do mouse.

Como criar um blog ou site no Microsoft Azure com WordPress – Parte 2

Continuando o tutorial para criação do nosso blog com Azure e WordPress, faremos alguns ajustes no nosso blog.

Antes de começar, se você ainda não viu a primeira parte desse “tutorial”, siga este link para visualizar os primeiros passos da criação: http://flavioveras.com/2016/08/como-criar-um-blog-ou-site-no-microsoft-azure-com-wordpress-parte-1/

Bom, o blog está criado, mas nenhum post foi criado. Na realidade nem logamos ainda no blog que criamos.

Passo 1: fazer login no blog

As instâncias do WordPress criadas usando o Bitnami tem nome de usuário próprios e ao contrário do que somos levados a pensar não são as mesmas que utilizamos na primeira parte do turorial.

15

Então para logar no blog pela primeira vez utilize as seguintes credenciais:

Usuário: user
Password: bitnami

Assim que logar altere a senha para uma mais segura, conforme imagem abaixo. Se preferir adicione outro usuário.

16

Passo 2: Desabilitar o banner do Bitnami que aparece no rodapé do seu blog

Reparou que aparece o logo do Bitnami no rodapé do seu blog?

14_logo

Esse logo te direciona para o help do Bitnami e lá você pode encontrar várias informações úteis (incluindo como desabilitar esse rodapé). Mas é muito provável que você não queira que esta imagem seja exibida cada vez que algum usuário abrir uma página do seu blog. Portanto, vamos desabilitá-la.

Para fazermos a desabilitação desse logo vamos precisar fazer login na VM Linux que criamos no Azure.

Então o primeiro ponto é baixar um cliente SSH, que para o nosso exemplo será o Putty (http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html).

Depois de baixado, vamos acessar nossa VM preenchendo os campos do putty e informando os seguintes dados:

IP: o mesmo IP pelo qual acessamos o blog que criamos
Porta: 22
Connection Type: SSH

17

Ao conectar na VM, o Linux irá solicitar que você insira as credenciais. Desta vez você deve inserir as informações que você escolheu durante a criação lá no Microsoft Azure, tanto o nome de usuário quanto a senha (passo 3 da primeira parte).

Depois de inserir os dados o Linux ficará pronto para que você insira algum comando.

18

Nesse momento, insira o comando abaixo:

bitnami@NomeDaSuaVM:~$ sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1

19

Pronto, o banner foi desabilitado e para conferir é só acessar novamente o blog/site criado.

20

Passo 4: Configurando seu domínio com o GoDaddy

Primeiro você precisa comprar o domínio que deseja, depois de comprado é extremamente simples configurar o GoDaddy para apontar para a sua VM no Microsoft Azure.

Abra o seu painel de controle no GoDaddy e depois vá na seção “Meus domínios”. Depois que esta tela abrir é necessário acessar as configurações do seu domínio criado, clicando no botão “Usar meu domínio”.

21

Três opções serão apresentadas na próxima tela, selecione a opção “Conectar a um site existente”

22

Na próxima tela procure o campo “Encaminhe-o para qualquer site”, preencha novamente com o IP que criamos no Microsoft Azure e clique em avançar.

23

Após esse passo é só confirmar o direcionamento.

24

Pronto seu domínio agora está apontando para o seu novo blog/site.

Chegamos ao fim do tutorial e aproveito para lembrar que escolhendo esta configuração do Azure, você poderá dimensioná-lo mais tarde de acordo com a sua necessidade e a quantidade de trafego que você  está esperando receber.

Como criar um blog ou site no Microsoft Azure com WordPress – Parte 1

Olá!

Já tem um tempo que a Microsoft oferece suporte para VM’s Linux no Microsoft Azure e isso abre várias possibilidades para quem procura alternativas de computação em nuvem.

Hoje a plataforma de nuvem da Microsoft é sem dúvida uma das mais fáceis de ser utilizadas e é bastante fácil criar uma máquina virtual utilizando o sistema operacional Linux.

Nesse post vou mostrar como criar um blog utilizando o WordPress e o Azure e assim aproveitar todos os benefícios que a nuvem traz. É só seguir os passos abaixo e começar a “bloggar”! 🙂

Passo 1: criar uma conta no Windows Azure
1

Primeiro acesse a URL http://microsoft.azure.com e clique no link “conta gratuita” no canto superior da página (é necessário ter uma conta na Microsoft para seguir com o cadastro). Depois é só clicar no botão “Comece agora” e seguir os passos informados na tela.

Passo 2: Logar no portal e adicionar uma VM
1

Depois de logar no portal é preciso adicionar um novo recurso clicando no botão “Novo”, a tela abaixo será exibida e nela devemos digitar no campo de busca a tag “WordPress”:
2

Depois disso deveremos escolher o item WordPress do fornecedor “Bitnami”
3

Passo 3: Criar a instancia da máquina virtual com instalação do WordPress
Após escolher a opção WordPress (Bitnami) e preciso confirmar a criação clicando em “Criar”
4

Neste ponto será aberta uma nova janela para preenchimento das informações do seu blog
5

Preencha as informações solicitadas:

  • Nome: nome da instancia que será criada
  • VM Disk Type: esse campo permite escolher entre um SSD ou um HD convencional (neste ponto acredito que não vale a pena utilizar um SSD pois a quatidade de dados armazenados e de tráfego não necessitará de um hadware tão poderoso)
  • Nome de usuário: nome de usuário que utilizarmos para logar na VM
  • Tipo de autenticação: Tipo que utilizará para autenticar-se (escolhi “senha” apenas para efeitos ilustrativos, mas recomendo utilizar uma chave publica SSH, de todo modo fica a seu critério)
  • Nome: nome da instancia que será criada
  • Senha
  • Confirmar senha
  • Assinatura: a assinatura ao qual esta VM estará associada (e sobre a qual será cobrados os encargos)
  • Localização: onde (geograficamente) será criada a instância (recomendo colocar Sul do Brasil para termos uma resposta um pouco melhor do site/blog)

Após o preenchimento, clique em “OK” para prosseguir.

Passo 4: Escolher o tamanho da VM a ser criada
Neste ponto é muito importante ter uma visão do tráfego esperado pelo site ou blog, para o nosso exemplo vamos considerar que tenhamos acessos moderados, dessa forma não precisaremos escolher uma instancia muito grande. Na realidade vamos escolher a instância “A0” que é uma das menores instancias disponíveis. Caso necessite de outra configuração clique no botão “Exibir tudo” no canto superior direito. Vale lembrar que podemos redimensionar o tamanho da nossa instancia (caso necessitemos) depois que o site/blog já estiver disponível, aliás esse é um dos grandes trunfos da computação em nuvem ao qual chamamos de escalabilidade.
6

Passo 5: Confirmar configurações e recursos
Após o passo 4, será exibida a tela abaixo com a confirmação da criação de recursos, incluindo o ip público que precisaremos utilizar mais adiante.
8

Neste ponto apenas clique em “OK”.

Passo 6: Confirmar a criação da VM
Neste ponto é exibido um resumo de todos os recursos que serão criados, precisamos apeanas confirmar clicando em “OK”.
9

Passo 7: Confirmar compra do serviço
Para que nossa VM passe a funcionar precisamos confirmar a compra dos serviços junto a Microsoft. Nesta tela é exibido o custo computacional (no caso da instancia que escolhemos, a A0, gira em torno de U$ 0,0240 por hora) além dos termos legais da prestação de serviços. Caso esteja de acordo clique em “Comprar” e a partir daí é só esperar a criação da VM.
10

Passo 8: Verificar o IP público da VM
A VM deverá ser criada em torno de 5 a 10 mins, depois de criada precisaremos verificar o ip público (lembra dele?) que será o endereço do nosso blog/site na internet

Para isso precisamos exibir todos os recursos da nossa assinatura, voltando para a página inicial e posteriormente clicando em “Exibir todos os recursos – Todas as assinaturas”
1_1

Nessa lista é preciso localiza o IP público e visualizar os detalhes dele
12

Na janela que abrirá o IP do seu blog ficará na parte superior direita, no campo “Endereço IP”, copie-o.
13

Depois de copiar abra uma nova janela do seu navegador e insira o ip copiado na barra de endereços e “voilà!” seu blog está criado!!
14

Finalizamos a primeira parte da criação, na segunda parte vamos entender como logar no blog, modificar a senha, associar um domínio do GoDaddy ao IP da VM e finalmente como desabilitar o banner do Bitnami que aparece no rodapé do blog.

Para acessar a segunda parte do artigo siga o link: http://flavioveras.com/2016/08/como-criar-um-blog-ou-site-no-microsoft-azure-com-wordpress-parte-2/