DEV Community: André Rodrigues (Xor)

Creating a mega application with Expo (Part-1)

André Rodrigues (Xor) — Sat, 16 Jan 2021 01:00:50 +0000

Nowadays creating an application with React Native is super trendy in the mobile world, React Native uses the React ecosystem as a base.

Yes friend! But not everything was this marvel that we see today, in previous times to develop using React Native technology, the developer should have a computer with extremely strong configurations, this to run the Android Studio mobile emulator (computers with Windows systems, or Linux distributions ), over time, a solution has emerged that would change the whole form of development with React Native.

Introduction to Expo

As I mentioned above, not everything was wonderful during the development with React Native. The Expo tool broke many barriers in the development of mobile applications, one of which is the experience of sharing application development in real time, which is interesting, as we were able to collect feedbacks from our customers, or from the testing team in a fast way . But to really observe this and other cool things, the ideal is to get your hand dirty. I prepared this series of posts where we will build a Delivery application from scratch.

That's right! an application with a database and deploy at Heroku, but in order not to have exaggerated texts, I will leave it to start the application in part two. Oops; Before we finish this part, I would like to ask you to download a code editor and install NodeJS and Yarn, these tools are some that we will use at the beginning of our project. I hope you enjoyed this post start, if you want to follow more news, follow me on my instagram: @andrelaurentinorodrigues, big hug and until the next post

Blockchain e Cooperativismo lado a lado

André Rodrigues (Xor) — Sun, 09 Aug 2020 21:06:15 +0000

(Imagens retirada do Google)

Não é segredo para ninguém que a pandemia está forçando diversos setores a buscarem se inovar em tecnologias que possam ajudar no gerenciamento de suas atividades, e que de certa forma impulsiona o crescimento dessas empresas. Quando falamos em crescimento de empresas, nós levamos em conta todo um ecossistema, pois, cada parte é de máxima importância para que possamos ter um progresso de uma empresa e com o cooperativismo não é diferente, podemos ter uma ideia com essa simples imagem:

O ciclo do cooperativismo nos mostra que todos contribuem para o crescimento do sistema econômico, isso nos reforça a ideia de uma utopia onde temos um círculo e não uma pirâmide de sistema capital. Ok, vamos simplificar mais ainda com uma imagem que descreva esse círculo, veja:

Aplicando a blockchain no cooperativismo

Chegamos ao ponto auto deste post onde iremos entender os impactos que a blockchain pode trazer para cooperativas de crédito, mas antes precisamos o que de fato é uma Blockchain, A Blockchain é um serviço que explora blocos de criptomoedas, a tecnologia também pode ser entendida como um livro de razão pública que realiza o registro de transações de criptomoedas, esse registro é realizado de maneira totalmente segura.

Ou seja, a blockchain registra essas informações como: a quantia de criptomoedas (ou outros tipos de moedas) transacionadas, autor do enviou, quem recebeu esse valor, quando essa transação foi realizada e em qual lugar do livro encontra-se registrada. Isso mostra uma total transparência da blockchain.

Apesar do ecossistema do cooperativista ser bem visto externamente pelos seus associados, as cooperativas de crédito enfrentam diversos desafios e uma delas é a questão de segurança, agilidade e a valorização da moeda que corre em seus cofres. Para solucionar esses entre outros problemas, a blockchain é uma excelente saída, pois, seus processos São transparentes e as aplicações tendem ter uma agilidade superior as comuns aplicadas nos sistemas que gerencia o real brasileiro entre outras moedas populares, também podemos destacar que o valor das criptomoedas são superiores ao real e que pode ser usado como meio de pagamento virtual. Com todas essas vantagens, o que falta para as cooperativas de crédito usarem a blockchain? Falta uma motivação e um processo de qualificação quanto aos funcionários que irão gerenciar as aplicações.

A blockchain e cooperativismo tem tudo para andarem de mãos dadas, pois, se observarmos um se encaixa perfeitamente ao ecossistema do outro. No Brasil, o Santander e o Itaú já estão aplicando esse modelo de tecnologia confiável, o futuro está aí e precisamos de ferramentas que sejam confiáveis, e a blockchain nos mostra sua transparência.

Bom, esse post não foi algo para mostrar de forma técnica o funcionamento da tecnologia, mas mostrar a combinação entre cooperativismo e a tecnologia blockchain, espero que tenham gostado, as vezes no futuro posso simular alguns exemplos de aplicações e apontar vários cases de sucessos. Um forte abraço a todos e até o próximo post :) .

O que aprender no CSS e o que aplicar no desenvolvimento?

