From 37f9f19d6fd3d5ae50e872a96d3e77004c747c9a Mon Sep 17 00:00:00 2001 From: Lea Anthony Date: Tue, 17 Dec 2024 06:00:08 +1100 Subject: [PATCH] Fix tutorial. Remove animation. --- docs/src/content/docs/index.mdx | 4 +- .../docs/tutorials/01-creating-a-service.mdx | 108 +++++++++++++----- 2 files changed, 82 insertions(+), 30 deletions(-) diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx index eb1dff447..af6dcec89 100644 --- a/docs/src/content/docs/index.mdx +++ b/docs/src/content/docs/index.mdx @@ -35,8 +35,6 @@ import CardAnimation from '../../components/CardAnimation.astro';
- -
@@ -63,7 +61,7 @@ import CardAnimation from '../../components/CardAnimation.astro'; ```bash # Install wails - go install github.com/wailsapp/wails/v3/cmd/wails@latest + go install github.com/wailsapp/wails/v3/cmd/wails3@latest # Create a new project wails init -n myproject diff --git a/docs/src/content/docs/tutorials/01-creating-a-service.mdx b/docs/src/content/docs/tutorials/01-creating-a-service.mdx index 0221cd0a0..ecd3c2974 100644 --- a/docs/src/content/docs/tutorials/01-creating-a-service.mdx +++ b/docs/src/content/docs/tutorials/01-creating-a-service.mdx @@ -226,33 +226,64 @@ This will show you how to organize your code into reusable services and handle e } ``` - Now update `main.js` to simply set the image `src` attribute to the QR code URL: + Now update `index.html` to use the new bindings in the `initializeQRGenerator` function: - ```js title="frontend/src/main.js" - import { GenerateQRCode } from './bindings/changeme/qrservice.js'; + ```html title="frontend/src/index.html" + + + + + + QR Code Generator + + + + +
+ + +
- async function generateQR() { - const text = document.getElementById('text').value; - if (!text) { - alert('Please enter some text'); - return; - } - - const img = document.getElementById('qrcode'); - img.src = `/qrservice?text=${text}` - } - - export function initializeQRGenerator() { - const button = document.getElementById('generateButton'); - if (button) { - button.addEventListener('click', generateQR); - } else { - console.error('Generate button not found'); - } - } + + + ``` - Now, when you click the "Generate QR Code" button, you should see a QR code in the center of the page: + Run `wails3 dev` to start the dev server. After a few seconds, the application should open. + + Type in some text and click the "Generate QR Code" button. You should see a QR code in the center of the page: QR Code @@ -339,13 +370,36 @@ This will show you how to organize your code into reusable services and handle e } ``` + Update `main.js` to make the image source the path to the QR code service, passing the text as a query parameter: + + ```js title="frontend/src/main.js" + import { GenerateQRCode } from './bindings/changeme/qrservice.js'; + + async function generateQR() { + const text = document.getElementById('text').value; + if (!text) { + alert('Please enter some text'); + return; + } + + const img = document.getElementById('qrcode'); + // Make the image source the path to the QR code service, passing the text + img.src = `/qrservice?text=${text}` + } + + export function initializeQRGenerator() { + const button = document.getElementById('generateButton'); + if (button) { + button.addEventListener('click', generateQR); + } else { + console.error('Generate button not found'); + } + } + ``` + Running the application again should result in the same QR code: QR Code
- -## Next Steps - -Now that we've created our QR service, we will create bindings so that we can use it in our frontend.