DEV Community: Iago Angelim Costa Cavalcante

Criando componente de share com React/NextJS

Iago Angelim Costa Cavalcante — Fri, 08 Sep 2023 14:08:20 +0000

O problema

Em um projeto em que eu me time estamos trabalhando enfrentamos o desafio de criar um componente para dar a possibilidade do usuário compartilhar algo que ele recebeu pelo email nas principais redes sociais (whatsapp, twitter, facebook e email) além da possibilidade de copiar o link exibido.

Solução

Para resolver este problema, começamos a pensar em como poderíamos pegar algo enviado por emai, abrir a página web daquele email e ativar o compartilhamento. A solução seria no link compartilhar que é recebido por email, adicionar uma query string indicando que será aberto o modal contendo os links de compartilhamento nas respectivas redes.

O link acima é representado no email pela seguinte tag

<a href="https://linkqualquer.com/nome/id?share=true">
  Compartilhe! ->
</a>

Com isso estamos aptos a clicar no link e ser redirecionado para nossa página web que irá receber o parâmetro e realizar alguma ação.

Para verificar os parametros de rota, iremos utilizar hook roteador do NextJS que iremos importar da seguinte forma na nossa página:

import { useRouter } from 'next/router'

E no componente iremos utilizar a variável query que o useRouter() disponibiliza para nós. Para executar a verificação no momento que entramos na página, iremos utilizar o useEffect e nosso componente ficará da seguinte forma:

const { query } = useRouter()

useEffect(() => {
    if (query.share == 'true') {

    }
  }, [query])

Temos a verificação inicial se tem o parametro share na query string e com isso podemos implementar a lógica de exibição do modal e definir os dados que serão compartilhados. Mas vamos deixar essa primeira parte guardadinha e começar a trabalhar no nosso componente de share que será um modal.

** Obs: No projeto estamos utilizando o framework de UI chamado Tailwind **

Nosso componente irá receber apenas 3 propriedades, sendo elas a url do conteúdo que vamos compartilhar, o status que será responsável por mostrar ou não o modal e a action que define quando o modal será fechado.

Dentro do componente teremos duas funções onde uma será responável por tratar a ação dos botões de compartilhamento handleSharing() e a outra será responsável por copiar o link e jogar dentro do clipboard (mesma ação do ctrl + c) chamada de handleCopy.

Com nosso componente criado, vamos voltar a página onde tem o conteúdo a ser compartilhada e onde fazemos a verificação da query string.

Lá iremos implementar a importação do componente e quando que ele será exebido, nossa página ficará da seguinte forma:

Agora temos a lógica completa de exibição do modal ácima.

Conclusão

Inicialmente pode ser algo assustador para quem ta começando a desenvolver e ter que pensar em resolver esse problema, mas é mais simples do que parece, só precisamos relembrar de alguns conceitos e unificar nessa solução.

Poderíamos refatorar essa solução para algo um pouco melhor, porém nosso objetivo aqui era ser o mais didático possível.

Agradeço a leitura de todos(as).

Como resolver corretamente cache node_modules em discos externos

Iago Angelim Costa Cavalcante — Fri, 08 Sep 2023 14:07:35 +0000

Problema

Recentemente adquiri um ssd externopara armazenar alguns vídeos que eu estou produzindo e também deixar os projetos que estou trabalhando nesse Volume externo.

Primeiro passo foi mover tudo sem a node_modules com o comando do unix mv e após concluído criei um link simbólico para o meu novo workspace.

Ao instalar as dependências em projetos node, percebi que as dependências estavam ocupando GB de armazenamento e isso me gerou um questionamento, logo percebi que isso ocorria por não compartilhar o cache com o disco que fica no meu computador onde se encontra o nodee npm instalados.

Solução

A resolução foi aparentemente simples, com o comando npm config ls -l listei todas as configurações default do node, e descobri onde o cache fica localizado e com isso o npm/yarn conseguirá compartilhar as dependências que já foram instaladas previamente.

Com isso basta instalar as dependências do projeto com o comando yarn install --cache /Users/iagocavalcante/.npm ou npm i --cache /Users/iagocavalcante/.npm.

Extra

Enfrentei problemas com node-sass e node-gyp no M1 e a versão atual do xcode pra compilar as coisas e com isso descobri que para rodar e buildar essas dependências era necessário executar o install da seguinte forma CXXFLAGS="--std=c++17" yarn install --cache /Users/iagocavalcante/.npm

Conclusão

Com isso resolvi documentar as resoluções para esses problemas, caso mais pessoas precisem resolver esse problema.

Obrigado a todos <3.

Phoenix Internationalization

Iago Angelim Costa Cavalcante — Fri, 08 Sep 2023 14:04:29 +0000