André Rodrigues (Xor) — Sun, 09 Aug 2020 01:50:46 +0000

(Imagem retirada do Google)

Muitas desenvolvedores que estão no início da jornada dev fazem essa pergunta, afinal quem nunca passou por isso, não é mesmo?! Pode parecer uma pergunta tosca para os mais experientes, mas para quem está começando, isso pode fazer toda uma diferença.

O CSS é simples de aprender, mas não se engane essa simplicidade de aprender com a forma de escrever um bom CSS, por ser muito fácil de aprender, o CSS se torna custoso de trabalhar, pois, folgamos de certa forma e acabamos não projetamos a arquitetura de nosso CSS. Essa falta de planejamento faz com que o resultado final seja algo poluído e um crescimento de código sem controle que ao chegar no seu fim de ciclo de vida não será reaproveitado sendo completamente descartado. Então o que podemos fazer para trabalhar de forma produtiva e ter aquele CSS lindão? Responderei isso dentro das perguntas feitas no título.

O que aprender no CSS?

Antes de concluirmos o que de fato ajuda no nosso CSS para mantê-lo saudável, vamos entender que temos diferentes cenários e não adianta pensar que um navegador de x usuário vai se manter 100% atualizado, o ideal é sempre usar soluções que sejam compatíveis aos navegadores dos usuários de seu sistema, para isso o recomendável é uma pesquisa de experiência de navegação, faça algumas pesquisas e veja a porcentagem de pessoas que usam determinada versão de navegador, com esse resultado é possível saber qual tecnologia deve ser aplicada para obter melhor resultado. Ok, até aí tudo bem, temos a questão final respondida, mas ficou em aberto a primeira. Calma! A nossa solução é simples. Aprenda todos os recursos que o CSS oferece, isso porque cada versão do navegador se adapta a um novo recurso, exemplo: o Flexbox não oferecia uma compatibilidade para versões antigas do Internet Explorer do 9 para baixo, logo na versão 10 já temos a possibilidade de uso desse valor. Se formos ver em um exemplo ainda mais simples, imagine você dev, tendo que desenvolver um sistema de delivery de comida, e nesse sistema você tem um público de diferentes conhecimento sobre tecnologia que vão desde pessoas leigas ao público que tenha formação na área. Claro que uma pessoa já estudada ou conhecimento digamos que meio caminho, terá total noção sobre a atualização de um navegador, só que nem todos sabem dessa importância e ficam com medo de fazer algo que prejudique a máquina. Então temos aí um caso que o uso de flex não sejam recomendável, pois, precisamos pensar em formas dessa informação ser vista bonitinha por todos, então quem sabe um display inline não resolva, né?! O display inline roda normalmente em navegadores antigos, claro que nem sempre será essa luta de adotar soluções antigas que sejam em partes complicadas de trabalhar, mas tudo é uma questão de entender seu alvo ou seja quem é seu usuário, agora você como desenvolvedor tem que está ciente sobre como usar cada propriedade e seu valor nos diferentes cenários como já vimos antes.

Extras

Lembra quando falamos sobre a organização de seu CSS? Para mantê-lo organizado estude bastante sobre as metodologias, existem algumas bem legais como Atomic Design, BEM, OOCSS e SMACSS, além dessas citadas pode usar o GLC(Global, Local Class). Para fechar o post devemos estudar o CSS por um todo, se você está no começo da jornada evite pular as etapas e só vá para um framework CSS quando realmente tiver total domínio do que faz, pois, nem sempre usar um Bootstrap da vida será a melhor decisão a ser tomada, isso devido a grande quantidade de coisas que o framework carrega em seu core e que pode se tornar um peso ao seu site. Espero que tenha curtido esse post e até o próximo :) .

Creating an application with NextJS and Styled Components from scratch (Part 3)

André Rodrigues (Xor) — Sat, 08 Aug 2020 21:52:10 +0000

(Image taken from Google)

In today's post we will see about the use of props in our components, props will help us throughout the development of our application to customize the characteristics of our components without the need to repeat a lot of code in our Styled Components file. You must be thinking that working with props is complicated, but its use is not complicated as you might think. Let's see this in practice now.

In the component folder create a folder called Header, after creating the directory, create two files within it, one named index.jsx and the other named style.js. Now we will create the code for our component, below the React and Styled Component code.

import React from 'react';
import { Topo } from './style';
const Menu = () => {
  return (
    <>
     <Top></Top>
    </>
  );
}

export default Menu;

Important note: To use Styled Component's features externally you should not forget to import it into style.js, below the right way you should follow.

