Untangling the Web

Part Deux... (Tecc102)   Building Web Apps!

 

Tonight:  Front end fabulous, CityVibes!  and other apps! 

Oct 14: [fort!]  Iterate: design and prototypes         

Oct 21: [UVic!]  Hackathon!                          

Oct 28: [fort!] Showcase!!!

WELCOME!!!

  • How was Startup SLAM?
  • New Moodle!
  • Great work on landscapes!
  • Hello WORLD!
    • who we all are!

So Far...

  • LANDSCAPES!
    • ​wow, connecting GitHub with Nitrous...
    • KILLER overview video of ALL technologies (thank you Christina!)
  • Web Traffic Analytics
    • what it is
    • how to introduce it to a webpage
    • A/B testing... (lots more to do, ad words, SEO)
  • Tools used in Customer Discovery (Erin's toolkit!)
    • managing leads (sendwithus)
    • connecting apps (zapier)...
  • Agile processes
    • SCRUM!  prototyping 

Tools we have on the go...

  • we are attracted to things that are
    • "Free"!
    • Relevant to industry
    • Cloud based (include storage)
    • FUN!!!!! :)
  • so far, these include
    • Google Analytics
      • for monitoring web traffic
    • GitHub (and Git!)
      • managing collaboration on digital assets
    • Nitrous.io
      • serving up our web pages and backend! :)
    • Others? 

We are a team!

  • small but mighty!
  • learning to be agile (http://www.allaboutagile.com/what-is-agile-10-key-principles/)
  • over the next 4 weeks we will learn by doing!
    • different people will go different paces
    • teams of 3-4 (or more!)
    • this is going to be nutty...
      • but fun!
  • in the world of "agile processes" developers work closely with stakeholders and iterate on features...
  • CityVibes has Heather and the City to talk to!
  • we can do other apps too!!!
    • workflows, teams, integration will be similar!

"Front-end"

  • front-end web development
    • technologies used by your "browser"
      • HTML5, CSS, JavaScript, libraries
    • design patterns, user interface techniques and reactive strategies
      • Model, View, Controller
      • peak at the "MEAN" stack
    • modern production environments, tools and mobile friendly technologies
      • continuous integration
      • GitHub, Nitrous.io (or others!)
      • web versus native and hybrid apps

"Back-end"

  • Basically ignoring this for NOW!
    • ​what do we need on the server?
    • how is the data managed/integrated?
    • how is privacy handled?
    • ...
  • interesting!
    • definitely a whirl wind of technology involved
    • cloud computing is a bonus
      • CIO of CIA at big cloud conference this month
      • AWS set up a "region" for CIA!
    • we are going to hit that in Nov! (final module!) :) 

Agile!

Agile and Elephants...

In the spirit of agile...

  • ​low cost way of getting a landing page up and going!!!
  • wireframing tools can build you a quick front end!
    • ​look and feel are there...
    • typically the "smarts" (JavaScript) are not!

Web apps and Angry Birds

back in 2011...

  • Web app, Angry Birds for Chrome, was hacked and all levels were unlocked...
  • what happened?
  • was this backend (server) or frontend (browser)?   

back in 2011...

  • Wes Bos knew his way around the browser, and looked in "developer tools"...
  • made a change to the way the JavaScript code was handling the data 

//omy, what is this doing?!?!?!

for (var i = 0; i < = 69; i++) {
    localStorage.setItem('level_star_' + i, '3');
}

window.location.reload();


//how about this one?!

for (var i = 0; i < = 69; i++) {
    localStorage.setItem('level_star_' + i, '-1');
}

window.location.reload();


//w3 schools example! http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webstorage_local_clickcount
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
        } else {
            localStorage.clickcount = 1;
        }
        document.getElementById("result").innerHTML = "You have clicked the button " + 
                                                       localStorage.clickcount + " time(s).";
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not 
                                                       support web storage...";
    }
}
</script>
</head>
<body>
   <p><button onclick="clickCounter()" type="button">Click me!</button></p>
   <div id="result"></div>
   <p>Click the button to see the counter increase.</p>
   <p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>

Our App: CityVibes!

Requirements

Gathering!

 

GitHub and Git!

  • social coding
  • lots done at the command line...
  • we will get there
    • some of you already have!
    • basic concepts
      • clone a repository (from GitHub)
      • create branches to make changes for new features
      • commit changes to a branch
      • pull changes into a branch
      • merge content
      • push changes to another branch

GitHub and Git!

  • the shared repository is on GitHub
    • important branches kept up to date here!
  • you clone it and work locally, using Git
    • create new branches for new features
    • merge and throw branches away!
  • PUSH from the local copy to the shared server

 

WORKS SO GREAT FOR TEAMS AND COORDINATION!!!!

 

 

IDEs have integration

  • there is a button in Nitrous.io to integrate!
  • set up access (a few gymnastics!)
  • then use the command line to be pulling code into the webserver from GitHub!!!!

 

UTW: Building Web Apps

By Yvonne

Made with Slides.com

UTW: Building Web Apps

Part DEUX of Untangling the Web!!!

  • 1,212

More from Yvonne