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
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To