2.3 The Signup Page
So far we've been implementing the signup process without even resorting to a webpage, just a test-driven process. We'll begin implementing an interface to the signup process in this lesson.
1.Introduction2 lessons, 07:43
2.Creating the API Server12 lessons, 2:10:56
3.A Client Demonstration App2 lessons, 20:49
4.Conclusion1 lesson, 01:35
2.3 The Signup Page
Now that we have the signup process implemented with only code, we should provide a Sinatra application to allow our users to actually sign up. So, what we're going to do is create a new app folder, which in turn will have its own app.rb, a views folder, and also a public folder. We also want to have a config.root inside. So that we can run the rackup command, and run this application. Let's start by requiring bundler inside the config root file, then Bundler.require, and finally, run App. In fact, this application file should be under ./app, which is this file right here. And then, we just run it. Let's take the chance and open the app.rb file, and define the app class, which will inherit from Sinatra Base. The Sinatra gem will still need to be included in the gem file. So let's do that. Let's open the gem file really quick and add the Sinatra gem. Let's type in the bundle command to install it, and after that we should be able to run a basic Sinatra skeleton. Okay, so Sinatra is now installed. You can see sinatra at the bottom of the screen. So now we can run our application. I don't see any more dependencies that need to be satisfied. All I want to do now is provide a root route here. And inside, I'm just going to print, Hello World. This will allow us to test whether the application is being correctly served, or not. Quit this, I'm gonna go to another pane on tmux, and go to that folder. So we'll go to api > lib > api > app. This is where the app is living. So, inside we can type in bundle exec rackup config.ru. We have defined this configuration file to run that application. So, we'll just press Enter like so, and you can see that port 9292 is open for us. In the browser, I'm gonna go ahead and type in localhost 9292. You can see the Hello World phrase being printed out. This is pretty good. After all, we are realizing that the application file is being run, because the application is right here, and also we will have the application logic. You know, the signup operations because the gem is available as well via the bundler instruction. In fact, to show you, I can go ahead to the Gemfile.lock file, and we can search for api. You can see the specs from api version 0.1.0 and api as a dependency here. You can see that the dependencies separated here has that dependency. So we will have access to that as well. The next step, I think, it should be a means of a user to enter the data to sign up. What we'll do here is go to lib > api > app, and inside we're going to create a brand new form. Let's type in signup.haml. And we'll also create an index.haml template. Let's say, for example, that this will hold a list of all of the users, you know, just email and the time it was created, for example. Of course, then, our priority is the sign up form, so I'm just going to print out a header here with standard form. The form will point out to a URL, for example, called /users. And the method should be post. Inside the form we'll create several different tags. The first one will be, for example, an input that's going to be a text field, and the name should be something like, for example, user email. And we're also going to type in a placeholder inside called, for example, Email. And we'll do the very same thing, but this time for the password. So we're going to change this back to a password and then here it should be a password as well. And Password in the placeholder. At the end, we should provide a simple submit button, so we'll just type in button with the value of Submit or rather, Sign me up! I think this is good. Now we should also provide a layout.haml template, which will hold a standard HTML boilerplate. There, this looks like a good boilerplate, really simple, just to fulfill our most basic needs. A standard hat tag with the utf-8 encoding, a link to bootstrap, and a container, in which will yield all of our content. So the sign up form will be inside that yield instruction. So I think that now the next step should be to just run the application again. Let's go here to the next tab and run bundle exec rackup with that config file. Now let's try to run this again, and you can see that this won't work. We actually forgot to add in a new route. Let's do that. Let's go to our editor, and inside the app file, we are going to create a new route called get and then /users/new, for example. I think this looks good enough. All we need to do is type in haml and then signup because that's the name of the template. Okay, one last thing before we go is we need to add in the haml gem. So we'll do that, gem, haml. There you go. Now we need to bundle it up, so that we can include it in our gem file. There you go. You can see the haml message being printed out and everything. And we can cut the server and run it again. Let's see if everything is okay from the application standpoint. Let's see how it works. Let's go to our browser and type in /users/new. Well, there you go. You can see the button and the form. Each one of these will take the respective data, and then we need to process it somewhere else. For that purpose, we're gonna go to the application again and this time create a new post route. The post route will take the user and password and call in our servers that we already have under lib > api > services and then signup. There you go. Now let's go ahead and do that. What we want to do is call in that service, which is going to be API Services and then Signup.new. We need to specify the email and the password. So the password comes here as well, and each one of these will be the respective parameter in the form. So, we'll type in something like this, password, and also params, user, and here, it's going to be the email. There you go. Now we're gonna go ahead and type in service.call. After we call the service, we need to search whether the status is okay so the sign up was successful. We'll compare the status to ok, and at the end we're going to redirect, for example, to the homepage. So we'll do redirect root path. Let's see if this works. I'm going to go ahead to the server tower and run the server again. At the end, I can just refresh this page, use an email instance, for example, my tutsplus address, and type in a password. Let's press Enter to sign the user up, and you can see that we have an error because we didn't finish off the configuration that we needed in order to test this out. Specifically for this case, we need to connect to the database with the previous instruction that we used before for testing. For that, I'm going to go to the test helper and copy that exact same code. So I'm just going to go here, copy this out and go to our config.ru file. I'm going to paste that right here. This time instead of using the test database, I'm going to use the development database. Now, this brings up a challenge. Let's see. Let's go really quick to the Rakefile. You can see in this example that we are using the test environment. We're hard-coding it, but we need to have some sort of a mechanism to allow for either development test or any other environment, really. What we'll do here is establish an encapsulation by passing in an environment variable. I'm going to call this API environment. So in order to migrate the database for development, we'll need to set this environment variable first before running the task. We're going to provide a default value here, so I'll pass in API_ENV to be, for example, development. This way we will provide a default setting for our application to work. In this case, if I go ahead and create a new pane here, and switch to the API folder really quick. And I'll type in bundle exec to which I have an alias and then rake db:migrate. I'm going to press Enter, and you will see an error because we are using the wrong type. So for that I'm going to switch this to a string instead of a symbol. So we'll switch this back to development, go to the previous tab, and run the same command. Let's press Enter now, and you will see that the users table is created again, because we are inside the development environment now. Okay, let's go back to where we were, and you can see that this time, we're going to use the development setting. So, let's go ahead to our server tab and run this again without any extra keywords. So, from here, we should be able to connect successfully to the database. Let's go back to the browser and resend the whole set of data, press Enter, and this time, you can see that the users table isn't really there. Let's do a quick change. In the database option, I'm going to replace this with a file.expand_path method. This way, we're gonna have the relative path related to this very file. When we apply this method here, we will get the absolute path to the location of the database. With that, I'm gonna go to the server, call it down, and bring it back up. That way, the new configuration will take effect, and we will be able to resend the whole data. So, if you go back to the signup panel, and enter the information again, and we click on sign me up. There you go, you will see that we will get back to the root of our application. You can see the Hello World message being printed out. Now if you want to, just to make things easier for us to assess that the data is there, we can go ahead and create a new haml template here. I'm just going to call it index in order to display all of the information on the users. By the way, we'll need to have an instance variable called users which will be the result of User.all. Now let's go ahead and check that index template. Let's go to lib > api > app > views, and there's our index template we created a while back. I'm gonna open it in a new tab and type in, for example, list of users. And then I'm just going to circle through all of the users, pass a block to it. And for each one I'm just going to print out the user's email, for example. I really don't want to print out any other information about them, so we'll stick with this. Now, we'll need to restart the server in order to take this change into effect. So let's do that really quick. Go back to the browser and reload the page. You can see that the address is right there. The sign up process is complete. Now we need to take care of the login procedure.