Instalando o Node.JS no Servidor Amazon AWS

Um tutorial indispensável e útil para se levantar um serviço de Node.Js no servidor da Amazon AWS que em breve postarei um vídeo sobre o mesmo:

https://codeforgeek.com/2015/05/setup-node-development-environment-amazon-ec2/

Vídeo auxiliar que ajuda a entender como liberar a porta necessária para rodar o serviço do Node.JS:
https://www.youtube.com/watch?v=WxhFq64FQzA

Muito bom.


Abs.

Como usar cookies com JavaScript?

O que são Cookies? 

O cookie (biscoito em inglês) é um grupo de dados trocados entre o navegador e o servidor, guardado em um arquivo de texto criado no seu computador. A sua função principal é a de manter a persistência de sessões (e dados) durante a navegação. Ou seja, é uma forma de guardar dados ao fechar/mudar de página. Assim é possível manter sessões, por exemplo. É por isso que você não faz o login sempre que abre a página do Facebook, Gmail ou de qualquer outro site que armazena sua sessão pelos cookies.

 Como criar um em Javascript?

Para criar um uso esta function muito útil:

<script>
//CRIAR COOKIE
            function setCookie(name,exdays, value){   
                //função universal para criar cookie
                var expires;
                var date;                
                date = new Date(); //  criando o COOKIE com a data atual
                date.setTime(date.getTime()+(exdays*24*60*60*1000));
                expires = date.toUTCString();               
                document.cookie = name+"="+value+"; expires="+expires+"; path=/";
            }
</script>

Como ler os cookies criados:


<script>
//Exibir
            function getCookie(name) {
                var cookies = document.cookie;
                var prefix = name + "=";
                var begin = cookies.indexOf("; " + prefix);
                if (begin == -1) {

                    begin = cookies.indexOf(prefix);
        
                    if (begin != 0) {
                        return null;
                    }
                } else {
                    begin += 2;
                }
                var end = cookies.indexOf(";", begin);
                if (end == -1) {
                    end = cookies.length;                       
                }
                return unescape(cookies.substring(begin + prefix.length, end));
            }
</script>

Exibir:

<script>
//Excluir
            function deleteCookie(name) {
                   if (getCookie(name)) {
                      document.cookie = name + "=" +"; expires=Thu, 01-Jan-70 00:00:01 GMT";
                   }
            }
</script>

Até logo e espero ter ajudado.

Listar os Posts Wordpress mais Visualizados

Certo dia me deparei em um projeto com uma necessidade muito simples, porém com pouca documentação na internet sobre o mesmo.

Precisava listar os últimos 4 Posts de um site mais lidos e fiquei algumas horas tentando descobrir algum plugin que pudesse me ajudar e qual eu pudesse adaptá-lo para a necessidade de um cliente.

Esse plugin eu consegui achar.  Se trata deste abaixo com o link:
   - https://wordpress.org/plugins/wordpress-popular-posts/

A maior vantagem neste plugin foi a possibilidade de em uma página personalizada de um Theme que eu venha a desenvolver e em uma página personalizada criada, eu possa inserir os critérios de Post_Type personalizados.
Para o exemplo que fiz criei os campos personalizados que precisava com o uso dos seguintes plugins:

  - https://br.wordpress.org/plugins/advanced-custom-fields/

E para que fique todos os campos personalizados relacionados a um Post Type personalizado, uso o seguinte plugin:

  - https://wordpress.org/plugins/custom-post-type-ui/

Embora o propósito deste artigo não seja detalhar o uso e criação dos campos personalizados e   post types eu estarei mostrando alguns codigos com o uso do get_fields() método na adaptação do bloco personalizado de "Posts mais Vistos".

Então a personalização do bloco, por exemplo na Home (index.hp de seu theme ou outro).  o parametro PHP de chamada do plugin seria este aqui:

