Estrutura de Dados com JavaScript: Lista Encadeada

Listas encadeadas são estruturas de dados feitas de grupos de nós que juntos representam uma sequência. Você notará que a Fila e a Pilha foram criadas usando a ideia básica de uma lista encadeada. No entanto, eles têm regras especiais que os tornam diferentes em funcionalidade.

function ListaEncadeada() {
    let contador = 0;
    let head = null;

    this.GetCount = function(){
        return countador;
    }

} 

Nossa lista encadeada terá 6 métodos adicionais: DisplayAll (), DisplayAt (índice), AddFirst (dados), Add (dados, índice), RemoveFirst (), RemoveAt() .

DisplayAll():

Descrição:

O nome já diz tudo. Retorna um array com os dados ou, se vazio, retorna nulo.

this.DisplayAll = function() {
    // se está vazio
    if (head === null) {
        return null;
    } else {
        //senão, percorre a lista e a coloca em um array.
        let arr = new Array();
        let atual = head;

        for (let i = 0; i < contador; i++) {
            arr[i] = atual.dado;
            atual = atual.próximo;
        }
        return arr;
    }
}

DisplayAt():

Descrição:

Como o método PeekAt (indice) anterior da Fila, é exibido em um índice específico ou, fora dos limites, ele retorna null.

this.DisplayAt = function(indice) {
    // verifique se há valores fora dos limites
    if (indice > -1 && indice < contador) {
        let atual = head;
        let i = 0;

        // não fui eu, é da nczonline (veja fonte).
        // É uma maneira diferente de implementar o FOR que estamos usando
        // e eu queria que todos tivessem a chance de conhecê-lo.
        while (i++ < indice) {
            atual = atual.proximo;
        }

        return atual.dado;
    } else {
        return null;
    }
}

AddFirst():

Descrição:

Adiciona à frente da lista. Se você está se perguntando, frente é onde o índice é 0 e referenciado pelo cabeçalho.

this.AddFirst = function(dado) {
    // Cria um novo nó
    let node = {
        dado: dado,
        proximo: head
    };

    head = node;
    contador++;
}

Add()

Descrição:

Adiciona um item à lista na posição especificada.

this.Add = function(dado, indice) {
    // se o índice escolhido for 0, faça o método AddFirst (dado).
    if (indice === 0) {
        this.AddFirst(dado);
    }
    // verifique se há valores fora dos limites
    else if (indice > -1 && indice < contador) {
        let node = {
            dado: dado,
            proximo: null
        };

        let anterior;
        let atual = head;
        let i = 0;

        // encontre o local certo
        while (i++ < indice) {
            anterior = atual;
            atual = atual.proximo;
        }

        anterior.proximo = node;
        node.proximo = atual;

        contador++;
    } else {
        alert("fora de alcance");
    }
}

RemoveFirst()

Descrição:

Remove o primeiro item.

this.RemoveFirst = function() {
    // se não há itens na lista, retorna nulo
    if (head === null) {
        return null;
    } else {
        let out = head;
        head = head.proximo;

        if (contador > 0) {
            contador--;
        }

        return out.dado;
    }
}

RemoveAt()

Descrição:

Remove um item de um índice específico.

this.RemoveAt = function(indice) {
    if (indice === 0) {
        return this.RemoveFirst(indice);
    }
    // verifique se há valores fora dos limites
    else if (indice > -1 && indice < contador) {

        let atual = head;
        let anterior;
        let i = 0;

        // encontre a localização correta
        while (i++ < indice) {
            anterior = atual;
            atual = atual.proximo;
        }

        // pule o item para remover
        anterior.proximo = atual.proximo;

        // diminuir o comprimento
        contador--;
    } else {
        return null;
    }

    // retorna o valor
    return atual.dado;
}
  • DISPLAYALL():
  • DISPLAYAT(INDICE):
  • ADDFIRST(DADO):
  • ADD(DADO,INDICE):
  • REMOVEFIRST():
  • REMOVEAT(INDICE):

Gostou deste artigo? Comente abaixo!

Estrutura de Dados com JavaScript: Fila

Filas são coletâneas de dados que mantém os objetos em uma ordem determinada ao aplicar o algoritmo FIFO (First In First Out), ou seja, o primeiro a entrar é o primeiro a sair.

