DEV Community

Mete ARSLAN for Açıklab

Posted on

4 2

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

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay