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

• 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;

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;

• 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

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"
    }

• "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);
    }
  }

• "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"
  ];

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

• 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")

<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>

• 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());

Github Linkleri

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

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