<?php
$contPersonalizado = '<div class=\'col-md-3\' id=\'id-bloco-ultimos\'>
                  <div class=\'box-empreendimento-small\'>
                            {IMAGEM_DESTAQUE}
                          <div class=\'caption bottomcap-small\'>
                                  <h3>{tipo}</h3>
                                 <h4> {text_title}</h4>
                                 <p> {texto_destaque_home}</p>
                                 <br>
                                 <a class=\'btn btn-default\' role=\'button\' href=\'{url}\'>ver mais</a>
                        </div>
                     </div>
               </div>';

     wpp_get_mostpopular( 'post_type="imoveis"&limit=5&post_html="'.$contPersonalizado.'"' ); ?>

Se observarmos acima eu adicionei dois campo personalizados que não existe em uma instalação crua do WordPress:

  - {IMAGEM_DESTAQUE} {tipo} {texto_destaque_home}

Enquanto que os campos:

  - {text_title}  => Título do site somente texto;
  - {url}  => Url direta para abrir o post listado;

Me empolguei um pouco, mas o plugin após instalado apresenta na administração as seguintes abas de configuração:

Na aba Parameters, temos os exemplos de como personalizaríamos a exibição:

Daí surge a pergunta:  - Como eu faço para acrescentar os campos a lista deste plugin.
A resposta é alterando o PHP do seguinte arquivo:

 - /seusite/wp-content/plugins/wordpress-popular-posts/wordpress-popular-posts.php

Após a linha 1868 adicione as variáveis de que precisa
         
            $postidd = $p->id;
            $tipo = getfield('tipo', $p->id);

na linha   1896, acrescemtamos a varível dentro do objeto de array:

             'postidd' => $postidd,
             'tipo'  => $tipo,

Edit line to add postidd in list

$pattern = '/\{(excerpt|summary|stats|postidd|title|image|thumb|thumb_img|rating|score|url|text_title|postidd|tipo|author|category|views|comments|date)\}/i';

E para finalizar vamos acrescentar os IFs depois da variável :
     
             array_map('strtolower', $matches[0]);

if ( in_array("{postidd}", $matches[0]) ) { 
     $string = str_replace( "{postidd}", $data['postidd'], $string ); 
}
if ( in_array("{tipo}", $matches[0]) ) { 
     $string = str_replace( "{tipo}", $data['tipo'], $string ); 
}


Agora o uso das chaves dentro do parâmetro '&post_html=' irão aceitar os dois campos criados.

Falou galera, espero que possa ajudar a muitos e até logo.

Criando pagina com Canal do Youtube

Um excelente plugin que ajudou bastante a criar uma página com a lista de vídeos de um canal do Youtube foi este aqui para Wordpress:

  - https://wordpress.org/plugins/youtube-channel

Para conseguir a Key da API do Youtube basta entrar no link: https://console.developers.google.com/  Crie um projeto e clique em "Ative e gerencie APIs". Você deve escolher a do Youtube APIs para YouTube => YouTube Data API:

• Após isso, clique em ativar API;
• Ir para Credenciais e criar a credencial;
• Escolha: Navegador Web e Dados Públicos;
• Defina um nome para sua Key Api e finalize o cadastro;

Sem dúvida o plugin mais simples para se trabalhar.

Iniciando com GIT

Como todos podem pesquisar facilmente na internet o GIT é um dos servidores de muitos que se prestam a manter e controlar versões de arquivos diversos.

Como o mundo do desenvolvimento Web em equipe não poderia se manter sem o controle das versões de arquivos e códigos fontes o GIT hoje em dia deve ser parte do conhecimento de um desenvolvedor.

Git permite e incentiva você a ter várias filiais locais que podem ser completamente independentes um do outro. A criação, fusão e supressão das linhas de desenvolvimento leva alguns segundos.

