Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Carnegie Apps 2016
Search
ThierrySans
January 19, 2016
0
77
Carnegie Apps 2016
Building and deploying a web application using AngularJS, Firebase and Gitbub
ThierrySans
January 19, 2016
Tweet
Share
More Decks by ThierrySans
See All by ThierrySans
CSCD27 Social Engineering
thierrysans
0
250
CSCD27 Web Security
thierrysans
0
420
CSCD27 Malicious Software
thierrysans
0
380
CSCD27 Protection
thierrysans
0
480
CSCD27 System Insecurity
thierrysans
0
410
CSCD27 Human Authentication
thierrysans
0
340
CSCD27 Network security
thierrysans
0
550
CSCD27 Network (in)security
thierrysans
0
550
CSCD27 Cryptography Protocols
thierrysans
0
700
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
The Invisible Side of Design
smashingmag
299
51k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Git: the NoSQL Database
bkeepers
PRO
430
65k
KATA
mclloyd
29
14k
Agile that works and the tools we love
rasmusluckow
329
21k
Designing for Performance
lara
609
69k
Side Projects
sachag
455
42k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
Building and deploying a web app using Thierry Sans Carnegie
App’s 2016
Credits Firebase - AngularFire Quickstart from https://www.firebase.com/tutorial/#tutorial/angular/0
Firechat
Perfect technology for hackathons frontend backend hosting
Get the starter code from Github $ git clone https://github.com/ThierrySans/firechat.git
Start a development server $ cd firechat $ python -m
SimpleHTTPServer
Frontend Development
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
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
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"); }]);
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>
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>
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
Backed Development
Creating a firebase account
Creating a firebase database get the database URL
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/"); ...
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
Firebase admin
Deployment
Create a repository
Initialize the repository $ rm -Rf .git
Push the code $ git add -A $ git
commit -m “first version” $ git push
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
Ta-Dah! https://thierrysans.github.io/firetest/