Behance er et flott knutepunkt for reklamer for å dele og vise frem sitt arbeid og pågående prosjekter. I motsetning til Dribbble eller Forrst, som - som jeg personlig ser dem - hovedsakelig befolket av illustratorer og UI-designere, omfatter Behance et bredere spekter av kreative felt, inkludert arkitektur, bevegelsesgrafikk, bildesign og mote. I tillegg til dette gir Behance også et sett med APIer for å få tilgang til innholdet.

I løpet av denne korte serien skal vi bruke Behance API for å bygge en personlig porteføljeside. Vi trekker effektivt innhold fra Behance og viser det på vår egen eksterne nettside. Men før vi fortsetter videre med å bygge nettstedet, må vi først undersøke hvordan Behance forvalter innholdet og se hvordan API fungerer.

Utforsker Behance og API

Behance deler innholdet i moduler; nemlig bilde, embed, video, lyd og tekst. Data hentet fra API-en vil ikke bare inneholde bildeadresser, men kan også være video-, lyd-nettadresser og vanlig tekst. Viser alle disse typer innhold på vår nettside, men vil komplisere ting. Derfor vil vi i denne opplæringen fokusere på bilder og ekskludere resten for å holde koden enklere.

Merk: Denne opplæringen antar at du har en Adobe-konto og en Behance-portefølje for å jobbe med. Med hensyn til vår demonstrasjon bruker vi den fantastiske porteføljen av Mike "Creativemints", som er vennlig enige om å la oss bruke sitt arbeid i dette tilfellet.

Behance prosjektredigeringsskjerm.

Når du jobber med egne prosjekter, vil du etter at du har lastet opp innholdet, vise Behance et dialogvindu for å laste opp dekselet. Dette er som å sette opp et kjennetegnet bilde i WordPress. Bildet som vi laster opp her, vil bli vist som en forhåndsvisning av hele prosjektet. På vår hjemmeside vil vi også bruke omslagsbildet.

Dialogvinduet for å laste opp bilde i Behance.

Når vi har satt omslaget, vil vi bli presentert med alternativer for å tildele flere attributter som kreative felt, koder og en beskrivelse av innholdet. Vi vil ikke overvelde nettstedet vårt med for mange av disse attributter. I denne veiledningen, bortsett fra dekselet og tittelen, vil vi bare vise de kreative feltattributtene.

Kreative feltvalg i Behance.

Behance API-nøkkel

Vi trenger en unik API-nøkkel / Client ID for å få tilgang til Behance API. For å få en, gå til Behance Dev, registrer appen din, fyll ut søknadens navn, nettsted og beskrivelse. Omadresser URI (for OAuth) -feltet er valgfritt, med mindre du skal lage en app som krever brukerautentisering.

Behance API-nøkkel.

Når vi har API-nøkkelen, går du til Behance API Endpoints hvor du finner oppført alle måter å få tilgang til API. en API Endpoint er adressen til en webtjeneste, vanligvis bare en enkel HTTP-URL-streng.

I denne opplæringen må vi få tilgang til Brukerinformasjon, Brukerprosjektene. Her er API-sluttpunktene for å be om denne informasjonen:

Få en brukerinformasjon

http://www.behance.net/v2/users/user_id?api_key=the_api_key

Brukerinformasjonen inneholder bruker ID-nummer, navn, brukerens beliggenhet, brukerens avatar-nettadresse og en rekke andre data.

Få en brukers prosjekter

http://www.behance.net/v2/users/user_id/projects?api_key=the_api_key

Vi får listen over publiserte prosjekter av den oppgitte bruker-ID. Listen kan begrenses med per side parameter.

Få innholdet i et prosjekt

http://www.behance.net/v2/projects/project_id?api_key=the_api_key

API-en returnerer prosjektinformasjonen inkludert moduler av det gitte PROJECT_ID.

Siden Behance API kan nås via HTTP, kan vi se dataene umiddelbart i nettleseren. Hvis du bruker Chrome eller Firefox, foreslår jeg at du installerer et nettleser-plugin kalt JSONview for å se JSON-dataene i et mer lesbart format.