Problem

You need to internationalize your website. You decide to use gettext and your system uses LiveView. Everything you find seems too complicated or doesn't easily meet your needs without a lot of configuration.

How can we use LiveSession to take care of our application's i18n?

Solution

With LiveView 0.18 we can have functional components and easily trigger an event from our functional component and intercept them in a general way using LiveSession.

This was the simplest approach I could think of to share and modify the language of the page we are accessing.

With a global assign, we can access the current locale and modify the language of the page using the with_locale from gettext.

Attempt

First, we need to define a second language for our i18n tool (gettext). To do this, simply go to your project directory through the terminal and run the following command:

mix gettext.merge priv/gettext --locale pt_BR

The chosen language was pt_BR, but it can be any available language you want to use.

With our new language set, we will now create our live session that will take care of setting our default language in the assigns for all live views and will have the method to handle language switching in the system.

Inside our _web folder, we will create a module called locale.ex, and it will have the following structure:

defmodule PhoenixI18nWeb.Locale do
  import Phoenix.LiveView
  use Phoenix.Component

  def on_mount(:default, _params, _session, socket) do

    {:cont,
     socket
     |> assign(:locale, "en")
     |> attach_hook(:set_locale, :handle_event, &handle_event/3)}
  end

  defp handle_event("toggle_locale", %{"locale" => "en"}, socket) do
    locale = "pt_BR"
    perform_assigns(socket, locale)
  end

  defp handle_event("toggle_locale", %{"locale" => "pt_BR"}, socket) do
    locale = "en"
    perform_assigns(socket, locale)
  end

  defp handle_event(_, _, socket) do
    {:cont, socket}
  end

  defp perform_assigns(socket, locale) do
    Gettext.put_locale(IagocavalcanteWeb.Gettext, locale)
    {:halt, socket |> assign(locale: locale)}
  end
end

In the on_mount function, we are setting the default locale to English and we have a hook that will be responsible for handling the language change event. We call it toggle_locale.

With this done, we are ready to create our component that will call the hook that was added to the mount. It will have the following structure:

defmodule PhoenixI18nWeb.ToggleLocale do
  use Phoenix.Component

  def toggle_locale(assigns) do
    ~H"""
    <button
      phx-click="toggle_locale"
      phx-value-locale={@locale}
      type="button"
      aria-label="Toggle locale"
      class="group rounded-full bg-white/90 px-3 py-2 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur transition dark:bg-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20"
    >
      <img
        src={"/images/flags/#{@locale}.png"}
        class="h-6 w-6 fill-zinc-700 stroke-zinc-500 transition dark:fill-teal-400/10 dark:stroke-teal-500"
      />
    </button>
    """
  end
end

With this, now we just need to update our live view and add wherever we want to use Gettext with the chosen language the following code:

<%= Gettext.with_locale(@locale, fn -> %>
  <%= gettext("Peace of mind from prototype to production.") %>
<% end) %>

Finally, let's add our live session to the routes that we need to take care of for i18N:

live_session :locale, on_mount: [PhoenixI18nWeb.RestoreLocale] do
  live "/", HomeLive, :home
end

React Native — Comunicação com módulos nativos (iOS)

Iago Angelim Costa Cavalcante — Tue, 29 Dec 2020 16:23:10 +0000

React Native — Comunicação com módulos nativos (iOS)

Logo react native com uma mulher em cima

Módulos nativos

O post de hoje começa com uma pergunta, por que criar módulos nativos usando o react native ?

Se você trabalha com desenvolvimento mobile, em algum momento você irá esbarrar com alguma lib, algum sdk que só possui versões pra Android ou iOS e você tem o aplicativo já em andamento com React Native.

Dado esse cenário, surge a necessidade de entender, estudar e aprender a criar a comunicação usando React Native, isso é possível e com isso a gente é capaz de extrapolar o comum e passar a desenvolver aplicativos mais poderosos ou até contribuir criando um pacote que não existia para abstrair o SDK/Lib nativas.

Para criar os módulos nativos temos duas opções, criar um pacote NPM/Yarn ou criar o módulo nativo dentro do nosso projeto de aplicativo.

Caso de uso

Nosso caso de uso será o SDK do Zoom.us onde vamos modificar um pacote existente para react native. Com isso vamos criar novos métodos para suprir nossa necessidade. São métodos que existem no SDK, porém não existe no pacote que utilizamos para testar. Logo nosso time percebeu a necessidade de modificar o pacote pra atender nossas necessidades.

Primeiro passo foi estudar o código do pacote e estudar a documentação oficial do React Native especificamente na parte de criação de módulos nativos, inclusive está sendo discutido uma nova arquitetura, chamada TurboModules.

