#2 DreamFactory, WordPress 및 Mailgun을 사용하여 모바일 블로깅 앱을 만드는 방법 정보
#2 DreamFactory, WordPress 및 Mailgun을 사용하여 모바일 블로깅 앱을 만드는 방법
본문
Step 2: Understand the WordPress REST API
앞에서 설명한 것처럼 'mblog'응용 프로그램은 WordPress와 Mailgun의 두 가지 외부 서비스를 사용합니다. 이 섹션에서는 WordPress REST API를 구성 및 테스트하고 이를 DSP에 연결하는 방법을 설명합니다.
WordPress 블로그에 REST 지원을 추가하는 가장 쉬운 방법은 WordPress JSON REST API 플러그인을 사용하는 것입니다. WP-API 및 Basic-Auth 플러그인을 다운로드하여 시작하십시오. 그런 다음 WordPress 블로그에 관리자로 로그인하여 '플러그인'섹션으로 이동하여 업로드하십시오. 두 플러그인을 모두 활성화하려면 '활성화'링크를 클릭하십시오. 이제 설치된 플러그인 목록에서 활성화 된 것을 볼 수 있습니다.
WordPress JSON
REST API는 HTTP를 통해 특정 리소스에 대한 GET, PUT, POST 및 DELETE 요청을 수락 한 다음
WordPress 블로그에서 해당 리소스를 생성, 편집, 추가 또는 삭제함으로써 작동합니다. 지원되는 리소스에는 게시물, 사용자, 분류, 개정 등이 포함됩니다. 데이터는 JSON 형식으로 수신되어 반환됩니다.
JSON REST API의
작동 방식을 보려면 REST 클라이언트를 시작하고 http : //wordpress.localhost/wp-json/에 인증되지
않은 GET 요청을 보냅니다 ( 'wordpress.localhost'를 WordPress 호스트의 실제 이름으로 대체해야 함). ). 모두 제대로 작동하면 아래에 표시된 것처럼 지원되는 경로 목록뿐만 아니라 기본 사이트 메타 데이터도 반환해야합니다.
특정 게시물을 검색하려면 http : //wordpress.localhost/wp-json/posts/1에 인증되지 않은 GET 요청을 보내십시오. 다음과 같이 id가 1 인 WordPress 게시물의 내용을 반환해야합니다.
이제 좀 더 흥미로운 부분이 있습니다. REST API를 사용하여 새 게시물을 작성하는 것입니다. 이렇게하려면 인증 된 POST 요청을 http : //wordpress.localhost/wp-json/posts 엔드포인트에 보내고 POST 본문에 POST 내용이 포함 된 JSON 문서를 아래 그림과 같이 포함시켜야합니다. 요청 성공을 위해 HTTP 기본 인증 (WordPress 관리자 사용자 이름과 암호 사용)이 필요합니다.
팁 : POST 요청을 실행할 때 "죄송합니다,이 사이트에 게시 할 수 없습니다"라는 메시지와 함께 403 Forbidden 응답이 표시되면 먼저 WordPress 대시 보드에서 로그 아웃하십시오.
요청이 성공하면 새 게시물이 블로그의 첫 페이지에 즉시 나타납니다.
Step 3: Add the WordPress Service to DreamFactory
이제 WordPress JSON REST API의 작동 방식을 알았으니 이제는 DSP와 연결해야 할 때입니다.
이렇게 하려면 DSP에 다시 로그인하고 'Services' 탭을 방문하십시오. 이 탭에서 'Create New' 버튼을 클릭하고 새로운 'Remote Web Service' 를 추가하십시오. API
이름을 'wordpress'로 설정하고 기본 URL을 http : //wordpress.localhost/wp-json으로
설정하십시오 ( 'wordpress.localhost'를 WordPress 호스트의 실제 이름으로 바꾸십시오).
새 게시물을 만들려면 인증이 필요하므로 인증 헤더를 서비스 정의에 추가해야합니다. 'Headers' 하위 섹션을 선택하고 값이 HTTP 기본 인증 문자열로 설정된 'Authorization' 이라는 새 헤더를 추가하십시오. 변경 사항을 저장하여 DSP에 서비스를 추가하십시오.
팁 : HTTP 기본 인증 문자열을 얻으려면 가장 쉬운 방법은 단순히 Postman 인터페이스에서 복사하는 것입니다. 'Basic' 이라는 단어와 키 자체를 포함하여 전체 문자열을 복사해야 합니다. base64_encode ( 'username : password'); "와 같은 php -r "echo 'Basic'과 같은 한 줄 PHP 명령을 사용하여 결과를 DSP의 값 필드에 복사하여 수동으로 생성 할 수도 있습니다. 자세한 내용은 http://en.wikipedia.org/wiki/Basic_access_authentication을 참조하십시오.
Step 4: Enable the Application User Interface
이 시점에서 DSP는 애플리케이션 및 해당 서비스 중 하나에 대해 알고 있습니다. 약간의 코드 작성을 시작하기에 좋은시기입니다.
개발 서버에서 프로젝트의 새 디렉토리를 만듭니다. 이 자습서의 나머지 부분에서이 디렉토리는 $ APP_ROOT라고합니다. 그런 다음 DreamFactory JavaScript SDK를 다운로드하고 그 내용을 $ APP_ROOT 디렉토리에 저장하십시오. 다음과 같은 디렉토리 구조로 끝나야합니다.
$ APP_ROOT/lib/sdk-init.js 파일을 편집하고 dsp_url 및 app_name 변수를 수정하여 DSP URL 및 응용 프로그램 식별자를 반영하십시오.
var dsp_url = "http://dreamfactory.localhost/rest/api_docs";
var app_name = "mblog";
이제 응용 프로그램의 사용자 인터페이스를 작성하십시오. 우리는 일을 간단하게 유지할 것입니다 : 우리가 정말로 필요로하는 것은 블로그 게시물 제목과 내용을위한 필드가있는 양식입니다. 이것은 모바일 장치에서 즉시 사용할 수 있어야하므로 Bootstrap을 사용하여 빌드하는 것이 가장 쉽습니다. 아래 코드는 필요한 양식을 생성합니다. $ APP_ROOT / index.html 파일에 복사하십시오.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
height: 100 ;
margin: 10px;
}
#status {
display: none;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Mobile Blogging App</h1>
<div id="status" class="alert alert-info" role="alert"> </div>
<form id="add-post-form">
<h2>Add Post</h2>
<fieldset>
<div class="form-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<input id="title" name="title" class="form-control input-md" type="text" required />
<span class="help-block">The title of your post</span>
</div>
</div>
<div class="form-group">
<label class="control-label" for="body">Content</label>
<div class="controls">
<textarea id="body" name="body" class="form-control" required></textarea>
<span class="help-block">The content of your post</span>
</div>
</div>
<div class="form-group">
<label class="control-label" for="submit"></label>
<div class="controls">
<button id="submit" name="submit" class="btn btn-default">Submit</button>
</div>
</div>
</fieldset>
</form>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="lib/shred.bundle.js" type="text/javascript"></script>
<script src="lib/swagger.js" type="text/javascript"></script>
<script src="lib/sdk-init.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
다음은 양식의 모양을 보여주는 간단한 스냅 샷입니다.
마지막 단계는 JavaScript 코드를 모두 추가하여 모든 것을 작동시키는 것입니다. $ APP_ROOT/app.js 파일을 다음 코드로 업데이트하십시오.
$(document).ready(function() {
// validate form
$("#add-post-form").validate({
submitHandler: function(form) {
var title = $('#title').val();
var body = $('#body').val();
// grab and parse DSP URL
var anchor = document.createElement('a');
anchor.href = window.df.url;
// generate AJAX POST with data
$.ajax({
dataType:'json',
// append app_name to the URL
url: 'http://' + anchor.host + '/rest/wordpress/posts?app_name=mblog',
// post form data
data: {title: title, content_raw: body, status:'publish'},
cache:false,
type:'POST',
success:function (response) {
$("#status").show();
$("#status").html("Blog post published successfully!");
},
error:function (response) {
$("#status").show();
$("#status").html("There was an error.");
}
});
}
});
});
매우 복잡하지는 않습니다 - 코드는 양식 필드의 유효성을 검사하여 양식에 데이터가 있는지 확인한 다음 이전에 작성한 DSP 서비스 엔드 포인트에 AJAX POST 요청을 작성하여 전송합니다. DSP가 요청을 받으면이를 처리하기 위해 WordPress JSON REST API로 전송하고 그 결과를 응용 프로그램에 반환합니다.
DSP 게스트 액세스가 사용 가능하므로 애플리케이션과 DSP 간의 인증은 존재하지 않습니다. DSP와 WordPress JSON REST API 간의 인증은 앞에서 정의한 Authorization : 헤더를 통해 처리됩니다.
모든 것이 잘 진행되면 양식에 입력 된 데이터가 블로그 게시물로 변환되어 즉시 게시됩니다. 그런 다음 WordPress 블로그의 첫 페이지에서 볼 수 있어야합니다.
Step 5: Simplify Service Access with Swagger
앞의 예제는 기능적이지만 원시 JSON과 AJAX를 사용하여 DSP를 사용하여 DSP를 약간 조잡하게 사용했습니다. DreamFactory는 확실히 이것을 할 수 있지만 Swagger를 서비스 플랫폼 및 클라이언트 SDK에 통합하여보다 세련된 솔루션을 제공합니다.
어떻게 작동합니까? 꽤 간단합니다. 먼저 서비스에 대한 Swagger 호환 정의를 DSP에 추가해야합니다. 그런 다음 DreamFactory는 Swagger 정의에서 클라이언트 측 코드를 생성합니다.이 코드는 클라이언트 SDK에서 사용할 수 있습니다. 이를 통해 서비스를 클라이언트 측 SDK 메소드로 직접 호출하여 애플리케이션 개발을 시작할 수 있습니다. 경로 변수, 쿼리 매개 변수 및 데이터 모델은 Swagger 정의에 포함될 수 있으므로 클라이언트와 서버 간의 상호 작용이 크게 단순화됩니다.
이것이 실제로 어떻게 작동하는지 보려면 이 방법을 사용하기 위해 앞의 예제를 수정 해봅시다. 먼저 DSP에 로그인하고 'Serives' 탭을 방문하여 앞에서 작성한 'wordpress' API를 선택하십시오. 그런 다음 'Serive Definition' 하위 섹션에서 WordPress JSON REST API에 대한 다음 서비스 정의를 추가하고 저장하십시오.
{
"resourcePath": "/{api_name}",
"produces": [
"application/json",
"application/xml"
],
"consumes": [
"application/json",
"application/xml"
],
"apis": [
{
"path": "/{api_name}/posts",
"description": "Operations for posts",
"operations": [
{
"method": "POST",
"summary": "createPost() - Create a post",
"nickname": "createPost",
"parameters": [
{
"name": "body",
"description": "Post data",
"allowMultiple": false,
"type": "string",
"paramType": "body",
"required": true
}
]
}
]
}
],
"models": {}
}
분명히 이것은 약식 서비스 정의입니다. 이전에 보셨 듯이 WordPress JSON REST API는 이보다 더 많은 연산을 지원합니다. 그러나 모바일 블로깅 응용 프로그램의 목적을 위해 우리는 주로 API를 통해 새로운 게시물을 만드는 것에 관심이 있습니다. 따라서 위의 서비스 정의는 해당 POST 작업만을 다루고 있습니다. 특히, 클라이언트 SDK에서 메소드 이름이 될 'createPost'라는 별명을 기록하십시오.
$ APP_ROOT/app.js 파일을 업데이트하여 DreamFactory 클라이언트 SDK의 createPost () 메소드를 사용할 수 있습니다.
$(document).ready(function() {
// validate form
$("#add-post-form").validate({
submitHandler: function(form) {
var title = $('#title').val();
var body = $('#body').val();
// call createPost() API method
window.df.apis.wordpress.createPost({"body": {"title": title, "content_raw": body, "status":"publish"}},
function(response) {
$("#status").show();
$("#status").html("Blog post published successfully!");
},
function(response) {
$("#status").show();
$("#status").html("There was an error.");
}
);
}
});
});
0
댓글 0개