Creating real time applications with Angular and Firebase

•

0 likes•405 views

This document discusses how to create real-time applications using Angular and Firebase. It covers Firebase features like the real-time database, authentication, cloud functions, and hosting. It also discusses how to connect Angular applications to Firebase using the AngularFire library and shows demos of retrieving and updating data from Firebase in an Angular application.

Technology

Creating real time applications with
Angular and Firebase
Loiane Groner
@loiane

Agenda
● Firebase overview
● Firebase Database
● Connecting to Firebase
● Angular
● Firebase Authentication
● Cloud Functions
● Firebase Extensions
● Firebase Hosting
@loiane

● Software Engineer | Business Analyst by day
● Blog / Youtube by night
○ Loiane.com
○ youtube.com/loianegroner
Loiane Groner
@loiane

What is Firebase?
Realtime database by Google
...
@loiane

Firebase Database: Realtime Database x Cloud Firestore
● Great for real time applications
● Synchronizes the data between different devices
● Cache for oﬄine support
● NoSQL database
@loiane

There is also an easier way to
connect to Angular
(or other frameworks)
@loiane@loiane

@loiane
Firebase conﬁg
src/environment/environment.ts

@loiane
Don't forget to publish your rules!

@loiane
Firebase Auth + Angular + Material
https://github.com/AnthonyNahas/ngx-auth-firebaseui

Cloud Functions
● Deﬁne individual functions that will run on Google Cloud
○ Additional logic to the front-end application
● Node.js, Python, Go
● Different triggers are available
@loiane

@loiane
Cloud Functions: Node.js + TypeScript

Great way of adding
functionality with no code!
@loiane@loiane

Want to learn more?
● Firebase Docs https://ﬁrebase.google.com/docs
● Angular Docs https://angular.io
● Angular Fire
https://github.com/angular/angularﬁre
● Sample Source Code
https://github.com/loiane/angular-ﬁrebase-heroes
@loiane

Using cutting edges technologies like Node.js, Angular.js and the emscripten project, you can create super-powerful web app that benefit from the codebase of already existing native application or library. In this presentation, I explain how we used emscripten to port GDevelop, an open source game creator, to a webapp called GDevApp.com which is virtually as powerful and capable as the native app! With asm.js being developed and integrated to browsers and with the development of emscripten, we are likely to see more and more applications and games made using this approach.

PHP Berkshire October 2015

David Yell

Message Queues in Ruby - An Overview

Pradeep Elankumaran

TechTalk: What's New with Perfecto?

Lizzy Guido (she/her)

Android DevConference - Scaling Mobile Development

iMasters

JQuery Conf Berlin - Ondrisek - From Java To AngularJS (without pain)

Barbara Ondrisek

Your API is not a Website!Apigee | Google Cloud

Android instant app

Benjamin Cheng

Develop Windows 8 & Windows Phone apps using crucial Google APIs

Isham Mohamed Iqbal

React Native

Software Infrastructure

Angular Routing - Angular Hack Day Melbourne 2019

Jernej Kavka (JK)

Building plugins like a pro

Marko Heijnen

Firebase Adventures - Real time platform for your apps

Juarez Filho

Google Firebase Presentation

Aeni Patel

What's hot

Say hello world with angular 5

Abhishek Mallick

Building End to-End Web Apps Using TypeScript

Gil Fink

Hello PhoneGap

mwbrooks

How I built web services in CakePHP

David Yell

ApacheCon 2011

mwbrooks

Are you ready to adopt GraphQL?

Siva Prasad Rao Janapati

一次项目的探险旅程

Tony Deng

The Big Wave of Indian Startups - Almost Effortless Entrepreneurship Using Ruby

Pradeep Elankumaran

From a native app to a webapp using Node.js and emscripten

Florian Rival

PHP Berkshire October 2015

David Yell

Message Queues in Ruby - An Overview

Pradeep Elankumaran

TechTalk: What's New with Perfecto?

Lizzy Guido (she/her)

Android DevConference - Scaling Mobile Development

iMasters

JQuery Conf Berlin - Ondrisek - From Java To AngularJS (without pain)

Barbara Ondrisek

Your API is not a Website!Apigee | Google Cloud

Android instant app

Benjamin Cheng

Develop Windows 8 & Windows Phone apps using crucial Google APIs

Isham Mohamed Iqbal

React Native

Software Infrastructure

Angular Routing - Angular Hack Day Melbourne 2019

Jernej Kavka (JK)

Building plugins like a pro

Marko Heijnen

What's hot (20)

Say hello world with angular 5

Building End to-End Web Apps Using TypeScript

Hello PhoneGap

How I built web services in CakePHP

ApacheCon 2011

Are you ready to adopt GraphQL?

一次项目的探险旅程

The Big Wave of Indian Startups - Almost Effortless Entrepreneurship Using Ruby

From a native app to a webapp using Node.js and emscripten

PHP Berkshire October 2015

Message Queues in Ruby - An Overview

