DEV Community 👩‍💻👨‍💻

Mete ARSLAN for Açıklab

Posted on

Liman Eklentilerinde Guzzle İle Express.js Web API'ına İstek Göndermek

Liman Eklentilerinde Guzzle İle Express.js Web API'ına İstek Göndermek

1- Express.js İle Web API'ın Hazırlanması

  • "liman" kullanıcısı ile liman sunucusuna bağlandıktan sonra "home/liman" dosyasına gidin.

  • Express.js kurulumunu yapın.

  express myapp
Enter fullscreen mode Exit fullscreen mode
  • Komutu ile projenizi oluşturun.

  • Web App olarak kullanmayacağımız için "view" ve "public" dosyasını silin.

  • "routes" dosyasının users.js dosyasını da silebilirisiniz.

  • 3000 numaralı portu kontrol edin. Eğer doluysa express.js çalışmayacaktır.

    • Dolu olması durumunda enviroment değişkeninini değiştirerek yada "bin/www" dosyasında
    var port = normalizePort(process.env.PORT || '3000');
    

    3000 değeriyle oynayarak boş bir portta çalıştırın.(Doğru port ataması için Wikipedia'ya bakabilirsiniz.)

  • "app.js" dosyasında "view engine setup" "path" ve "userRouter"ın bulunduğu kısımları silin.

  • "error handler" kısmını tamamen silin yada başka bir hata kontrolü ekleyin.

  • Bittiğin de "app.js" aşağıdaki gibi görülecektir.

  var createError = require(anlamlı'http-errors');
  var express = require('express');
  var cookieParser = require('cookie-parser');
  var logger = require('morgan');

  var indexRouter = require('./routes/home');


  var app = express();



  app.use(logger('dev'));
  app.use(express.json());
  app.use(express.urlencoded({ extended: false }));
  app.use(cookieParser());wikipedia

  // `/home` yerine `/api/v1/users` gibi daha anlamlı isimler de verebilirsiniz. 
  app.use('/home', indexRouter);


  // catch 404 and forward to error handler
  app.use(function(req, res, next) {
    next(createError(404));
  });


  module.exports = app;

Enter fullscreen mode Exit fullscreen mode

2- Kullanıcı İsimlerinin Eklenmesi ve Okunması

NOT: Bu örneğin basit tutulması için kullanıcılar veritabanında değil memory'de tutulmuştur

  • "routes" dizinin altında "home.js" dosyasında kullanıcı eklemek ve kullanıcıları almak için iki route ve bir array oluşturun oluşturun.
  var express = require('express');
  var router = express.Router();


  let names = [{
    name: "mete",
    surname: "arslan"
  },{
    name: "mehmet",
    surname: "basibuyuk"
  },{
    name: "ali",
    surname: "veli"
  }];


  router.get('/getNames', function (req, res, next) {
    res.send(JSON.stringify(names));
  });


  router.post('/addName', function (req, res, next) {
    console.log(req.body);konsolda
    if(!req.body.name || !req.body.surname)
      return res.send('FAILED').status(400);

    names.push(req.body);
    res.send("OK").status(200);
  });


  module.exports = router;
Enter fullscreen mode Exit fullscreen mode
  • Kullanıcıları göndermeden önce karşı tarafta da kolay bir şekilde okunması için JSON formatına çevirip gönderin.

  • Gerçek projelerede "POST" işlemleri için "request" ile gönderilen bilgiye daha ayrıntılı bir doğrulama yapmanız gerekir. "express-validator" yada başka bir modül kullanabilirsiniz.

  • Bu işlemlerden sonra terminalden projenin olduğu dosyaya gidin ve

  npm run start
Enter fullscreen mode Exit fullscreen mode

komutu ile uygulamanızı başlatın.

NOT:"Nodemon" yada benzeri bir modül ile çalıştırmaya başlarsanız yada uygulamayı kapatıp açarsanız kullanıcıların bulunduğu dizin memory'de olduğu için ilk duruma geri dönecektir.

3- Liman Eklentisinde Guzzle İle Controller Oluşturulması

Eklenti Oluşturulması:https://docs.liman.dev/eklenti-gelistirme/baslangic/yeni-eklenti-olusturma

  • Eklenti oluşturulduktan sonra(PHP OOP olarak oluşturun) VSCode ile "/liman/extensions/eklenti_adı" dosyasını açın.

  • composer.json dosyasında require kısmınıa Guzzle'i ekleyin

  eklemek"require": {
        "guzzlehttp/guzzle": "^7.0"
    }
Enter fullscreen mode Exit fullscreen mode
  • "app/Controllers" altına bir controller oluşturun.
  <?php

  namespace App\Controllers;

  use Liman\Toolkit\Shell\Command;
  use GuzzleHttp\Client;


  class GuzzleTestController
  {
    private $client;

    public function __construct()
    {
        $this->$client = new Client([
            // Base URI is used with relative requests
            'base_uri' => '10.154.127.120:3001/',
            // You can set any number of default request options.
            'timeout'  => 2.0,
        ]);
    }


    public function getNames()
    {
        $response = $this->$client->request('GET', 'home/getNames');
        $contents = json_decode($response->getBody()->getContents());

        return respond($contents, 200);
    }


    public function addName()
    {
        validate([
            'name' => 'required|string',
            'surname' => 'required|string'
        ]);

        $body = json_encode(
            [
                'name' => request("name"),
                'surname' => request("surname")
            ]
        );


        $response = $this->$client->request(
            'POST',
            'home/addName',
            [
                'body' => $body,
                'headers' => ['Content-Type' => 'application/json']
            ]
        );

        $contents = $response->getBody()->getContents();

        return respond($contents, 200);
    }
  }

Enter fullscreen mode Exit fullscreen mode
  • "constructor" kısmına oluşturmuş olduğumuz express serverına bağlanmak için bir client oluşturun.

  • Express.js'ten kullanıcıların bilgisini alacak ve kullanıcı ekleyecek iki metot yazın.

  • "getNames" metodunda istediğimiz kullanıcılar JSON formatında gelmektedir bu veriyi json_decode ile anlamlı hale getirip respond ile gönderin. Dilerseniz gelen veride bir sorun olması durumunda hata kontrolü de yaptırabilirsiniz.

  • "addName" metodunda kullanıcıdan da veri alınmaktadır. Alınan veri "validate" fonksiyonu ile doğrulandıktan sonra gönderinin "body" kısmına atamak için "request" fonksiyonunu kullanın.

  • "client" ile yapılacak olan istek için "$client->request()" metodunuda header kısmında gönderilen verinin JSON formatında olduğunu belirtin.

  • "response" Express tarafında işlemin başarılı yada başarısız olmasına göre bir dönüt verecektir.

  • Son olarak "routes.php" dosyasına yaptığınız metotları ekleyin.

  <?php
  eklemekeklemek
  return [
      "index" => "HomeController@index",

      "get_hostname" => "HostnameController@get",
      "set_hostname" => "HostnameController@set",

      "get_guzzletestnames" => "GuzzleTestController@getNames",
      "add_guzzletestnames" => "GuzzleTestController@addName"
  ];

Enter fullscreen mode Exit fullscreen mode

4- View'in Kodlanması

NOT: Yetki problemlerinden dolayı yeni oluşturduğun dosyalar okunamayabiliyor. Oluşturduğunuz dosyaların sahibinin doğru kişi olduğundan emin olun.

  • "views" klasörünün altına yapmış olduğumuz Controller'ı çağaracak bir blade.php dosyası ve kodun daha düzenli olması için JsScript kodlarının bulunduğu dosyaları oluşturun.

  • index.blade.php dosyasına bu viewleri ekleyin.

  @extends('layouts.master')

  @section('content')
  <h2 class="text-bold">{{ __("Deneme2") }}</h2>

  <ul class="nav nav-tabs" role="tablist" style="margin-bottom: 15px;">
      <li class="nav-item">
          <a class="nav-link active" onclick="getHostname()" href="#hostname" data-toggle="tab">
              <i class="fas fa-server"></i> {{ __("Hostname") }}
          </a>
      </li>
      <li class="nav-item">
          <!--onclick kismina her guzzle test paneli sectildiginde tablonun yuklenmesi icin bir fonksiyon ekledim-->
          <a class="nav-link" onclick="guzzleTest()" href="#guzzleTest" data-toggle="tab">
              <i class="fas fa-server"></i> {{ __("Guzzle Test") }}
          </a>
      </li>
  </ul>

  <div class="tab-content">
      <div id="hostname" class="tab-pane active">
          @include('hostname.main')
      </div>
      <div id="guzzleTest" class="tab-pane">
          <!--burada oluşturmuş olduğum view'i ekledim-->
          @include('guzzleTest.main')
      </div>
  </div>
  @endsection
Enter fullscreen mode Exit fullscreen mode
  • Oluşturmuş olduğunuz blade.php dosyasında tabloyu ve inputları alacak kısmı kodlayın ve son kısmında yazacağımız scriptleri de ekleyin.
  <div class="row">
      <div class="col-12 mb-2">
          <table id="users" class="table"></table>
      </div>
      <div class="col-12 mb-2">
          <form onsubmit="addName(); return false;" class="row input-group">
              <div class="col-md-4">
                  <input id="nameInput" type="text" class="form-control"/>
              </div>
              <div class="col-md-4">
                  <input id="surnameInput" type="text" class="form-control"/>
              </div>
              <div class="col-md-4">
                  <button type="submit" id="addNameButton" class="btn btn-warning">Kullanici Ekle</button>
              </div>
          </form>
      </div>
  </div>

  @include("guzzleTest.scripts")
Enter fullscreen mode Exit fullscreen mode
<script>
    function getNames() {
        showSwal("{{ __('Yükleniyor...') }}", 'info');
        let data = new FormData();

        request("{{ API('get_guzzletestnames') }}", data, function(response) {
            response = JSON.parse(response);

            let users = response.message;

            let final_html = `<thead><tr>
                <th>Isim</th>
                <th>Soyisim</th>
            </tr></thead><tbody>`;

            users.forEach(u => {
                final_html += `<tr>
                <td>${u.name}</td>
                <td>${u.surname}</td>
                </tr>`
            });

            final_html += "</tbody>"

            $('#users').html(final_html);

            Swal.close();
        }, function(response) {
            response = JSON.parse(response);
            showSwal(response.message, 'error');
        });
    }


    function addName() {
        let data = new FormData();
        let $nameInput = $("#nameInput");
        let $surnameInput = $("#surnameInput");

        data.append("name", $nameInput.val());
        data.append("surname", $surnameInput.val());



        request("{{ API('add_guzzletestnames') }}", data,
            function(response) {
                response = JSON.parse(response);
                if(response.status == 200){
                    getNames();
                    $nameInput.val("");
                    $surnameInput.val("");
                }
            });
    }

-
    function guzzleTest() {
        getNames();
    }
</script>

Enter fullscreen mode Exit fullscreen mode
  • Sciptlerin bulunacağı dosya içeriginde panel aktive olduğunda çağırılacak bir fonksiyon yazın.(Bu durumda bu fonksiyon guzzleTest)

  • Controller içerisinde yazmış olduğumuz metotları çağıracak iki fonksiyon yazın.

  • Bu fonksiyonlardan "getNames" kullanıcı listesini alıp tablo haline çeviriyor.

  • Controller'a istek göndermek için request fonksiyonu kullanılıyor. Eğer göndereciğiniz istekte veri varsa FormData sınıfından türemiş bir nesne ile ile ekleyip gönderin.

  data.append("name", $nameInput.val());
  data.append("surname", $surnameInput.val());
Enter fullscreen mode Exit fullscreen mode

Github Linkleri

https://github.com/White-Hare/LimanGuzzleExpressOrnegi-Laravel

https://github.com/White-Hare/LimanGuzzleExpressOrnegi-Express

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.