function Fila(){
    let contador = 0;

    // Ambos início e final da fila estão nulos (não possuem nenhum dado)
    let inicio = null;
    let final = null;

    // Retorna a quantidade de itens na fila.
    this.GetContador = function(){
        return contador;
    }
}

A nossa fila terá quatro métodos adicionais: enqueue(dado), dequeue(), peekAt() e displayAll().

Enqueue():

Descrição:

Adiciona um item no início da fila. O processo é o mesmo do método push() utilizado na pilha, mas foi alterado por causa do exercício.

this.Enqueue = function (dado){
    // Cria um nó com o dado
    let node = {
        dado: dado,
        // Os próximos pontos serão para valorizar de maneira linear
        // Se o início está vazio (null), não será um problema
        proximo: inicio
    };

    // Se é o primeiro item a ser inserido na lista
    // o início será o final
    if (inicio === null){
        tail = node;
    }

    // define o nó como o novo início
    inicio = node;

    //incrementa o contador
    contador++;
}

Dequeue()

Descrição:

Remove e retorna o último item inserido e armazenado que seria aquele no lado oposto da fila.

this.Dequeue = function(){
    // Se a fila está vazia, retorna null
    if (contador === 0){
        return;
    }else{
        let atual = inicio;
        let anterior = null;
    }

    // Enquanto houver um próximo, ele avançará a fila
    // A ideia é ter um atual no final e um anterior
    while (atual.proximo){
        anterior = atual;
        atual = atual.proximo;
    }

    // se há mais que 1 item, 
    // remove o final e decrementa o contador em 1
    if (contador > 1){
        // remove a referência ao último nó.
        anterior.proximo = null;

        // torna o nó anterior como final da lista
        final = anterior;
    }

    // Reseta a fila
    else{
        inicio = null;
        final = null;
    }

}

DisplayAll()

Descrição:

O nome já diz tudo. Ele funciona da mesma maneira que o método da pilha().

this.DisplayAll =  function(){
    // Se não há nada no início, nada será retornado
    if (inicio === null){
        return null;
    }else{
        let arr = new Array();
        let atual = inicio;

        for ( let i = 0; i < contador; i++){
            arr[i] = atual.dado;
            atual = atual.proximo;
        }
        return arr;
    }
}

PeekAt()

Descrição:

Segue a mesma ideia do peek(), mas qualquer item da fila pode ser buscado e exibido.

this.PeekAt = function (index){
    // Qualquer coisa menor que 0 e igual ou maior que a contagem não está na fila
    if (index > -1 && index < contador){
        let atual = inicio;

        // Navega pela fila para achar o item
        for (let i = 0; i < index; i++){
            atual = atual.proximo;
        }
        return atual.dado;
    }
    // Um index fora dos limites da fila foi escolhido
    else{
        return null;
    }
}
  • enqueue(dado)
  • dequeue()
  • displayAll()
  • peekAt(index)

Gostou deste artigo? Comente abaixo!

Estrutura de Dados com JavaScript: Pilha

Uma pilha é um tipo particular de dado em que as principais operações são a adição de um item (método push()) e remoção (método pop()). A pilha implementa um algoritmo LIFO (Last In First Out), que é uma estrutura onde o último elemento adicionado deve ser o primeiro a ser removido. Inicialmente, ela terá o seguinte código:

 

function pilha(){
    //cria uma variável que servirá 
     //para criação da pilha
    let topo = null; 
    let contador = 0;

    //Retorna o número de itens da fila
    this.GetContador = function(){
        return contador;
    }

    /* Métodos */
}

A nossa pilha terá quatro métodos adicionais: push(), pop(), peek() e displayAll(). Eles serão definidos dentro da função pilha() abaixo de this.GetContador. Vamos começar:

Push():

Descrição:

O método push() adiciona os dados especificados na pilha e o torna o nó do topo. Ele também aumenta a contagem de pilhas em 1.

this.Push = function (dado) {
    // Cria um nó que contém o dado e a referência para o próximo item
    let node = {
        dado: dado, 
        proximo: null
    };

    // Linka o nó atual para o topo da pilha
    // O próximo nó receberá o valor null como referência.
    node.proximo = topo;
        
    // Faz o nó atual ser o topo da pilha
    topo = node;

    // Incrementa o contador
    contador++;
}

