Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Connecting Nulab's services to Drupal

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/ ).


Nulab Inc.

April 14, 2014


  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
  3. None
  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

  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