JSON data sett med JSONview

API grense

Vær oppmerksom på at Behance begrenser API med 150 forespørsler per time. Hvis det er for mange forespørsler, vil vi ende opp med tomme svar, og vi får ingenting. Slik er grensen beskrevet i dokumentasjonen:

Forespørsler er begrenset til 150 per time og måles mot den offentlige IP-adressen til serveren eller enheten som gjør forespørselen. Hvis du gjør for mange forespørsler, vil du motta et tomt svar med en statuskode for 429 (for mange forespørsler).

Så i denne opplæringen vil vi bruke HTML5 Offline Storage for å lagre dataene offline for å minimere forespørslene. I stedet for å ringe API-en hver gang vi laster inn siden, kan vi hente den fra lageret. Vennligst se følgende artikler for mer om HTML5 Offline Storage:

• Rask Tips: Lær om HTML5 lokal lagring
• Fortid, nåtid og fremtid for lokal lagring for webapplikasjoner

Nettstedet Blueprint

Før vi bygger vår nettside struktur, la oss ta en titt på nettsiden blåkopi.

Nettstedet Blueprint

Som du kan se ovenfor, har nettstedet vårt tre seksjoner: Header, Content og Footer. Overskriften inneholder brukerens bilde avatar, navn, deres kreative felt og deres plassering. Innhold-delen viser brukerens portefølje med navn og reklamefelt. I Footer vil vi vise Behance-logoen, som viser at nettstedet er drevet av Behance API.

Oppbygging av innhold og struktur på nettstedet

La oss starte vårt prosjekt ved å opprette en katalog som heter personal-portefølje og en index.html med grunnleggende HTML5 markup. I indeksen.html, vil vi lenke til følgende biblioteker:

jQuery

I denne opplæringen bruker vi jQuery først og fremst for to ting: DOM-manipulering og ringe Behance API gjennom dens $ .GetJSON () API.

I dag er jQuery delt inn i to versjoner, 1.x og 2.x. Versjon 1.x har som mål å støtte eldre nettlesere, nemlig Internet Explorer 8 og under, mens versjon 2.x bare henvender seg til nyere nettlesere. Vi antar at vi nå lever i verden hvor alle bruker moderne nettlesere (jeg føler meg risikabel). Så i denne opplæringen kan vi trygt bruke jQuery 2.x.

Handlebars.js

Håndtak er en flott JavaScript-basert templerende motor. I denne opplæringen bruker vi Behandlebjelker til å bygge malen som viser dataene hentet fra Behance API. Tuts + har to gratis screencasts som kan hjelpe deg med å komme i gang med håndtak:

• Si hei til styrestenger
• Verktøy av den moderne webutvikleren - håndtak

Hvis du ikke har jobbet med Handlebars før, foreslår vi at du tar deg tid til å fullføre disse skjermbildene eller lese noen grunnleggende opplæringsprogrammer før du går videre.

I denne veiledningen vil vi ikke inkludere JavaScript og CSS-bibliotekene i prosjektkatalogen vår for å oppnå mindre filstørrelser i prosjektet vårt. I stedet vil vi koble dem fra en CDN kilde av CDNJS.com. La oss åpne vår index.html i en kodeditor og legge til følgende biblioteker i hode stikkord.

Vær oppmerksom på at hvis du serverer index.html via en lokal server, må du legge til http: // i hvert av koblingene som peker på CDNJS.com.

Deler websider i HTML

HTML-oppslaget som definerer våre nettstedsseksjoner - Header, Content og Footer - er ganske enkelt. Vi bruker HTML5 Overskrift element for toppteksten, a div å pakke inn innholdet og HTML5 bunntekst element for bunnteksten. Hver av disse elementene er tildelt en unik ID og en klasse for styling og skripting. Her er HTML-oppslaget vårt i kropp tag på dette stadiet.

Opprette håndtaksmaler

I denne delen skal vi bygge håndbøkene til å vise innholdet i våre nettsider. Og vi starter med malen for toppteksten, som vil bli fylt ut med brukerdataene fra dette API-endepunktet www.behance.net/v2/users/user_id.

