# [CI+swagger]使用筆記

:::success
使用版本
CI:3.1.6
Swagger:zircote/swagger-php 3.2
:::

步驟說明

1.下載Codeingiter
https://codeigniter.org.tw/
本次使用3.1.6版

2.在根目錄建立資料夾swagger

3.下載swagger的樣式
[Shttps://github.com/swagger-api/swagger-ui](https://github.com/swagger-api/swagger-ui)
解壓縮後，將dist內檔案移到剛剛建立的swagger裏

4.在根目錄安裝swagger

composer require zircote/swagger-php

成功後根目錄出現vender資料夾/zircote/swagger-php

5.controllers中建立Swagger.php

<?php
defined('BASEPATH') or exit('No direct script access allowed');
require('./vendor/autoload.php');

class Swagger extends CI_Controller
{

  public function __construct()
  {
    parent::__construct();
  }

  public function index()
  {

    $openapi = OpenApi\scan(__DIR__);
    // echo $openapi->toJson();
    $jasonFile = './api_doc.json';
    file_put_contents($jasonFile, $openapi->toJson());
    // echo $jasonFile;
    // $this->load->view('swagger', '');

  }
}

用來建立api_doc.json
scan為掃描特定位置中含有swagger語法檔案
__DIR__：本檔案所在的路徑controllers
因此掃描位置為controllers以下所有檔案

6.在controllers建立Api.php
寫入一些swagger語法

<?php
defined('BASEPATH') or exit('No direct script access allowed');

class Api extends CI_Controller
{
	/**
	 *	@OA\Server(url="http://localhost/ktv")
	 *	@OA\Info(
	 *		version="1.0.0",
	 *		title="ktv Api文件",
	 *		description="ktv Api 文件",
	 *	)
	 *	
	 */
	public function __construct()
	{
		parent::__construct();
	}
	/**
	 * @OA\Get(
	 *		path="/api/version",
	 *		tags={"version"},
	 *		summary="版本資訊",
	 *		description="返回版本資訊",
	 *		@OA\Response(
	 *			response=200,
	 *			description="版本資訊",
	 *			@OA\Schema(
	 *				type="array",
	 *			),
	 *		),
	 *	)
	 */
	public function post()
	{
		echo 'test';
	}
}

swagger語法詳細參考：https://learnku.com/laravel/t/7430/how-to-write-api-documents-based-on-swagger-php

7.建立api的json檔案
前往`http://localhost/ProjectName/swagger/index`

若出現以下錯誤
需更改專案權限

sudo chmod 777 ProjectName

在根目錄可看到api_doc的json檔及建立成功

8.前往swagger/index.html修改內容

<script>
    window.onload = function() {
      // Begin Swagger UI call region
      const ui = SwaggerUIBundle({
        url: "json位置",
        dom_id: '#swagger-ui',
        deepLinking: true,
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
        layout: "StandaloneLayout"
      });
      // End Swagger UI call region

      window.ui = ui;
    };
  </script>

將json位置改為api_doc.json的位置

9.開啟：`http://localhost/ktv/swagger/`

成功！

ref:
https://hackmd.io/6Ub_KThcTr-BjDk4Fhxw0w?view
https://www.twblogs.net/a/5c21e4b3bd9eee16b4a76258