Peek()

Descrição:

Exibe o item do topo da pilha. Retorna null se a pilha estiver vazia.

this.Peek = function(){
    // Se a lista estiver vazia, retornará null
    // senão, retornará o dado que estiver no nó topo.
    if (topo === null){
        return null;
    }else{
        return topo.dado;
    }
}

Pop()

Descrição:

Parece muito com o método peek(), com a diferença que o pop() remove o item que está no topo da pilha e diminui o contador em 1.

this.Pop = function(){
    // Se a lista estiver vazia, retornará null
    if(topo === null){
        return null;
    }else{
        // Atribui o topo a uma variável temporária
        let out = topo;

        // Atribui o topo para o próximo elemento da pilha
        topo = topo.proximo;

        // Se existir itens na pilha, decrementa o contador
        if (contador > 0){
            contador--;
        }

        // Retorna o valor que foi removido da pilha
        return out.dado;
    }
}

displayAll()

Descrição:

Exibe todos os dados da pilha como um vetor. Exibi-lo como um vetor foi minha escolha, pois não tinha certeza sobre como iria exibi-lo (por exemplo: console.log; document.write etc.).

this.DisplayAll = function(){
    // Se a lista estiver vazia, retornará null
    if (topo === null){
        return null;
    }else{
        // Instancia um vetor
        let arr = new Array();
        // Cria um nó que irá percorrer a pilha
        let noAtual = topo;

        // Percorre a pilha até alcançar o item mais abaixo
        for (let i = 0; i < contador; i++){
            // Atribui os dados ao vetor
            arr[i] = noAtual.dado;
            // Avança para a próxima posição da pilha
            noAtual = noAtual.proximo;
        }

        // Retorna o vetor
        return arr;
    }
}

Métodos utilizados na estrutura do tipo PILHA:

  • push(dado)
  • peek()
  • pop()
  • displayAll()

Gostou deste artigo? Comente abaixo!

Novidades Angular 8.3

A alguns dias saiu a release 8.3.12 do Angular. Segundo alguns tweets, o time focou em algumas novidades como: um novo comando no CLI, correção de bugs e ajustes no novo render que deve entrar como default na versão 9, o Ivy.

Caso tenha interesse em saber mais sobre esse compilador, eu recomendo a leitura do seguinte artigo: Angular: Conhecendo Ivy.

Bom, mas quais foram os novidades dessa versão?

Novo layout

Caso você já tenha atualizado o seu CLI e criado um novo projeto , deve ter notado o novo layout dessa versão.

Além do novo layout, note que nessa etapa nos temos algumas sugestões de próximos passos.

Deploy

Nessa versão foi adicionado um novo comando no CLI, o ng deploy. Agora com apenas alguns comandos no terminal, e possível publicar o nosso app no Azure, Firebase, Zeit, Netlify, ou GitHub.

Em um próximo artigo eu irei criar um passo a passo de como publicar o nosso utilizando esse novo comando do CLI.

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/novidades-angular-8-3

Gostou deste artigo? Deixe seu comentário abaixo!

Angular 8.3: publicando projeto com o Angular CLI em 5 passos

Veja nesse artigo como publicar o seu projeto no GitHub pages em 5 passos

Dando continuidade ao meu artigo anterior: novidades do Angular 8.3, hoje eu irei demonstrar como publicar um projeto no GitHub pages, utilizando o novo comando que foi adicionado na versão 8.3 do CLI, o ng deploy.

Para os próximos passos será necessário estar com a versão 8.3.12 do Angular CLI no seu computador. Caso essa não seja a sua versão, abra um terminal e execute o comando abaixo:

npm install -g @angular/cli

Com a versão do CLI atualizada, vamos aos 5 passos de criação e deploy do projeto.

1- Passo: Criação de um novo projeto

Abra um terminal no seu computador e execute o seguinte comando para criação de um novo projeto:

ng new (nome do seu projeto)

2- Adicionando pacote ghpages

Com o projeto criado, volte no seu terminal, navegue até ele e execute o comando abaixo:

ng add angular-cli-ghpages

3- Criação de um novo repositório no GitHub

Com o projeto criado e o pacote importado, vamos criar um novo repositório no GitHub. Para isso, siga os passos abaixo:

Acesse o link: https://github.com/, vá até o canto superior e clique no icone do lado do simbolo de notificações:

Em seguida clique em new repository:

Agora volte no seu terminal e execute os comandos abaixo para versionar ele no GitHub:

git add *
git commit -m "first commit"
git remote add origin https://github.com/{seu usuario}/{seu repositorio}.git
git push -u origin master

4- Alterando a base url do projeto

Como o projeto será publicado em um subdiretório, será necessário alterar a base url dele. Para isso, vá até o arquivo index.html do seu projeto e altere ele conforme abaixo:

<base href="/nome do seu repositório no git/">

5-Deploy do projeto

Com todos os passos anteriores OK, execute o comando abaixo no seu terminal para publicar o projeto:

ng deploy

Esse comando irá publicar o seu projeto no GitHub Pages no seguinte link: https://github.com/<username>/<repositoryname>.git

  • username: o seu usuário do GitHub
  • nome do seu repositório

Para verificar se o seu projeto foi publicado com sucesso, acesse a url mencionada acima no seu navegador. No meu exemplo ficou a seguinte url: https://programadriano.github.io/angulardeploy/

Bom, a ideia desse artigo era de ser algo rápido demonstrando uma das novidades do Angular 8.3.

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/angular-8-3-publicando-projeto-com-o-angular-cli-em-5-passos

Gostou deste artigo? Comente abaixo!

Azure DevOps + Angular + GitHub Pages

Veja nesse artigo como criar uma pipeline no Azure DevOps para publicar o seu projeto Angular no GitHub Pages

Dando continuidade ao meu artigo anterior: Angular 8.3: publicando projeto com o Angular CLI em 5 passos, hoje eu irei demonstrar como criar uma pipeline no Azure DevOps para automatizar o processo de deploy demonstrado no artigo anterior.

Para os próximos passos sera necessário ter uma conta no Azure DevOps Service. Caso você ainda não tenha se cadastrado la, acesse o seguinte link para acessar o portal e criar uma conta: Azure DevOps.

Com o passo da conta OK, vamos a criação de uma nova pipeline. Para isso, siga os passos abaixo:

1- Clique em pipelines:

2 -Em seguida no canto superior direito, clique no botão New pipeline:

3- Selecione o repositório do seu código.

Para esse artigo, eu irei utilizar um repositório do meu GitHub.

4- Selecione a pipeline do Node.js:

Esse passo deve criar uma pipeline básica para projetos Node.js.

Caso seja necessário adicionar um novo step na sua pipeline, você pode utilizar o assistente no canto direito demonstrado na imagem abaixo:

Agora para ajustar pipeline para publicar o nosso projeto, altere o comando npm run build para npm run deploy.

Obs.: Esse comando e com base no meu arquivo package.json, nele eu adicionei o comando ng deploy da nova versão do Angular 8.3

Clique em Save and Run, de um nome para o seu commit e clique em Save and Run novamente.

Assim que o Job finalizar, acesse a sua página no GitHub pages e verifique as alterações que você subiu nessa nova release do seu projeto.

Link do meu projeto publicado em uma pagina do GitHub: Angular 8.3 DevOps.

Bom, a ideia desse artigo era demonstrar como automatizar o processo de deploy de um projeto angular, utilizando um arquivo .yml no Azure DevOps Service.

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/azure-devops-angular-github-pages

Gostou desse artigo? Comente abaixo!

[Dica rápida]TypeScript: map()

Dando continuidade a minha série de artigos sobre TypeScript, hoje eu irei apresentar o map. Caso você tenha interesse em ler os primeiros artigos dessa serie, segue o link de cada um deles abaixo:

Bom, para quem não conhece o Map ele é uma das novidades do ES6, ele nos permite trabalhar com o conceito de coleção com chave e valor. Sua sintaxe é bem simples, basta instanciar ele e utilizar o get e o set para manipular os seus valores. Para ficar mais claro, vamos a alguns exemplos práticos:

