Sites Dinâmicos

Sites dinâmicos são sites gerenciáveis por sistemas de CMS (Content Management System), através de uma plataforma online, que é acessada por login e senha, é possível manipular todo o conteúdo gerenciável do Mais »

Modelagem 3D

Se sua empresa precisa de ilustrações em 3D, venha falar com a Toca Digital e conheça o nosso trabalho. A modelagem 3D (modelagem tridimensional)  é o processo de desenvolvimento de uma representação Mais »

Ganhe tempo na construção de seu site

  Não perca seu tempo com empresas que vão deixar você na mão, montamos seu site com os melhores recursos da internet, ferramentas de gereciamento de conteúdo e de controle estatístico. Com Mais »

 

TypeScript: uma solução mais simples e organizada de escrever e compilar Javascript

Se você é desenvolvedor, assim como eu, você provavelmente já teve que utilizar JavaScript em suas aplicações, sendo elas em dot.net, php, java ou qualquer outra linguagem server-side que dependa desta interação maravilhosa no ambiente web.

Obviamente, deve ter sofrido um pouco para escrever códigos utilizando esta linguagem client-side. Para poupar esforços, acredito que também chegou a tomar conhecimento ou mesmo familiaridade com a biblioteca jQuery – e gostou dos efeitos que ela oferece – Afinal, são muitas as facilidades e a simplicidade como ela resolve as coisas para você. Mal precisamos nos aprofundar dentro de sua estrutura complexa de código escrito nativamente para entender como funciona, e chegar no nosso objetivo de interação com o usuário final. Alguns desenvolvedores fazem oposição ao seu uso, já que o JavaScript nativo atende bem e sem muita complicação os mesmos recursos com uma velocidade e desempenho até melhor, daria para discutir isso o dia inteiro, mas não vim aqui para criar contrariedades…

Acredito também que em algum momento você já teve que esbarrar em algo um pouco mais complexo (porém de raciocínio simplicista) como o AngularJS, e deve ter sofrido um pouco também até se adaptar a esta arquitetura brilhante que este Framework maravilhoso oferece. Daí deve ter aprendido um monte de lance legal que facilitou muito a sua vida, ou não. Gostou do Framework?! Não? É isso aí mesmo, tem gente que detesta, e tem gente que ama. Mas de certo modo, quem odiava o AngurarJS, pode talvez gostar do Angular 2. Alguns que adoram o AngularJS, vão detestar essa nova versão.

Mas espera um pouquinho… talvez não detestar a arquitetura do Angular 2 em si (ou talvez sim?), mas tem uma coisa que acredito que a maioria irá detestar é a dificuldade de migração entre as duas versões. Pois é justamente esse o dilema, e a queixa da maioria dois desenvolvedores de AngularJS. A ideia é ter a mente aberta…, afinal o cérebro não vai cair por aí. Abandonar o AngularJS e mudar completamente para Angular 2, tem benefícios, a começar por sofrer menos com códigos nativos do JavaScript.

Daí você vai me perguntar: Como assim parar e sofrer menos com JavaScript se eu adoro??? De fato, se você ama javascript, fique tranquilo… não é exatamente parar de escrever JavasScript, mas deixar de sofrer com a linguagem rebuscada. Isso mesmo… melhorou agora?

Para quem não entendeu bulhufas de JavaScript até agora, sinta-se agraciado e feliz de começar do zero aprendendo esta nova linguagem: TypeScript, que está sendo utilizada no Angular 2. Você não vai mais precisar trabalhar e sofrer tanto com JavaScript.
Necessariamente, você precisa aprender TypeScript para trabalhar com Angular 2, mas não precisa saber Angular 2 para trabalhar com TypeScript.

Legal, mas afinal para que serve o TypScript? Bom, ele serve para uma infinidade de coisas, uma delas é para compilar JavaScript. O que o TypeScript faz basicamente é compilar um código maduro, orientado e organizado para o código de máquina, complicado e rebuscado chamado JavaScript, através de uma estrutura muito mais amigável ao desenvolvedor que está acostumado com a linguagem server-side e orientação a objetos.

E afinal, o que é o TypeScript?
É uma linguagem para desenvolvimento JavaScript em larga escala. Com TypeScript podemos escrever código utilizando uma estrutura fortemente tipada e ter este código compilado para JavaScript puro, que rode em qualquer navegador e em qualquer host.

Veja abaixo um exemplo de código escrito em TypeScript:

Arquivo: galeria.ts

module Galeria {

    export interface Album  {
        id:number;
        imagem:string;
        titulo:string;
        descricao?:string;
    }

    export class MyAlbum implements Album {

        id:number;
        imagem:string;
        titulo:string;
        descricao:string;

        constructor(
            id:number,
            imagem:string,
            titulo:string,
            descricao?:string
        ){
            this.id = id;
            this.imagem = imagem;
            this.titulo = titulo;
            this.descricao = (descricao) ? descricao : null;

        }

        public getAlbum() {
            let data = {
                id: this.id,
                titulo: this.titulo,
                imagem: this.imagem,
                descricao: this.descricao
            };
            return data;
        }

    }
}

var galeria = new Galeria.MyAlbum(10, "album01.jpg", "Meu Album", "Este album é somente um teste");
var obj = galeria.getAlbum();

window.onload = () => {
 document.body.innerHTML = `<p>
 ID: ${obj.id}<br>
 Álbum: ${obj.titulo}<br>
 Descrição: ${obj.descricao}<br>
 <img src="imagens/${obj.imagem}" border="0">
 </p>`;
}

Agora a saída do arquivo galeria.js compilado:

var Galeria;
(function (Galeria) {
    var MyAlbum = (function () {
        function MyAlbum(id, imagem, titulo, descricao) {
            this.id = id;
            this.imagem = imagem;
            this.titulo = titulo;
            this.descricao = (descricao) ? descricao : null;
        }
        MyAlbum.prototype.getAlbum = function () {
            var data = {
                id: this.id,
                titulo: this.titulo,
                imagem: this.imagem,
                descricao: this.descricao
            };
            return data;
        };
        return MyAlbum;
    }());
    Galeria.MyAlbum = MyAlbum;
})(Galeria || (Galeria = {}));
var galeria = new Galeria.MyAlbum(10, "album01.jpg", "Meu Album", "Este album é somente um teste");
var obj = galeria.getAlbum();
window.load() = function () {
    document.body.innerHTML = "<p>\n                              ID: " + obj.id + "<br>\n                              \u00C1lbum: " + obj.titulo + "<br>\n                              Descri\u00E7\u00E3o: " + obj.descricao + "<br>\n                              <img src=\"imagens/" + obj.imagem + "\" border=\"0\">\n                              </p>";
};

E um arquivo de mapeamento, galeria.js.map:

{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"AAAA,IAAO,OAAO,CAwCb;AAxCD,WAAO,OAAO,EAAC,CAAC;IASZ;QAOI,iBACI,EAAS,EACT,MAAa,EACb,MAAa,EACb,SAAiB;YAEjB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;YACrB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;YACrB,IAAI,CAAC,SAAS,GAAG,CAAC,SAAS,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC;QAEpD,CAAC;QAEM,0BAAQ,GAAf;YACI,IAAI,IAAI,GAAG;gBACP,EAAE,EAAE,IAAI,CAAC,EAAE;gBACX,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,SAAS,EAAE,IAAI,CAAC,SAAS;aAC5B,CAAC;YACF,MAAM,CAAC,IAAI,CAAC;QAChB,CAAC;QAEL,cAAC;IAAD,CAAC,AA9BD,IA8BC;IA9BY,eAAO,UA8BnB,CAAA;AACL,CAAC,EAxCM,OAAO,KAAP,OAAO,QAwCb;AAED,IAAI,OAAO,GAAG,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE,+BAA+B,CAAC,CAAC;AACnG,IAAI,GAAG,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC;AAC7B,MAAM,CAAC,IAAI,EAAE,GAAG;IACZ,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,4CACM,GAAG,CAAC,EAAE,wDACH,GAAG,CAAC,MAAM,iEACN,GAAG,CAAC,SAAS,+DACN,GAAG,CAAC,MAAM,yDACzB,CAAC;AACpC,CAAC,CAAA"}

