Connecting  Nulabʼ’s  services  to  Drupal 〜～つなぐ、つなげる  Drupal  とヌーラボのサービス〜～  Saturday,  Apr  12th  2014 Drupal  Camp  in  Japan  2014  Kyoto 

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 

No content

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  ) 

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 

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) 

Typetalk  Hack  Tokyo  on  Apr  23th  @SmartNews 

nulab-‐‑‒inc.com /wp-‐‑‒content  !! 

Website  for  developers  (planning) Automatic   update  of API  refs   Sample   execution  on   the  site Some  dynamic   functions  will  be   required. 

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!   

Okay   I  can  do  it. http://www.flickr.com/photos/imatty35/6423103103/ 

Agenda n  Case#1  Cacoo  Parapara  Viewer n  Case#2  Typetalk  Notifier n  Case#3  Backlog  Contact  Form n  Summary 

#1  Cacoo  Parapara  Viewer Each  images  in   the  diagram  will   be  overlapped   with  a  certain   delay 

#1  Ingredients n  Block n  Form  API n  JavaScript n  No  dependencies  to  other  modules 

#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 

#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 

#2  Typetalk  Notifier Assign  action  to   the  event  fired   when  content   updated The  update   notified  to   Typetalk 

#2  Ingredients n  Trigger n  Form  API n  OAuth2  Client  module n  https://drupal.org/project/oauth2_̲client 

#2  Used  hooks n  hook_̲menu n  hook_̲action_̲info n  hook_̲oauth2_̲clients 

#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 

#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 

#3  Backlog  Contact  Form Set  Backlog   Project  to  add  an   issue  when   inquiry  received 

#3  Backlog  Contact  Form  (cont) When  a  user  submit   on  the  contact  form,   an  issue  will  be   created  on  Backlog 

#3  Ingredients n  Form  API n  Database  API n  Contact  module 

#3  Used  hooks n  hook_̲menu n  hook_̲form_̲alter n  hook_̲schema_̲alter n  hook_̲install n  hook_̲uninstall 

#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/ 

#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']);       }   

Summary http://www.flickr.com/photos/nauright/2662160957/ 

http://www.flickr.com/photos/nicmcphee/2558167768/ Is  it  really  easy   to  develop   Drupal   modules  ? 

Iʼ’m  still  not  sure n  Security  &  Permission n  Managing  entities n  Render  element n  Theming n  Ajax  API 

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 

As  a  service  provider Drupal  seems  an  interesting   platform  to  integrate  our  services   with. 

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 

Developing  Environment n  Vagrant  and  Ansible n  Configure  sandbox  environment n  Vagrant  sahara  plugin n  https://github.com/Varying-‐‑‒Vagrant-‐‑‒ Vagrants/VVV/ 

Developing  Environment  (cont.) Server   configuration Drupal  files   synched  with   VirtualBox  env 

  Source  codes  are  availabe  on  GitHub https://github.com/nulab/drupalcamp-‐‑‒kyoto-‐‑‒2014 

  Thanks!! Q  &  A