Replacement blockchain app courses are in development.
- Free tutorial
- Rating: 4.6 out of 54.6 (400 ratings)
- 22,002 students
- 7hr 2min of on-demand video
- Created by Peter Keay
- English
What you’ll learn
- Developing a smart contract and dApp on EOSIO
- Basics of ReactJS, Node JS, C++, eosjs
Requirements
- Windows 10 Pro, macOS, or Linux computer
- Basic HTML essential. CSS & JavaScript experience preferred
- Some programming experience is best
Description
Note: this course is outdated and archived. New blockchain development courses from the course author are coming soon.
Replacement courses will cover account abstraction for easy UX, multichain applications, security, CI/CD for blockchain applications, and more.
Learn to build a web game that’s connected to the blockchain! Following the official Elemental Battles tutorial, this course introduces blockchain communication concepts as we construct an application with a smart contract and a ReactJS/Redux frontend.
This course is appropriate for people with some programming experience, but it does explain basic concepts when needed to make sure no one is left behind. Code starting points and graphic assets are provided along the way. Students will need a macOS, Linux, or Windows 10 Pro computer.
Note: this course is outdated and archived. New blockchain development courses from the course author are coming soon.
Replacement courses will cover account abstraction for easy UX, multichain applications, security, CI/CD for blockchain applications, and more.
Learn to build a web game that’s connected to the blockchain! Following the official Elemental Battles tutorial, this course introduces blockchain communication concepts as we construct an application with a smart contract and a ReactJS/Redux frontend.
This course is appropriate for people with some programming experience, but it does explain basic concepts when needed to make sure no one is left behind. Code starting points and graphic assets are provided along the way. Students will need a macOS, Linux, or Windows 10 Pro computer.
Who this course is for:
- People with limited/moderate programming experience wanting to learn to build distributed blockchain applications (dApp)
Show less
Course content
12 sections • 71 lectures • 7h 34m total lengthCollapse all sections
Introduction6 lectures • 31min
- What is EOS?01:01
- Getting Help & Giving Feedback00:35
- Is this course for you?00:57
- What You’ll Need to Know: Programming Concepts25:28
- Intro Exercise #11 question
- Intro Exercise #21 question
- Resources for Learners01:13
- What’s Different About C++?01:36
Getting Ready for EOS Smart Contracts9 lectures • 47min
- Setting Up Your EOS Studio Environment14:55
- Troubleshooting EOS Studio Setup00:30
- Smart Contract Coding Basics: understanding the default contract14:06
- Exercise: write your own action00:37
- (Graphic) How EOSIO Organizes Data01:18
- To Comment or Not To Comment00:55
- Multi-Index Tables in EOS Smart Contracts13:01
- Exercise: create your own table00:38
- How Our Data Works: Structs in C++ and Objects in JavaScript00:56
Our dApp’s Structure [EB Lesson 1]6 lectures • 17min
- What We’re Building: Intro to Elemental Battles00:45
- C++: The Files in our Cardgame Smart Contract00:44
- Installing Node.js, NPM, ReactJS, VS Code00:49
- JSX: Setting up our Frontend Game13:14
- HTML Tag Basics00:37
- Using index.js files to tell JavaScript where our code is00:42
Logging In to Play [EB Lesson 2]9 lectures • 35min
- Section Summary: Logging In00:29
- EOS’s “name” datatype01:07
- C++: Smart Contract “users” Table and “login” Action14:17
- IMPORTANT CDT UPDATE: <eosiolib> changed to <eosio>00:22
- Activity (C++): Saving a Message01:14
- JSX Basics00:26
- JSX: Adding the Login Form16:03
- Activity (JSX): Customizing the Login Form00:17
- React Component Basics00:53
Adding eosjs and Redux [EB Lesson 2, part 2]9 lectures • 1hr 1min
- Section Summary: Connecting login and Login00:32
- JS: Never use localStorage! Also, we’re going to use localStorage.00:29
- JS: Talking to the Blockchain with an ApiService.js08:58
- Asynchronicity and More in JavaScript01:47
- JS: Using a Redux Store & our setUser action13:10
- JS: Connecting Redux & React11:23
- Dealing with eosjs JsSignatureProvider errors00:23
- JS: Testing our Redux-connected Login Form & Adding Game.JSX23:52
- Activity (JS): Remember that Message?00:22
Showing Player Profile Info from the Blockchain [EB Lesson 3]7 lectures • 40min
- Section Summary: Displaying the Player’s Profile00:24
- Review: Ternary Operators and Switch Statements00:58
- JS: Getting Data from the Blockchain07:26
- 5000 BNB! Plus a plug for private key safety.00:17
- JSX: Displaying our Player’s Profile10:37
- JSX: Testing and Finishing the Player Profile Screen09:02
- JSX: Refreshing the Screen without Losing Login11:21
Setting up the Game [EB Lesson 4]9 lectures • 1hr 16min
- Enums (enumerations)00:29
- Functions, Declarations, Definitions00:47
- C++: Setting up the Core Game15:36
- C++: The “seed” Table & Randomization Function02:42
- C++: “startgame” Action #114:03
- IMPORTANT CDT UPDATE: eosio_assert() changed to check()00:22
- C++: “startgame” #2: Our “draw_one_card” Helper Function18:51
- Section 6 Quiz2 questions
- C++: “startgame” #3: Testing in EOS Studio05:26
- C++: The “playcard” Action17:42
Displaying the Game [EB Lesson 4, part 2]5 lectures • 43min
- Section Summary: Displaying Elemental Battles00:22
- JSX: Displaying the Game So Far22:34
- JSX: Recap of the Frontend Flow04:27
- JSX: Playing Cards in the Frontend14:53
- EOSIO Naming Conventions00:44
Decisions, Decisions: the Smart Contract AI [EB Lesson 5]3 lectures • 39min
- C++: Creating the AI’s Strategies21:14
- Mega Activity: Build the AI’s choose_card Function00:07
- C++: The AI’s choose_card Function17:57
Victory! Resolving the Battle, Next Round, End Game [EB Lessons 6 & 7]5 lectures • 1hr 4min
- C++: Resolving the Battle in the Contract18:08
- JSX: Displaying the Battle Resolution11:14
- C++: Adding the “updategame” and “nextround” actions23:12
- C++: Adding and testing the “endgame” action10:12
- JSX: Next Round and End Game in the Frontend01:06
Final Challenge Section [EB Lesson 8]2 lectures • 1min
- JSX Activity: Adding a Rules Screen00:35
- JSX Activity 2: Adding Progress Indicators00:06
What’s Next?1 lecture • 1min
- The Next Course00:35