TechTalk: What's New with Perfecto?

Android DevConference - Scaling Mobile Development

JQuery Conf Berlin - Ondrisek - From Java To AngularJS (without pain)

Your API is not a Website!

Android instant app

Develop Windows 8 & Windows Phone apps using crucial Google APIs

React Native

Angular Routing - Angular Hack Day Melbourne 2019

Building plugins like a pro

Similar to Creating real time applications with Angular and Firebase

Firebase Adventures - Real time platform for your apps

Juarez Filho

Google Firebase Presentation

Aeni Patel

Google Firebase presentation - English

Alexandros Tsichouridis

Flutter Festival IIT Goa: Session IV

SEJALGUPTA44

Relearning SharePoint Development

bgerman

Firebase Adventures - Going above and beyond in Realtime

Juarez Filho

#MBLTdev: Разработка backend для мобильного приложения с использованием Googl...

e-Legion

Cloud computing overview & running your code on Google Cloud (Jun 2019)

wesley chun

This is a 1-hr tech talk designed for developers to give a comprehensive, vendor-agnostic overview of cloud computing, primarily targeting educators in the higher education market but is open to any developer. This is followed by an introduction to products in Google Cloud, focusing on the serverless products. The talk ends with several inspirational examples of what can be built with Google Cloud.

Firebase integration with Flutter

pmgdscunsri

Use Firebase to Host Your Flutter App on the Web

Flutter Agency

Firebase Tech Talk By Atlogys

Atlogys Technical Consulting

Firebase Fundamentals

Mariam Aslam

AWS Amplify vs. Firebase Selecting the Best Backend for Your Apps.pdf

Laura Miller

Google Firebase

Mukul parmar

Firebase .pptx

GDSCIIITDHARWAD

The Firebase tier for your mobile app - DevFest CH

Matteo Bonifazi

Creating No Code Web Apps with FME Server

Safe Software

Creating web applications is easy with FME Server Apps! Without ever having to write a single line of code, you can create beautiful web apps that work with any data source. Plus, with Gallery Apps, you can get organized by having all your applications in one central place. In this webinar, see how you can: - Create and manage Workspace Apps that run workspaces from a web browser - Create a landing page for all your workspace apps and URLs - Provide specific user groups access to content - Apply best practices when working with FME writers, published parameters, and more Never feel scattered across the web again! With FME, bring all your data together into one single platform, with no coding required.

Univeral App using O365 API

Senthamil Selvan

Build Enterprise Level Solution using Logic Apps ,Functions and Graph API

Abhishek Kumar

Building Business Applications in Office 365 SharePoint Online Using Logic Apps

Prashant G Bhoyar (Microsoft MVP)

Similar to Creating real time applications with Angular and Firebase (20)

Firebase Adventures - Real time platform for your apps

Google Firebase Presentation

Google Firebase presentation - English

Flutter Festival IIT Goa: Session IV

Relearning SharePoint Development

Firebase Adventures - Going above and beyond in Realtime

#MBLTdev: Разработка backend для мобильного приложения с использованием Googl...

Cloud computing overview & running your code on Google Cloud (Jun 2019)

Firebase integration with Flutter

Use Firebase to Host Your Flutter App on the Web

Firebase Tech Talk By Atlogys

Firebase Fundamentals

AWS Amplify vs. Firebase Selecting the Best Backend for Your Apps.pdf

Google Firebase

Firebase .pptx

The Firebase tier for your mobile app - DevFest CH

Creating No Code Web Apps with FME Server

Univeral App using O365 API

Build Enterprise Level Solution using Logic Apps ,Functions and Graph API

Building Business Applications in Office 365 SharePoint Online Using Logic Apps

Recently uploaded

Neuro-symbolic is not enough, we need neuro-*semantic*

Frank van Harmelen

Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”. All of this illustrated with link prediction over knowledge graphs, but the argument is general.

LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...

DanBrown980551

Do you want to learn how to model and simulate an electrical network from scratch in under an hour? Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)! During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook. PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides: - A fully editable and extendable library for grid component modelling; - Visualization tools to display your network; - Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses; The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well. What you will learn during the webinar: - For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills; - For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.

FIDO Alliance Osaka Seminar: Overview.pdf

FIDO Alliance

FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf

FIDO Alliance

Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...

Jeffrey Haguewood

Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows. We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases. This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams. Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.

Monitoring Java Application Security with JDK Tools and JFR Events

Ana-Maria Mihalceanu

Accelerate your Kubernetes clusters with Varnish Caching

Thijs Feryn

GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...

James Anderson

Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management. The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM). Speakers: Bob Boule Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle. Gopinath Rebala Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.

Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...

UiPathCommunity

💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™: See how to accelerate model training and optimize model performance with active learning Learn about the latest enhancements to out-of-the-box document processing – with little to no training required Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath. Speakers: 👨‍🏫 Andras Palfi, Senior Product Manager, UiPath 👩‍🏫 Lenka Dulovicova, Product Program Manager, UiPath

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf

FIDO Alliance

When stars align: studies in data quality, knowledge graphs, and machine lear...

Elena Simperl

FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf

FIDO Alliance

Epistemic Interaction - tuning interfaces to provide information for AI support

Alan Dix

Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024 https://alandix.com/academic/papers/synergy2024-epistemic/ As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.

DevOps and Testing slides at DASA Connect

Kari Kakkonen

Encryption in Microsoft 365 - ExpertsLive Netherlands 2024

Albert Hoitingh

Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...

Product School

GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...

Sri Ambati

FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf

FIDO Alliance

How world-class product teams are winning in the AI era by CEO and Founder, P...

Product School

Designing Great Products: The Power of Design and Leadership by Chief Designe...

Product School

Recently uploaded (20)

Neuro-symbolic is not enough, we need neuro-*semantic*

LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...

FIDO Alliance Osaka Seminar: Overview.pdf

FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf

Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...

Monitoring Java Application Security with JDK Tools and JFR Events

Accelerate your Kubernetes clusters with Varnish Caching

GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...

Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf

When stars align: studies in data quality, knowledge graphs, and machine lear...

FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf

Epistemic Interaction - tuning interfaces to provide information for AI support

DevOps and Testing slides at DASA Connect

Encryption in Microsoft 365 - ExpertsLive Netherlands 2024

Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...

GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...

FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf

How world-class product teams are winning in the AI era by CEO and Founder, P...

Designing Great Products: The Power of Design and Leadership by Chief Designe...

Creating real time applications with Angular and Firebase

2. Creating real time applications with Angular and Firebase Loiane Groner @loiane

3. Agenda ● Firebase overview ● Firebase Database ● Connecting to Firebase ● Angular ● Firebase Authentication ● Cloud Functions ● Firebase Extensions ● Firebase Hosting @loiane

4. ● Software Engineer | Business Analyst by day ● Blog / Youtube by night ○ Loiane.com ○ youtube.com/loianegroner Loiane Groner @loiane

5. What is Firebase? Realtime database by Google ... @loiane

6. @loiane

7. @loiane

8. @loiane

9. @loiane

10. Database

11. @loiane

12. @loiane

13. Firebase Database: Realtime Database x Cloud Firestore ● Great for real time applications ● Synchronizes the data between different devices ● Cache for oﬄine support ● NoSQL database @loiane

14. @loiane

15. @loiane

16. @loiane

17. @loiane

18. Connecting to our app

19. @loiane

20. @loiane

21. @loiane

22. @loiane

23. @loiane

24. There is also an easier way to connect to Angular (or other frameworks) @loiane@loiane

25. @loiane

26. Angular

27. Demo @loiane

28. @loiane

29. @loiane

30. Schematics @loiane

31. @loiane Setup

32. @loiane Firebase conﬁg src/environment/environment.ts

33. @loiane

34. @loiane Importing @angular/ﬁre

35. @loiane Retrieving a collection

36. @loiane Angular Template

37. @loiane Updating a document

38. @loiane How does it work?

39. @loiane Behind the scenes

40. @loiane Streams => Angular + RxJS

41. Important Notes!

42. @loiane

43. @loiane Don't forget to publish your rules!

44. Authentication

45. @loiane Firebase Authentication

46. @loiane Firebase Auth + Angular + Material https://github.com/AnthonyNahas/ngx-auth-firebaseui

47. @loiane @angular/ﬁre

48. @loiane Auth page: admin users

49. Cloud Functions

50. @loiane Cloud Functions: Node.js

51. Cloud Functions ● Deﬁne individual functions that will run on Google Cloud ○ Additional logic to the front-end application ● Node.js, Python, Go ● Different triggers are available @loiane

52. @loiane Cloud Functions: Node.js

53. @loiane Cloud Functions: Node.js

54. @loiane Cloud Functions: Node.js + TypeScript

55. @loiane Cloud Functions: Node.js + TypeScript

56. Cloud Functions: Logs @loiane

57. Firebase Extensions

58. @loiane

59. Great way of adding functionality with no code! @loiane@loiane

60. @loiane Demo

61. @loiane

62. @loiane

63. @loiane

64. @loiane

65. @loiane

66. Firebase Hosting

67. @loiane Angular CLI: ng deploy

68. @loiane Integration with CI

69. @loiane CI

70. Pricing

71. Pricing @loiane

72. Pricing @loiane

73. Want to learn more? ● Firebase Docs https://firebase.google.com/docs ● Angular Docs https://angular.io ● Angular Fire https://github.com/angular/angularfire ● Sample Source Code https://github.com/loiane/angular-firebase-heroes @loiane

74. Questions? @loiane

75. Thank you! Obrigada! @loiane

Creating real time applications with Angular and Firebase

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Creating real time applications with Angular and Firebase

Similar to Creating real time applications with Angular and Firebase (20)

Recently uploaded

Recently uploaded (20)

Creating real time applications with Angular and Firebase