tns plugin add nativescript-plugin-firebase
"nativescript-plugin-firebase": "^1.2.0"
module.exports = { apiUrl: "https://incandescent-fire-8397.firebaseio.com/" };
viewModel.init = function(){ firebase.init({ url: config.apiUrl }).then( function (instance) { console.log("firebase.init done"); }, function (error) { console.log("firebase.init error: " + error); } ); };
var fetchModule = require("fetch");
var firebase = require("nativescript-plugin-firebase");
login()
register()
app/shared/view-models/user-view-model.js
viewModel.login = function() { return firebase.login({ type: firebase.loginType.PASSWORD, email: viewModel.get("email"), password: viewModel.get("password") }).then( function (response) { config.uid = response.uid return response; }); }; viewModel.register = function() { return firebase.createUser({ email: viewModel.get("email"), password: viewModel.get("password") }).then( function (response) { console.log(response); return response; } ); };
handleErrors()
app/views/register/register.js
exports.register = function() { user.register() .then(function() { dialogsModule .alert("Your account was successfully created.") .then(function() { frameModule.topmost().navigate("views/login/login"); }); }).catch(function(error) { dialogsModule.alert({ message: error, okButtonText: "OK" }); }); }
load()
app/shared/view-models/grocery-list-view-model.js
//to get the index of an item to be deleted and handle the deletion on the frontend function indexOf(item) { var match = -1; this.forEach(function(loopItem, index) { if (loopItem.id === item.key) { match = index; } }); return match; } function GroceryListViewModel(items) { var viewModel = new observableArrayModule.ObservableArray(items); viewModel.indexOf = indexOf; viewModel.load = function() { var onChildEvent = function(result) { var matches = []; if (result.type === "ChildAdded") { if (result.value.UID === config.uid) { viewModel.push({ name: result.value.Name, id: result.key }); } } else if (result.type === "ChildRemoved") { matches.push(result); matches.forEach(function(match) { var index = viewModel.indexOf(match); viewModel.splice(index, 1); }); } }; return firebase.addChildEventListener(onChildEvent, "/Groceries").then( function() { console.log("firebase.addChildEventListener added"); }, function(error) { console.log("firebase.addChildEventListener error: " + error); } ) };
/Groceries
UID
add()
viewModel.add = function(grocery) { return firebase.push( '/Groceries', { 'Name': grocery, 'UID': config.uid }); };
delete()
viewModel.delete = function(index) { var id = viewModel.getItem(index).id; return firebase.remove("/Groceries/"+id+""); };
Firebase Hosting has just been upgraded with new features and a new open source serving architecture!
Since Divshot joined Firebase, we've been hard at work integrating some of the best parts of Divshot's technology into Firebase Hosting. Today we're happy to roll out some results of that effort with support for clean URLs, capture redirects, and an open source foundation!
Note: To take advantage of these new features, you'll need version 2.2.0 or greater of firebase-tools. Upgrade by running npm install -g firebase-tools.
firebase-tools
npm install -g firebase-tools
Everyone likes nice, easily memorable URLs, but when you're deploying a static website that can be tough. Clean URLs allow you to optionally drop .html extensions from your files when serving them. For example an about.html file will be served from /about instead of /about.html.
about.html
/about
/about.html
To enable Clean URLs for your project, simply specify the option in your firebase.json:
firebase.json
{ "cleanUrls": true }
Redirects in Firebase Hosting just got a little smarter with capture groups! Now it's possible to insert segments or entire portions of the source path into the destination. For example:
{ "redirects": [ { "source": "/blog/:post*", "destination": "https://blog.myapp.com/:post*", "type": 301 }, { "source": "/users/:id/profile", "destination": "/users/:id/newProfile", "type": 301 } ] }
You can visit the Firebase Hosting documentation for more information about the new configuration options.
All of these improvements were made possible by migrating our Hosting infrastructure onto Superstatic, the open source static web server originally developed at Divshot. Superstatic 4.0 is used by Firebase Hosting's servers as well as the Firebase CLI: when you run firebase serve your site will run locally exactly as it will appear on Firebase Hosting after you deploy.
firebase serve
Going open source with Superstatic also means that Firebase Hosting features can easily be integrated into your existing local development workflow. For instance, here's how you might use it in your Gulpfile with BrowserSync:
var gulp = require('gulp'); var superstatic = require('superstatic'); var browserSync = require('browser-sync').create(); gulp.task('serve', function() { browserSync.init({ server: { middleware: [superstatic({stack: 'strict'})] } }); gulp.watch('public/*.html').on('change', browserSync.reload); });
The 'strict' stack option ensures that Superstatic will run with precisely the same set of features that are available in production on Firebase Hosting.
'strict'
We hope you enjoy the new capabilities of Firebase Hosting and as always, happy hacking!
Udacity, an online education provider, just launched a new programming course called: Firebase Essentials For Android, which is designed to introduce you to using Firebase on Android. The course is available for free to all registered Udacity users.
During the course, you will create a collaborative, realtime shopping application for Android while learning Firebase-related topics like setting up listeners, authenticating users, structuring data, and creating security rules.
The course is split into five lessons and estimated to take 40-50 hours to complete. Each lesson consists of instructor videos, quizzes and one or more programming assignments. The first two lessons are available now, while lesson three is getting its final polishing. The final two lessons will be available in January.
The Firebase Essentials For Android course was created by Udacity in collaboration with the Firebase team at Google.
Want to see more content like this? Let us know by tweeting us @Firebase or reaching out on the Firebase Talk Google Group.
With the latest Firebase CLI release, it can do much more than just hosting. The latest release gives you the power to read and write data from your Firebase database.
These new data commands simplify tasks like seeding, exporting, and even transferring data from one Firebase database to another. Now you can spend less time writing data seeding scripts and more time developing your app.
This article will cover a few tricks to do some common data operation tasks.
To save data from the command-line use the data:set command.
data:set
firebase data:set /messages messages.json -f my-firebase-db
The first argument is the path you want to write the data to and the second is the JSON file to read from. The last argument is the Firebase to execute the operation against. If you use a / it will save to the root and overwrite existing data. This is perfect for seeding your database.
/
firebase data:set / seed.json -f my-firebase-db
When your database loses its test data or things get out of whack, you can reseed your database with a simple JSON file.
You'll get asked if you really want to overwrite the data in your database. To skip this message and move with confidence you can provide the -y flag.
-y
firebase data:set / seed.json -f my-firebase-db -y
Most developers have a healthy fear of flags labeled -f. But with Firebase, -f is your friend.
-f
The -f flag enables you to specify which Firebase database you’re running the data command against.
firebase data:set /status status.json -f other-firebase-db
This command saves the contents of status.json into the status path of the other-firebase-db Firebase database.
status.json
other-firebase-db
The -f flag opens up a larger set of possibilities, like transferring data to another Firebase database.
Reading data from the CLI is also a simple one-liner.
firebase data:get /messages -f my-firebase-db
The data:get command works just like the data:set command. You can also provide a JSON file to store the data locally.
data:get
firebase data:get /messages > messages.json -f my-firebase-db
If your Firebase database is under 256mb, this is a great way to create a seed to work from.
firebase data:get / > seed.json -f my-firebase-db
You'll notice that your JSON comes back unformatted which isn't the best for human eyes. The data:get command allows you to pipe the result to another command like Python’s json.tool (which comes installed on standard OSX instances).
json.tool
firebase data:get /messages -f my-firebase-db | python -m json.tool
The | is the symbol for piping the output to another source. In this case the json.tool module consumes the piped results from the data:get command.
|
If you’re looking for something even more readable, try using the npm module prettyjson. This module formats JSON into a colored YAML format that’s easy to read from the command-line.
davideast: age: 27 happy: true name: David East erlichbachman: age: 34 happy: false name: Erlich Bachman
The prettyjson module isn't bundled with the CLI so you'll have to install it on your machine. But if you prefer another formatting module, the CLI will pipe the results there too.
prettyjson
npm install -g prettyjson
Transferring data from one Firebase database to another is again a simple one-liner.
firebase data:get / -f my-firebase-db | firebase data:set / -f another-firebase -y
This command is especially helpful if you need to move data to another environment. See our previous blog post for more tips on managing multiple environments with the CLI.
If the project directory contains a firebase.json file, the commands will default to the Firebase database in the JSON file. To create a firebase.json file just use the command:
firebase init
Now when you run commands within that directory you can omit the -f flag.
firebase data:get /messages messages.json
If you find yourself repeating a set of commands it’s probably time to make a bash function. Save your function to your .bash_profile and you’ll be able to access them from anywhere in your console.
.bash_profile
If you commonly transfer data between Firebase databases the function below makes it simple.
function transfer_to() { local master_db="${1}" local dest_db="${2}" local path="${3:-/}" firebase data:get "$path" -f "$master_db" | firebase data:set "$path" -f "$dest_db" -y }
To use the function just call the transfer_to command with the destination Firebase database.
transfer_to
transfer_to dev-firebase-db staging-firebase-db
Another useful function is for formatting data.
function formatted() { local db="${1}" local path="${2:-/}" firebase data:get "$path" -f "$db" | python -m json.tool }
The formatted function takes in a Firebase database and the specified path. The outputted JSON is piped to Python’s json.tool.
formatted
formatted my-firebase-db /users
You can check out the community project firebase-dot-files on GitHub to contribute your tricks.
The Firebase CLI is more than just hosting. How do you seed your Firebase database? Drop us a comment and let us know if you’re using the new CLI features in your workflow.
viewDidLoad
viewWillAppear
viewDidDisappear
override func viewDidLoad() { super.viewDidLoad() ref = Firebase(url: "https://<YOUR-FIREBASE-APP>.firebaseio.com") }
- (void)viewDidLoad { [super viewDidLoad]; self.ref = [[Firebase alloc] initWithUrl:@"https://<YOUR-FIREBASE-APP>.firebaseio.com"]; }
UIViewController
class ViewController : UIViewController { var ref: Firebase! override func viewDidLoad() { super.viewDidLoad() ref = Firebase(url: "https://<YOUR-FIREBASE-APP>.firebaseio.com") } }
Firebase
nil
class ViewController : UIViewController { let ref = Firebase(url: "https://<YOUR-FIREBASE-APP>.firebaseio.com") }
class ViewController : UIViewController { // This won't compile :( let ref = Firebase(url: "https://my.firebaseio.com/\(myCoolProperty)") }
override func viewWillAppear(animated: Bool) { super.viewWillAppear(animated) ref.observeEventType(.Value) { (snap: FDataSnapshot!) in print (snap.value) } }
- (void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; [self.ref observeEventType:FEventTypeValue withBlock:^(FDataSnapshot *snapshot) { NSLog(@"%@", snapshot.value); }]; }
class ViewController : UIViewController { var ref: Firebase! var handle: UInt! override func viewWillAppear(animated: Bool) { super.viewWillAppear(animated) handle = ref.observeEventType(.Value) { (snap: FDataSnapshot) in print (snap.value) } } }
@interface ViewController() @property (nonatomic, strong) Firebase *ref; @property FirebaseHandle handle; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; self.ref = [[Firebase alloc] initWithUrl:@"https://<YOUR-FIREBASE-APP>.firebaseio.com"]; } - (void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; self.handle = [self.ref observeEventType:FEventTypeValue withBlock:^(FDataSnapshot *snapshot) { NSLog(@"%@", snapshot.value); }]; } @end
FirebaseHandle
typealias
UInt
handle
override func viewDidDisappear(animated: Bool) { super.viewDidDisappear(animated) ref.removeObserverWithHandle(handle) }
-(void)viewDidDisappear:(BOOL)animated { [super viewDidDisappear:animated]; [self.ref removeObserverWithHandle:self.handle]; }
A leaky listener is a listener that is consuming memory to store data that isn't displayed or accessed. This is especially an issue when navigating using a UINavigationController, since the root controller isn’t removed from memory when navigating to a detail controller. This means a root controller will continue to synchronize data if the listener isn't removed when navigating away. This action takes up needless bandwidth and memory.
UINavigationController
The thought of removing the listener might sound unappealing. You may think you need to keep your listener open to avoid downloading the same data again, but this is unnecessary. Firebase SDKs come baked in with caching and offline data persistence. These features keep the client from having to fetch recently downloaded data.
AppDelegate
class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? override init() { Firebase.defaultConfig().persistenceEnabled = true } }
@implementation AppDelegate - (instancetype)init { self = [super init]; if (self) { [[Firebase defaultConfig] setPersistenceEnabled:YES]; } return self; } @end
application:didFinishLaunchingWithOptions
Check out this gist to see the final version of the UIViewController.
