Search for a command to run...
Vincent is a Cloud DevOps Engineer with years of hands-on experience supporting, automating, and optimizing mission-critical deployments in Azure and AWS, leveraging configuration management, CI/CD, and DevOps processes. Strong background in Technical Operations and customer relations.
No comments yet. Be the first to comment.
Yo, keeping your AWS IAM setup locked down ain't easy. You could spend hours digging through users, roles, and policies, or you could let IAMGuard do the heavy lifting. This tool scans your AWS IAM setup, flags security risks, and drops clean reports...
Introduction Hey everyone! Want to dip your toes into cloud computing without feeling overwhelmed? Let’s build something cool: A serverless website uptime monitor using AWS. Imagine a tool that checks if a site’s up or down every 5 minutes, logs the ...
Struggling to manage your AWS resources effectively? You're not alone. But what if you could simplify tasks and boost collaboration directly within your chat platform? This step-by-step video demo unveils the power of ChatOps with Microsoft Teams for...
As a mentor, one of the most insightful questions I've recently received from a mentee revolves around the journey to career success. The inquiry delves into the intricate details of navigating through a professional landscape, and it sparked a thoug...
Hey everyone, I want to discuss AWS Elastic Beanstalk in this video. This video is designed to help you learn and deploy with AWS Elastic Beanstalk, and we're going to do that by doing a follow-along and a little lecture. So that's the goal of this ...
On this page
The idea of being able to send and receive money almost instantly from anywhere in the world with no middleman is really appealing to a lot of people.
Today, I thought it'd be fun to build a small web event ticketing portal Demo (something similar to Eventbrite, but much less sophisticated) that allows you to easily register people for a paid event and collect payment in Cryptocurrency.
Table of Contents:
# Get Started with Coinbase and Node
# Set Up Your Credentials
# Clone the Project
# Install Dependencies
# The Frontend
# The Server-side
# Deploy to Heroku
# Conclusion
Before I walk you through building the application, there are a few things you'll need to do.
You'll need to go create an account with Coinbase and Coinbase commerce. Coinbase is the largest and most popular Bitcoin exchange in the US. It allows you to easily get started using Bitcoin and other Cryptocurrencies without needing to install software, learn a lot, etc.
Coinbase Commerce enables merchants anywhere in the world to accept cryptocurrency payments in a fully decentralized way. And convert your funds back to your Coinbase account.
Finally, you'll need to have Node.js setup on your computer and be ready to do some coding! 😊
To accept payment through Coinbase, we either make use of the API integration or the checkout widget, lets set up the checkout widget:
We have two options to make use of the payment gateway, either we redirect the user to a payment link, or we embed (Let's go for this) the checkout widget inside our application.
With Coinbase commerce set up, let us build our application and start collecting payment. 🤑
Now that we've done the boring stuff, let's take a look at some code 👩💻👨💻.
You can either clone the project locally from my Github repository:
git clone https://github.com/vincentiroleh/event-ticket-booking
Or you can fork the project to your own Github account and then clone that locally. This might make it easier to make changes and play around with the code as you follow along below.
Through the rest of this article, I'll assume that you're working inside of the cloned/forked project directory.
Go back to your Coinbase commerce dashboard and copy your checkout widget (embed version)
Open the cloned/forked project on your favorite editor, open the src/views/index.ejs, and make the following changes on line 291:
To communicate with Coinbase commerce gateway, we need to whitelist the domain on which we plan to host a checkout widget.
Add http://localhost:8080 to the whitelist
Now that the setup is complete, install all of the project dependencies using npm, the Node package manager. From the project's folder (on your Terminal or Command Prompt), Run the following command:
npm install
This command will install all of the dependent packages by analyzing the package.json and package-lock.json file in the project directory.
The dependencies used:
Run
npm start
// to start the server OR
npm run dev
// to start the server in development mode
😊 Open your browser and navigate to http://localhost:8080/
⚠: I'm not a great frontend developer. I'm more of a server-side developer. The frontend of this project was created by pixpalette
If you take a look at the views directory, you'll notice that there is only one file: index.ejs. This single file renders the entire website.
This is a pretty standard HTML page that uses the Bootstrap and jQuery libraries. Since this is an example application, I thought the theme was fitting so I used it. Though I made a few changes to the original theme just to narrow it down to what I want.
Now that you've seen how the frontend code works, let's take a look at the server-side codebase.
Open up the src/app.js file and follow along below:
Import Dependencies
The first thing I do in the app.js is to import all the Node.js dependencies needed to run the app:
"use strict"
// Import modules
const express = require("express");
const path = require("path");
Importing dependencies or modules is standard in just about every app. Module in Node.js is a simple or complex functionality organized in single or multiple JavaScript files which can be reused throughout the Node.js application.
path - is a core Node module for working with and handling paths.
Define Globals
The next thing you'll notice in app.js is a section of code that defines a global variable:
// Instantiating express
const app = express();
The app variable. This is a standard Express.js convention: create an app object and use that to start up the web server later on.
Configure App Settings and Middleware
Once the globals have been defined, the next thing you need to do is define the app settings and middleware.
// App settings
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");
// App middleware
app.use(express.static("public"));
app.set("views", path.join(__dirname, "views")) will set your apps views folder to something like:
/home/iroleh/dev/event-ticket-booking/src/views
The path module won't actually check if it's an existing path. It's mainly used to transform path strings.
app.set("view engine", "ejs"), and all it does is tell Express to use the EJS templating engine when rendering views.
app.use(express.static("public")) this middleware is configured to serve static assets (css, images, javascript) from the public directory in the root of the project folder. This definition tells Express that any requests that start with /public should be routed to that folder, and automatically return whatever files exist there.
Create Routes
Let's look at the routes section of app.js (the routes):
app.get("/", (req, res) => {
res.render("index");
});
Our only route just displays the home page of the site. Since all we need here is to show a simple template, there's nothing special we need to do other than render the page.
The Special 404 Error
app.use((req, res, next) => {
res.status(404).json({
error: {
name: "Error",
status: 404,
message: "Invalid Request",
statusCode: 404,
redirect: "http://localhost:8080/",
},
});
next();
});
In Express a 404 is not the result of an error but rather the app running out of options. Once the request doesn't match any of the routes, it will reach the above function.
Start server on env port or custom port
const port = process.env.PORT || 8080;
app.listen(port, () => {
console.log(`App listening on http://localhost:${port}`);
});
In many environments (e.g. Heroku or Azure), and as a convention, you can set the environment variable PORT to tell your web server what port to listen to.
const port = process.env.PORT || 8080 means: whatever is in the environment variable PORT, or 8080 if there's nothing there. We pass that to app.listen(port,...), and that makes your server able to accept a "what port to listen on" parameter from the environment.
Time to deploy our app to the cloud, Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.
Create an account if you don't have one
Visit Heroku.com to create an account or login (if you have an account already)
Create a new app
Assuming you forked your own version of the project from GitHub.
On Heroku dashboard, create a new app:
Fill in the name of your app, and the region to deploy it.
On the new window, under the deployment method, click on the GitHub card
If this is your first time, you will need to integrate GitHub with Heroku. GitHub Integration (Heroku GitHub Deploys)
Search for your repository name, and connect
Enable automatic deploy, and deploy manually (to deploy the current state of your branch)
Once the build was successful ✅, you see a similar output:
Click view to view your application. 😊
Don't forget to add your own version of
https://event-ticket-booking.herokuapp.comto the whitelist on Coinbase Commerce settings.
Accepting payment through cryptocurrency isn't that difficult as you thought. Using platforms like Coinbase Commerce is easy and efficient to accept cryptocurrency on your website. If you're interested in building cryptocurrency apps of your own, I recommend you create a Coinbase Account and check out their API documentation
Finally, if this was useful, don't forget to share it with your friends 💜