Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Carnegie Apps 2016

Avatar for ThierrySans ThierrySans
January 19, 2016
0
77

Carnegie Apps 2016

Building and deploying a web application using AngularJS, Firebase and Gitbub
Avatar for ThierrySans

ThierrySans

January 19, 2016
Tweet

More Decks by ThierrySans

See All by ThierrySans
CSCD27 Social Engineering
Avatar for ThierrySans thierrysans
0
250
CSCD27 Web Security
Avatar for ThierrySans thierrysans
0
420
CSCD27 Malicious Software
Avatar for ThierrySans thierrysans
0
380
CSCD27 Protection
Avatar for ThierrySans thierrysans
0
490
CSCD27 System Insecurity
Avatar for ThierrySans thierrysans
0
420
CSCD27 Human Authentication
Avatar for ThierrySans thierrysans
0
340
CSCD27 Network security
Avatar for ThierrySans thierrysans
0
550
CSCD27 Network (in)security
Avatar for ThierrySans thierrysans
0
550
CSCD27 Cryptography Protocols
Avatar for ThierrySans thierrysans
0
700

Featured

See All Featured
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
48
2.9k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
130
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
20
1.3k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
43
7.6k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3.1k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.7k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.8k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.4k

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/