Temos no código-fonte do pacote o seguinte trecho:

Onde na linha um importamos o NativeModules do react-native e é a partir dele que temos acesso aos módulos nativos do iOS e Android, no nosso caso nesse primeiro artigo vamos focar no iOS. O alvo das nossas alterações será o RNZoomUsBridge através dele vamos ter acesso as funções do SDK.

Nosso alvo aqui é usar um SDK já existente e usufruir dele, com isso nosso pacote só será a ponte entre o React Native e o SDK, pra isso precisamos configurar um arquivo que irá dizer onde está o SDK, que no caso do iOS é a configuração do

FRAMEWORK_SEARCH_PATHS.

O nome do arquivo que fica na raiz do pacote tem o mesmo nome do pacote e tem a extensão .podspec.

Podemos ver na imagem acima, na linha vinte e cinco que configuramos o local do ZoomSDK que vai ser instalado no projeto (aplicativo) e não no nosso pacote.

No pacote existem arquivos .h e .m, eles são arquivos responsáveis pela definição do módulo (.h) e o pela implementação do módulo (.m). O que interessa pro nosso caso de uso são o RNZoomUsBridge.h, RNZoomUsBridge.m, RNZoomUsManager.h e RNZoomUsManager.m.

Quando abrimos o primeiro arquivo temos o seguinte:

Ele define que a interface RNZoomUsBridge vai ser um objeto RCTBridgeModule, que é importado diretamente do React.

Com isso podemos ir para implementação dessa interface que fica no arquivo RNZoomUsBridge.m:

No início do módulo temos as importações de outros módulos e ao ir mais para baixo desse módulo temos a implementação usando a assinatura do módulo do react native para ser entendido como um método no Javascript, o que chamamos de ponte.

O React usa o método abaixo para chamar, executar o módulo nativo, com isso temos uma implementação usando Promise, mas poderia ser outro tipo de implementação.

Na linha cento e trinta e três dizemos o nome do método e o tipo de retorno, que no nosso caso é uma Promise, que pode dar certo ou errado. Se der certo a execução do método nativo não vamos retornar nada e se der errado mostramos uma mensagem de erro.

Podemos ver na linha cento e quarenta e um que chamamos o Manager e ele é responsável por executar nosso método hideMeeting.

Agora vamos olhar como está definido e implementado esse método no Manager.

Como vimos anteriormente, os arquivos .h são definições das interfaces. Nela vamos definir quais métodos temos que implementar e utilizar.

Na nossa implementação do manager temos o seguinte:

Podemos ver que aqui importamos o MobileRTC, esse arquivo é importado diretamente do SDK do Zoom.us e com ele temos acesso a vários métodos, interface, enums e tudo mais.

O que precisávamos pro nosso caso de uso era executar a ação de minimizar a tela de reunião do Zoom.us para executar outra ação. Lendo o código fonte do SDK chegamos ao método showMinimizeMeetingFromZoomUIMeeting e para implementar isso escrevemos o seguinte trecho:

Nesse método definimos ele como assíncrono e definimos quando ele irá parar a execução (definir como completa) usando completionBlock. Foi instanciado o objeto ms que é referente ao meetingService que é a reunião em execução e nele executamos a ação para minimizar a janela com [ms showMinimizeMeetingFromZoomUIMeeting] e para facilitar a leitura, deixamos alguns logs para identificar se tudo está ocorrendo como o esperado.

Conclusão

Com isso vimos como usufruir de módulos nativos usando objective-C e SDK nativo. Claro que isso exige um mínimo de conhecimento das linguagens nativas de cada plataforma e pode parecer assustador no início. Esse foi um caso real que foi necessário ser feito para atingir os objetivos da nossa aplicação e a lib modificada pode ser encontrada nesse repositório.

Para quem vem da web ou já tem familiaridade com React Native, vale a pena entender como a ponte (bridge) funciona e como a gente pode desenvolver apps melhores usufruindo desse poder.

Por hoje é só, até mais pessoal.

Programação Funcional com Javascript — Composição

Iago Angelim Costa Cavalcante — Sat, 12 Jan 2019 15:25:52 +0000

Programação Funcional com Javascript — Composição

Vamos falar neste artigo sobre composição, o que é, como resolver um determinado problema com isso e qual problema ela pode vir a resolver.

Composição

É quando podemos reunir várias funções em uma única, onde a mesma recebe um número variado de funções por parâmetro, e dentro dela é usado o resultado de uma como entrada da outra. Vamos exemplificar com código, que talvez fique mais claro o entedimento.

O Problema