En håndtaksmal er pakket inn med en manus tag med en spesiell type tekst / x-styret-mal og helst med en unik ID for lettere å velge mal, slik som det.

Innen manus tag vil vi legge ut merkingen for topptekstens innhold sammen med klassene for styling. Vi inkluderer også klassen fra Foundation Icon Fonts 3, som initialiseres med fi-, for å vise ikonene. Til slutt, innholdsplassholderen i form av et håndteringsuttrykk.

 
User.display_name
 
 
 #each user.fields 
dette
 /Hver 
 
 
user.city, user.country
 

Hver av disse plassholderne tilsvarer JSON-nøklene hentet fra API. De User.display_name, for eksempel vil vise brukerens visningsnavn. De DISPLAY_NAME er den faktiske nøkkelen som inneholder verdien av navnet. Men siden det er nestet under bruker objekt, vi refererer har til det som user.display_name. Det samme gjelder for de andre plassholderne i denne malen, samt de maler som følger.

Bruker visningsnavn i JSON

Deretter skal vi bygge malen for å vise porteføljen, og dette er den siste Handlebars-malen vi vil lage for vår nettside. For å begynne, lager vi en ny div med en ID portefølje i Innhold-delen. Vi lager dette div å pakke inn porteføljen, bare hvis vi trenger å legge til mer innhold i fremtiden. Deretter legger vi til skriptetiketten som vil inneholde malen. På dette tidspunktet bør HTML-strukturen i porteføljens innhold vises som følger:

Her kan du se at dataene hentes fra www.behance.net/v2/users/user_id/projects returnerer en matrise som inneholder brukerens portefølje. For å vise en matrise må vi løse gjennom hvert element i matrisen ved hjelp av håndtermer Hver å vise det i malen.

En rekke prosjekt hentet fra Behance API

Vi legger ut porteføljen i en uordnet liste. Så la oss legge til en ul element og pakk hver  li element med #each ... each, som følger:

Da vil vi legge ut innholdet til hvert element. Som vi nevnte tidligere, vil vi vise bildedekselet, navnet og de kreative feltene. Vi vil inneholde dem inne i li med en ny div med klassen, portefølje-innhold.

... 
 
 #if this.covers. [404]  else #if this.covers. [230]  ellers  / if / if 
 
This.name
 
 
 #each this.fields 
dette
 /Hver 
 
 
... 

Legg merke til at det er noen av Handlebars 'betingede hjelpere, som #if this.covers. [404], i denne malen. Vi bruker den betingede hjelperen for å hjelpe oss med å referere til den riktige deksjonsbildeformatet. Bildet kan ikke alltid være 404px (som er den høyeste størrelsen som er angitt for omslaget), det kan bare være tilgjengelig i lavere størrelse. Her ser du at Behance beskjærte bildet i disse størrelsene: 404px, 230px, 202px og 115px.

Dekk bildestørrelser

HTML-oppslaget i Footer er veldig enkelt. Vi vil legge til to avsnittetiketter: en vil inneholde "Drevet av", og den siste vil inneholde en lenke som peker på Behance. Vi legger til fi-sosial-Behance klasse i en tag for å vise Behance-logoen fra Foundation Icon Fonts.

... 
 
Drevet av
 
Behance
 
 

På dette stadiet har vi fullført bygging av HTML-strukturer som legger ut innholdet på nettstedet vårt. Men når vi åpner den i nettleseren, ser vi ingenting vises ennå! Dette skyldes at vi må gjøre en forespørsel til API-en, og deretter kompilere dataene sammen med håndteringsmalen.

Calling Behance API og kompilering av malen

La oss lage en manus tag for å inneholde JavaScript. Vi vil også opprette to variabler for å inneholde Behance API-nøkkelen og bruker-IDen. Som nevnt tidligere bruker vi porteføljen av "Creativemints".

var apiKey = 'ZLBxK9rEfHwJf9K0rmseNr2fS2gS2HJW'; var userID = 'creativemints'; 

Under disse to variablene legger vi til følgende funksjon. Denne funksjonen vil ringe til Behance User API og kompilere Handlebars-malen for toppteksten.

