Travel FeedsCurating RSS Feeds with AngularJS & Firebase

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, eckard.ritter@googlemail.com

Aggregating Multiple Feeds

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

Organizing Feed Sources

Tag Lists:

Feed Selection and Search

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

data binding

How to save these 100+ feeds?

Server? Ok.

Client only?

(100+ RSS sources = 500+ items!)

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 …)

Firebase Data Storage

AngularJS & Firebase Instant Search

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.

Adding Content for Full Text Search

Feed content is written to its JSON object:

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!

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.”

Security Rules

Simple Login Settings

Simple Login Integration

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

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/