Vamos imaginar que estamos sentados em nossa mesinha, ai o gerente chega com a gente e fala que precisa que façamos um novo módulo front-end para o sistema MarombaWebApp, e que nesse módulo, nosso amiguinho do back-end vai devolver uma lista de usuários onde nela possui alguns dados, sendo um deles a quantidade de parcelas faltantes e outro o valor de cada parcela, e que na nossa tela precisamos mostrar a lista de todos os usuários e o total que falta eles pagarem. Precisamos desse controle e o prazo é pra daqui a uma hora.

Dado esse problema e o prazo, apertado, precisamos entregar aquilo funcionando logo, nós nem pensamos na qualidade, só pensamos que estamos já atrasados pra entregar. Com a descrição do problema, a solução já veio na mente, uma lista é comum de receber e pensamos logo em iterar essa lista e somar o montante. Logo, logo nosso problema está resolvido e ficaria dessa forma:

Onde temos uma lista fictícia, uma variável global para receber o nosso total e um laço de repetição onde vamos pegar o valor total de cada usuário. Aparentemente não temos problema algum não é mesmo, mas vamos supor que precisamos dessa mesma lógica em outro módulo do sistema, dado uma lista, eu precise da somatória do total, o que vamos fazer ?! Isso mesmo que você pensou, ctrl + c e ctrl + v. Começando assim a repetição de código em todo os nosso sistema, olha que lindeza.

A Solução

Como vocês já devem ter imaginado, pra solucionar esse nosso pequeno problema, vamos utilizar a técnica de composição e com isso aplicaremos algo conhecido pela maioria dos Dev’s, o princípio da responsabilidade única, o famoso S do SOLID.

Nosso primeiro passo, vai ser separar as responsabilidades, onde teremos uma função para realizar o cálculo do valor total por usuário (linha 9) e outra função onde será realizado a somatória total do valor faltante de todos os usuários (linha 12):

Temos o mesmo resultado da nossa solução onde está tudo junto e misturado, só que dessa vez, cada coisa está no seu devido lugar, fazendo só o que precisa fazer.

Porém podemos dar uma melhorada e separar a soma que é feita dentro da função somatorioTotal e criar uma outra função de soma de forma que ela se tornará genérica o suficiente pra ser usada em qualquer outro lugar.

No Javascript não existe funções que aceitem composição de forma nativa, por esse motivo, iremos implementar as funções de map e reduce de forma onde aceitem a composição.

Elas terão a seguinte estrutura:

A função map recebe apenas uma função por parâmetro e retorna uma nova função que exige um parâmetro apenas e o parâmetro é o dado que será processado.

E temos na terceira linha a reatribuição da função reduce, onde nela temos dois parâmetrod, sendo o primeiro a função que será usada para realizar o processamento dos dados e a segunda é o valor inicial. Com isso temos algo padronizado onde a saída de uma função é a entrada da próxima.

Assim podemos organizar de forma mais eficiente o nosso código e torná-lo mais legível, as coisas vão se encaixando e fazendo sentido e fica claro o fluxo dos dados.

Essa série de programação funcional com javascript foi feita de forma rápida e direta. Esse post, exclusivamente, tive que estudar bastante e ler muitos outros sobre o assunto. Se você quer se aprofundar, recomendo ler os artigos e vídeo de referência.

Aqui vão as principais referências:

Refatorando para javascript funcional

Compondo funções javascript

Let’s code with function composition — Fun Fun Function

REST API com Node.js: Back-end e Front-end

Iago Angelim Costa Cavalcante — Wed, 14 Nov 2018 12:56:38 +0000

Para começar esse tutorial vamos primeiro entender o que seriam API’s e qual a vantagem de usar essa abordagem em cima de um sistema único onde temos tudo integrado.

Podemos pensar em API’s como uma ponte que liga duas ilhas, mas no caso de software, uma API pode ser usada por diversas áreas de negócio não sendo necessário ao consumidor conhecer detalhes de sua implementação. Elas são interfaces de integração que facilitam na troca de informações entre n aplicações, podendo assim termos até mesmo várias caras para uma única aplicação, tendo uma versão móvel, outra desktop e um web.

Uma API pode ser acessada através de um endereço minhaapi.com.br/api/v1/alunos, onde ao acessarmos esse endereço teremos o seguinte retorno:

Com isso temos uma representação de fácil entendimento de como seria uma API que retornaria uma lista de alunos e poderia ser usado em qualquer sistema que queira essa informação.

Dito isso podemos avançar ao próximo conceito, que seria o REST. Podemos entender REST ( Representational State Transfer ) como a padronização da arquitetura web, uma abstração do protocolo HTTP , URL e os verbos HTTP. Para ter uma API REST com um significado semântico onde olhamos certa URL e o verbo que é usado para a consumir, podemos entender quase de imediato qual comportamento esperar.

