narzędzia
frontend developera
CZEŚĆ!
Maciek Korsan
Frontend developer @ polarbits_
Maciek @ Korsan Studio
Wykładowca @ Studia Podyplomowe WI PB
maciejkorsan@gmail.com
Jak obraca się prąd?
NAPIĘCIE
Praca z API / vue.js
API
THE INTERNET
HTTP
Hypertext Transfer Protocol
Jak działa HTTP?
GET
Żądanie typu GET
<form action="/miejscedocelowe" method="get">
.
<input type="text" name="klucz">
.
</form>http://adres.pl/?klucz=wartość&drugiklucz=drugawartość
|
|
parametry getPOST
Żądanie typu POST
<form action="/miejscedocelowe" method="post">
.
<input type="text" name="klucz">
.
</form>
kody odpowiedzi http
200
OK
404
PAGE NOT FOUND
500
INTERNAL SERVER ERROR
1xx: hold on
2xx: here you go
3xx: go away
4xx: you fucked up
5xx: I fucked up
Kody HTTP
Ćwiczenie
Żądania HTTP
URL
Uniform Resource Locator
Uniform Resource Locator
http://studia.korsan.studio:80/test/?parametr=wartość
| | | | |
| host (adres | ścieżka dostępu parametry
| serwera) | do zasobu
| port
|
protokół
JavaScript Object Notation
package.json
{
"devDependencies": {
"browser-sync": "^2.18.8",
"browserify": "^14.3.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-browserify": "^0.5.1",
"gulp-headerfooter": "^1.0.3",
"gulp-sass": "^3.1.0",
"gulp-uglify": "^2.1.2"
}
}packages.json
var jason = {
'job': 'actor',
'name': 'JSON Statham',
'age': '49'
}{}
obiekt
[]
tablica
{
"results": [
{
"gender": "male",
"name": "nathaniel cooper"
},
{
"gender": "female",
"name": "lea abraham"
},
{
"gender": "female",
"name": "anaëlle vidal"
}
]
}przykładowy json z użytkownikami
API
Application Programming Interface
connect everything!
Ćwiczenie
Łączymy się z API
Ćwiczenie
Sprawdź pogodę
-
Pobierz woeid dla Warszawy (warsaw)
-
Sprawdź pogodę
https://www.sublimetext.com/
Instalujemy
środowisko node.js
*jeśli niezainstalowane
npm install gulp-cli -g
*jeśli niezainstalowane
cd C:\naszkatalog
cd /home/user/naszkatalog
windows
linux
cd /Users/user/naszkatalog
mac os
user -> nazwa naszego użytkownika
naszkatalog -> nazwa katalogu z plikami projektu
npm install
gulp
app/partials/header.html
app/content/nazwastrony.html
app/partials/footer.html
dist/nazwastrony.html
http://localhost:3000/nazwastrony.html
hello vuejs
new Vue({
el: '#app',
data: {
message: "hello vuejs"
}
})app.js
<div id="app">
{{ message }}
</div>
index.html
data i {{ }}
new Vue({
el: '#app',
data: {
"person": {
"gender": "male",
"name": "nathaniel cooper"
}
}
})app.js
<div id="app">
{{ person.name }}
</div>
index.html
modele:
v-model="nazwa modelu"
new Vue({
el: '#app',
data: {
message: "hello vuejs"
}
})app.js
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
index.html
v-bind:atrybut
new Vue({
el: '#app',
data: {
message: "hello vuejs"
}
})app.js
<div id="app">
<span v-bind:title="message">Hover me!</span>
</div>
index.html
custom component
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
new Vue({
el: '#app'
})app.js
<div id="app">
<my-component></my-component>
</div>
index.html
warunki:
v-if="warunek"
new Vue({
el: '#app',
data: {
showMe: false // change to true to show h1
}
})app.js
<div id="app">
<h1 v-if="showMe">Hello world!</h1>
</div>index.html
zdarzenia:
v-on:nazwa
new Vue({
el: '#app',
data: {
showMe: false // change to true to show h1
}
})app.js
<div id="app">
<button v-on:click="showMe = !showMe">Toggle h1</button>
<h1 v-if="showMe">Hello world!</h1>
</div>index.html
pętle:
v-for="item in items"
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
app.js
<div id="app">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>index.html
metody
new Vue({
el: '#app',
data: {
message: "podmień na swoje imię"
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
})app.js
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>index.html
pobieranie danych:
vue-resource
new Vue({
el: '#app',
data: {
"persons": false
},
created: function() {
this.$http.get(apiUrl).then(response => {
this.persons = response.body.results;
}, response => {
console.log ('error');
});
}
});
app.js
<div id="app">
<div class="person" v-for="person in persons">
<img v-bind:src="person.picture.large"/>
<h2>{{ person.name.first }} {{ person.name.last }}</h2>
</div>
</div>index.html
Wizytówki
- 20 użytkowników
- imię i nazwisko
- nazwa użytkownika (login)
- adres zamieszkania
- zdjęcie profilowe
- klikalny e-mail
- klikalny telefon
- ostylować ładnie! (z BEMem!)
pytania?
Co mówi ksiądz po ślubie informatyka?
Pobieranie zakończone
Q&A
Hej mówiłeś dzisiaj na zajęciach że już praktycznie nie korzystasz z jquery.
W takim razie jakie frameworki są na czasie? Czy może raczej vanilla JS?
Pytanie dotyczące frontendkickstartera. Gdzie wrzucać zdjęcia, tak żeby były poprawnie wyświetlane? Mówiłeś, żeby nie ruszać folderu dist. Po wrzuceniu w content, nie wyświetla ich. Błędny link?
Jaki jest najlepszy sposób na osiągnięcie efektu startu pewnych animacji bądź ładowania kontentu na stronie np. one page dopiero gdy dany element/div/etc. znajdzie się w zasięgu widzenia użytkownika/ użytkownik zescrolluje do tego elementu stronę? Znalazłam skrypty np ScrollReveal - jeśli w praktyce właśnie robi się to przy pomocy skryptów to jak jest z prawami autorskimi czy po prostu dołączmy ten skrypt i używamy czy są jakieś ograniczenia? Może jakieś inne skrypty/pluginy/etc. godne polecenia..
OCEŃ MNIE!
studia.korsan.studio
PODYPLOMOWE: VUE.JS & API
By Maciej Korsan