Isso significa que você pode fazer coisas como:

    Mudança de contexto sem atrito. Criar um ramo de experimentar uma idéia, cometer algumas vezes, voltar para onde você ramificada de, aplicar um patch, voltar para onde você está experimentando, e mesclá-lo em.
    Codelines baseada em função. Tenha um ramo que sempre contém apenas o que vai para a produção, outro que você mesclar o trabalho em para testes, e vários outros menores para o dia a dia de trabalho.
    Apresentam fluxo de trabalho baseado. Criar novas agências para cada novo recurso que você está trabalhando para que você possa facilmente alternar entre eles, em seguida, exclua cada ramo quando esse recurso fica incorporada pela sua linha principal.
Um bom artigo que recomenda-se ler para se entender melhor o funcionamento do git pode ser acessado em: http://git-scm.com/book/pt-br/v1/Primeiros-passos-No%C3%A7%C3%B5es-B%C3%A1sicas-de-Git

Configurando o GIT em sua máquina

Para começarmos devemos instalar em nossos computadores de desenvolvimento o aplicativo do git neste link:
   - http://git-scm.com/downloads

Existe a possibilidade de fazer isso através de repositórios de instalação caso você use Linux (exemplos de distribuição Debian / Had Hat):
  

• apt-get install git
• yum install git

   Como minha maquina aqui trata-se de um Mini-Mac vou baixar o App instalável para Mac OS X.

Decidi instalar o SourceTree: https://www.sourcetreeapp.com/

Embora pelo terminal do Mac eu já esteja automatizando em muitos os processos de controle de versão no GIT.

Existe uma versão para instalar diretamente fornecida pelo Git-scm:

Caso o GIT esteja realmente configurado em sua máquina, inclusive nas variáveis locais, então vamos testar se está tudo Ok pelo terminal do MAC, Linux ou pelo Git Bash no Windows.
  Se digitarmos o comando git + enter terá de aparecer uma tela semelhante a esta:

Senão, procure instalar e configurar o GIT corretamente em seu sistema operacional.
Agora vamos configurar as configurações de utilizador.  Claro que suponho que você já criou uma conta no site github.com.br para chegar neste parte aqui:
      - git config --global user.name "SEU_NOME"
      - git config --global user.email "SEU_EMAIL"
      - git config --global  color.ui true
      - git config --global user.password "SUA_SENHA"

A terceira linha de comando serve para o GIT colorir os comandos e as outras como podemos ver são para configurar o usuário do GIT.

Configurando Seu Editor de Texto Preferido

Agora que sua identidade está configurada, você pode configurar o editor de texto padrão que será utilizado quando o Git precisar que você digite uma mensagem. Por padrão, Git usa o editor padrão do sistema, que é geralmente Vi ou Vim. Caso você queira utilizar um editor diferente, tal como o Emacs, você pode executar o seguinte:

    $ git config --global core.editor nano

Como pode-se observar acima eu prefiro utilizar o editor via linha de comando Nano, mas fica a critério de cada um.

Sua Ferramenta de Diff

Outra opção útil que você pode querer configurar é a ferramente padrão de diff utilizada para resolver conflitos de merge (fusão). Digamos que você queira utilizar o vimdiff:

   $ git config --global merge.tool vimdiff

Git aceita kdiff3, tkdiff, meld, xxdiff, emerge, vimdiff, gvimdiff, ecmerge e opendiff como ferramentas válidas para merge.

Verificando Suas Configurações

Caso você queira verificar suas configurações, você pode utilizar o comando git config --list para listar todas as configurações que o Git encontrar naquele momento:

   $ git config --list
   user.name=Scott Chacon
   user.email=schacon@gmail.com
   color.status=auto
   color.branch=auto
   color.interactive=auto
   color.diff=auto
   ...

Instalando o Homebrew no Mac Yosemite Terminal

Um problema muito do inconveniente é fazer o HomeBrew rodar no Mac Yosemite.

