Kintone Technical Training - Development Tips & Useful Tools

Here is the Development Tips & Useful Tools study content of Kintone Technical Training.
If you want to access the reference link in it directly, please download this PDF file.
We hope you enjoy Kintone technical training journey!

Transcript

1. 1 Kintone Technical Training - Development Tips & Useful Tools Cybozu, Inc.
2. 2 Notice • This material was created using the February 2021 version of Kintone. • We may change our contents without prior notice.
3. 3 Agenda • Coding Guidelines • Development Tips • Useful Tools
4. 4 Coding Guidelines
5. Secure Coding Guidelines Before start coding, make sure you check these guidelines to prevent security issues in your JavaScript programs. • Important Points • Prevent Cross-Site Scripting (XSS) • Prevent Cross-Site Request Forgery (CSRF) • Use HTTPS • Store Data Appropriately • Consider the Impact to the Kintone Service • Avoid sending large amounts of requests within a short time period • Check Operations on Several Web Browsers • Set an appropriate user agent https://kintone.dev/en/legal/secure-coding-guidelines/ 5
6. JavaScript Coding Guidelines Before start coding, make sure you check these guidelines. • Important Points • Character Encoding • Namespaces and Variables • id/class attributes that are used in Kintone • Retrieving the URL https://kintone.dev/en/legal/javascript-coding-guidelines/ 6
7. 7 Development Tips
8. Steps to Start Developing Kintone 1. Get a Kintone Developer License 2. Choose a Code Editor 3. Learn How to Use Kintone APIs 4. Understand How to Debug 5. Use the JavaScript Code Checker: ESLint 6. Learn How to Develop Efficiently 8
9. 1. Get a Kintone Developer License • You can get a Kintone Developer License from the developer site. • It is a year free Kintone environment for developers who want to test out Kintone customizations using Kintone APIs. • kintone.com domain environment • You can get from Kintone Developer Program English site. • cybozu.com domain environment • You can get from cybozu developer network Japanese site. • cybozu.cn domain environment • You can get from cybozu developer network Chinese site. 9
10. 2. Choose a Code Editor • Before start coding, find your favorite Code Editor. • Visual Studio Code (VSCode) • This is the tool to use in this Kintone Technical Training materials. • Brackets • Sublime Text • Atom 10
11. 3. Learn How to Use Kintone APIs • You can learn the way to use Kintone APIs and develop Kintone customization using contents below. • How to Attach Scripts to Kintone Apps • https://kintone.dev/en/tutorials/introduction-to-kintone-customizations/how-to-attach-scripts-to- kintone-apps/ • Kintone Technical Training • https://www.youtube.com/playlist?list=PLJOThIyQA7oOINO73ah34ZdHy13Sd6331 11
12. 4. Understand How to Debug • JavaScript errors sometimes show up on the console of your browser. • Read through the following article to get a good understanding of how to debug Kintone customizations. https://kintone.dev/en/tutorials/development-productivity/debug-with-developer-tools/ 12
13. 5. Use the JavaScript Code Checker: ESLint • Recommend using “@cybozu/eslint-config” rule when you develop Kintone customization. • You can check the code with ESLint on both an editor (e.g., Visual Studio Code) and a command-line interface (e.g.,Terminal and PowerShell). https://github.com/cybozu/eslint-config 13
14. 6. Learn How to Develop Efficiently • There are several ways to develop Kintone customization efficiently. • You can check the detail of the options in the next section. • SDK • Customization File Management Tool • Command Line Tool • UI Customization Tool • Plug-in development tool 14
15. 15 Useful Tools
16. List of Useful Tools • SDK • Kintone REST API Client for JavaScript • Kintone Java Client • Customization File Management Tool • kintone-customize-uploader • Command Line Tool • Kintone Command Line Tool (cli-kintone) • UI Customization Tool • Kintone UI Component • Plug-in Development Tool • create-kintone-plugin • kintone-plugin-packer • plugin-uploader • webpack-plugin-kintone-plugin • kintone-config-helper 16 Note that it is just a recommendation, so please select a tool as needed. And make sure check the support policy and the limitations of each one before using it.
17. 17 SDK
18. SDK Kintone REST API Client for JavaScript • JavaScript library that can help you use Kintone REST APIs. https://github.com/kintone/js-sdk/tree/master/packages/rest-api-client 18
19. SDK Kintone Java Client • Java library that can help you use Kintone REST APIs. https://github.com/kintone/kintone-java-client 19
20. 20 Customization File Management Tool
21. Customization File Management Tool Kintone Customize Uploader • Command line tool that allows you to easily upload JavaScript / CSS files to Kintone. https://github.com/kintone/js-sdk/tree/master/packages/customize-uploader 21
22. 22 Command Line Tool
23. Command Line Tool Kintone Command Line Tool (cli-kintone) • Command line tool that allows you to import and export data in Kintone. https://github.com/kintone-labs/cli-kintone 23
24. 24 UI Customization Tool
25. UI Customization Tool Kintone UI Component • UI components library for creating Kintone-like user interfaces. https://github.com/kintone-labs/kintone-ui-component 25
26. 26 Plug-in Development Tool
27. Plug-in Development Tool create-kintone-plugin • Command line tool that sets up essential files for Kintone plug-in. https://github.com/kintone/js-sdk/tree/master/packages/create-plugin 27 Recommended for those who have no experience in plug-in development and who want to make from scratch. create-kintone-plugin contains kintone-plugin- packer and plugin- uploader.
28. Plug-in Development Tool kintone-plugin-packer • Command line tool that packages files into a plug-in. https://github.com/kintone/js-sdk/tree/master/packages/plugin-packer 28 Recommended for those who have experience in plug-in development and who have existing files.
29. Plug-in Development Tool plugin-uploader • Command line tool that allows you to easily upload a plug-in zip file to Kintone. https://github.com/kintone/js-sdk/tree/master/packages/plugin-uploader 29 Recommended for those who want to automate uploads to Kintone.
30. Plug-in Development Tool webpack-plugin-kintone-plugin • Webpack plug-in for packaging files into a Kintone plug-in. https://github.com/kintone/js-sdk/tree/master/packages/webpack-plugin-kintone-plugin/ 30 Recommended for those who want to use webpack to package plug-in files.
31. Plug-in Development Tool kintone-config-helper • JavaScript library for getting field and form layout information of Kintone app. https://github.com/kintone-labs/config-helper 31 This tool can be useful with kintone UI Component especially when building a plug-in setting page.
32. 32 Reference • Kintone Developer Program – API Docs • https://kintone.dev/en/docs/ • Kintone Developer Program – SDK/Tools • https://kintone.dev/en/sdk/ • Kintone Developer Program – Tool Guides • https://kintone.dev/en/tutorials/tool-guides/ • Kintone Help Site • https://get.kintone.help/k/en/