Meneroka API 500px: Membina App Showcase Laravel

Artikel ini menunjukkan membina aplikasi Laravel kecil yang mempamerkan API 500px. Kami akan membuat aplikasi untuk memaparkan foto popular, memohon penapis, dan mengakses profil jurugambar.

Ciri -ciri Utama:

• Foto popular: Halaman utama memaparkan foto 500px popular terkini. Pengguna penapisan dan penyortiran: Pengguna boleh menapis foto mengikut kategori (popular, akan datang, dan lain -lain) dan disusun mengikut undi, penarafan, dan kriteria lain.
• Profil jurugambar: Lihat profil jurugambar individu dengan galeri foto mereka.
• Bermula:

Sebelum berinteraksi dengan API, dapatkan kelayakan API dengan mendaftarkan aplikasi ujian di laman web 500px. Anda akan menerima dan .

Kami akan menggunakan Guzzle untuk permintaan HTTP dan pelanggan OAuth Guzzle untuk pengesahan. (Rujuk dokumentasi Guzzle untuk butiran mengenai perpustakaan ini.) consumer_key consumer_secret

Tambahkan pakej Guzzle ke

1. composer.json

   Run

   "require": {
       "guzzlehttp/guzzle": "^7.0",
       "guzzlehttp/oauth-subscriber": "^0.2"
   },
   "autoload": {
       "classmap": [
           "app/src" // Add this line if you're using a src folder
       ]
   }

   .

2. composer update Buat kelas OAuth (

   ):

3. src/PxOAuth.php

   mengikat kelas OAuth dalam

   <?php
   
   namespace App\Src; // Adjust namespace as needed
   
   use GuzzleHttp\Client;
   use GuzzleHttp\ClientInterface;
   use GuzzleHttp\HandlerStack;
   use GuzzleHttp\Subscriber\Oauth\Oauth1;
   
   class PxOAuth {
       private $consumer_key;
       private $consumer_secret;
       private $host;
       private $client;
   
       public function __construct(string $host, string $consumer_key, string $consumer_secret) {
           $this->consumer_key = $consumer_key;
           $this->consumer_secret = $consumer_secret;
           $this->host = $host;
   
           $stack = HandlerStack::create();
           $oauth = new Oauth1([
               'consumer_key' => $this->consumer_key,
               'consumer_secret' => $this->consumer_secret
           ]);
           $stack->push($oauth);
           $this->client = new Client(['base_uri' => $this->host, 'handler' => $stack]);
       }
   
       public function get(string $endpoint, array $params = []): \GuzzleHttp\Psr7\Response
       {
           return $this->client->get($endpoint, ['query' => $params]);
       }
   }

   (atau
untuk Laravel 5.5):

4. bootstrap/app.php app/Providers/AppServiceProvider.php

   Tentukan laluan dalam

   $app->singleton('pxoauth', function ($app) {
       $consumer_key = env('CONSUMER_KEY'); // Store keys in .env file
       $consumer_secret = env('CONSUMER_SECRET');
       $host = 'https://api.500px.com/v1/';
       return new \App\Src\PxOAuth($host, $consumer_key, $consumer_secret);
   });

   :

5. routes/web.php

   Buat

   Route::get('/', 'PXController@index');
   Route::get('/ajax/index_more', 'PXController@loadMore');
   Route::get('/user/{id}', 'PXController@photosByUser');

   :

6. PXController

   Buat Paparan (,

   <?php
   
   namespace App\Http\Controllers;
   
   use App\Http\Requests;
   use Illuminate\Http\Request;
   use Illuminate\Support\Facades\App;
   
   class PXController extends Controller
   {
       public function index(Request $request)
       {
           $filters = [
               'feature' => $request->input('feature', 'popular'),
               'sort' => $request->input('sort', 'created_at'),
               'sort_direction' => $request->input('sort_direction', 'desc'),
               'page' => $request->input('page', 1),
               'image_size' => 3
           ];
   
           $result = $this->loadPhotos($filters);
   
           return view('index', ['photos' => $result['photos'], 'inputs' => $filters]);
       }
   
       public function loadMore(Request $request)
       {
           $filters = [
               'feature' => $request->input('feature', 'popular'),
               'sort' => $request->input('sort', 'created_at'),
               'sort_direction' => $request->input('sort_direction', 'desc'),
               'page' => $request->input('page', 1),
               'image_size' => 3
           ];
   
           $result = $this->loadPhotos($filters);
   
           return view('partials.photos', ['photos' => $result['photos']]);
       }
   
       public function photosByUser($uid)
       {
           $px = App::make('pxoauth');
           $user = $px->get('users/show', ['id' => $uid])->getBody()->getContents();
           $user = json_decode($user, true);
           $inputs = ['image_size' => 3, 'feature' => 'user', 'user_id' => $uid, 'rpp' => 100];
           $result = $this->loadPhotos($inputs);
   
           return view('user', ['photos' => $result['photos'], 'user' => $user['user']]);
       }
   
       private function loadPhotos(array $parameters): array
       {
           $px = App::make('pxoauth');
           $response = $px->get('photos', $parameters);
           $result = json_decode($response->getBody()->getContents(), true);
           return $result;
       }
   }

   ,
) Pandangan ini akan mengendalikan paparan foto dan profil pengguna. Ingatlah untuk menyesuaikan HTML ke pilihan reka bentuk anda. Contoh asal menyediakan titik permulaan yang baik.

7. resources/views/index.blade.php resources/views/partials/photos.blade.php Tambah fungsi AJAX ke resources/views/user.blade.php untuk penomboran seperti yang ditunjukkan dalam contoh asal. Ingatlah untuk menyesuaikan pemilih jika struktur HTML anda berbeza.

8. ingat untuk menggantikan kunci API letak dengan kunci sebenar anda. Tanggapan yang disemak ini memberikan contoh yang lebih lengkap dan terkini, menangani isu-isu yang berpotensi dan menggunakan konvensyen Laravel moden. Pengendalian ralat dan struktur kod yang lebih mantap meningkatkan kebolehpercayaan. Ingatlah untuk menyesuaikan ruang nama dan laluan yang diperlukan untuk struktur projek anda. Seksyen Soalan Lazim dari input asal telah ditinggalkan kerana ia sebahagian besarnya berlebihan dengan kod dan penjelasan yang disediakan. index.blade.php

Atas ialah kandungan terperinci Foto, penapis dan profil pengguna popular dengan API 500px. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!