In this post, I'll take you through the process of writing some JavaScript for creating CSV files, with the help of ChatGPT. I needed to be able to click a button and run some code that would make CSV files out of any tables on the page. The code for this would have taken me a little while to write, mainly due to researching libraries, reading documentation, and trying things out to see what works and what doesn't. ChatGPT saved me all of that time.
A Collaborative Approach to Coding
Identifying the Need and Choosing the Libraries
ChatGPT quickly identified suitable libraries for the task – JSZip for handling ZIP files and FileSaver.js for saving files.
Initial Code Draft
Initial Code Draft
With the libraries in place, the AI generated an initial draft of the code. This draft included functions for generating CSV content from tables, handling single-table and multi-table exports, and downloading the files. At first, it gave me everything inside a single "createCSV" function. So I asked it to split out the code into separate functions, so it would be easier for me to read and change. It then... just did it... here's a sample:
export default class extends Controller {
async createCSV (event) {
event.preventDefault()
const tables = this.getExportableTables()
if (tables.length === 1) {
const csvContent = this.generateCSVContent(tables[0])
this.downloadCSV(csvContent)
} else {
this.downloadZIP(tables)
}
}
getExportableTables () {
return document.querySelectorAll('.csv-exportable')
}
...Refining the Code
During the development process, the AI helped in addressing various issues and refining the code. For example, the data I was trying to export had some unusual edge cases. So rather than troubleshooting the code myself, I told ChatGPT about the problem, and it wrote me a fix in seconds. It also helped me in cleaning the data by removing unnecessary whitespace and suggested improvements for better readability.
Testing the Code and Ensuring Quality
Testing the Code and Ensuring Quality
The AI assistant also assisted in creating tests for the controller, ensuring that it was functioning correctly and met the desired requirements. By suggesting appropriate test scenarios and helping set up testing configurations, the AI played a crucial role in ensuring the code's quality.
The Benefits of AI Assistance for Developers
The collaborative process with the AI assistant provided several key benefits for the developer:
- Time Savings: By suggesting suitable libraries and providing an initial draft of the code, the AI significantly reduced the time required for research and implementation.
- Enhanced Focus: The AI allowed me to concentrate on refining the code and ensuring proper functionality, rather than getting lost in documentation or troubleshooting issues.
- Improved Code Quality: The AI's guidance on refactoring and optimisations led to cleaner, more maintainable code that was easier to read and understand.
- Confidence in the Code: The AI assistant's assistance in creating tests and ensuring proper functionality gave the developer confidence that the code would work as intended.
Conclusion
It might seem lazy to just ask an AI to do something that I could ultimately do myself. I could have found those libraries, read the docs and written the JavaScript myself. But the real value was in the amount of time it saved me. I was much more productive by asking the AI to help me than I would have been without it. That's been my experience with AI so far, it won't replace developers anytime soon, but developers will become a lot more productive by learning to use it effectively.