Iniciando com NativeScript Sidekick
Em 2017, a Telerik anunciou tanto o NativeScript Sidekick quanto o Marketplace do NS. Lembro que na época, isso foi algo muito legal, mas algo que eu não explorei a fundo, meio que abandonei, porém, há algum tempo venho dando mais atenção a ele, por isso hoje iremos falar sobre o Sidekick e como ele pode nos ajudar ao desenvolvermos app com NS.
O que é o Sidekick?
O próprio site do NativeScript diz:
“O NativeScript Sidekick é um cliente de GUI leve, mas poderoso, que é executado em sua área de trabalho e está disponível para Windows, macOS e Linux. Ele aprimora o poder da interface de linha de comando do NativeScript (CLI) e simplifica todo o processo de desenvolvimento de um aplicativo móvel. O Sidekick foi projetado para ser um complemento discreto que complementa seu editor de código favorito, o IDE, o sistema de controle de origem e quaisquer outras ferramentas que você usa.”
Sabendo disso, precisamos entender que ele contribui com o desenvolvimento de vários lados, desde a criação do projeto, depuração de código, plugins e etc.
Primeiros passos
Ok! Já sabemos para o que serve, então vamos configura-lo e conhecer algumas coisas dele. Primeiro, precisamos fazer o download dele (disponível para MacOS, Windows e Linux).
A instalação é bem simples, provavelmente logo quando o sidekick iniciar, ele ira pedir para instalar a ultima versão do NativeScript CLI, ao concluir, siga o passo a passo para concluir a configuração. E se tudo correu como o planejado, você deve ver uma tela similar a essa:
Com tudo configurado, vamos ver algumas coisas do SK para entendermos quanto tempo é possível economizar utilizando.
Criação do aplicativo
Não que seja ruim criar um projeto no terminal, isso é super simples, um comandinho aqui e outro ali e voilà. Mas se podemos fazer isso por uma interface gráfica com uns cliques, por que não? Dito isso, vamos clicar no botão azul na tela inicial “Create App”, nossa tela será assim:
Por padrão, o NS te trás a possibilidade de você utilizar alguns templates para iniciar sua aplicação, seja utilizando o terminal ou o sidekick, a quantidade de template varia de framework para framework. Nesse momento que escrevo esse artigo, o Angular possui 6 (Blank, Drawer Navigation, Master-Deital (with knvey), Master-Detail (with firebase), Enterprise Auth), Javascript possui 6 também (os mesmos do Angular), TypeScript mantém a mesma quantidade e os mesmos templates, e por fim, o Vue.js, que possui 3 templates (Blank, Drawer Navigation, Master-Detail). Nesse artigo, iremos utilizar o Vue.js (assim como nos outros rs) e o template Blank.
Com o framework e o template já escolhidos, vamos escolher o nome do nosso App, eu chamarei de FacebookTimeline (chega de fazer instagram kk), em seguida vamos escolher o Project Folder e deixaremos marcado a opção “Automatically set App ID” (caso você queira escolher um App ID, pode desmarcar essa opção). Com o app criado, nossa tela sera assim
Conhecendo Sidekick
Agora vem a parte legal e tudo o que ele pode nos oferecer, logo de cara, iremos ver algumas opções, como Device, Properties, Plugins, Assets, Open in Editor, Terminal, Build e etc. Isso é um conjunto de ferramentas que ira nos ajudar durante o nosso desenvolvimento.
Devices
A aba device nos permite configurar todos os Virtual Device que iremos utilizar no nosso aplicativo, basicamente ele pega os devices que possuímos no X-Code, Android Studio, Genymotion e etc. Ao clicarmos em Virtual Device Launcher, iremos dar de cara com essa tela:
Properties
Nessa aba iremos configurar as informações sobre o nosso App, isso é muito comum de se fazer pelo X-Code, Android Studio e etc. Mas graças a Telerik, podemos fazer isso para ambas as plataformas em um só local.
Em General, iremos alterar o Description, Application Identifier e Author, ficando assim:
Como temos diferenças no iOS e Android, existem algumas configurações independentes, porem, não será necessário fazer nenhuma. Mas é legal saber que na aba iOS, conseguimos mudar Application Version, Application Build Version, Deployment Target, Device Families, Background Modes e etc. E no Android: Application Version, Application Version Code, Minimum SDK Version, Target SDK Version, Orientation e Permissions (isso mesmo, para adicionar uma permissão, basta marcar um check e pronto ❤)
Plugins
Em plugins, podemos gerenciar nossas dependências (basicamente o que fazemos ao abrir o package.json), mas o legal dessa aba é, que alem de podermos ver nossas dependências, podemos instalar diretamente da mesma, ele nos permiti visualizar os plugins disponíveis através de uma interface bem simples e instalar.
Assets
Uma das abas que mais gosto é o Assets, bem similar ao do X-Code, nos permiti alterar os icons e splashscreen de forma simples, mas alem disso, temos o Generator, basta subir uma imagem (com o tamanho de 1024x1024) e ele gera todos os icons e splashscreen com os tamanhos certos automaticamente. Dito isso, vamos testar, no Google eu peguei uma imagem do icone do facebook, com o tamanho 1024x1024.
Adicionei ao Icon e ele nos perguntara se queremos gerar para Android e iOS. Vamos clicar em Generate. O processo é bem rápido e logo em seguida, basta entrar nas abas iOS e Android para ver o resultado.
Criando App
Chega de papinho, já conhecemos os benefícios do Sidekick, agora que já iniciamos nosso projeto por ele, e adicionamos nosso icone, vamos fazer a tão esperada timeline. É importante que possua conhecimento prévio sobre NS + Vue, caso esse seja seu primeiro contato, recomendo dar uma lida nos meus artigos anteriores.
Logo de cara, iremos ver que a estrutura é diferente da utilizada nos outros artigos, então vamos deixar tudo isso mais legal e parecido com um projeto Vue.
Primeiro vamos editar o arquivo app.js que está na pasta app, ficando assim:
Agora vamos deixar mais parecido com o Facebook, primeiro vamos editar nosso Header, para isso vamos editar o arquivo _app-variables.scss que esta na pasta raiz, nesse arquivo, iremos mudar apenas a variavel $accent-dark para o hexadecimal #3b599. Em seguida, iremos apenas trocar o texto exibido no header para Timeline, no arquivo Home.vue (na pasta components), chegando ao seguinte resultado:
Agora, precisamos criar nossos posts, então vamos criar um componente post na pasta components.
Com isso, ja temos basicamente nossa timeline pronta, só precisamos editar agora o Home.vue para chamar nosso componente e colocarmos o Scrollview.
Resultado ❤️
Com isso conseguimos desenvolver uma aplicação simples (como de costume) utilizando NS + Vue + Sidekick.
Todo o código fonte está disponível no Github