(funksjon () var behanceUserAPI = 'http://www.behance.net/v2/users/'+ userID +'? callback =? & api_key = '+ apiKey; funksjonssettUserTemplate () var userData = JSON.parse ( sessionStorage.getItem ('behanceUser')), getTemplate = $ ('# profilmal'). html (), mal = Handlebars.compile (getTemplate), result = mal (userData); $ ('# header'). html (result);; if (sessionStorage.getItem ('behanceUser')) setUserTemplate (); else $ .getJSON (behanceUserAPI, funksjon (bruker) var data = JSON.stringify (bruker); sessionStorage.setItem ('behanceUser', data); setUserTemplate (););;) (); 

La oss undersøke denne koden mer detaljert. Først lagret vi Behance User API i en behanceUserAPI variabel. Legg merke til at vi har satt inn tilbakeringing = parameter i den. Dette tillegget unngår Ikke tillatt tilgang Feil forårsaket av Same-Origin Policy.

Et ord på sessionStorage

Tidligere i denne opplæringen nevnte vi at Behance API er begrenset til 150 forespørsler per time, og derfor bestemte vi oss for å bruke HTML5 Offline Storage for å lagre dataene. I denne funksjonen har vi brukt sessionStorage. Årsaken til bruken av sessionStorage for lagring av brukerprofildata er at brukeren kan endre sin profil når som helst, men vi kan ikke forutsi det når. Så i stedet for å bruke lokal lagring som vil lagre data vedvarende, bruker vi sessionStorage som fjerner dataene når vi har sluttet av fanen eller nettleseren. På den måten, når vi åpner nettleseren og får tilgang til nettstedet på nytt, vil den trekke friske data fra Behance API.

SessionStorage kan imidlertid bare inneholde streng eller ren tekst. Så, som du kan se fra funksjonen ovenfor, har vi brukt JSON.stringify (); å slå JSON inn i en streng før vi lagrer den i sessionStorage. Da vil vi trekke dataene med JSON.parse () å formatere det tilbake til JSON.

Vi har også opprettet en funksjon som heter setUserTemplate () å kompilere håndtaksmalen og legge til innholdet ved hjelp av jQuery .html (). Vi kjører denne funksjonen under denne tilstanden: hvis dataene i sessionStorage er tilgjengelig, utfører vi øyeblikkelig funksjonen, ellers må vi ringe til API ved hjelp av $ .GetJSON () først og deretter utføre det.

I tillegg kan du se sessionStorage under ressursfanen i Chrome DevTools og Webkit-basert nettleser.

sessionStorage i Chrome DevTools

 Kompilere innholdet

Vi legger deretter til funksjonen nedenfor for å kompilere porteføljemalen i innholdet. Denne funksjonen er veldig likt med den ovennevnte funksjonen for toppteksten, bortsett fra per side variabel og per_page = parameter som vi vil bruke til å begrense antall innholdsposter hentet fra APIen.

(funksjon () var perPage = 12; var behanceProjectAPI = 'http://www.behance.net/v2/users/'+ userID +' / prosjekter? callback =? & api_key = '+ apiKey +' & per_page = '+ perPage; funksjon setPortfolioTemplate () var projectData = JSON.parse (sessionStorage.getItem ('behanceProject')), getTemplate = $ ('# porteføljesmal'). html (), template = Handlebars.compile (getTemplate), resultat = template (projectData); $ ('# portefølje'). html (resultat);; hvis (sessionStorage.getItem ('behanceProject')) setPortfolioTemplate (); else $ .getJSON (behanceProjectAPI, funksjon var data = JSON.stringify (prosjekt); sessionStorage.setItem ('behanceProject', data); setPortfolioTemplate (););;) (); 

Nå når vi ser nettleseren, bør vi allerede se brukerprofilen så vel som porteføljen. Men de er ennå ikke stylet.

Neste gang…

I den følgende delen av denne serien vil vi stile vårt porteføljeinnhold, noe som gir oss en dynamisk og responsiv porteføljeside. Ser deg da!