Após muito vagar nos forums achei os seguinte comandos para conseguir instalar ele, claro, depois que vc conferir se o Ruby está instalado:

         rm -rf /usr/local/Cellar /usr/local/.git

        

         ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Se tudo ocorreu bem é porque funcionou corretamente.

Isso ajuda a fazer as configurações da linha de comando no CakePHP 3 funcionarem.

Até logo.

Cursos de Java Gratuitos

Segue a lista de cursos de Java para Web Gratuitos:

 - http://analistati.com/curso-gratuito-formacao-desenvolvedor-java-web/

 - https://www.youtube.com/watch?v=oWqryJpvFeg
    Ferramentas para o curso do Youtube:
    - http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/keplersr1
    - http://groselhas.maurogeorge.com.br/instalando-o-postgresql-no-mac-os-com-o-homebrew.html#sthash.KAfClG47.Sfrs3Uv3.dpbs

 - https://www.iped.com.br/programacao-e-desenvolvimento/curso/java
 - http://www.caelum.com.br/apostila-java-web/

Bons estudos!

Adicionando um usuário no Servidor Apache Tomcat

Uma interessante dificuldade que encontrei logo após a instalação e configuração do servidor Apache Tomcat no MAMP foi que ele solicita uma senha para acessarmos o status do servidor e esta senha não temos em mãos pois nada disso foi configurado durante a nossa instalação:

Para isso vamos editar o arquivo "/Applications/MAMP/tomcat-7/conf/tomcat-users.xml" na pasta do Tomcat instalado:

Por padrão vem comentado um exemplo de como se criaria um usuário neste arquivo, para isso basta criamos como nesta imagem abaixo:

Agora basta reiniciar o MAMP para que as configurações sejam válidas.  Nos logamos agora com o usuário: tomcat e senha: tomcat.

Até a próxima.

Instalando o Apache Tomcat dentro do MAMP

Com a finalidade de dar continuidade aos estudos de Java2ME consegui o seguinte resultado ao instalar no servidor Apache PHP o Servidor também de Java para Internet.

Se já temos o MAMP instalado em nosso MAC OS, primeiro devemos baixar o Tomcat em sua última versão, embora eu tenha baixado a 7, todos podem baixar a versão 8:

-> http://tomcat.apache.org/download-80.cgi

Observe no site em "Binary Distributions", você pode baixar a versão em .zip pois seria melhor.

Segundo passo: Extraia o arquivo na pasta do MAMP (/Applications/MAMP/) .

Terceiro passo: Troque o nome da pasta descompactada (apache-tomcat-X.X.XX) para tomcat.

Quarto Passo: Adicione esta linha /Applications/MAMP/tomcat/bin/startup.sh no final do arquivo /Applications/MAMP/bin/startApache.sh

Quinto passo:  adicione esta linha/Applications/MAMP/tomcat/bin/shutdown.sh no final do arquivo  /Applications/MAMP/bin/stopApache.sh

Por último, mude as permissões destes arquivos na pasta tomcat, executando os seguintes comandos dentro da pasta do Tomcat ( /Applications/MAMP/tomcat/bin):

chmod +x startup.sh chmod +x shutdown.sh chmod +x catalina.sh chmod +x setclasspath.sh chmod +x bootstrap.jar chmod +x tomcat-juli.jar Start o MAMP (não o MAMP Pro) e acesse o endereço: localhost:8080 e veja se o Tomcat é carregado.

O resultado é como o esperado:

Até a próxima.

Captcha jQuery + PHP em Pagina Personalizada do Wordpress

Olá.

Desta vez vamos conhecer um pouco mais de personalização do cadastro em formulários do Wordpress.

Vamos criar um validador captcha com imagem de verificação gerada pelo PHP GD Library.

Primeiro criamos pelo administrador do WordPress uma Pagina Personalizada e dentro da pasta de /wp-content/themes/[seu_tema]/ criaremos um arquivo por exemplo /page-contato.php.

No cabeçalho do documento ou no final inserimos o seguinte javascript:

