PG6300-14 webutvikling og api-design
01: Introduksjon, JS, (basic) Angular
Webutvikling
Api-design
- (HTTP) GET /users
- (HTTP) GET /users/theneva
Gjennomføring
hva skal vi gjennom?
- MEAN-stacken (MongoDB, Express, AngularJS, Node.js)
- Application Programming Interface (API)
- REST (vs. SOAP?)
- Real-time updates (WebSockets)
- Cross-Origin Resource Sharing (CORS)
- Databaser: dokumenter (vs. relasjoner)
- Informasjonssikkerhet i webutvikling med API
Hvordan gjør vi det?
- 12 økter + mappe med 4 elementer
- Element n vektes n * 10 % mot endelig karakter
- 1 uke til løsning
- Feedback
- 1 uke til forbedring
Forelesninger
(plan på It's Learning, plan noe åpen for endring)
- Hello, course: JavaScript + Angular
- Hello, API: Express + Node.js
- Persistent storage: MongoDB (Mongoose)
- Toolchain & modularisering av API
- Mobilutvikling mot API
- Sikring av informasjon og API
- Routing, user profiles, login
- Real-time updates (WebSockets)
- Testing
- Opprydding
- Deployment
- Oppsummering
Pensum
$19.24 for Kindle edition @ Amazon
(kan leses online)
Tar et par timer å bla gjennom
(eller en uke å løse oppgavene til)
Lenes tungt på
Det er under 150 kroner
Pls read it
MEAN
MongoDB & Express & AngularJS & Node.js
JavaScript
var greeting = 'Hello, world!';
alert(greeting);
console.log('greeting: ' + greeting);
var greetings = ['hello', 'hi'];
// "Hello", then "hi"
for (var i = 0; i < greetings.length; i++) {
alert(greetings[i]);
}FUnksjoner
// Named functions
var plus = function(a, b) {
return a + b;
}
plus(1, 2); // 3
plus('Hello, ', 'world!'); // 'Hello, world!'Function in a function in a function in a...
var sumFrom1ToLimit = function(limit, plusFunction) {
var sum = 0;
for (var i = 1; i <= limit; i++) {
sum = plusFunction(sum, i); // !
}
return sum;
}
// 1 + 2 + 3 + ... + 10
sumFrom1ToLimit(10, function(a, b) { return a + b; }); // 55=== operator
http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons
== operator
http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons
Chrome DevTools
javascript object notation
// Java language object:
public class Language {
private String name;
public void setName(String name) { this.name = name; }
public void getName() { return name; }
}
// JSON representation:
{ "name": "..." }
// JSON list: [ ... ]
[ // start simple list of strings
"hello",
"world"
] // end list
// JSON list of objects: [ { ... }, { ... } ]
[ // start list of languages
{ "name": "JavaScript" }, // language object comma
{ "name": "Java" }, // language object comma
{ "name": "C#" } // language object
] // end listJSON er gyldig javascript
var someLanguage = { "name": "Java" };
var languages = [
{ "name": "C#" },
someLanguage,
{ "name": "Haskell" }
];
console.log(languages);
Fordeler?
Ulemper?
AJAX / AJAJ
- Hent data fra utenfor koden
- Filer, API-er, ...?
- Filer, API-er, ...?
- XMLHttpRequest i plain JS
- "MVC"-rammeverk for web apps (klientside)
- Deklarativt (vs. imperative JQuery)
- Statisk web app
Model-View-Controller
- Pattern for separasjon av logikk
- blah blah
- MVP?
http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
Angular Templates
HTML
Directives (ng-app, ng-model, ng-repeat)
{{ Expressions }}
Model
Data binding
https://docs.angularjs.org/guide/databinding
Data binding example
<div ng-app ng-init="qty=1;cost=2">
<b>Invoice:</b>
<div>
Quantity: <input type="number" min="0" ng-model="qty">
</div>
<div>
Costs: <input type="number" min="0" ng-model="cost">
</div>
<div>
<b>Total:</b> {{qty * cost | currency}}
</div>
</div>
Controllers
<html ng-app="myFirstNamesApp">
<head></head>
<body ng-controller="NamesController">
<ul ng-repeat="name in names">
<li>{{name}}</li>
</ul>
<script src="./angular.js"></script>
<script>
var app = angular.module('myFirstNamesApp', []);
app.controller('NamesController', function ($scope) {
$scope.names = [
'Sterling Archer', 'Malory Archer', 'Lana Kane', 'Algernop Krieger'];
});
</script>
</body>
</html>
- Ansvarlig for informasjon til view
- Må registreres
Øving
- Installer IDE (IntelliJ eller WebStorm plz)
- Installer Node og NPM (dekket i tutorial)
- Angular tutorial step 0, 1, 2, 3, 4 (minus testing)
PG6300-14-01 Introduksjon, JS, Angular
By theneva
PG6300-14-01 Introduksjon, JS, Angular
Forelesning 1 i PG6300-14 Webutvikling og API-design
