Connecting Nulab's services to Drupal

How to integrate Nulab's services to Drupal, presented at Drupal Camp in Japan vol.1 Kyoto 2014 ( http://2014.drupalcampjapan.net/ ).

Transcript

1. Connecting  Nulabʼ’s  services  to  Drupal 〜～つなぐ、つなげる  Drupal  とヌーラボのサービス〜～  Saturday,  Apr  12th  2014 Drupal  Camp  in  Japan  2014  Kyoto
2. Takashi  SOMEDA https://twitter.com/tksmd Tech  Evangelist  of  Nulab,Inc. About  me https://facebook.com/takashi.someda Write  tech  articles  about  AWS,  SCM https://github.com/tksmd
4. Backlog  is  a  project  management  tool  that  2,200  clients  use. In  addition  to  issue  management  feature,  Backlog  provides •  File  sharing  by  WebDAV •  Git  and  Subversion  repository  hosting. Visit  http://backlogtool.com/  (  Japanese:  http://backlog.jp  )
5. 1,200,000  users  around  the  world  draw  wireframes,  network   diagrams,  UML,  business  plans  and  so  on. Cacoo  provides  basic  functionality  as  a  draw  tool  and  powerful  collaborative   features  like •  Simultaneous  Editing  on  same  diagram  by  multiple  users •  Integration  with  Google  Services  like  Google  Apps,  Google  Drive  and   Google+  Hangouts
6. A  new  collaborative  chat  app  has  been  out  of  beta  this  February. •  Revolutionize  your  team  discussion •  Integration  with  nulabʼ’s  other  services •  Provide  easy-‐‑‒to-‐‑‒use  API  for  developers  (http://developers.typetalk.in)
7. Typetalk  Hack  Tokyo  on  Apr  23th  @SmartNews
8. nulab-‐‑‒inc.com /wp-‐‑‒content  !!
9. Website  for  developers  (planning) Automatic   update  of API  refs   Sample   execution  on   the  site Some  dynamic   functions  will  be   required.
10. Totally  fresh  to  Drupal,  through Creating  Drupal  modules  is  easy.   How  easy?   Easy  enough  that  over  5,000  modules   have  been  developed,  and  many  Drupal   developers  are  even  PHP  novices!  
11. Okay   I  can  do  it. http://www.flickr.com/photos/imatty35/6423103103/
12. Agenda n  Case#1  Cacoo  Parapara  Viewer n  Case#2  Typetalk  Notifier n  Case#3  Backlog  Contact  Form n  Summary
13. #1  Cacoo  Parapara  Viewer Each  images  in   the  diagram  will   be  overlapped   with  a  certain   delay
14. #1  Ingredients n  Block n  Form  API n  JavaScript n  No  dependencies  to  other  modules
15. #1  Used  hooks n  hook_̲menu n  hook_̲block_̲info n  hook_̲block_̲configure n  hook_̲block_̲save n  hook_̲block_̲view n  hook_̲theme
16. #1  JavaScript  in  Drupal Drupal.behaviors.cacooParapara  =  {          attach  :  function(context,  settings){                  var  api  =  Cacoo(Drupal.settings.cacoo.key);                  api.diagram(Drupal.settings.cacoo.diagram,  function(data){                          var  sheets  =  data.sheets;                          sheets.sort(function(a,  b)  {                                    return  parseInt(a.name,  10)  -­‐  parseInt(b.name,  10);                          });                          $.each(sheets,  function(i,  sheet)  {                                  appendSheet(sheet.imageUrl,  i);                          });                  });          }   };   http://cacoo.com/lang/en/api
17. #2  Typetalk  Notifier Assign  action  to   the  event  fired   when  content   updated The  update   notified  to   Typetalk
18. #2  Ingredients n  Trigger n  Form  API n  OAuth2  Client  module n  https://drupal.org/project/oauth2_̲client
19. #2  Used  hooks n  hook_̲menu n  hook_̲action_̲info n  hook_̲oauth2_̲clients
20. #2  OAuth2  Client /**    *  Implements  hook_oauth2_clients().    */   function  typetalk_oauth2_clients()  {      $oauth2_clients['typetalk_client']  =  array(          'token_endpoint'  =>  TYPETALK_BASE_URL  .  '/oauth2/access_token',          'auth_flow'  =>  'client-­‐credentials',          'client_id'  =>  variable_get('typetalk_client_id',  NULL),          'client_secret'  =>  variable_get('typetalk_client_secret',  NULL),          'scope'  =>  'topic.post,my',      );      return  $oauth2_clients;   }   http://developers.typetalk.in/oauth.html
21. #2  OAuth2  Client  (cont.) $oauth2_client  =  oauth2_client_load('typetalk_client');   $access_token  =  $oauth2_client-­‐>getAccessToken();     $options  =  array(      'method'  =>  'GET',      'headers'  =>  array(          'Content-­‐Type'  =>  'application/x-­‐www-­‐form-­‐urlencoded',          'Authorization'  =>  'Bearer  '  .  $access_token,      ),   );   $api_endpoint  =  TYPETALK_BASE_URL  .  '/api/v1/topics';   $result  =  drupal_http_request($api_endpoint,  $options);   http://developers.typetalk.in/api.html
22. #3  Backlog  Contact  Form Set  Backlog   Project  to  add  an   issue  when   inquiry  received
23. #3  Backlog  Contact  Form  (cont) When  a  user  submit   on  the  contact  form,   an  issue  will  be   created  on  Backlog
24. #3  Ingredients n  Form  API n  Database  API n  Contact  module
25. #3  Used  hooks n  hook_̲menu n  hook_̲form_̲alter n  hook_̲schema_̲alter n  hook_̲install n  hook_̲uninstall
26. #3  XML-‐‑‒RPC $category  =  contact_load($values['cid']);     $options  =  array(      'backlog.createIssue'  =>  array(array(          'projectId'  =>  (int)  $category['project'],          'summary'  =>  t('!subject  :  from  !name  (!mail)',                array(                  '!subject'  =>  $values['subject'],                    '!name'  =>  $values['name'],                    '!mail'  =>  $values['mail’],              )          ),          'description'  =>  $values['message'],      )),   );   $result  =  xmlrpc(backlog_api_server(),  $options);   http://backlog.jp/api/
27. #3  Change  existing  schema function  backlog_schema_alter(&$schema)  {      if  (isset($schema['contact']))  {          $schema['contact']['fields']['project']  =  array(          'type'  =>  'int',          'not  null'  =>  TRUE,          'default'  =>  0,          'description'  =>    'Backlog  Project  ID',          );      }   }     function  backlog_install()  {      $schema  =  drupal_get_schema('contact');      db_add_field('contact',  'project',  $schema['fields']['project']);       }  
28. Summary http://www.flickr.com/photos/nauright/2662160957/
29. http://www.flickr.com/photos/nicmcphee/2558167768/ Is  it  really  easy   to  develop   Drupal   modules  ?
30. Iʼ’m  still  not  sure n  Security  &  Permission n  Managing  entities n  Render  element n  Theming n  Ajax  API
31. Integrate  with  external  services   n  1  day  to  develop n  Iʼ’m  still  newbie  to  PHP n  EASY  to  integrate n  Various  supportive  functions n  xmlrpc()  /  drupal_̲http_̲request() n  OAuth2 n  plain  JavaScript  available
32. As  a  service  provider Drupal  seems  an  interesting   platform  to  integrate  our  services   with.
33. What  helps  me n  Kino  san  (a.k.a.  qchan) n  The  excellent  book  ☺ n  Online  documentations n  Tons  of  actual  samples n  https://drupal.org/project/examples n  hook_̲*_̲alter
34. Developing  Environment n  Vagrant  and  Ansible n  Configure  sandbox  environment n  Vagrant  sahara  plugin n  https://github.com/Varying-‐‑‒Vagrant-‐‑‒ Vagrants/VVV/
35. Developing  Environment  (cont.) Server   configuration Drupal  files   synched  with   VirtualBox  env
36.   Source  codes  are  availabe  on  GitHub https://github.com/nulab/drupalcamp-‐‑‒kyoto-‐‑‒2014
37.   Thanks!! Q  &  A