Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

XECon2015 :: [2-4] 오승현 - Chak 서비스 구축기 with XE3

400 views

Published on

오픈소스 커뮤니케이션 서비스인 Chak을 소개하고, XE1 개발자가 XE3 서비스 개발을 위해 알아야 할 정보와 차이점 그리고 XE3의 확장성을 공유합니다.

Published in: Software
  • Be the first to comment

XECon2015 :: [2-4] 오승현 - Chak 서비스 구축기 with XE3

  1. 1. 오승현 • XE 1 서드파티 개발자 • XE 1 Contributor • XECONTEST 2014 수상 • CHAK 개발 (15.06 ~ )
  2. 2. 오승현 • XE 1 서드파티 개발자 • XE 1 Contributor • XECONTEST 2014 수상 • CHAK 개발 (15.06 ~ )
  3. 3. What is CHAK? 4
  4. 4. 5 오픈소스 개발자와 사용자간의 커뮤니케이션을 제공 What is CHAK?
  5. 5. What is CHAK? 6 어디에나 포럼, 코멘트 서비스 제공
  6. 6. What is CHAK? 7 쉽고 간단한 설치
  7. 7. What is CHAK? 8 Just Copy & Paste
  8. 8. What is CHAK? 9 소셜 로그인
  9. 9. What is CHAK? 10 Syntax Highlighting
  10. 10. What is CHAK? 11 파일 업로드
  11. 11. What is CHAK? 12 Web Hook
  12. 12. How to use? 13착!
  13. 13. How to use? 14착!
  14. 14. 15 어때요 참 쉽죠?
  15. 15. 16 다른 공간, 같은 커뮤니케이션
  16. 16. Service Preview (서비스 시연)
  17. 17. SHOW CASE (착 적용 사례)
  18. 18. SHOW CASE #1 19 D2 Hello World NAVER 개발자들의 실전 노하우와 지식을 담은 기술 블로그
  19. 19. SHOW CASE #2 20 D2 STARTUP FACTORY D2 Startup Factory는 NAVER가 Tech Startup 생태계 저변 확대를 위해 만든 Accelerator로, 차별화된 Tech Startup을 직접 발굴해 육성하고 있습니다.
  20. 20. SHOW CASE #3 21 Laravel Korean Docs NaverD2 지원으로 작성된 라라벨 한국어 메뉴얼 깃허브 페이지
  21. 21. SHOW CASE #4 22 XpressEngine XpressEngine은 누구나 쉽고 편하고 자유롭게 콘텐츠를 발행을 할 수 있도록 하기 위한 CMS(Content Management System)
  22. 22. 처음 4가지 요구사항 (지금은 무한한 ∞ 요구사항)
  23. 23. CHAK 서비스 기본 요구사항 24 어디에나 착! 붙어야함1 SPA (Single Page Application)2 커뮤니케이션 (댓글, 포럼)3 소셜 로그인 (SNS Login)4
  24. 24. 25 SPA (Single Page Application)
  25. 25. SPA (Single Page Application) 26 - Wikipedia A single-page application (SPA) is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application 웹 어플리케이션 데스크탑 어플리케이션과 같은 사용자 경험을 제공
  26. 26. SPA (Single Page Application) 27
  27. 27. SPA (Single Page Application) 28 Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project. JUST UI React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using React Native. Virtual DOM React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding. DATA FLOW https://facebook.github.io/react/
  28. 28. SPA (Single Page Application) 29
  29. 29. SPA (Single Page Application) 30 Request Response SERVER
  30. 30. 31
  31. 31. 1,300개 이상의 XE 모듈, 스킨, 애드온 … 32
  32. 32. 서비스에 필요한 모듈만 따로 구현 33 + CHAK SERVICE Module
  33. 33. XpressEngine with React 34 + CHAK SERVICE LOGIC Application Request Response
  34. 34. XE1 으로 서비스를 만들다보니 35 안되는게 있어? XE 코어를 수정해!
  35. 35. XE1 으로 서비스를 만들다보니 36 수정하고 나니 업데이트가 불안하다
  36. 36. XE1 으로 서비스를 만들다보니 37 UI 테스트만 믿고 가야하나? 2014 XECON - Selenium for UI Test
 오승훈 XE 커뮤니티 개발 그룹
  37. 37. Xpress Engine3로 착 서비스 확장하기 (실제 CHAK 서비스에서 활용중인 패키지 소개)
  38. 38. XE3에서 강화된 특징 39 • Modern PHP (Autoloading, Composer, etc) • 라라벨(Laravel) 프레임워크 기반의 오픈소스 CMS • 유용한 XE3 Core Packages • Cloud File System • Testable (Unit test)
  39. 39. Autoloading, PSR-4 40 XE1 모듈에서 따로 구현한 클래스는 include 해야함
  40. 40. Michael님의 유튜브(YouTube) 모듈 41
  41. 41. Autoloading, PSR-4 42 XE3 현재 클래스의 네임 스페이스를 지정 필요한 클래스들을 로드
  42. 42. Composer & Packagist 43 Composer is a brilliant dependency manager for PHP. List your project’s dependencies in a composer.json file and, with a few simple commands, Composer will automatically download your project’s dependencies and setup autoloading for you. There are already a lot of PHP libraries that are compatible with Composer, ready to be used in your project. These “packages” are listed on Packagist, the official repository for Composer-compatible PHP libraries. composer require phpunit/phpunit
  43. 43. Laravel 프레임워크 기반의 오픈소스 CMS 44
  44. 44. Authentication Billing Elixir Authorization Cache Encryption Events Helpers Package Development Filesystem Localization Pagination Redis Session Artisan Console Collections Errors & Logging Hashing Mail Queues SSH Tasks Task Scheduling Testing Validation
  45. 45. 유용한 XE3 코어 패키지 XpressengineConfig XpressengineCategory XpressengineInterception XpressengineComment XpressengineDocument XpressengineKeygen XpressengineMenu XpressengineRegister XpressengineSite XpressenginePermission XpressengineRouting XpressengineSkin XpressengineTag XpressengineTemporary XpressengineCounter XpressengineDynamicField XpressengineMedia XpressengineDatabase XpressengineHttp XpressengineMember XpressenginePlugin XpressengineSeo XpressengineStorage XpressenginePresenter XpressengineSettings XpressengineSupport XpressengineTheme XpressengineToggleMenu XpressengineTranslation XpressengineTrash XpressengineUIObject XpressengineWidget
  46. 46. CHAK with Laravel & XE3 47
  47. 47. Event System with Queued Job 48 Laravel's events provides a simple observer implementation, allowing you to subscribe and listen for events in your application Events and Queues
  48. 48. <?php class documentController extends document
 { function insertDocument()
 { // Insert data into the DB
 $output = executeQuery('document.insertDocument', $obj);
 if(!$output->toBool())
 {
 $oDB->rollback();
 return $output;
 } ModuleHandler::triggerCall('document.insertDocument', 'before', $obj);
 }
 Event System (XE 1 Trigger) 49
  49. 49. 
 class DocumentHandler
 {
 public function insertDocument($doc)
 { $this->insertDoc($doc); 
 Event::fire(new DocumentInserted($doc));
 
 return $doc;
 } Event System (Laravel) 50 . . .
  50. 50. class EventServiceProvider extends ServiceProvider
 {
 /**
 * The event listener mappings for the application.
 *
 * @var array
 */
 protected $listen = [
 ArticleWasDeleted::class => [
 DeleteArticleUser::class,
 RemoveFileFromStorage::class,
 WebhookQueueSender::class,
 DeleteArticleCodes::class,
 DeleteArticleFiles::class,
 DeleteArticleLinks::class,
 DeleteArticleTags::class,
 DeleteArticleVotes::class,
 DeleteArticleChildren::class
 ], Event System (Laravel) 51 웹훅도 날려야하고.. 클라우드서버에서 파일도 삭제해야하고.. 자식 댓글도 삭제해야하니.. Recursive하게 다시 파일을 삭제하고..
  51. 51. Event System with Queued Job 52 출처 : 생활코딩
  52. 52. class DeleteArticleFiles implements ShouldQueue
 {
 use InteractsWithQueue;
 
 /** @var Log */
 private $log;
 
 /** @var FileRepositoryInterface */
 private $articleFiles;
 Event System with Queued Job 53 ShouldQueue 인터페이스 상속만으로 비동기 작업 처리 . . .
  53. 53. Event System with Queued Job 54 바로응답 Artisan Listen 출처 : 생활코딩
  54. 54. Cloud File System 55 Filesystem / Cloud Storage The Laravel Flysystem integration provides simple to use drivers for working with local filesystems, Amazon S3, and Rackspace Cloud Storage.
  55. 55. Cloud File System 56 Storage::disk('local')->put('file.txt', 'Contents');
  56. 56. Cloud File System (Custom Disk) 57 League/Flysystem/AdapterInterface
  57. 57. XE3 Config with CHAK 58 XE3의 Config 패키지는 XE3 에서 각종 설정 정보를 저장하고 관리하며 Hierarchy 구조로 상위 참조가 가능한 key - value 저장소 XpressengineConfig
  58. 58. XE3 Config with CHAK 59 사용자 (Naver) 코멘트1 CHAK SERVICE 사용자 (XE) 코멘트2 코멘트3 포럼1 포럼2 포럼3 포럼 혹은 코멘트 인스턴스 인스턴스를 관리할 수 있는 그룹
  59. 59. 사용자 (Naver) 코멘트1 CHAK SERVICE 사용자 (XE) 코멘트2 코멘트3 포럼1 포럼2 포럼3 XE3 Config with CHAK 60 착 포럼 인스턴스에 대한 설정(스킨) 정보를 요청 { "skin" : null }
  60. 60. 사용자 (XE) XE3 Config with CHAK 61 사용자 (Naver) 코멘트1 CHAK SERVICE 코멘트2 코멘트3 포럼1 포럼2 포럼3 { "skin" : null } 부모(Parent)의 설정 정보를 요청
  61. 61. 사용자 (XE)사용자 (Naver) 코멘트1 CHAK SERVICE 코멘트2 코멘트3 포럼1 포럼2 포럼3 XE3 Config with CHAK 62 기본 Default 설정 정보를 요청 { "skin" : "default" }
  62. 62. XE3 Config with CHAK 63 Cfg::get(‘chak.upgle.1000-0000’); Instance ID group ID CHAK Service [ . ] 으로 구분되는 구분자(델리미터)를 통해서 설정 정보를 가져올 수 있다.
  63. 63. 유용한 XE3 코어 패키지 XpressengineConfig XpressengineCategory XpressengineInterception XpressengineComment XpressengineDocument XpressengineKeygen XpressengineMenu XpressengineRegister XpressengineSite XpressenginePermission XpressengineRouting XpressengineSkin XpressengineTag XpressengineTemporary XpressengineCounter XpressengineDynamicField XpressengineMedia XpressengineDatabase XpressengineHttp XpressengineMember XpressenginePlugin XpressengineSeo XpressengineStorage XpressenginePresenter XpressengineSettings XpressengineSupport XpressengineTheme XpressengineToggleMenu XpressengineTranslation XpressengineTrash XpressengineUIObject XpressengineWidget 너무 많아서 다 보여드릴수가 없어요!
  64. 64. Artisan Command 를 통한 서비스 관리
  65. 65. Artisan Command Artisan Command 를 통한 서비스 관리 (스케쥴링) Linux Cron Job http://laravel.com/docs/5.1/scheduling
  66. 66. Unit Testing $_SESSION 글로벌 변수에 의존하고 있기도 하고… Testable XE3
  67. 67. Unit Testing (XE1) $_SESSION 글로벌 변수에 의존하고 있기도 하고… 다른 Class의 인스턴스를 런타임 중에 받아오고
  68. 68. Unit Testing (DI) class User { public function getCurrentUser() { $user_id = $_SESSION['user_id']; $user = new User(); $user->select('id', 'username') ->where('id', $user_id) ->limit(1) ->get(); if($user->num_results() > 0) { return $user->all(); } return null; } } class User { protected $_db; public function __construct($db_connection) { $this->_db = $db_connection; } public function getUser($userId) { $user = $this->_db ->select('user') ->where('id', $user_id) ->limit(1) ->get(); if($user->num_results() >0) { return $user->all(); } return false; } } Non-Testable Code Testable Code 의존성을 생성자에서 주입받는다.
  69. 69. Unit Testing (XE3) XE3 Test Coverage (76%)
  70. 70. Unit Testing CHAK Service Unit Test
  71. 71. Unit Testing 72 CostofChange 0 5 10 15 20 Development Time XE1 XE3 (TDD Available) Cost of change vs development time
  72. 72. XE3로 시작하는 웹서비스 장점 73 • 전세계 수 많은 사용자로부터 검증된 프레임워크 기반 오픈 소스 코드 • 개발 비용 최소화 (XE 패키지 활용, 서비스 개발 기간 단축) • 서드 파티 모듈을 활용하여 서비스 자체 컨텐츠에 집중할 수 있다. • 테스팅을 통한 안정적인 배포및 서비스 운영 가능하다.
  73. 73. XE3로 멋진 서비스를 만들어주세요!
  74. 74. 감사합니다

×