Para criar um novo map basta utilizar o operador new:

let exMap = new Map();

E para popular ele nós devemos utilizar o operador set:

exMap.set("casa", 2);

Agora para resgatar um valor, nós podemos utilizar o get:

exMap.get('casa') // 2

Mas como eu passei acima, o map nos permite trabalhar com coleções. Abaixo você tem um trecho de código com um exemplo de um map com uma coleção.

let languages = new Map();
languages.set("C#", 1);
languages.set("JavaScript", 2);
languages.set("PHP", 3);


languages.forEach((value: string, key: number) => {
    console.log(key, value);
});

Resultado do código acima:

Além dos operadores get e set, map tem outros operadores que nos permitem: deletar uma chave, limpar todos os registros de uma coleção e verificar a quantidade de itens inseridos. Abaixo você tem um trecho de código demonstrando cada um deles:

Bem legal né?

Bom, a ideia desse artigo era demonstrar mais uma das funcionalidades do TS que podem nos ajudar no nosso dia dia 😉

Espero que tenham gostado e até um próximo artigo pessoal.

Fonte: https://medium.com/@programadriano/dica-r%C3%A1pida-typescript-conhecendo-o-ts-ignore

Gostou deste artigo? Deixe seu comentário abaixo!

Angular 7: novas funcionalidades

Veja nesse artigo como atualizar o seu ambiente de trabalho com a versão 7 do Angular e duas de suas novas funcionalidades

Já faz um bom tempo que eu estou focando os meus estudos no Angular, tive a oportunidade de participar de projetos com ele nas versões 2, 5 e 6. Hoje irei apresentar 2 novidades do que vieram nessa nova versão: o Drag and Drop e o Scrolling.

O primeiro passo será atualizar os nosso ambiente. Para isso, siga um dos passos abaixo de acordo com a versão que você tem instalada no seu computador:

Versão < 6

npm uninstall -g angular-cli
npm cache clean 
npm install -g @angular/cli@latest

Versão 6

ng update @angular/cli @angular/core

Para verificar se ele foi atualizado com sucesso, execute o comandong — versionno seu terminal. Abaixo você tem uma imagem demonstrando esse passo:

Atualizando o Angular para versão 7

Para ficar um passo a passo legal, vamos criar um novo projeto. Para isso, abra um terminal no seu computador e execute o comando ng new, note que você irá receber uma mensagem perguntando qual e o nome do seu projeto.

Essa é uma das novidades dessa nova versão. Abaixo você tem uma imagem demonstrando esse passo:

Novo projeto Angular versão 7

Informe o nome do seu projeto, em seguida note que você irá receber uma outra mensagem perguntando se deseja adicionar um arquivo de rotas. Eu irei informar Y para que ele adicione.

Adicionando rotas no Angular 7
O próximo passo será informar como você deseja trabalha com os estilos no seu projeto. Eu irei selecionar SCSS:

Adicionando rotas no Angular 7

Depois desse passo o seu projeto será criado. Para os próximos passos será necessário um editor de textos, eu irei utilizar o VS Code, mas você pode utilizar um de sua preferência.

Antes de nós começarmos a codar, vamos adicionar o Angular Material no nosso projeto. Para isso, execute o comando abaixo no seu terminal:

ng add @angular/material

Esse comando irá solicitar que você selecione um template para o seu projeto. Para esse artigo eu irei selecionar o indigo-pink.

Para as próximas perguntas eu irei informar N (não) para o HammerJS e Y (sim) para browser animations.

Com o projeto aberto no seu editor de textos, vamos conhecer as duas funcionalidades mencionadas no inicio desse artigo.

Drag and Drop

Nessa versão nós temos um módulo chamado DragDropModule. Para utilizar ele, basta adicionar a chamada abaixo no módulo que deseja utilizá-lo.

import {DragDropModule} from '@angular/cdk/drag-drop';

Em seguida atualize o arquivo app.component.html com o trecho de código abaixo:

<div class="example-box" cdkDrag>
  I can only be dragged using the handle

  <div class="example-handle" cdkDragHandle>
    <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
      <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
      <path d="M0 0h24v24H0z" fill="none"></path>
    </svg>
  </div>
</div>

