@@ -92,11 +90,11 @@
You can think of this tutorial as a demonstration of the core functionality of Userbase in the simplest way possible. We are going to focus solely on building a fully functional web app. Making things pretty is left as an exercise to the reader.
- You can see a live demo of what we'll building here.
+You can see a live demo of what we'll be building here.
You just need to be familiar with HTML and JavaScript basics.
+You just need to be familiar with HTML and JavaScript basics.
To complete this tutorial, you'll need to create a Userbase developer account, and then create an app from within your account. Take note of the Application ID of your app.
+To complete this tutorial, you'll need to create a Userbase developer account. Upon creation, a default application named "Preview" will be created. Take note of the App ID, you'll need it in a second.
We're now ready to start building our web app. We'll start by implementing the sign up and login features, and then in the second part we'll implement the to-do functionality.
@@ -147,14 +145,12 @@
We're going to load the Userbase SDK from a CDN with a <script> tag in the head of
our page:
-
+@@ -165,7 +161,7 @@Before doing anything with the Userbase SDK, we need to let it know our Application ID. - Simply replace
'YOUR_APP_ID'with the Application ID of the app you created earlier: + Simply replace'YOUR_APP_ID'with the App ID you received when you created your developer account:@@ -313,7 +309,7 @@ function handleSignUp(e) { e.preventDefault() - ... + … </script> @@ -327,7 +323,7 @@ <!-- application code --> <script type="text/javascript"> - ... + … .catch((e) => document.getElementById('signup-error').innerHTML = e) } @@ -363,8 +359,14 @@First, we'll add a new container under the authentication forms:
-++ + <!-- Auth View --> + <div id="auth-view"> + + … + </div> <!-- To-dos View --> @@ -379,7 +381,7 @@ <script type="text/javascript"> userbase.configure({ appId: 'YOUR_APP_ID' }) - ... + … </script>@@ -388,18 +390,27 @@Then, we'll add a function to display this view and initially make it hidden:
-@@ -444,11 +455,11 @@ authentication view disappear and your username show up along with the to-do list heading. -+- function showTodos(username) { - document.getElementById('auth-view').style.display = 'none' - document.getElementById('todo-view').style.display = 'block' - document.getElementById('username').innerHTML = username - } + <!-- application code --> + <script type="text/javascript"> + + … + + .catch((e) => document.getElementById('signup-error').innerHTML = e) + } + + function showTodos(username) { + document.getElementById('auth-view').style.display = 'none' + document.getElementById('todo-view').style.display = 'block' + document.getElementById('username').innerHTML = username + } + + document.getElementById('login-form').addEventListener('submit', handleLogin) + document.getElementById('signup-form').addEventListener('submit', handleSignUp) - document.getElementById('login-form').addEventListener('submit', handleLogin) - document.getElementById('signup-form').addEventListener('submit', handleSignUp) - - document.getElementById('todo-view').style.display = 'none' + document.getElementById('todo-view').style.display = 'none' + </script>Using to the database
+Using the database
- Each time a new session is started, we need to establish a connection with the - database that will hold that user's to-dos. + Each time a new session is started when a user signs up or logs in, we need to establish a + connection with the database that will hold that user's to-dos.
@@ -586,7 +597,7 @@
<!-- application code --> <script type="text/javascript"> - ... + … function addTodoHandler(e) { e.preventDefault() @@ -647,7 +658,7 @@ const todoLabel = document.createElement('label') todoLabel.innerHTML = items[i].item.todo - ... + … // append the todo item to the list const todoItem = document.createElement('div') @@ -729,7 +740,7 @@ <!-- application code --> <script type="text/javascript"> - ... + … .catch((e) => document.getElementById('signup-error').innerHTML = e) } @@ -744,7 +755,7 @@ document.getElementById('auth-view').style.display = 'none' document.getElementById('todo-view').style.display = 'block' - ... + … function showAuth() { document.getElementById('todo-view').style.display = 'none' @@ -760,7 +771,7 @@ function handleDatabaseChange(items) { const todosList = document.getElementById('todos') - ... + … document.getElementById('login-form').addEventListener('submit', handleLogin) document.getElementById('signup-form').addEventListener('submit', handleSignUp) @@ -802,7 +813,7 @@ <!-- application code --> <script type="text/javascript"> - ... + … document.getElementById('login-form').addEventListener('submit', handleLogin) document.getElementById('signup-form').addEventListener('submit', handleSignUp)