import styled from 'styled-components';

Now we can proceed with styling our component.

import styled from 'styled-components';

const Top = styled.header`
 background-color: #333;
 padding: 10px;
 width: 100%;
`;

Wow! Wait, where's the use of props over there? Calm down, let's now add to our code.

import React from 'react';
import { Topo } from './style';
const Menu = () => {
  return (
    <>
     <Top Background={{ color: "#333" }}></Top>
    </>
  );
}

export default Menu;

import styled from 'styled-components';

const Top = styled.header`
 background-color: ${props => props.Background.color};
 padding: 10px;
 width: 100%;
`;

Conclusion:

We can conclude that when working with props, I have flexibility regarding the customization of our components, also avoiding some repetitions. Did you like it? in the next post we will see about some definitions of standards of our theme. A big hug, and until the next post.

Part1
Part2

Creating an application with NextJS and Styled Components from scratch (Part 2)

André Rodrigues (Xor) — Mon, 03 Aug 2020 21:19:22 +0000

Understanding Styled Components

Creating components in React is not complicated, but at the same time we have a difficulty in modeling the characteristics of these components, you must be confused with what I said now, right? But to answer that, just look at our Hello World where we had no trouble creating our component. Now let's dig deeper into the thing, suppose that in our application we had the following code:

const headerStyle = {
  backgroundColor: 'red';
  height: '40vh';
  paddingBottom: '4rem';
  paddingTop: '4rem';
  width: '100%';
};
const logoStyle = {
  fontSize: '16px',
  textAlign: 'center'
};

<header style={divStyle}>
  <h1 style={logoStyle}>My Logo</h1>
</header>

At first you might think that due to the size of this code, nothing would be harmed, right? But you are wrong, when we create our CSS inline together with the component we run the risk of filling our file with a sea of code, and this ends up harming the support of our application. Ok, we could also put these styles in an external file, but we would also go through possible problems regarding the support of each component and even in the separation of its characteristics and its children, it was thinking about these problems that Styled Components appeared.

Styled Components comes to simplify the way we work with each component, I mean: in its characteristics. To better understand how it works, let's get our hands dirty. Open the project folder we are developing on a terminal, then download the Styled Component package using the following command:

 npm install --save styled-components

Now we will create a folder at the root of our project with the name of Components, right after we will create another folder inside the Components with the name of HelloWorld, once we can create a file named Style.js. To create our components, we first need to import the styled component, below how to import the styled component.

 import styled from 'styled-components'

Now let's create our Hello World component with its features.

 import styled from 'styled-components'
 const HelloWorld = styled.h1`
  color: #333;
  font-family: arial;
  font-size: 2.6rem;
 `;
 export { HelloWorld };

Very simple, right ?! But don't forget that to use it you need to import it into the page you want to place. Below is an example of the component in use.

import React from 'react';
import { HelloWorld } from './Components/HelloWorld/Style';
const App = () => {
  return (
    <>
     <HelloWorld>Hello World!</HelloWorld>
    </>
  );
}

export default App;

Did you like what we did today? In the next post we will understand the use of props in our components, a big hug and until the next post :).

Part1
Part3

Creating an application with NextJS and Styled Components from scratch (Part 1)

André Rodrigues (Xor) — Mon, 03 Aug 2020 07:45:22 +0000

In this post, I will show you how simple it is to create an application with NextJS and Styled Components.

It is no secret that React has conquered the world of the web, but, unfortunately, when using React alone, we have several problems regarding the 100% friendly development of components and even in SEO issues. Aiming at these problems, some tools were created to help us in the process of creating our pages. We will use two tools that will leave our site with good SEO and improve the development and support of each component created. They are: NextJS and stylish components.

Getting to know NextJS

NEXT.js is maintained by Zeit and the open source community, and aims to optimize the process of developing a React application, offering components for routes, SSR support (server-side rendering), in addition to a webpack already configured for the React and ES6 and ES7 transpilation that include features like asynchronous and waiting. Even so, it keeps the start simple and flexible enough to scale the project to the size you need.

Starting a project from scratch with Next

To start our application, we will create a folder named my-portfolio, I recommend that you do this step through the terminal.

$ mkdir my-portfolio

After creating the folder, open it using the following command:

$ cd my-portfolio

Now we will actually bring our application to life, we follow the following steps:

$ yarn init #It will create a package.json file.
$ yarn add react react-dom next #Add dependencies

Now to see the magic happen, let's create a folder called pages at the root of the project. This folder is the only condition for Next to work correctly, routes are defined based on the contents of that folder. Also create an index.js file where the home page component will be defined.