E o arquivo app.component.scss com o trecho de código abaixo:

.example-box {
    width: 200px;
    height: 200px;
    padding: 10px;
    box-sizing: border-box;
    border: solid 1px #ccc;
    color: rgba(0, 0, 0, 0.87);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #fff;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
                0 2px 2px 0 rgba(0, 0, 0, 0.14),
                0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }
  
  .example-box:active {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
                0 8px 10px 1px rgba(0, 0, 0, 0.14),
                0 3px 14px 2px rgba(0, 0, 0, 0.12);
  }
  
  .example-handle {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ccc;
    cursor: move;
    width: 24px;
    height: 24px;
  }

Abaixo você tem uma imagem demonstrando o resultado dessa implementação:

Scrolling

Um outro módulo que chegou nessa nova versão foi o ScrollDispatchModule, ele nos permite trabalhar com virtual scroll.

Para implementá-lo vamos criar um novo componente chamado VirtualScroll. Para isso, execute o comando abaixo no seu terminal:

ng g c virtualScroll

Em seguida atualize o seu arquivo app.component.html com o trecho de código abaixo:

<router-outlet></router-outlet>

E o novo componente no arquivo de rotas: app-routing.module.ts:

{ path: ‘scroll’, component: VirtualScrollComponent }

Agora para implementar o Virtual Scroll, vamos atualizar os arquivos: virtual-scroll.component.ts, virtual-scroll.component.scss e virtual-scroll.component.hml com os trechos de código abaixo:

virtual-scroll.component.ts

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-virtual-scroll',
  templateUrl: './virtual-scroll.component.html',
  styleUrls: ['./virtual-scroll.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,

})
export class VirtualScrollComponent implements OnInit {

  items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
  
  constructor() { }

  ngOnInit() {
  }

}

Analisando esse trecho de código nós temos:

  • 1: Estamos adicionando a chamada do ChangeDetectionStrategy para detectar as alterações no nosso componente
  • 12: estamos criando um array com 100000 itens para passar para nossa view

virtual-scroll.component.hml

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

virtual-scroll.component.scss

.example-viewport {
    height: 200px;
    width: 200px;
    border: 1px solid black;
  }
  
  .example-item {
    height: 50px;
  }

Abaixo você tem uma imagem demonstrando o resultado desse passo:

Os exemplos demonstrados nesse artigo foram retirados do site oficial do Angular. Caso tenham interesse em saber mais sobre essa nova versão, eu recomendo a leitura do seguinte link: Angular.io.

Fonte: medium.com/angularbr/angular-7-novas-funcionalidades

 

Versão do Electron 7.0.0 disponível!

O Electron 7.0.0 foi lançado! Ele inclui atualizações para o Chromium 78, V8 7.8 e Node.js 12.8.1. Foi adicionado uma versão do Window on Arm 64, métodos IPC mais rápidos, uma nova API nativeTheme, entre outros.

A equipe do Electron está animada com o anúncio do lançamento do Electron 7.0.0! Você pode instalá-lo com o npm via npm install electron ou fazer o download no site de lançamentos.

O lançamento está repleto de atualizações, correções e novos recursos.

Mudanças notáveis da atualização:

  • Stack Upgrades:

  • Adicionada versão do Windows on Arm (64 bits);
  • Adicionados ipcRenderer.invoke() e ipcMain.handle() para solicitações/estilo assíncronos de resposta para IPC. Estes são fortemente recomendados no módulo remoto;
  • Adicionada API nativeTheme para ler e responder a alterações no tema e esquema de cores do sistema operacional;
  • Mudou para um novo gerador de definições de TypeScript. As definições resultantes são mais precisas. Portanto, se sua compilação TypeScript falhar, essa é a causa provável.

Consulte as notas de versão 7.0.0 para obter uma lista mais longa de alterações.

Breaking Changes:

Mais informações sobre essas e futuras alterações podem ser encontradas na página Alterações planejadas de interrupção.

  • APIs descontinuadas removidas:
    • Versões de funções baseadas em retorno de chamada que agora usam o Promises;
    • setHighlightMode() (macOS);
    • enableMixedSandbox();
    • getApplicationMenu();
    • setApplicationMenu();
    • querySystemIdleState();
    • querySystemIdleTime();
    • setIsolatedWorldContentSecutiryPolicy();
    • setIsolatedWorldHumanReadableName(),
    • setIsolatedWorldSecurityOrigin().
  • clearAuthCache() não permite mais filtrar as entradas de cache limpas.
  • As interfaces nativas no macOS (menus, caixas de diálogo etc.) agora correspondem automaticamente à configuração do modo escuro na máquina do usuário.
  • Atualizado o módulo electron para usar @electron/get. A versão mínima do node suportado agora é o Node 8.
  • O arquivo electron.asar não existe mais. Quaisquer scripts de empacotamento que dependem de sua existência devem ser atualizados.

Fim do suporte para 4.x.y:

O Electron 4.x.y atingiu o fim do suporte de acordo com a política de suporte doprojeto. Os desenvolvedores e aplicativos são incentivados a atualizar para uma versão mais recente do Electron.

Programa de comentários sobre o APP:

Os projetos que participam deste programa testam os betas de Electron em seus aplicativos, e, em troca, os novos bugs encontrados são priorizados na versão estável.

O que vem por aí:

No curto prazo, a equipe continua a se concentrar em acompanhar o desenvolvimento dos principais componentes que compões o Electron, incluindo Chromium, Node e V8. O plano é lançar novas versões principais do Electron com novas versões desses componentes. O cronograma experimental 8.0.0 mapeia datas importantes no ciclo de vida de desenvolvimento do Electron 8. Consulte o documento do controle de versão para obter informações detalhadas sobre o controle de versão do Electron. Para mais informações, consulte o documento Breaking Changes.

Para mais informações veja o post original no link abaixo:
fonte: https://electronjs.org/blog/electron-7-0

Criando App em 3 minutos

 

No artigo de hoje, criaremos um APK para android rapidamente utilizando HTML, CSS e JavaScript.

Vamos Começar!

Primeiramente, criaremos um novo projeto em branco. Neste projeto, você deve criar um arquivo HTML. O nosso será index.html e terá esta estrutura:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>App em 4 Minutos</title>
</head>
<body>
    
</body>
</html>

Podemos inserir um h1:

<h1>Olá Mundo</h1>

E também um botão:

<button>Clique aqui</button>

Após isso, adicionaremos um script JavaScript na página. Esse script adicionará uma função ao ser clicado o button, que irá disparar um alert.

document.querySelector("button").addEventListener("click", () =>{
    alert("Olá MundoJS!!!!!");
})

Na tag head, inserimos um css:

h1{
    font-size: 20px;
}

button{
    width: 100%;
    padding-top: 5px;
    padding-bottom: 10px;
}

Próximo passo:

Acessando o site http://build.phonegap.com, crie o seu login e acesse. Existem duas opções: open-source, onde você pode deixar seu app e códigos abertos para a comunidade, e a opção privada. Você pode utilizar o Pull do seu repositório GitHub e também pode adicionar um arquivo .zip com seus códigos.

Faremos o upload do nosso arquivo .zip. Feito o upload, adicionamos apenas uma descrição simples do aplicativo criado. Com esses poucos passos, criamos um arquivo .apk para android!

Depois disso, é só baixar o seu aplicativo clicando no botão Source! Você também pode acessá-lo diretamente do seu celular, utilizando o mesmo link da URL!

Baixando do celular, será necessário instalar o aplicativo .apk e realizar as permissões necessárias.

Confira as imagens:

E o APP criado:

O Adobe PhoneGap Build é um cloud service para compilar aplicativos PhoneGap. Ele fornece uma maneira dos usuários criarem aplicativos móveis utilizando HTML, CSS e JavaScript. Os aplicativos podem ser distribuídos em várias lojas de aplicativos, como Play Store, Apple iOS App Store, entre outros; E instalados no dispositivo do usuário final como qualquer outro aplicativo nativo. Ele oferece:

  • Compilação e assinatura gerenciadas (sem SDKs);
  • Várias plataformas suportadas;
  • Ciclo de desenvolvimento mais rápido;

Você pode ler toda a documentação do Adobe PhoneGap em: docs.phonegap.com/

Gostou deste Artigo? Deixe seu comentário abaixo!