(ARCHIVED) Intro to Smart Contract & Frontend Programming

Before we dive into programming smart contracts, we'll set up an IDE that will help us easily code, deploy, and test smart contracts without resorting to the command line. EOS Studio works on Windows 10 Pro, macOS, and Linux.

As I find out about any problems students or other developers have getting EOS Studio running, I'll post them and solutions here. Hopefully you'll be able to run it without a hitch!

Creating a new contract in EOS Studio loads some default code that can help us learn a lot about smart contract basics. Here's what the various items in the contract mean – and the differences you might see in code around the Internet.

Give your fledgling action-writing knowledge a flex.

In several upcoming lessons, I refer to a table's code, scope, and name. Come back here for a refresher on what these concepts mean.

Comments are used a lot in the official tutorial to describe what's going on.  // I don't like this.

Multi-index tables are the core component of EOSIO development.

You know the drill. Fledgling skills, take flight!

Our EOSIO tables are represented as structs in C++. These will have partner objects on the JavaScript side.

A quick overview (with pictures!) of the game we'll be building.

Set up the file structure for our contract and get started with each file.

Install the prerequisites for running Node.js / React apps.

Time to set up our frontend!

I'm assuming everyone in this course understands HTML tags, but if you don't, this blurb has your back.

Nearly every frontend video in this course has a section where I'm writing index.js files that just import something, then export it. What is going on?

It's time to build an important part of our game: logging in.

EOS has a very important datatype called name. Take a moment to learn about it here.

Time to build our first game action! We've already built the table for it, even though I didn't warn you when we did. (Note that although I use "thisusername" for a variable in this video for explanation purposes, we do switch the code back to "username".)

JSX may sound like a scary new language, but it's just a new face for JavaScript.

Let's add the frontend component for our new login action.

Remember how we got a user message added to their account when they logged in? Let's add that to our Login form.

As we'll be dealing with React components extensively, it's a good idea to review a few points about them.

Why never to use localStorage, and why we're using it.

Time to talk to the blockchain. For this, we'll build our very own API Service Module.

How can we keep data in application memory (state) without checking the blockchain over and over again? We'll use Redux to help us out.

As if understanding ReactJS and Redux wasn't enough, now we have to learn to connect them! Thankfully, there's a module to help us out.

A quick fix for a common error.

Time to test our React-Redux component! We have a few bugs to fix, and we need to build one more quick component too, just so there's something to show when our login function works.

Let's store our user message in our Redux store.

In this section, we'll build something more interesting than a blank screen to display when the player logs in.

Let me introduce a couple of JavaScript concepts that will come in handy, in case you're unaware of them.

We can send data to the blockchain, but how do we get data from it?

When our player logs in, we want to display a summary of their stats and a Start Game button.

PlayerProfile has taken us a little while to build. Now it's time to test it and find the inevitable typos.

We've got our login functionality working, but refreshing the page logs users out. Let's fix that.

Enums are about to become our bread and butter for game terms. What are they?

Functions are the core of what we do in this course. You call a smart contract action, you're calling a function. You click a frontend button, it calls a function. Here are a few extra things to know about functions.

Time to add all of the variables we'll need for our game, and learn a lot about how the game works along the way.

We add an insecure, but obfuscated, randomness function to our contract. We'll need it to draw cards and help our AI pick strategies.

Our startgame action does a lot, including drawing hands for the player and the AI and setting life totals. So much, in fact, that I had to split this into 3 videos.

A Contract Development Toolkit update has changed eosio_assert() to check().

Testing is important. It tracks down the typos I make in this course, and teaches us a lot along the way.

Let's write the code to let users play cards. It's a little more complicated than you might think.

Time to build a nice, graphical way for users to trigger the startgame and playcard actions. For that, we'll have to display the GameMat.

A login screen isn't much of a game. Time to add the meat of our frontend.

Time to take a breather and review what's going on with all of these components. React, Redux, API, handlers, whew!

At last our frontend will allow you to play a card!

What's in a username (userName, user_name)?

Time to build an Artificial Intelligence! Well, "intelligence" may not be the right word, but we'll at least give the computer some options.

Our biggest challenge yet.

How did you do on the biggest exercise yet? Follow along with the official solution.

Our game isn't very exciting without actual conflict. Time to add that to our smart contract.

Now, let's build our Resolution screen in the frontend to display battle results.

Two more actions to go, and they're not too bad! First up, the nextround action.

Time to put in our last smart contract action! endgame will, true to its name, end the game.

Time to add out last two actions to the frontend! Nothing we haven't done before.