Temos 4 verbos principais e mais utilizados para realização de requisições, sendo eles: GET , POST , PUT , DELETE.

vamos ver como ficaria nossa API utlizando o REST :

GET minhaapi.com.br/api/v1/alunos (onde iremos recuperar uma lista de alunos)

POST minhaapi.com.br/api/v1/alunos — data {nome: Aluno5, idade: 16}

DELETE minhaapi.com.br/api/v1/alunos/1 (aqui passamos o id 1 do aluno cadastrado e então ele será excluído)

PUT minhaapi.com.br/api/v1/alunos/1 — data {nome: Nome Novo, idade: 20} (já aqui passamos o id do aluno e mais as informações a serem atualizadas)

Agora que entendemos um pouco do padrão REST e como nos ajuda semanticamente a construir uma API melhor usando os verbos HTTP corretos para cada requisição, para refinar melhor as coisas, precisamos conhecer o status code, e o que é isso ?!

Toda requisição realizada para um servidor, sempre é retornado o status code na resposta, ele é o indicador do que foi que ocorreu com aquela requisição, se deu certo, se API falhou, se o servidor falhou ou se um determinado endereço existe. Recomendo o artigo da caelum para melhor entendimento sobre os padrões e principios REST.

Entendemos por alto o que é uma API REST com os parágrafos anteriores.

Agora vamos colocar isso em prática, vamos construir uma API em node, usando express e para tornar o artigo mais didático, estarei seguindo uma arquitetura simples. Vamos supor que sua máquina já está configurada com node e npm.

Nosso primeiro passo é criar um diretório para o projeto de API , vou chamar esse diretório de alunos-api , feito isso vamos abrir o terminal (qualquer um) e navegar até nossa pasta recém criada.

Estando na pasta vamos digitar:

npm init -y

Com esse comando estaremos criando um package.json que vai ser a base de configuração da nossa aplicação e teremos o seguinte resultado:

iniciando projeto com npm init

Agora que temos nosso package.json configurado, podemos instalar algumas dependências, a primeira delas é o express, para instalar, basta ir no terminal na pasta do projeto e digitar

npm install express

express install

Para evitar dores de cabeça enquanto desenvolvemos e ter as alterações rodando ao modificarmos e salvarmos algum arquivo do projeto, podemos usar um pacote chamado nodemon, para instalar vamos usar o npm install, só que como esse pacote só será usado para o desenvolvimento, vamos usar a flag

— save-dev

npm install — save-dev nodemon

Agora que já temos esse dois pacotes essenciais, podemos configurar o script para rodar nossa aplicação em desenvolvimento, antes vamos abrir o projeto em um editor de texto preferido, no meu caso (visual studio code). Agora vamos editar nosso package.json na propriedade de scripts vamos inserir uma outra propriedade chamada dev, ficando asssim:

“scripts”: {

    “dev”: “nodemon src/app.js”,

    “test”: “echo \”Error: no test specified\” && exit 1"

}

package.json com scripts modificado

Esse script é chamado toda vez que executarmos o comando no terminal dentro da pasta do projeto.

npm run dev

Assim acionando o nodemon que chama o app.js que ficará dentro da pasta src.

Como boa prática, vamos manter nossa base de código em uma pasta chamada src que fica na raiz do nosso projeto e dentro dela vamos criar nosso arquivo app.js.

Agora que temos a estrutura inicial da aplicação, vamos começar a escrever algumas coisas no nosso app.js e entender melhor como express funciona.

Para utilizar qualquer pacote em nossa aplicação node, temos que importar o pacote desejado, podemos observar isso na primeira linha.

Na segunda linha estamos instanciando o express para podermos utilizar suas funções.

Na terceira linha temos a instancia do express utilizando um metodo get que aponta para determinada rota, onde ele recebe dois parametros, sendo o primeiro a rota que nesse caso a é / e o segundo parametro um callback onde esse callback possui dois parametros (req, res), sendo o req utilizado para obter informacoes e sao mandadas para esse url e res, utilizado para enviar uma resposta para quem está requisitando, o comportamento seria o seguinte:

1 — Cliente solicitou alguma coisa no endereço http://localhost:3000/

2 — O servidor retorna no caso do nosso exemplo um html com texto “Hello World”

E a nossa última linha de código é onde iremo iniciar de fato o servidor onde passamos como parâmetro a porta que será executada, quando rodarmos o npm run dev e após iniciar, podemos ir até o nosso navegador e acessar a url localhost:3000/ e obteremos a resposta hello worl.

Agora temos uma noção de como devolver uma página html com alguma informação, usando a mesma função anterior, podemos devolver, um arquivo html ou um json no caso de uma API. Vamos criar um array de objetos javascript contendo as informações que queremos devolver para quem está solicitando.