----------------------------------------------------------------------------------------------------------

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

        

<script>

jQuery.noConflict();

jQuery(document).ready(function(){

jQuery('#refresh-captcha').on('click', function(e){

                jQuery('#captcha').attr("src","./php/newCaptcha.php?rnd=" + Math.random());

});

jQuery('#validar').click(function () {

jQuery.ajax({

      type: "POST",

      url: "./verificaCodeCapt.php",

      dataType: "json",

      data: { 'code':jQuery('input#captcha').val() },

      success: function (response) {

       

        if(response.resp === 'Incorreto'){

        jQuery('#errorCode').html("<span style='color:red;'>Codigo Inválido</span>");

        jQuery('input#captcha').val('').focus();

        }else {

        jQuery('#errorCode').html("<span style='color:blue;'>Codigo OK</span>");

        }

       

      },

      error: function (xhr, ajaxOptions, thrownError) {

        alert(xhr.status);

        alert(thrownError);

      }

    });

});

});

</script>    

----------------------------------------------------------------------------------------------------------

Repare neste codigo javascript da biblioteca jQuery na linha da ação ON (jQuery('#refresh-captcha').on()) temos a chamada do seguinte arquivo PHP, responsável pela geração da imagem criada pelo PHP:

----------------------------------------------------------------------------------------------------------

<?php

//newCaptcha.php

session_start();

$string = '';

for ($i = 0; $i < 5; $i++) {

    $string .= chr(rand(97, 122));

}

$_SESSION['captcha'] = $string; //store the captcha

$dir = '../fonts/';

$image = imagecreatetruecolor(165, 50); //custom image size

$font = "PlAGuEdEaTH.ttf"; // custom font style

$color = imagecolorallocate($image, 92, 124, 237); // custom color

$white = imagecolorallocate($image, 245, 245, 245); // custom background color

imagefilledrectangle($image,0,0,399,99,$white);

imagettftext ($image, 30, 0, 10, 40, $color, $dir.$font, $_SESSION['captcha']);

header("Content-type: image/png");

imagepng($image);

?>

----------------------------------------------------------------------------------------------------------

Já ação de submit ao clicar no botão "Enviar"  temos a chamada no Click do arquivo PHP que verifica se as letras na imagem correspondem as digitadas pelo usuário:

----------------------------------------------------------------------------------------------------------

<?php

session_start();

if(isset($_REQUEST['code']))

{

//var_dump($_SESSION['captcha']);

//var_dump($_REQUEST['code']);

if(strtolower($_REQUEST['code']) === strtolower($_SESSION['captcha'])){

echo json_encode(array('resp'=>'Valido'));

}else {

echo json_encode(array('resp'=>'Incorreto'));

}

    //echo json_encode(strtolower($_REQUEST['code']) == strtolower($_SESSION['captcha']));

}

else

{

    echo 0; // no code

}

session_destroy('captcha');

?>

----------------------------------------------------------------------------------------------------------

Já no formulario HTML do arquivo /page-contato.php podemos montar da seguinte forma:

----------------------------------------------------------------------------------------------------------

<form method="post" >

 <div id="captcha-wrap">

    <img src="./img/refresh.png" width="35" alt="refresh captcha" id="refresh-captcha" />                      <img src="./captcha/newCaptcha.php" alt="" id="captcha" />

<br>

      <input class="narrow text input" id="captcha" name="captcha" type="text" placeholder="Verification Code" required />

<span id="errorCode"></span>

<br><br>

<input type="button" id="validar" value="Enviar">

<br>

   </div>

</form>     

----------------------------------------------------------------------------------------------------------

O resultado final fica bem interessante, basta trabalhar um pouco no layout pra ficar melhor e se adaptar a qualquer formulário.

Para os que curtem facilidade baixem a versão funcional do código fonte no Git: https://github.com/robertosm822/jQuery-Captcha-PHP

Até logo.