In today’s digital world, QR codes have become ubiquitous. From restaurant menus to product packaging, these scannable squares offer a convenient way to access information. This article details the creation of a versatile QR code generator that leverages the power of generative AI and JavaScript for a seamless user experience, all within the user’s environment.
Empowering Development with Generative AI
The project began by utilizing generative AI tools to generate boilerplate code. This innovative approach demonstrates the potential of AI to streamline development processes. Prompts are used to create a foundation, allowing developers to focus on implementing advanced functionalities.
Generative AI Coding primer
Open Google Gemini and type the following
Assume the role of a HTML coding expert <enter>Watch for the response, and if it is positive, go ahead and continue to tell it what you want. Actually for this project the next prompt I gave was:
Show me an HTML boiler plate starter with Bootstrap and JQquery linked from public cdn libraries.Then for each element, the correct description was suggested, like adding form, text input, further reset button, submit button, and download button initially hidden. The rest of the functionality was very easy with qrcodejs library and further new chat with role setting.
Assume the role of a JavaScript programmer with hefty JQuery experience.Further prompts were curated to get the whole builder ready still I had to use a bit of my expertise and commonsense, while local testing was done using the node js utility HTTP-server which was installed with Gemini’s suggested command.
prompt:
node http server install
from the response:
npm install http-server -gKey Functionalities
The QR code generator boasts several user-friendly features, all processed entirely on the client-side (user’s device):
- Phone Number Validation and WhatsApp Integration:
- Users can input phone numbers, and the code validates them using regular expressions.
- Validated numbers are converted into WhatsApp direct chat links, eliminating the need for external servers and simplifying communication initiation.
- QR Code Generation for Phone Calls:
- The application generates QR codes that trigger phone calls when scanned by a mobile camera when provided with the proper intent URL. tel://<full mobile number>
- This is a practical solution for scenarios like displaying contact information on a car, without ever sending your phone number outside your device.
Technical Deep Dive
The project leverages the following technologies, emphasizing the client-side approach:
- Client-Side Functionality with JavaScript:
- This eliminates the need for a server, making the application fast, efficient, and easy to deploy. Users experience no delays while generating QR codes, and all processing stays within their browser.
- AWS S3 Website Delivery:
- Cost-effective and scalable hosting for the static website ensures smooth operation. S3 simply serves the application files, without any server-side processing of user data.
- AWS CloudFront for Global Edge Caching and Free SSL:
- CloudFront enhances performance by caching static content closer to users globally, minimizing latency. Free SSL certification guarantees secure communication between users and your website, even though no user data is transmitted.
- Please visit review and comment on my QR Code Generator, the known bug in some mobile phones is the download fails, which I will see to as soon as possible, if that is the case with your phone take a screenshot and crop it up for the time being. On Samsung devices I think the power button and volume down pressed together would take a screenshot.
