Liman Eklentilerinde Guzzle İle Express.js  Web API'ına İstek Göndermek
Tags: liman, express, guzzle
Published: 2021-10-07 11:49:58

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

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

    ```js
    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. 

  ``` js
  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.

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

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

  ```json
  eklemek"require": {
  		"guzzlehttp/guzzle": "^7.0"
  	}
  ```

  

* "app/Controllers" altına bir controller oluşturun.

  ```php
  <?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
  <?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.

  ```php+HTML
  @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.

  ``` html
  <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")
  ```




```js
<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.

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