Många nya online-webbtjänster tillhandahåller backend-API för utvecklare. Dessa tillåter någon att ansluta till en webbapp och dra ut specifik information (eller tryck eller ändra bitar av data). Idag tittar vi specifikt på API för Imgur.
I denna handledning vill jag visa hur vi kan fjärrspegla en bild som finns på andra ställen online och automatiskt ladda upp till Imgur. Det är också möjligt att skapa en form hantering av användaruppladdade bilder också. Men jag ville hålla demoen ren utan att behöva flytta användarinnehåll på servern. Denna process är väldigt enkel när du förstår hur API: er fungerar. Ta en titt på min levande demo för att se exakt vad vi ska göra, följ sedan!
Live Demo - Hämta källkod
Webbsida layout
Det faktiska sidgränssnittet är väldigt enkelt och det skulle vara enkelt att skräddarsy för någon annan design. Jag har en liten inmatningsfält där användaren ska ange en direktadress som länkar till en bild på nätet. Istället för att skicka in en blankett till en annan sida kan vi hantera begäran via Ajax. Det enda beroendet är en kopia av det senaste jQuery-biblioteket.
När vi får ett svar tillbaka från PHP-skriptet ska det innehålla den nya bildadressen. Det finns en lång lista över svarparametrar som returneras från Imgur som vi skulle kunna använda. Detta inkluderar användarnamnet för uppladdare, bildtitel, uppladdningsdatum, bland annat skrotor av metadata. Men för denna demo ville jag hålla sakerna enkla och lätta att följa med.
Efter att ha klickat på länken Ladda upp kommer bilden att tryckas upp på Imgur. Det tar några sekunder innan vi får returdata, som sedan skickas tillbaka till JavaScript. Rikta ankarlänken #newimgurllink vi kan lägga till den direkta webbadressen i href-värdet, plus lägga till själva ankare texten. Det är en mycket grundläggande lösning för att skapa dynamiska imgur-länkar utan en siduppdatering.
Delving i jQuery
Det finns bara ett stort block med kod som måste utföras med jQuery. Detta händer när användaren klickar på #imgurupl som kallar den nya Ajax-förfrågan. Jag använder hash-symbolen (#) för ett href-värde eftersom vi avbryter den ursprungliga åtgärden med e.preventDefault ().
Det första vi gör är att skapa en variabel b64ajax att hysa Ajax-förfrågan. Det kommer att driva inmatningsfältet ut till en ny sida som heter upload.php som tar den som en POST-variabel. Detta är viktigt eftersom vi behöver komma åt detta webbadressvärde och returnera något tillbaka till frontendan.
Detta appliceras på Ajax-variabeln själv genom att springa b64ajax.done (). Det är en funktion som automatiskt körs efter återuppringningsprocessen med ett Ajax-resultat. Om vi antar att ett strängvärde går tillbaka från PHP så vet vi att en bild har laddats upp, och så lägger vi till det här länkvärdet i HTML-filen dynamiskt.
Imgur API i PHP
När jag letade efter Imgur v3 API-demos kom jag över det här underbara manuskriptet från Stack Overflow. Det tillhandahåller en lokalt värdad bilduppladdningsprogram som är kopplad direkt till Imgur. Deras kod ger en bra utgångspunkt för vad vi skapar.
Nu är det första du behöver göra innan du ens kodar i PHP att anmäla dig till en API-nyckel. Du kan registrera dig från den här sidan först efter att du har loggat in på ett konto. Så om du inte har ett Imgur-konto ska du registrera dig (det är gratis). När du har skapat en ny applikation genererar detta automatiskt en ny klient och ett hemligt ID.
När vi får tillgång till anonym information behöver vi bara klient-id. Hemliga ID-er används för att verifiera sessioner när du använder OAuth för att ansluta till användarkonton. Det kan vara mycket fördelaktigt, men inte inom ramen för denna handledning. Det finns inte så mycket PHP att förstå så jag slår ner det långsamt.
Självklart $ clientid ska hålla ditt nya ansöknings-ID. URL-variabeln som passerade genom Ajax är också inställd på en ny variabel. cURL är ett populärt bibliotek med funktioner som används för att kommunicera med servrar via ett antal protokoll. I det här fallet behöver vi tillgång till Imgur-uppladdningsändpunkten som definieras som CURLOPT_URL.
En annan riktigt viktig idé att ta bort från dessa variabler är konfigurationen av klient ID. Inom dokumentationen för Imgur API märker du att det finns en specifik formatering som vi måste överföra till Ajax-förfrågningsrubrikerna. Det här ser ut? Auktorisation: Klient-ID DIN DIDA? som kan kasta några människor bort. Kom bara ihåg att du behöver texten Klient ID föregår den faktiska ID-strängen.
Dessa slutliga linjer med kod kör helt enkelt HTTP-förfrågan och returnerar sedan exakt vad vi behöver för att gå in i jQuery. curl_exec () och curl_close () ska vara ganska självförklarande. Observera att körningsfunktionen kommer att returnera data från servern som hålls i variabeln $ svar. Eftersom vi begärde JSON-data från servern måste vi konvertera detta till en PHP-array med json_decode ().
Med den nya responsdatarrayen behöver vi bara dra ut den direkta bildadressen. Detta kan nås av $ Reply-> data-> länk var $ Reply-> uppgifter innehåller en delmängd av alternativa variabler. Om du är nyfiken på den här rutan kan du köra koden print_r ($ reply-> data) för att se vilka andra delar av informationen som returneras. Men slutligen för att stänga programmet vi echo länken för länken för svar och avsluta med exit ().
Många av denna kod kommer att bli tydligare när du spelar med det mer. API är ett så roligt sätt att öva att utveckla webbapps eftersom du lär dig genom att övervinna utmaningar längs vägen. Kom ihåg att eftersom denna demo körs via PHP fungerar den bara korrekt när den är värd på en lokal eller fjärransluten webbserver.
Live Demo - Hämta källkod
Slutgiltiga tankar
Imgur är ett av de mer förvirrande API: erna som jag har arbetat med på grund av det specifika kundidentifieringssystemet. När du har allt setup, verkar det fungera väldigt tillförlitligt - ladda ner en kopia av min källkod och bygga ut något liknande i ett av dina egna projekt, eller försök att ta projektet lite längre med direkt filuppladdning från användarens dator!