Nosso app.js ficará dessa forma

Agora ao acessarmos a URL da nossa API vamos obter o seguinte retorno:

resposta da requisição. um array de objetos

Temos uma API funcionando simulando uma consulta ao banco de dados onde é retornada uma lista de alunos, agora é possível consumirmos isso de um navegador, do postman, de uma aplicação web, de um aplicativo.

Vamos só melhorar a URL da nossa aplicação, para ficar mais semântico.

Prontinho, nossa API está finalizada, agora podemos consumir diretamente da nossa aplicação web.

Para começar a construção de nossa aplicação consumidora, vamos criar uma pasta chamada alunos-front dentro da pasta alunos-api logo em seguida abriremos a pasta criada no editor de texto preferido, já com editor aberto vamos criar um arquivo index.html com uma estrutura HTML5.

esqueleto de página html5

Vamos marcar nosso html com um título para lista e a lista em si para visualizarmos como ficará o html. E para rodarmos a aplicação front vamos instalar um pacote maneiro para servir página estáticas, chamado http-server .

npm install http-server -g

Agora após instalado, vamos no terminal de vossas preferências, navegamos até a nossa pasta alunos-front e rodaremos, lembre-se que precisamos ter outra janela do terminal rodando nosso projeto de API simultaneamente ao projeto front:

Os dois projetos rodando juntos

http-server

Terminal rodando a aplicação alunos-front

Vamos acessar o nosso endereço para visualizar nosso html no endereço http://localhost:8080ou http://127.0.0.1:8080.

Lista de alunos estática

O que falta para integrarmos com a nossa API ?! Falta fazermos a requisição, certo ? E para isso, vamos usar AJAX, para tornar as coisas dinâmicas.

Vamos utilizar uma biblioteca famosa no mundo front-end para realizar essas requisições, essa lib é o axios 0.18.0, ela tem a finalidade de realizar requisições e ser baseada em promises, vamos importar ela no nosso html através da cdn https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js

Ela tem uso simples com a seguinte estrutura:

axios.get('enderecodaapi')
    .then(response => console.log(response)) //caso retorne um sucesso
    .catch(error => console.log(error)) //caso ocorra algum erro

após o axios. temos os verbos HTTP podendo ser axios.get, axios.post, axios.delete, onde cada método precisa receber como primeiro parâmetro a URL. O segundo é um parâmetro opcional que são os dados que serão enviados para a API.

Vamos agora consumir nossa API utilizando o axios e visualizar o retorno dela no console do Chrome.

Nosso código alterado do front-end ficará assim:

Checando o que acontece com as alterações realizados no front-end, ao darmos refresh na aplicação temos o seguinte.

Página utilizando axios

Como podemos perceber, ocorreu um erro, esse erro é bem conhecido pela galera de front-end, o famigerado erro de CORS, para resolver isso, vamos fazer uma pequena mudança em nossa API.

Voltando para o terminal e navegando até a pasta onde está localizado nosso projeto de API , vamos instalar a biblioteca cors

npm install cors

Quando finalizar a instalação, vamos adicionar essa lib como um middleware da nossa API , ou seja, todas as requisições irão passar antes, por essa biblioteca.

Com essas alterações realizadas e a nossa API rodando novamente, basta irmos na nossa aplicação e atualizar ela e veremos o resultado.

Front-end requerendo da API

Agora obtivemos a resposta esperada, recebemos os dados dos alunos e com isso podemos criar nossa lista dinâmica.

Vamos criar uma função dentro da tag script onde ela receberá uma lista de alunos e irá criar a lista com os nomes. Com essa função criada, agora basta substituir dentro do axios.get.then o console.log, pela nossa função.

Nosso html final será assim:

Agora temos uma noção geral de como construir um backend e frontend separadamente e entendemos alguns conceitos por trás da construção de uma API.

Github do projeto .

Programação Funcional com Javascript — Recursão

Iago Angelim Costa Cavalcante — Thu, 08 Nov 2018 12:04:50 +0000

Fala pessoal, depois de algum tempo, estamos de volta. No artigo de hoje iremos tratar e tentar explanar de forma simples e objetiva, o que é a recursão e como aplica-la usando Javascript.

Recursão

Dizemos que a recursão é um método para a solução de um determinado problema grande que pode ser quebrado em vários pequenos problemas, até ser pequeno o suficiente para ser resolvido de forma simples. A recursão é dada quando uma função chama a si mesmo, com isso podemos escrever soluções elegantes que seriam meio cabulosos de programar de outra forma.

O Problema

Seguindo a linha de pensamento dos artigos anteriores. Vamos imaginar que temos o seguinte problema:

O cliente chega pra você e diz que precisa de um programa similar ao famoso dropbox, um sistema de gerenciamento de arquivos, e na primeira entrega ele precisa que o sistema apenas faça a criação de pasta e subpastas e precisamos lista-las, contendo arquivos ou subpastas.

A Solução

Em primeiro momento, para quem não é familiarizado ou não conhece a técnica de recursão, o que vem na mente para resolver o problema, seriam usar n laços de repetições.

Mas a solução mais elegante para esse problema específico, se dá pelo uso de recursão.

Vamos imaginar que para resolver o problema dessa primeira entrega precisamos construir uma árvore com esses diretórios e subdiretórios. Pensando que nosso sistema será o web, vamos criar elementos html através de nossa função recursiva. Vamos usar a sintaxe e funcionalidades do ES6, segue nosso código:

//estrutura de entrada
const folders = {
    folder: [{
        name: 'folder1',
        folder: [
            {
                name: 'folder2'
            },
            {
                name: 'folder3'
            },
            {
                name: 'folder4',
                folder: [
                    {
                        name: 'folder5'
                    },
                    {
                        name: 'folder'
                    }
                ]
            },
           {
                name: 'folder7'
          }
        ]
    }
  ]
}

//funcao para criar pastas e subpastas dado uma entrada
const createFolderTree = (treeFolders, container)=> { 
    treeFolders.map( folder => {
        const newContainer = document.createElement('div')
        const button = document.createElement('button')
        button.id = folder.name
        button.innerHTML = folder.name
        newContainer.appendChild(button)
        container.appendChild(newContainer)
        if(folder.folder) createFolderTree(folder.folder, newContainer) 
    })
}

//chamada da funcao
createFolderTree(folders.folder, document.querySelector('#folders'))

Com isso temos uma função recursiva que é chamada toda vez que encontra um nó chamado folder , com isso ele cria um novo elemento div e dentro desse elemento cria um botão representando nossa pasta.

É uma forma bem simples que podemos usar, por exemplo, na criação de menus.

Espero que tenha ficado claro o problema e aplicabilidade da técnica e como isso é rico e torna nosso código melhor.

Programação Funcional — Imutabilidade

Iago Angelim Costa Cavalcante — Mon, 07 May 2018 01:04:59 +0000

Foto editada por Patrick Monteiro

Explicando a imutabilidade

Neste artigo, irei tentar expressar uma das muitas maneiras de explicar dados imutáveis em programação em termos familiares, com isso é mais fácil entender o conceito.

O problema

Imagine que você acabou de publicar um artigo e compartilhou um link com todos. As pessoas estão aprendendo muito com a sua escrita e compartilhando com os outros. Depois de um tempo você decide adicionar ou mudar alguma coisa, porque sua opinião mudou ou você aprendeu mais sobre o assunto. Você vai editar o artigo e atualizá-lo. Agora lembre-se daquelas pessoas que estão curtindo? Eles gostam e compartilham com os outros porque acharam interessante. Mas você acabou de alterar algo e isso significa que você potencialmente removeu o valor porque alguns dos seus leitores gostaram e compartilharam esse artigo. Você pode imaginar a frustração quando as pessoas estão se referindo à sua escrita e quando voltam, elas vêem pontos completamente diferentes?

Soluções

Existem algumas formas comuns de como você pode editar ou adicionar mais conteúdo em um artigo:

No caso de você perceber que sua opinião foi completamente alterada desde que o artigo foi publicado, é melhor escrever um novo.

Se você quiser substituir algumas frases por uma nova declaração, basta aplicar o estilo rasurado a ela e colocar sua nova opinião logo após.

Se você quiser adicionar mais texto ou reescrever algo, você pode adicionar uma nota no início do artigo que diz que ele foi atualizado em uma data específica e colocar um pouco de resumo sobre quais são essas mudanças e por que você decidiu torná-las .

Observe como em todos os casos você faz a mudança explícita. Quando alguém volta a ler esse artigo novamente, ele pode observar exatamente o que foi alterado e ainda ter uma ideia do conteúdo original.

Dados imutáveis

Sua postagem no blog também é de dados. Na programação, pode ser um valor representado como um mapa hash. Você pode atribuir esse valor a uma variável. Por isso, possui um ponteiro para o valor, assim como uma pessoa possui um link para o artigo na web. Depois de um tempo você quer lê-lo novamente, então você usa esse link para acessar o artigo ou, se estivermos no programa, usamos essa variável para acessar o valor. Nos dois mundos, você quer que os dados sejam exatamente os mesmos que você viu antes, eles devem permanecer inalterados. Mas se você alterar o artigo ou o valor, ele não será mais o mesmo e não haverá como acessar os dados antes que eles sejam alterados.

