Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 7, 2021 11:49 am GMT

Liman Eklentilerinde Guzzle le Express.js Web API'na stek Gndermek

Liman Eklentilerinde Guzzle le Express.js Web API'na stek Gndermek

1- Express.js le Web API'n Hazrlanmas

  • "liman" kullancs ile liman sunucusuna balandktan sonra "home/liman" dosyasna gidin.

  • Express.js kurulumunu yapn.

  express myapp
  • Komutu ile projenizi oluturun.

  • Web App olarak kullanmayacamz iin "view" ve "public" dosyasn silin.

  • "routes" dosyasnn users.js dosyasn da silebilirisiniz.

  • 3000 numaral portu kontrol edin. Eer doluysa express.js almayacaktr.

    • Dolu olmas durumunda enviroment deikeninini deitirerek yada "bin/www" dosyasnda
    var port = normalizePort(process.env.PORT || '3000');

    3000 deeriyle oynayarak bo bir portta altrn.(Doru port atamas iin Wikipedia'ya bakabilirsiniz.)

  • "app.js" dosyasnda "view engine setup" "path" ve "userRouter"n bulunduu ksmlar silin.

  • "error handler" ksmn tamamen silin yada baka bir hata kontrol ekleyin.

  • Bittiin de "app.js" aadaki gibi grlecektir.

  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- Kullanc simlerinin Eklenmesi ve Okunmas

NOT: Bu rnein basit tutulmas iin kullanclar veritabannda deil memory'de tutulmutur

  • "routes" dizinin altnda "home.js" dosyasnda kullanc eklemek ve kullanclar almak iin iki route ve bir array oluturun oluturun.
  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;
  • Kullanclar gndermeden nce kar tarafta da kolay bir ekilde okunmas iin JSON formatna evirip gnderin.

  • Gerek projelerede "POST" ilemleri iin "request" ile gnderilen bilgiye daha ayrntl bir dorulama yapmanz gerekir. "express-validator" yada baka bir modl kullanabilirsiniz.

  • Bu ilemlerden sonra terminalden projenin olduu dosyaya gidin ve

  npm run start

komutu ile uygulamanz balatn.

NOT:"Nodemon" yada benzeri bir modl ile altrmaya balarsanz yada uygulamay kapatp aarsanz kullanclarn bulunduu dizin memory'de olduu iin ilk duruma geri dnecektir.

3- Liman Eklentisinde Guzzle le Controller Oluturulmas

Eklenti Oluturulmas:https://docs.liman.dev/eklenti-gelistirme/baslangic/yeni-eklenti-olusturma

  • Eklenti oluturulduktan sonra(PHP OOP olarak oluturun) VSCode ile "/liman/extensions/eklenti_ad" dosyasn an.

  • composer.json dosyasnda require ksmna Guzzle'i ekleyin

  eklemek"require": {        "guzzlehttp/guzzle": "^7.0"    }
  • "app/Controllers" altna bir controller oluturun.
  <?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" ksmna oluturmu olduumuz express serverna balanmak iin bir client oluturun.

  • Express.js'ten kullanclarn bilgisini alacak ve kullanc ekleyecek iki metot yazn.

  • "getNames" metodunda istediimiz kullanclar JSON formatnda gelmektedir bu veriyi json_decode ile anlaml hale getirip respond ile gnderin. Dilerseniz gelen veride bir sorun olmas durumunda hata kontrol de yaptrabilirsiniz.

  • "addName" metodunda kullancdan da veri alnmaktadr. Alnan veri "validate" fonksiyonu ile dorulandktan sonra gnderinin "body" ksmna atamak iin "request" fonksiyonunu kullann.

  • "client" ile yaplacak olan istek iin "$client->request()" metodunuda header ksmnda gnderilen verinin JSON formatnda olduunu belirtin.

  • "response" Express tarafnda ilemin baarl yada baarsz olmasna gre bir dnt verecektir.

  • Son olarak "routes.php" dosyasna yaptnz 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 oluturduun dosyalar okunamayabiliyor. Oluturduunuz dosyalarn sahibinin doru kii olduundan emin olun.

  • "views" klasrnn altna yapm olduumuz Controller' aaracak bir blade.php dosyas ve kodun daha dzenli olmas iin JsScript kodlarnn bulunduu dosyalar oluturun.

  • index.blade.php dosyasna 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 oluturmu olduum view'i ekledim-->          @include('guzzleTest.main')      </div>  </div>  @endsection
  • Oluturmu olduunuz blade.php dosyasnda tabloyu ve inputlar alacak ksm kodlayn ve son ksmnda yazacamz 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("{{ __('Ykleniyor...') }}", '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 ieriginde panel aktive olduunda arlacak bir fonksiyon yazn.(Bu durumda bu fonksiyon guzzleTest)

  • Controller ierisinde yazm olduumuz metotlar aracak iki fonksiyon yazn.

  • Bu fonksiyonlardan "getNames" kullanc listesini alp tablo haline eviriyor.

  • Controller'a istek gndermek iin request fonksiyonu kullanlyor. Eer gndereciiniz istekte veri varsa FormData snfndan tremi bir nesne ile ile ekleyip gnderin.

  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


Original Link: https://dev.to/aciklab/liman-eklentilerinde-guzzle-i-le-express-js-web-api-ina-i-stek-gondermek-53np

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To