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

株式会社ヌーラボ

April 14, 2014
Tweet

More Decks by 株式会社ヌーラボ

Other Decks in Technology

Transcript

  1. 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  )
  2. 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
  3. 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)
  4. Website  for  developers  (planning) Automatic   update  of API  refs

      Sample   execution  on   the  site Some  dynamic   functions  will  be   required.
  5. 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!  
  6. Agenda n  Case#1  Cacoo  Parapara  Viewer n  Case#2  Typetalk  Notifier

    n  Case#3  Backlog  Contact  Form n  Summary
  7. #1  Cacoo  Parapara  Viewer Each  images  in   the  diagram

     will   be  overlapped   with  a  certain   delay
  8. #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
  9. #2  Typetalk  Notifier Assign  action  to   the  event  fired

      when  content   updated The  update   notified  to   Typetalk
  10. #2  Ingredients n  Trigger n  Form  API n  OAuth2  Client

     module n  https://drupal.org/project/oauth2_̲client
  11. #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
  12. #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
  13. #3  Backlog  Contact  Form Set  Backlog   Project  to  add

     an   issue  when   inquiry  received
  14. #3  Backlog  Contact  Form  (cont) When  a  user  submit  

    on  the  contact  form,   an  issue  will  be   created  on  Backlog
  15. #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/
  16. #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']);       }  
  17. Iʼ’m  still  not  sure n  Security  &  Permission n  Managing

     entities n  Render  element n  Theming n  Ajax  API
  18. 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
  19. 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
  20. Developing  Environment n  Vagrant  and  Ansible n  Configure  sandbox  environment

    n  Vagrant  sahara  plugin n  https://github.com/Varying-‐‑‒Vagrant-‐‑‒ Vagrants/VVV/