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

Carnegie Apps 2016

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for ThierrySans ThierrySans
January 19, 2016
90
0

Carnegie Apps 2016

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

Avatar for ThierrySans

ThierrySans

January 19, 2016

More Decks by ThierrySans

See All by ThierrySans
CSCD27 Social Engineering
Avatar for ThierrySans thierrysans
0
270
CSCD27 Web Security
Avatar for ThierrySans thierrysans
0
460
CSCD27 Malicious Software
Avatar for ThierrySans thierrysans
0
410
CSCD27 Protection
Avatar for ThierrySans thierrysans
0
510
CSCD27 System Insecurity
Avatar for ThierrySans thierrysans
0
440
CSCD27 Human Authentication
Avatar for ThierrySans thierrysans
0
370
CSCD27 Network security
Avatar for ThierrySans thierrysans
0
580
CSCD27 Network (in)security
Avatar for ThierrySans thierrysans
0
570
CSCD27 Cryptography Protocols
Avatar for ThierrySans thierrysans
0
730

Featured

See All Featured
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.5k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
250
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.3k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
450
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.9k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
500
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k

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/