Build en Desktop Flickr Uploader med AIR
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen, vil du bygge en stasjonær Flickr Image Uploader bruker AS3 /FlickrAPI og eksport programmet som en AIR app.
Trinn 1: Opprette en ny Flex Prosjekt
Start ut ved å åpne Flex Builder og opprette et nytt prosjekt ved å trykke "Fil > New > Flex Project". Gå videre og gi prosjektet et navn og plassering. Det viktigste du trenger å bekymre seg for her er "Application Type", sørg for at er satt til "Desktop (runs i Adobe AIR)"
Trinn 2:. Laste ned nødvendige biblioteker Anmeldelser
Før vi begynner programmering, må vi laste ned bibliotekene vi trenger for dette prosjektet. Disse bibliotekene inkluderer corelib av Adobe og selvfølgelig Flickr AS3 bibliotek
Du må få den siste versjonen av Flickr AS3 API via SVN fordi det er et problem med "last opp" funksjon av den frigjorte bygger som ikke har blitt fikset ennå
Trinn 3:. Flytt Biblioteker til prosjektmappe
Med bibliotekene lastet ned, trenger vi å flytte dem inn i vår prosjektmappen. Pakk ut "corelib" og naviger til "com" -mappen inne i "src" -mappen. Nå åpner prosjektmappen i et nytt vindu og åpne "src" -mappen. Dra "com" -mappen til prosjektets "src" -mappen.
Innsiden av Flickr API-mappen, vil du finne et lignende filstruktur som "corelib" -mappen. Bore ned i "src > com > adobe > webapis" mappe og ta tak i "flickr" -mappen. Flytt den mappen over til prosjektmappen i denne katalogen "src > com > adobe > webapis".
Leder tilbake til Flex Builder og oppdatere din Package Explorer. Du skal nå se bibliotekene du lastet dukke opp innsiden av prosjektmappen
Trinn 4: Sette opp brukergrensesnittet - Del 1
Vi vil ikke bare være å laste opp bilder. til vår Flickr-konto, men tittel, tagger, og en beskrivelse også, så vi trenger de riktige feltene.
Angi dokumentstørrelsen til 320x400. Høyreklikk på Flex Prosjektmappe og velg "egenskaper". Bla ned til Flex Compiler panel og skriv inn følgende kode inn i "ekstra kompilatoren argumenter" feltet ", -default-size 320 415".
Bytt til utformingsvisning, åpner Components panelet og dra ut et bilde komponent. Sørg for å gi bildekomponenten en id tittelen "imagePreview", setter sin høyde til 205 piksler, og begrense sine proporsjoner å være 10 piksler fra venstre, høyre, og toppen av visningen i Layout-panelet.
Deretter drar ut to TextInput komponenter til scenen og stable dem oppå hverandre med en padding av 10 piksler mellom dem begrenser dem begge til 10 piksler fra venstre og høyre. Gi det første feltet en ID fra "imageTitle" og sette teksten verdien til "Image Title". Gi det andre feltet en id av "imageTags" og en tekstverdi av "tagger"
Trinn 5:. Sett opp User Interface - Del 2
Så langt vi har en forhåndsvisningsområdet for vår valgte bildet, felt for å angi en tittel og tags for vårt image. One more stykke data mangler, en beskrivelse. Gå til Components panelet og dra en tekstområde komponent ut og plassere den under Etiketter-feltet. Still inn høyden til 70 piksler og begrense bredden til 10 piksler fra høyre og venstre. Gi tekstområdet en id av "imageDesc" tekst verdien av "Image Description".
Nå er alt vi trenger nå er en Select-knappen, en opp-knapp og en fremdriftsindikator for å overvåke vår opplasting fremgang. Gå videre og drar to knapper til visningsområdet og en fremdriftslinje. Plasser den første knappen 10 piksler fra venstre og begrense den til den posisjonen. Gi den en id av "selectBtn" og sette etiketten til "Velg". Plasser den andre knappen 10 piksler fra høyre og begrense den til den posisjonen også. Sette sitt id til "uploadBtn" og merk den "Last opp". Plasser fremdriftslinjen i midten av de to knappene og begrense den til midten av søknaden. La oss gi det en id av "pBar"
Din søknad skal se ut som på bildet nedenfor.
Trinn 6: Tab Index
Bytt til kodevisning inne av Flex Builder og finne inntastingsfeltene du nettopp opprettet. De tre feltene du trenger er "Tittel", "tagger" og "beskrivelse" feltene. Klikk innsiden av hver enkelt og legge inn denne koden tabindex ON = "n", erstatte "n" med et sekvensielt nummer, som så:
< mx: Bilde x = "10" y = "10" width = "298" height = "205" id = "imagePreview" /> < mx: TextInput x = "10" y = "223" id = "imageTitle" width = "298" text = "Image Title" tabindex ON = "1" /> < mx: Button x = "10" y = "364" label = "Velg" id = "selectBtn" klikk = "selectImageFile (fileToOpen)" /> < mx: Button x = "243" y = "364" label = "Last opp" id = "uploadBtn" klikk = "uploadfile (event)" /> < mx: ProgressBar x = "91,5" y = "360" width = "135" id = "pBar" /> < mx: TextInput x = "10" y = "253" width = "298" text = "Tagger" id = "imageTags" tabindex ON = "2" /> < mx: Tekstfelt x = "10" y = "283" width = "298" height = "69" text = "Image Description" id = "imageDesc" tabindex ON = "3" />
Trinn 7: Registrer deg for en Flickr API Key
Først hodet på over til Flickr og registrere deg for en API-nøkkel.
Flickr vil be deg om å navngi søknaden din og gi den en beskrivelse.
Når du fyller inn riktig informasjon og godtar vilkårene og betingelsene, klikk OK og deretter Flickr vil direkte deg til en skjerm med API-nøkkel og hemmelig nøkkel for programmet. Hold API Key og Secret hendig, du trenger dem snart
Trinn 8:. Lag en klasse for å koble til Flickr
La oss nå lage en ny Action klasse som vil tjene som vår tilknytning til Flickr. Head tilbake til Flex Builder og opprette en ny Action klasse fra Fil > Ny meny; name it FlickrConnect.
Gå videre og lime inn i disse "import" kommandoer, og jeg skal forklare sin hensikt
pakke {import flash.net.SharedObject;. //trengte å sette system cookies importere flash.net.URLRequest; import flash.net.navigateToURL; //åpner fullmakten vindu i nettleseren import mx.controls.Alert; //vi skal bruke to varselvinduer i vår app import mx.events.CloseEvent; //Registrerer når varselvinduet er lukket //Importer alle Flickr API klasser for å sørge for at vi har alt vi trenger importere com.adobe.webapis.flickr. *; import com.adobe.webapis.flickr.events. *; import com.adobe.webapis.flickr.methodgroups *;.
Med denne klassen, vi kommer til å passere Flickr vår API-nøkkel og app hemmelige nøkkelen og til gjengjeld vil vi få en autentiserings token som vi vil lagre som en informasjonskapsel på brukerens system. Når vår app sender nøkkelen til Flickr vil det åpne et nettleservindu ber brukeren om å godkjenne søknaden med sin Flickr-konto, når de velger "autorisere", og de kommer tilbake til app de vil bli møtt av et varselvindu ber dem om å Klikk på "OK" når de har godkjent app med Flickr. Å gjøre dette vil da sende ut for sikkerhetskort og sette cookie lagring som token lokalt for å omgå godkjenningsprosessen hver gang programmet åpnes.
Trinn 9: Lag Flickr Instance og Initial Tjenesten
public class FlickrConnect {public Var flickr: FlickrService; private Var frob: String; private Var flickrCookie: Shared = SharedObject.getLocal ("FlexFlickrUploader"); //butikken Flickr Token i en cookie offentlig funksjon FlickrConnect () {flickr = new FlickrService ("xxxxxxxxxxxxxxxxxxxxxxxxxxxx"); //skriv Flickr API-nøkkel flickr.secret = " xxxxxxxxxxxxxxxx "; if (flickrCookie & & flickrCookie.data.auth_token) //hvis cookie OG Auth Token eksisterer, satt token {flickr.token = flickrCookie.data.auth_token; } else //hvis ikke, får godkjenning {flickr.addEventListener (FlickrResultEvent.AUTH_GET_FROB, getFrobResponse); flickr.auth.getFrob (); }}
I koden ovenfor starter vi med å erklære 3 variabler som vi skal bruke i denne klassen. Den "flickr" variabelen er satt som offentlig fordi vi vil referere til dette objektet fra innenfor hovedapplikasjonen, de to andre variablene er private, fordi de er spesifikke for denne klassen bare.
I klassen konstruktør, initialisere flickr objekt ved å sette den lik en "ny FlickrService" og bestått i din Flickr API-nøkkel som en streng. Under, satt den hemmelige nøkkelen til vår nyopprettede tjenesten til nøkkelen du fikk av Flickr når du søkte om en API-nøkkel.
Under våre deklarasjoner, vi først sjekke for å se om vårt system cookie eksisterer og hvis en "godkjenning token" er innstilt. Hvis begge disse argumentene er lik sant, går vi videre og sette "token" tilhører vår flickr tjeneste lik autentisering token lagret i vår cookie. Hvis noen av disse argumentene er ikke sant, fortsetter vi prosessen med å godkjenne søknaden.
Legg til og hendelse lytteren til flickr service. Typen er av "FlickrResultEvent" og vi lytter etter "AUTH_GET_FROB". Skriv inn funksjonsnavnet "getFrobResponse". Start en ny linje og utføre "getFrob ()" funksjonen til Flickr API.
frob
Flickr definerer ikke begrepet "frob" i sin API dokumentasjon, men en kort forklaring er oppført nedenfor
En "frob" er bare en hex-kodet streng at Flickr servere hånd ut som en del av godkjenningsprosessen.; en mer konvensjonell begrep for det ville være en "nonce '
En mer detaljert definisjon kan bli funnet her
Trinn 10:.. Få frob
Funksjonen getFrob () vil sende vår API-nøkkel til Flickr og hvis nøkkelen er gyldig, vil Flickr returnere en streng til oss. De frob vil bli sendt til en annen funksjon som vil lage en login URL at vi vil lede brukeren til å logge inn på sin Flickr-konto og gi vår app tillatelse til å laste opp bilder
privat funksjon getFrobResponse (event: FlickrResultEvent):. Void {if (event.success) {frob = String (event.data.frob); Var auth_url: String = flickr.getLoginURL (frob, AuthPerm.DELETE); //genererer et login URL navigateToURL (ny URLRequest (auth_url), "_blank"); //åpner nettleseren og ber om bekreftelse Alert.show ("Lukk dette vinduet etter at du har logget inn til Flickr", "Flickr Authorization", Alert.OK, null, onCloseAuthWindow); }}
Når vi får svar tilbake fra Flickr med en frob, sjekker vi for å se om svaret returnerte "suksess". Når det er fastsatt en frob ble returnert, vi tilordne dataene tilbake til en streng variabel, opprette en ny String variabel som vil være godkjennings URL, og deretter bruke en av Flickr AS3 API innebygde funksjoner som vil generere vår login URL og tildele sin verdi til våre "auth_url" streng.
Den neste delen bør være kjent for alle som har jobbet i Flash for en stund. Bruk Flash innebygde "navigateToURL" -funksjonen for å åpne Flickr i nettleseren og be brukeren om å logge inn og gi tillatelse til vår app for å få tilgang til kontoen sin. Som en del av denne prosessen vil vi be Flickr for "SLETT" tillatelse som er den høyeste tilgangsnivået en app kan ha. Med det nivået av tilgang, vil vi være i stand til å laste opp, redigere, legge til og slette. Dette er litt overkill, men jeg valgte å holde det på dette nivået som en referanse for dine egne prosjekter.
Samtidig vi blir ledet til Flickr innloggingsside, vår app genererer et varselvindu . Dette vinduet vil omfatte meldingen "Lukk dette vinduet etter at du har logget inn til Flickr". Når brukeren har logget inn Flickr og returnerte til app, vil de treffer "OK", som vil kalle en annen funksjon som vil hente adgangs token fra Flickr
Trinn 11:. Få tilgang Token
offentlig funksjon onCloseAuthWindow (event: CloseEvent): void {flickr.addEventListener (FlickrResultEvent.AUTH_GET_TOKEN, getTokenResponse); flickr.auth.getToken (frob);}
Denne funksjonen bare spør Flickr med en tilgang, vil Flickr se at vår app (som er identifisert av vår frob) har blitt godkjent og vil returnere token.
Trinn 12: Set Tilgang Token og System Cookie
privat funksjon getTokenResponse (event: FlickrResultEvent): void {if (event.success) {var authResult: AuthResult = AuthResult (event.data. auth); flickr.token = authResult.token; flickrCookie.data.auth_token = flickr.token; flickrCookie.flush (); //satt cookie på lokale datamaskinen}}
Den siste funksjonen i vår FlickrConnect klassen vil akseptere token sendt fra Flickr og lagre den i et system cookie. Start med å igjen kontrollerer at arrangementet var vellykket. Hvis vi skulle lykkes i å hente en token fra Flickr, opprette en forekomst av "AuthResult" og tilordne den til en variabel som heter "authResult". Sett verdien av variabelen tangert til "auth" verdien av de returnerte dataene. Sett "token" tilhører vår FlickrService til "token" eiendom av våre "authResult" variable.
Neste, tildele en egenskap av "auth_token" til cookie vi opprettet i begynnelsen av klassen (flickrCookie) og lik den til "flickr.token". Alt som er igjen er å sette cookie på vår lokale datamaskinen, gjør vi det ved å bruke "flush ()" funksjon av Shared i AS3.
Nå som vi har en klasse for å koble til Flickr og sette vår godkjenning og tillatelser, kan vi starte koding hoveddelen av vår søknad
Trinn 13: Import og variabler
I vår hoved script, vil vi importere tre klasser;. klassen vi nettopp opprettet, bygget i Flex Alert klassen, og Last opp klassen på Flickr AS3 API.
Av de fire variablene vi kommer til å trenge, den første som vi trenger for å lage er en forekomst av FlickrConnect klassen vi nettopp opprettet, nevne at klassen "flickrLogin". Lag en variabel kalt "uploader" med en forekomst av "Upload" og pass på flickr eksempel fra vår FlickrConnect klasse. Lag to flere variabler, som begge "Fil" type. En av disse variablene, vil vi kaller "fil", den andre "fileToOpen"
import FlickrConnect;. Import mx.controls.Alert; import com.adobe.webapis.flickr.methodgroups.Upload; private Var flickrLogin: FlickrConnect = new FlickrConnect (); privat Var uploader: Upload = new opp (flickrLogin.flickr); privat Var fil: Fil; private Var fileToOpen: File = File.documentsDirectory;
Trinn 14 : Initial og Image Select Function
Nå som vi har vår import og variabler satt opp, må vi starte vår søknad. Under initialisering prosessen setter fremdriftslinjen (pBar) til usynlig. Vi ønsker bare at stolpen skal være synlig når vi laster opp et bilde.
Den neste funksjon er å åpne filen nettleser for brukeren å velge et bilde.
privat funksjon init (): void {pBar.visible = false;} private funksjon selectImageFile (root: File): void {var imgFilter: Filefilter = new Filefilter ("Bilder", ".. * .jpg, * gif, * png"); root.browseForOpen ("Open", [imgFilter]); root.addEventListener (Event.SELECT, fileSelected);}
Trinn 15: Les Filinformasjon og oppdatere Input felt
Lag en funksjon som heter "fileSelected" som vil brann når brukeren velger et bilde . Denne funksjonen vil også lest at bildets filnavn og url. Oppdatere "Title" input-feltet med den valgte filen navn og målrette "Image Preview", sette det er URL til nettadressen til den valgte filen
privat funksjon fileSelected (hendelse: Hendelse):. Void {imageTitle.text = fileToOpen.name; imagePreview.source = fileToOpen.url;}
Trinn 16: Last opp fil og Track Progress
Lag to flere funksjoner, en til å håndtere opplastingen av bildet til Flickr, og den andre for å spore sin fremgang via fremdriftslinjen.
navn den første funksjonen "uploadfile" med en type "MouseEvent". Innsiden av den funksjonen, sett den variabelen som vi opprettet tidligere, "fil" å skrive "Fil" og passere i nettadressen til valgt av brukeren image. Legg to lyttere til den variabelen. Den første lytteren vil være en "DataEvent" lytter for opplasting komplett og målet funksjonen vil bli kalt "uploadCompleteHandler". Den andre lytteren vil være et fremskritt hendelsen og målet vil være funksjonen "onProgress".
Lag den andre funksjonen og gi den navnet "onProgress". Innsiden av funksjonen satt fremdriftslinjen til synlig og sette sin kilde som for "file"
privat funksjon uploadfile (event: MouseEvent):. Void {file = new File (fileToOpen.url); file.addEventListener (DataEvent.UPLOAD_COMPLETE_DATA, uploadCompleteHandler); file.addEventListener (ProgressEvent.PROGRESS, onProgress); uploader.upload (fil, imageTitle.text, imageDesc.text, imageTags.text);} private funksjon onProgress (event: ProgressEvent): void {pBar.visible = true; pBar.source = fil;}
Trinn 17: Last Komplett
Når opplastingen er fullført, vil Flickr sende et svar tilbake til vår app lar oss få vite opplastingen er ferdig. Flickr svar tilbake til oss vil være i form av XML, må vi analysere som XML og avgjøre svaret enten det er en "ok" eller noe annet. Alt vi trenger å vite er om svaret er "ok" og deretter starte et varselvindu som sier at opplastingen lyktes eller hvis responsen om noe annet, betyr det at opplastingen mislyktes, og vi trenger å la brukeren vite.
< p>
privat funksjon uploadCompleteHandler (event: DataEvent): void {pBar.visible = false; trace ("upload gjort"); Var xdata: XML = new XML (event.data); spore (xdata); if (xdata [0] .attribute ("stat") == "ok") {Alert.show ("Last opp Vellykket", "Last opp Status"); } else {Alert.show ("Opplasting feilet", "Last opp Status"); }}
Trinn 18: Ring Funksjoner og Initiere Application
På dette punktet, hvis du teste din søknad ingenting vil skje. Det er fordi vi ikke har lagt klikkfunksjonene til våre knapper og enda viktigere, vi har ikke satt i gang vår søknad.
innsiden av hovedprogramkode, bla nedover og finne koden for knappene vi opprettet ved hjelp av GUI i begynnelsen av denne opplæringen. Vi må legge til "Klikk" handlere til hver knapp for å fortelle dem hvilken funksjon som skal utføres når de blir klikket.
velg knappen vil kalle selectImageFile (fileToOpen) med variabel fileToOpen gått inn i den.
< mx: Button x = "10" y = "364" label = "Velg" id = "selectBtn" klikk = "selectImageFile (fileToOpen)" />
opplasting knappen vil kalle uploadfile (hendelse) og vil bestå i en hendelse i det
< mx. Button x = "243" y = "364" label = "Last opp" id = "uploadBtn" klikk = "uploadfile (event)" />
Nå er alt vi trenger å gjøre er å starte vår søknad. Vi gjør dette ved å legge noen kode til toppen av vår fil under "WindowedApplication" element. Alt vi trenger å gjøre er å legge samtalen funksjonen init () med denne applicationComplete. Det skal se slik ut:
< mx: WindowedApplication xmlns: mx = "http://www.adobe.com/2006/mxml" layout = "absolutt" applicationComplete = "init () ">
Trinn 19:. Test Application
Når du er ferdig koding søknaden din, er det på tide å teste den for å sikre at det fungerer
Klikk på" debug "i Flex Builder å distribuere programmet.
Programmet vil varsle deg å bare klikke" OK "når du logger inn på Flickr og gi tillatelse til appen tilgang til Flickr-konto.
Trinn 20: Velg et bilde laste opp
Etter å ha klikket "OK" vil du se din tomt søknad venter på innspill
Klikk på "Select" og naviger til et bilde på din. lokale datamaskinen. Når den er valgt, klikk på "Open". Du skal nå se en forhåndsvisning av bildet du har valgt. Gå videre og gi den en tittel og en beskrivelse. Tenk på noen koder som går sammen med bildet og skriv dem inn i "tags" feltet, atskilt med komma. Klikk "Last opp".
Hvis du var vellykket skal du se følgende skjermbilde.
Bare for å være sikker på at bildet er lastet opp, ta turen til din Flickr-konto og vise bildet du nettopp lastet opp
Trinn 21:. Eksporter som AIR
Nå som vi vet at vår app fungerer som den skal, kan vi eksportere det som en AIR applikasjon. For å gjøre det, klikk "Fil > Export > Slipp Build". Det er ikke noen innstillinger på det første vinduet som vi må endre, så klikker du på "Next" og hodet til neste vindu.
Lag et sertifikat ved å fylle i "Name Publisher" og "passord" felt . Bla gjennom hvor du vil lagre sertifikatet og name it. Klikk på "Finish" og vente på AIR-applikasjonen til å bygge.
Konklusjon
Din app er ferdig, det fungerer og du har eksportert den ut for AIR. Hva nå? Nå kan du utvide på dette programmet med litt mer av API-funksjoner, eller du kan distribuere som er.
Takk for at du tar deg tid til å arbeide gjennom denne opplæringen, jeg håper du likte det. Og husk ... holde læring! Anmeldelser