Download pptx - Travel feeds

Transcript
Page 1: Travel feeds

Travel FeedsCurating RSS Feeds with AngularJS & Firebase

Page 2: Travel feeds

Yet Another Feed Reader!

It all started with a novel AngularJS RSS feed reader bydavidandsuzi.com - thanks, David Chang!With Travel Feeds, I took this application further● towards multiple feeds● adding Firebase as a persistence layer

ng-app.de/travel-feeds/by Eckard Ritter, [email protected]

Page 3: Travel feeds

Aggregating Multiple Feeds

Model: [{feed},{feed2},...]Feed JSON:{‘id’: ‘my_feed’, ‘url’: ‘http//:...’‘title’: ‘Title of My Feed’}

Page 4: Travel feeds

Organizing Feed Sources

Tag Lists:

Page 5: Travel feeds

Feed Selection and Search

AngularJS makes it simple:● Selecting a feed: ng-click● Searching a selected feed: simple AngularJS

data binding

Page 6: Travel feeds

How to save these 100+ feeds?

Server? Ok.

Client only?

(100+ RSS sources = 500+ items!)

Page 7: Travel feeds

Firebase vs. Server Side

● Data storage: no server side programming,

just static hosting (no application server needed)● Searching a specific feed: instant search

easier with AngularJS+Firebase, no AJAX ● Search across all feeds: instant search plus

instant update much easier● User interaction: extremely simple with

Simple Login (Facebook, Google …)

Page 8: Travel feeds

Firebase Data Storage

Page 9: Travel feeds

AngularJS & Firebase Instant Search

Page 10: Travel feeds

Full Text Search Across All Feeds

Just add these few lines this 1 line of code ...

… and search full text across all feeds.Amazing!AngularJS & Firebase goodnesses combined.

Page 11: Travel feeds

Adding Content for Full Text Search

Feed content is written to its JSON object:

Page 12: Travel feeds

Updating Full Text Search Items

Method: update “sources.<nr>.search”● if user is logged in● whenever a new feed is selected

click on a new feed for parsing and display fires update of Firebase with the previous feed!

Page 13: Travel feeds

Firebase Simple Login“Firebase Simple Login is a library that allows authentication using only client-side code. Easily authenticate users via email and password or through a number of third-party providers such as Facebook, Twitter, GitHub, and Google.”

Page 14: Travel feeds

Security Rules

Page 15: Travel feeds

Simple Login Settings

Page 16: Travel feeds

Simple Login Integration

Page 17: Travel feeds

Monitoring Authentication

Writing to “sources” in our Firebase requires Facebook login.

Full text update on selecting a new feed takes only place with logged-in users

Page 18: Travel feeds

Resources

● Slides for JSFest, as of September 9, 2014:

http://goo.gl/M64McH

● Travel Feeds: ng-app.de/travel-feeds/

● Links to related resources: ng-app.de

● As an ng-app: ng-app.de/apps/travel-feeds/

● Last, not least: firebase.com/docs/