Tag / Angular

by evelyn

Google Developer Experts

O Programa GDE (Google Developer Experts) é uma iniciativa do Google que reconhece e premia desenvolvedores experientes e especialistas em tecnologias específicas do ecossistema Google.

Um Pouco Sobre o Programa Google Developer Experts

O Programa GDE (Google Developer Experts) é uma iniciativa do Google que reconhece e premia desenvolvedores experientes e especialistas em tecnologias específicas do ecossistema Google. Esses especialistas são selecionados com base em seu conhecimento profundo e contribuições significativas para a comunidade de desenvolvedores.

Os GDEs são profissionais altamente qualificados em áreas como desenvolvimento de software, design de interface do usuário, análise de dados, machine learning, internet das coisas (IoT) e muito mais. Eles demonstram habilidades excepcionais e um compromisso notável em compartilhar seu conhecimento e experiência com outros desenvolvedores.

Continue reading →
by evelyn

Um pouco sobre o IONIC framework

O Ionic é um framework de código aberto para o desenvolvimento de aplicativos móveis híbridos e progressivos(PWA). Ele permite criar aplicativos para várias plataformas, como iOS, Android e web, usando tecnologias web como HTML, CSS e JavaScript.

O Ionic é um framework de código aberto para o desenvolvimento de aplicativos móveis híbridos e progressivos(PWA). Ele permite criar aplicativos para várias plataformas, como iOS, Android e web, usando tecnologias web como HTML, CSS e JavaScript.

O IONIC utiliza o Capacitor como base para acessar os recursos nativos dos dispositivos, como câmera, GPS, contatos, etc. Além disso, o IONIC usa o TypeScript e o Angular para prover uma solução de mais alto nível em termos de código e arquitetura. O IONIC também possui uma interface de linha de comando (CLI) que facilita a criação, o gerenciamento e o teste dos aplicativos.

Principais recursos e benefícios do Ionic:

  1. Desenvolvimento multiplataforma: Com o Ionic, é possível criar aplicativos para várias plataformas, como iOS, Android e web, a partir de um único código-base. Isso economiza tempo e esforço, evitando a necessidade de desenvolver aplicativos separados para cada plataforma.
  2. Componentes estilizados: O Ionic possui uma biblioteca extensa de componentes de interface de usuário pré-construídos, como botões, listas, menus, abas, sliders e muito mais. Esses componentes são estilizados e prontos para uso, permitindo criar interfaces de usuário atraentes e consistentes em seus aplicativos.
  3. Facilidade de uso: O Ionic é projetado para ser fácil de usar, especialmente para desenvolvedores web que estão familiarizados com tecnologias como HTML, CSS e JavaScript. Ele utiliza conceitos familiares, como a criação de páginas e o uso de componentes, facilitando a transição para o desenvolvimento de aplicativos móveis.
  4. Integração com Angular: O Ionic é construído em cima do Angular, o que significa que você pode aproveitar os recursos poderosos do Angular para criar aplicativos mais robustos. Isso inclui recursos como gerenciamento de estado, injeção de dependência e a capacidade de criar componentes reutilizáveis.
  5. Acesso a recursos nativos: Com o Ionic, é possível acessar recursos nativos do dispositivo, como câmera, GPS, armazenamento local e notificações push, usando plugins específicos do Ionic ou do Capacitor (uma biblioteca de abstração para acessar recursos nativos).
  6. Comunidade e ecossistema: O Ionic possui uma comunidade ativa e um ecossistema robusto de plugins, temas e bibliotecas adicionais. Isso significa que você pode encontrar suporte, recursos adicionais e soluções para desafios comuns ao desenvolver aplicativos com o Ionic.
Continue reading →
by evelyn

Dialog Service

Angular Material
Angular Material

Um service de dialogs do Angular Material

A algum tempo venho implementando dialogs nos meus projetos, mais especificamente os do Angular Material, por serem de fácil implementação e digamos, maleáveis, até certo ponto, porém notei que muitos eu poderia reutilizar, nisso acabei criando um módulo para agrupar esses que são comuns entre vários outros módulos, dai nasceu o dialog.service

Continue reading →
by evelyn

Firebase Web – Zero to Hero parte 5

Adicionando um componente de signin ao projeto

HTML 5 + Firebase Authentication
HTML 5 + Firebase Authentication

Authentication parte 4

Criando componente de email e senha

Agora vamos adicionar um formulário de signin de email e senha

O Id do provider de autenticação de email e senha dentro do authentication é password, porém como fica semanticamente pobre para entendimento, eu costumo descrever o componente que crio para o formulário como auth/auth-email-password
Essa informação vem de firebase.auth.EmailAuthProvider.PROVIDER_ID, mas não se assuste, iremos ver isso mais tarde. =D

Então vamos codar, vamos adicionar o componente

ng g c auth/auth-email-password
CREATE projects/principal/src/app/auth/auth-email-password/auth-email-password.component.scss (0 bytes)
CREATE projects/principal/src/app/auth/auth-email-password/auth-email-password.component.html (34 bytes)
CREATE projects/principal/src/app/auth/auth-email-password/auth-email-password.component.spec.ts (707 bytes)
CREATE projects/principal/src/app/auth/auth-email-password/auth-email-password.component.ts (320 bytes)
UPDATE projects/principal/src/app/auth/auth.module.ts (379 bytes)
Continue reading →
by evelyn

