Travel feeds
-
Upload
social-tourism-marketing -
Category
Documents
-
view
412 -
download
0
Transcript of Travel feeds
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, [email protected]
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/