$ mkdir pages #create folder
$ touch pages/index.js #creates an index.js file inside the folder

Now let's open the project folder in a code editor (I recommend using VSCode) and add the code that will display the message "Hello, world!", Below the code to be written in index.js.

import React from 'react';
const Index = () => {
  return (
   <>
    <h1>Hello World!</h1>
   </>
  );
};

The Next framework provides a pre-configured development server integrated with hot reload and Webpack. Just add these lines to the package.json:

```Line added in package.json
"scripts": {
"dev": "next"
}



To see our result, we run the yarn dev command to start the development server.



```Terminal-control
$ yarn dev

So, did you like? We are just starting our project, there are a lot of cool things coming up. I hope you enjoyed this first part, a big hug and until the next :).

Part2
Part3

Rotina Digital (Parte 1)

André Rodrigues (Xor) — Wed, 20 May 2020 11:45:38 +0000

(Imagem acima foi retirada do Google)

Sobre a era digital:

Estamos em um período onde a cada momento surgem soluções para problemas que antes eram chatos de se resolver, diante disso a tecnologia nos ajudou, bastante e nos trouxe um certo conforto a nossa rotina. Vale observar que muitas dessas atividades antes da chegada da tecnologia, gastava um período maior para resolver, como exemplo temos as pesquisas que poderiam durar mais de meses e até anos para se chegar a um resultado x. Desde que a tecnologia surgiu, a vida do homem nunca mais foi a mesma, isso porque ela vem nos poupando de muitos trabalhos pesados, mas afinal quando surgiu a tecnologia? A tecnologia faz parte da humanidade desde os tempos remotos, porém cada época teve um avanço diferente nos modelos de aplicação, no atual momento estamos em uma das eras tecnológicas mais desenvolvidas, no último século o mundo passou por uma explosão tecnológica com um constante desenvolvimento de tecnologias na área de produtos e informações que estão transformando o mundo. Atualmente, vemos o desenvolvimento de maquinas e equipamentos que vem facilitando a vida dos homens e mulheres nas mais diversas áreas na educação no trabalho, no meio ambiente, na nossa própria casa, etc.

Tecnologia aliada da humanidade

O ser humano sempre colocou a sua inteligência, um dos dons concedidos por Deus, para desenvolver ferramentas que melhorassem a sua vida. E na luta para vencer os obstáculos e ter um conforto em sua vida, o ser humano foi desenvolvendo a tecnologia. A tecnologia vem acelerando processos da vida humana, seja uso pessoal, ou no uso do mercado na produção e prestação de serviços. Nos últimos tempos a tecnologia vem se desenvolvendo de forma absurdamente rápida. Um exemplo disso é se analisarmos fotos dos anúncios dos resultados dos dois últimos conclaves (eleição do Papa – chefe da Igreja Católica), onde se observa em 2005 quando foi anunciado o nome do papa Bento XVI, onde haviam poucas máquinas fotográficas ou filmadoras para registrarem o momento. Hoje no ano de 2020 temos soluções que a muito tempo atrás, muitas pessoas desacreditaram que iria ter e que iria trazer um forte impacto na nossa rotina, para quem nasceu antes da virada do milênio sabe muito bem do que estou falando e viu esse processo de transformação ao seu redor. Lembra de quando nossos telefones eram somente em linha e que todo mês tínhamos que pagar um plano, pois é, hoje com os avanços da tecnologia pagando em torno de 50 reais aqui no Brasil, temos uma internet que dá para desfrutar longos minutos de ligações pelo Whatsapp. Claro que isso só foi possível com a melhoria da qualidade na internet e até mesmo com surgimento da funcionalidade de ligações online, mas nem tudo é um doce, logo de primeira as operadoras de telefone sofreram um forte impacto com essa mudança devido à redução no número de contratos em seus pacotes de ligação, muitas das empresas telefônicas tiveram que se adaptar.

Transformações de alto impacto com a internet

Com a chegada da internet tivemos avanços desde a comunicação e até mesmo na parte econômica, isso devido a facilidade de levar os produtos além da prateleira e conquistar diversos clientes em qualquer canto do Mundo. Podemos simplesmente está no Japão e vender no conforto de nossas casas uma simples peça de roupa. Mas mesmo com esse conforto ainda tínhamos um desafio, esse desafio é a forma de recebermos o que vendemos, afinal ninguém quer vender um produto e ficar sem receber o dinheiro. No próximo post estarei falando sobre pagamentos online, cripto moedas e Blockchain. Espero que tenha gostado dessa primeira parte e até a próxima.