워드프레스 사이트와 Flutter앱 연동하기

워드프레스(Wordpress)로 만들어진 사이트를 모바일 앱 등에서 불러오기는 의외로 간단하다.

기본적으로 워드프레스가 설치된 사이트가 필요하며 우커머스(WooCommerce)가 설치되어 있어야 한다.

Flutter 로 만들어진 앱도 필요하다. 준비과정이 쉽지 않은 듯 하다. 😅

 

1. 우커머스 REST API 생성

워드프레스의 관리자 화면으로 접속해서 우커머스 Settings 메뉴로 들어가면 Advanced 탭이 있다. 이곳에서 REST API를 생성할 수 있다.

Add Key 버튼이나 Create an API key를 클릭한다. (캡쳐화면이 영어인 것이 안타깝다.)

WooCommerce REST API 생성화면 - 생성 전

 

설명란에 사용할 API에 대한 적당한 설명을 적고 이용할 사용자를 선택한 후, 권한을 설정해준다.

권한 설정에서 쓰기 권한을 주지 않으면 해당 API를 통해 회원 가입 등을 할 수 없으므로 읽기/쓰기 권한을 모두 주는 것이 좋다.

Generate API key 버튼을 눌러 API를 생성해 보자.

WooCommerce REST API 생성 화면 - 생성 중

728x90

REST API가 생성되었다. 중요한 것은 이 화면을 닫으면 다시 보여주지 않을 것 이므로 생성된 키들을 미리 복사해 두어야 한다는 것이다.

이 화면을 닫았다면.. 다시 만들면 된다.

WooCommerce REST API 생성 화면 - 생성 완료

 

2. Flutter 앱에 우커머스 REST API key 설정

pubspec.yaml 파일에 woocommerce 플러그인을 추가한다.

아래의 링크에서 최신버전을 확인할 수 있다.

pub.dev/packages/woocommerce

woocommerce | Flutter Package

woocommerce: ^0.9.7

 

Flutter에서 연동정보를 담을 파일을 생성하고 woocommerce를 import 한 후 아래와 같은 형태로 입력한다.

baseUrl은 워드프레스가 설치된 url을 입력하고, comsumerKey와 consumerSecret은 좀 전에 생성한 키를 복사해 붙여 넣는다.

import 'package:woocommerce/woocommerce.dart';

static WooCommerce wooCommerce = WooCommerce(
    baseUrl: "http://christian-alice.com",
    consumerKey: "yourConsumerKey",
    consumerSecret: "yourConsumerSecret",
    isDebug: true,
);

 

 

3. 워드프레스 사이트에 JWT 플러그인 설치

로그인을 하기 위해서는 JWT 플러그인을 워드프레스 사이트에 설치해야 한다고 한다.

아래 링크에서 해당 플러그인에 대한 자세한 설명을 볼 수 있다.

https://wordpress.org/plugins/jwt-authentication-for-wp-rest-api/

JWT Authentication for WP REST API

 

워드프레스 플러그인 메뉴에서 플러그인 추가 버튼을 클린한다. 검색란에 jwt-authentication-for-wp-rest-api 라고 입력해서 검색한다.

워드프레스 JWT 플러그인 추가

하늘 색 좌물쇠 모양의 플러그인을 설치한다.

 

 

4. JWT_AUTH_SECRET_KEY 추가

 

아직 끝이 아니다. wp-config.php 파일에 JWT_AUTH_SECRET_KEY를 추가해주어야 한다.

wp-config.php 파일을 열고 아래와 같이 입력하고 좀 전에 복사한 ConsumerSecretKey를 붙여 넣는다.

 

wp-config.php 파일에 JWT_AUTH_SECRET_KEY 추가

/** For REST API */
define('JWT_AUTH_SECRET_KEY', 'yourConsumerSecretKey');

 

5. Flutter 앱에서 API 사용

 

이제 앱에서 불러오기만 하면 된다.

// 로그인 성공시 로그인 토큰을 리턴한다.
final token = woocommerce.authenticateViaJWT(username: username, password: password);

// 로그인 사용자 정보를 리턴한다.
final customer = woocommerce.loginCustomer(username: username, password: password);

// 로그인 여부 체크
bool isLoggedIn = await woocommerce.isCustomerLoggedIn();

// 로그아웃
await logUserOut();

// 회원가입
WooCustomer user = WooCustomer(username: username, password: password, email: email);
final result = woocommerce.createCustomer();

// 모든 상품 조회
final products = await woocommerce.getProducts();

// Featured 상품 조회
final myFeaturedProducts = await woocommerce.getProducts(featured: true);

// 카테고리 번호로 상품 조회
final mySpecificProduct = await getProducts(category: '22');

 

아래는 모든 상품 조회 코드 예시다.

import 'package:flutter/material.dart';


class MainScreen extends StatefulWidget {
  MainScreen({Key key}) : super(key: key);

  @override
  MainScreenState createState() => MainScreenState();
}


class MainScreenState extends State<MainScreen> {
  List<WooProduct> products = [];
  
  
  WooCommerce wooCommerce = WooCommerce(
    baseUrl: AppSettings.baseURL,
    consumerKey: AppSettings.consumerKey,
    consumerSecret: AppSettings.consumerSecret,
    isDebug: true,
  );


  @override
  Widget build(BuildContext context) {

    var size = MediaQuery.of(context).size;
    final double itemHeight = (size.height - kToolbarHeight - 24) / 2;
    final double itemWidth = size.width / 2;
    return Scaffold(
            body: CustomScrollView(
                slivers: <Widget>[
                 
                  SliverGrid(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      childAspectRatio: (itemWidth / itemHeight),
                      mainAxisSpacing: 2,
                      crossAxisSpacing: 1,
                    ),
                    delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                        final product = products[index];
                        return GestureDetector(
                            onTap: () {
                              Navigator.pushNamed(
                                  context, ProductDetail.routeName,
                                  arguments: product);
                            },
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: <Widget>[
                                Container(
                                  height: 230,
                                  width: 200,
                                  margin: EdgeInsets.all(10),
                                  decoration: BoxDecoration(
                                    image: DecorationImage(
                                        image: NetworkImage(
                                          product.images[0].src,
                                        ),
                                        fit: BoxFit.cover),
                                    color: Colors.pinkAccent,
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(10)),
                                  ),
                                  //child: Image.network(product.images[0].src, fit: BoxFit.cover,),
                                ),
                                Text(
                                  product.name ?? 'Loading...',
                                  style: Theme.of(context)
                                      .textTheme
                                      .subtitle1
                                      .apply(color: Colors.blueGrey),
                                ),
                                Text(
                                  '\$' + product.price ?? '',
                                  style: Theme.of(context).textTheme.subtitle2,
                                )
                              ],
                            ));
                      },
                      childCount: products.length,
                    ),
                  )
                ],
              ),
            );
  }
  
  
  Future<void> _getProducts() async {
    products = await wooCommerce.getProducts();
  }
  
  @override
  void initState() {
    super.initState();
    _getProducts();
  }
}

 

상품이 잘 보여진다.

Flutter 앱 - 우커머스 API연동 상품보기

 

 

아직 우커머스의 모든 정보를 제공하지는 않는 듯 하는 것이 아쉽지만 아래의 링크에서 우커머스에서 제공하는 API들을 확인할 수 있다.

woocommerce.github.io/woocommerce-rest-api-docs/#introduction

WooCommerce REST API Documentation - WP REST API v3