Vamos aplicar a solução acima aos dados na programação. Em vez de editar o valor atual, crie um novo, que é basicamente o valor original + alterações que você deseja fazer. É exatamente o que significa imutabilidade. Você não deve alterar os dados depois de criados. Crie uma cópia dos dados originais e inclua suas alterações. Desta forma, você terá acesso a ambos os valores da mesma forma que seus leitores ainda podem acessar o artigo original e um novo.

Veja uma amostra de como você pode alcançar a imutabilidade básica simples em JavaScript com Object.assign ao alterar objetos.

const user {
  name: 'Iago Cavalcante',
  age: 25
}
const updateUser = Object.assign(
  {},
  user,
  { age: 26 });

Programação Funcional com Javascript — Funções Puras

Iago Angelim Costa Cavalcante — Fri, 02 Mar 2018 18:12:15 +0000

E ae pessoal, tudo certo ?! Hoje vou começar a falar um pouco sobre programação funcional utilizando Javascript, quais as características desse paradigma e especialmente entrar na primeira parte dessa série, que são os conceitos e definições de funções puras.

O que é programação funcional?

Nada mais é que um paradigma onde os programas são executados por meio de avaliação de funções. No sentindo mais puro, é baseada em como funções, variáveis e valores trabalham de fato na matemática. Além de que usam uma abordagem mais declarativa que imperativa em suas estruturas. Sendo assim temos princípios fundamentais da programação funcional, sendo eles: funções puras, imutabilidade, recursão, composição de função, funções de primeira classe, lambdas e closures.

Nesse primeiro artigo, irei falar exclusivamente sobre:

Funções Puras

Para uma função ser considerada pura ela necessariamente tem que ter duas características, sendo elas:

Dada a mesma entrada, sempre retornará a mesma saída: a função sempre dá o mesmo valor de retorno para os mesmos argumentos. Isso significa que a função não pode depender de nenhum estado mutável ( objetos mutáveis são objetos cujo estado pode mudar, instanciar e atribuir valor a uma variável).
Não causa efeito colateral: a função não pode causar efeitos colaterais, ou seja, a função não acessa ou altera valores globais. Os efeitos secundários podem incluir Entrada/Saída ( console.log , Math.random,Date.now ).

Exemplo de função pura:

const multiplica = (a, b) => a * b;

Quais as vantagens de se utilizar uma função pura?

Elas são de fácil processamento, testes e depuração, por não dependerem de estados mutáveis.
O valor de retorno pode ser guardado, evitando assim uma re-computação no futuro.
São mais fáceis de testar porque não há dependências (como log, ajax, banco de dados, etc.) que precisam ser mockadas.

Como podemos ver, nem todas as funções de nossos sistemas serão puras, mas podemos tentar utilizar as funções puras em pelo menos 80% dos casos, sendo o valor restante, destinados a funções de gravação de log, recuperação de data, valores randômicos e etc.

Conhecendo um pouco sobre Flux!

Iago Angelim Costa Cavalcante — Sat, 24 Feb 2018 13:55:40 +0000

Flux é um padrão de projetos criado pelos engenheiros do facebook, onde se tem por padrão o fluxo unidirecional dos dados (single direction data flow). Padrão esse popularmente usado no front-end das aplicações.

A view envia ações que descrevem o que aconteceu. A store recebe essas actions e determina quais mudanças de estado devem ocorrer. Após o estado ser atualizado, o novo estado é enviado para a view.

Todos os dados fluem através do dispatcher, que é como um hub central. As ações são fornecidas ao dispatcher em um método criador de ação e, na maioria das vezes, são originadas pelas interações do usuário com as views.

O dispatcher então invoca as devoluções de chamada que as store registraram, enviando ações para todas as stores. Dentro das devoluções de retorno registradas, as stores_respondem a qualquer ação relevante para o estado que eles mantêm. As _stores emitem um evento de alteração para alertar as views do controlador de que ocorreu uma alteração na camada de dados. Controller-views escutam esses eventos e recuperam dados das stores_em um manipulador de eventos. As c_ontroller-views chamam seu próprio método setState (), causando uma re-renderização de si mesmos e todos os seus descendentes na árvore do componente.

Características

Fluxo único de dados;
Não sofre alterações em cascata;
Previsível;
Ações descritivas;
Lógica contida em um único ponto (store);
Flexível para ser usada em pequenas e grandes aplicações.

Estou me aventurando nesse novo design pattern, é um conceito novo pra mim, utilizando a implementação desse padrão para Vue, o Vuex. É bastante diferente do que eu usava de arquitetura web e vem se mostrando bem interessante, quem não conhece, recomendo ficar por dentro do assunto e entender. Abraços!

Fonte: http://facebook.github.io/flux/index.html