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
79
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
490
CSCD27 System Insecurity
thierrysans
0
420
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
Bash Introduction
62gerente
615
210k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Speed Design
sergeychernyshev
32
1.1k
GitHub's CSS Performance
jonrohan
1032
460k
Docker and Python
trallard
45
3.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Producing Creativity
orderedlist
PRO
347
40k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Gamification - CAS2011
davidbonilla
81
5.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
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/