Carnegie Apps 2016

Building and deploying a web application using AngularJS, Firebase and Gitbub

Transcript

1. Building and deploying a web app using Thierry Sans Carnegie App’s 2016
2. Credits Firebase - AngularFire Quickstart
 from https://www.firebase.com/tutorial/#tutorial/angular/0
3. Firechat
4. Perfect technology for hackathons frontend backend hosting
5. Get the starter code from Github $ git clone https://github.com/ThierrySans/firechat.git
6. Start a development server $ cd firechat
 $ python -m SimpleHTTPServer
7. Frontend Development
8. Install AngularJS <!doctype html> <html ng-app> <head> <link rel="stylesheet" href=“style/example.css”/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script> </head> <body> ... /index.html
9. AngularJS directives ... <body> <div class="c l-demo-container"> <header>Firebase Chat Demo</header> <div class="c-toolbar"> <label for="nameInput">Username:</label> <input type="text" id="nameInput" placeholder="enter a username…" 
 ng-model="username"/> </div> <ul class="c-messages"> <li><strong class="c-username">John Doe</strong>Who am I?</li> <li><strong class="c-username">Homer Simpson</strong>Doh!</li> <li><strong class=“c-username”>{{username}}</strong>{{content}}</li> </ul> <footer> <input type="text" id="messageInput" placeholder="Type a message…" 
 ng-model="content"/> </footer> </div> </body> ... ng-model="username" $scope {{username}} /index.html form context view
10. AngularJS controller <!doctype html> <html ng-app="firechat"> <head> <link rel="stylesheet" href="style/example.css"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js" ></script> <script src="app/firechat.js"></script> </head> <body ng-controller="myController"> ... /index.html /app/firechat.js var firechat = angular.module("firechat", []); firechat.controller("myController", ["$scope",function($scope){ console.log("Hello myController"); }]);
11. Separating data firechat.controller("myController", ["$scope",function($scope){ $scope.messages = [{'username': 'John Doe', 'content':'Who am I?'}, {'username': 'Homer Simpson’, 'content':'Doh!'}]; }]); /app/firechat.js /index.html <ul class="c-messages"> <li ng-repeat="msg in messages"> <strong class="c-username">{{ msg.username }}</strong> {{ msg.content }} </li> </ul>
12. Add an event handler firechat.controller("myController", ["$scope",function($scope){ $scope.messages = ... $scope.addMessage = function(e){ console.log($scope.username); console.log($scope.content); console.log(e.keyCode); }; }]); /app/firechat.js /index.html <footer> <input type="text" id="messageInput" placeholder="..." 
 ng-model="content" ng-keydown="addMessage($event)"/> </footer>
13. Putting it all together firechat.controller("myController", ["$scope",function($scope){ $scope.messages = ...] $scope.addMessage = function(e){ if (e.keyCode === 13 && $scope.content) { // set anonymous var username = $scope.username || "anonymous"; // add message to messages $scope.messages.push({ username: username, content: $scope.content }); // reset the content $scope.content = ""; } }; }]); /app/firechat.js
14. Backed Development
15. Creating a firebase account
16. Creating a firebase database get the database URL
17. Install Firebase /index.html <!doctype html> <html ng-app="firechat"> <head> <link rel="stylesheet" href="style/example.css"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script> <script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script> <script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script> <script src="app/firechat.js"></script> </head> /app/firebase.js var firebase = angular.module("firechat", ["firebase"]); firebase.controller("myController", ["$scope","$firebaseArray",function($scope,$firebaseArray){ var db = new Firebase(“https://brilliant-heat-5654.firebaseio.com/"); ...
18. Pushing and pulling data with Firebase firechat.controller("myController", ["$scope",function($scope){ var db = new Firebase(“https://brilliant-heat-5654.firebaseio.com/"); $scope.messages = $firebaseArray(db); $scope.addMessage = function(e){ if (e.keyCode === 13 && $scope.content) { // set anonymous var username = $scope.username || "anonymous"; // add message to messages $scope.messages.$add({ username: username, content: $scope.content }); // reset the content $scope.content = ""; } }; }]); /app/firechat.js
19. Firebase admin
20. Deployment
21. Create a repository
22. Initialize the repository $ rm -Rf .git
23. Push the code $ git add -A 
 $ git commit -m “first version” $ git push
24. Synchronize the gh-pages branch $ git checkout gh-pages
 $ git merge master
 $ git push origin gh-pages $ git branch gh-pages Create the gh-pages branch (first time only) Synchronize gh-pages with master
25. Ta-Dah! https://thierrysans.github.io/firetest/