No exemplo que eu coloquei acima, o arquivo ts, é um exemplo simples de utilização modular, que contém um interface, ou seja, uma maneira de criar um contrato da arquitetura e desenvolvimento.

Mas você poderia fazer algum muito mais simples como por exemplo:

class Usuario {
    private nome:string;
    private email:string;

    public setNome(nome:string):void {
        this.nome = nome;
    }

    public setEmail(email:string):void {
        this.email = email;
    }

    public getEmail():string {
        return this.email
    }

    public getNome():string {
        return this.nome;
    }
}

var usuario = new Usuario();
usuario.setNome("Luiz Fernando");
usuario.setEmail("luizf@servidor.com");
console.log(usuario.getNome, usuario.getEmail);

Para saber mais acesse o site: https://www.typescriptlang.org

Módulo de Contagem Regressiva (Cronômetro) para AngularJS

Código do módulo de contagem regressiva:

angular.module("iCountdown",[]).directive("iCountdown",function(){return{restrict:"EAC",scope:{setDate:"@",expireMessage:"@",formatView:"@"},replace:!0,template:"<div><div></div></div>",link:function(e,t){e.insertDate=function(){e.setMessageExpired(e.expireMessage),e.setDateFinal(e.setDate),e.start()},e.$watch("setDate",function(){e.insertDate()},!0);var n=new Date,a=1e3,i=60*a,r=60*i,o=24*r,s={second:a,minute:i,hour:r,day:o,interval:null,messageFinal:"expired!",format:"Y-m-d H:i:s",dateEnd:null};e.setMessageExpired=function(e){s.messageFinal=e},e.setId=function(t){s.id=t,e.viewElement.setAttribute("id",t)},e.setDateFinal=function(e){s.dateEnd=e};var d=function(e){var t=/(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/,n=t.exec(e);return new Date(+n[1],+n[2]-1,+n[3],+n[4],+n[5],+n[6])};e.remaining=function(){var a=new Date;n=d(s.dateEnd);var i=n-a;if(0>i)return clearInterval(s.interval),void(t[0].innerHTML=s.messageFinal);var r=Math.floor(i/s.day),o=Math.floor(i%s.day/s.hour),l=Math.floor(i%s.hour/s.minute),u=Math.floor(i%s.minute/s.second),c=[];c[0]=(10>r?"0":"")+r,c[1]=(10>o?"0":"")+o,c[2]=(10>l?"0":"")+l,c[3]=(10>u?"0":"")+u,t[0].innerHTML=e.setFormatViewTime(c)},e.setFormatViewTime=function(t){return e.formatView.replace(/%d/gi,t[0]).replace(/%h/gi,t[1]).replace(/%i/gi,t[2]).replace(/%s/gi,t[3])},e.setFormatDate=function(e){s.format=e},e.start=function(){return n instanceof Date&&!isNaN(n.valueOf())?void(s.interval=setInterval(this.remaining,s.second)):(console.log("A data final não foi definida, adicione uma data conforme o exemplo: yyyy-mm-dd hh:mm:ss!"),!1)}}}});

Basta definir uma data futura no “set-date”, que ele irá contar a partir do relógio do servidor até chegar ao final, em “format-view”, %d será a entrada dos dias que faltam, %h são as horas, %i os minutos, e %s os segundos, e “expire-message”, e a mensagem final quando expirar o tempo do cronômetro.

Esta é tag da diretiva para inserir uma instância na sua HTML do seu cronômetro:

<i-countdown set-date="2015-08-21 10:10:10" format-view="%d dias %h hrs %i min %s seg" expire-message="Acabou o tempo"></i-countdown>