Final Product
Welcome to the last section of this ticketing app tutorial! Here, you'll be seeing the full app in action!
To run this app on your local machine, you will need a computer with working camera.
Getting Started
To follow along with the app on your own machine, you can clone the code from the Keypom Docs Examples repository and run the following command in the root folder keypom-docs-examples/:
cd advanced-tutorials/ticket-app-skeleton && yarn && yarn start
If you'd like to run the already completed code found in the ticket-app directory instead of the skeleton code, run:
cd advanced-tutorials/ticket-app && yarn && yarn start
This should bring you to the following page at localhost:1234
Starting the Claim and Scanner Pages
To begin the app, first you'll need to run the create drop script:
yarn create-ticket-drop
This will return a link:
Ticket Links:
http://localhost:1234/v2.keypom.testnet/3pGPvPGiXUiMfW6TME1EPWGWHzx1FrLSLgu68UADpyjg6c9DPix1v2bxUWuY5K7ChWE5G5BNszMNTPmecTz7C15w
This should bring you to the following page. Feel free to take a picture of your QR code with another device, you will need to hold this QR code up to your computer's camera later.
From there, you can duplicate this window and modify the URL to be:
http://localhost:1234/v2.keypom.testnet/scanner
It will immediately prompt you for a password. By default, the createTickDrop script you ran earlier has a password set to event-password but for now enter an incorrect password:
wrong-password
Once you enter this password, the scanner should appear, shown below.
Scanning and Claiming
Incorrect Password Claim
Now, you can begin testing the scanner by holding the photo of the QR code up to the camera of your computer. Ensure it has a clear unobstructed view of the code. Once the data is read in, the scanner's frame should change to yellow as it tries to claim.
This should promptly return a failed claim, shown below.
If you right click and inspect the page and go to the console, you should see the following error indicating an incorrect password.
Correct Password Claim
To enter the correct password, simply refresh the scanner page. This should prompt you for the password again. You can now enter the correct password for your private key. By default, the createTickDrop script you ran earlier has a password of event-password.
event-password
Once the correct password has been entered, you can repeat the same steps as before and try to claim your ticket by holding the QR code up to the scanner. This time around after the yellow claiming frame, you will see the following successful claim page.
Double Scanning
Now that the ticket has been successfully scanned and claimed, you can try to double scan the ticket. Recall that, if the second scan succeeds the attendee loses the opportunity to claim their POAP.
Same as before, hold up the QR code up to your computer camera. Once the scanner reads the data and tries to claim, you should see this resultant page.
Claiming POAP
Now, after the ticket has been claimed once, if you go back and refresh your ticket page the QR code should now disappear and in its place is a button to claim your POAP.
Clicking this should bring you to a MyNearWallet claim page. Once you claim, either to a new or existing NEAR account, you should be able to see our mascot, Moon, as an NFT in your collectibles tab!
Claiming Deleted Keys
Now that you've claimed the POAP, the private key is now deleted. If you go back to the ticket page and refresh it again, you should see the following page; indicating your key is depleted.
If you try to holding up the screenshot of your QR code up to the QR reader, you will be greeted with the following failed claim page.
Conclusion
In this tutorial, you learned how you can use Keypom to create a seamless and powerful ticketing experience. You started from a few simple goals, translated those to tangible customizations to make to your Keypom function call drop, and then built a React app around the drop leveraging Keypom values to make it all run.
In the next advanced tutorial, you will learn how you can auto-register people into a DAO with a simple link.