Firebase Web – Zero to Hero parte 3

Vamos arrumar o layout, afinal, temos que deixar bonito 🤩

HTML 5+ Firebase Authentication
HTML 5+ Firebase Authentication

Authentication parte 2

Arrumando o layout

Vamos arrumar o layout, afinal, temos que deixar bonito 🤩

Primeiro, quero colocar um background na tela de auth, porém somente na tela de auth.
Mas como se é um component, e o background para ficar bom precisa ser estilizado no body?

Primeiro preciso de um background, adicionei um a pasta assets/images, pasta images essa que eu criei.
projects/principal/src/assets/images/auth-background.png

auth-background.png
auth-background.png
Continue reading →
by evelyn

Firebase Web – Zero to Hero parte 2

HTML 5+ Firebase Authentication
HTML 5+ Firebase Authentication

Authentication parte 1

Criando os módulos e components de auth

Vamos começar definindo o que fará parte do módulo authentication

O que costumo fazer é ter um módulo chamado, auth.module.ts
Para isso uso o comando de gerar módulo do CLI do Angular, o ng g(generate) m(module), no caso, ng g m auth, ele irá criar uma pasta chamada auth com o módulo dentro dela
Vamos nessa?

ng g m auth
CREATE projects/principal/src/app/auth/auth.module.ts (190 bytes)
Continue reading →
by evelyn

Firebase Web – Zero to Hero parte 1

Desenvolvendo uma aplicação web usando Angular acessando os recursos do Firebase

Angular + Firebase
Angular + Firebase

Desenvolvendo uma aplicação web usando Angular acessando os recursos do Firebase

Durante essa série de artigos iremos ver tudo que a aba Desenvolver do console do Firebase oferece:
Authentication, Database, Storage, Hosting,Functions

Nessa primeira parte iremos criar a aplicação Angular

E o que precisamos para isso?
Acredito que vc já tenha familiaridade com gerenciadores de pacotes, no caso uso o NPM https://www.npmjs.com/ e será com ele que os exemplos serão exemplificados 😋
Para ter o NPM instalado primeiramente instala o nodejs https://nodejs.org/en/, caso ainda não tenha, esse é o momento de instalá-lo

Continue reading →
by evelyn

Criando um projeto Angular sem aplicação na raiz

Criando um projeto Angular sem aplicação na raiz para que fique mais organizado

Por quê?

Costumo criar projeto Angular dessa forma por considerar que ficam muito mais organizados, pois todas as aplicações são adicionadas dentro da pasta projects

Vamos aos Passos

No console vc vai criar o projeto usando o ng new nome-projeto, porém usando –createApplication=false para não ciar aplicação e –interactive=false para que as opões de adicionar módulo de rota e escolha de pré processador css não sejam mostradas, já que como não será criado uma app, isso não terá efeito prático

ng new nome-projeto --createApplication=false --interactive=false
Continue reading →
by evelyn

Simples aplicação real time com Angular 4 e Firebase, parte 6

Como criar um novo usuário e também falo sobre rotas filhas

No artigo anterior falei sobre autenticar um usuário no firebase, nesse quero mostrar como criar um novo usuário e também falar sobre rotas filhas

Angular + Firebase
Angular + Firebase
#1 | #2 | #3 | #4 | #5 | #6
Disclaimer
Esses artigos foram escritos entre maio e junho de 2017, muita coisa mudou desde lá, então procure usar as libs e referências mais atualizadas para implementar os passos que são aqui descritos
fontes: https://github.com/evlymn/simplesapprealtime

Por questões de segurança, eu acredito, o firebase não implementa uma forma de listar os usuários registrados, o que vejo muito é usarem a base dados regular, linkando o uid do usuário com um novo registro e assim fornecendo outro dados que a api de autenticação não suporta, como endereço, etc… Mas existe um porém, lembrem-se que essa base de dados não é relacional, e esse é o primeiro pecado que temos que evitar, não trazer o mundo relacional para o Firebase #FicaDica

Vamos colocar a mão na massa então

Continue reading →
by evelyn

Simples aplicação real time com Angular 4 e Firebase, parte 5

Nesse artigo irei mostrar como fazer um formulário de login usando a api de autenticação do firebase.

Nesse artigo irei mostrar como fazer um formulário de login usando a api de autenticação do firebase.

Angular + Firebase
#1 | #2 | #3 | #4 | #5 | #6
Disclaimer
Esses artigos foram escritos entre maio e junho de 2017, muita coisa mudou desde lá, então procure usar as libs e referências mais atualizadas para implementar os passos que são aqui descritos
fontes: https://github.com/evlymn/simplesapprealtime

Uma situação que teremos que implementar para seguirmos na autenticação, são as rotas, sem elas o nosso aplicativo não saberá quem apresentar para login e cadastro de pessoas.

Bem, vamos lá, primeiramente iremos habilitar a autenticação
No console do firebase clique no link Authentication

Link Authentication
Continue reading →