Getting Started with Active Admin

Topics covered in this Ruby on Rails tutorial:

Installing the Active Admin gem, Logging in to Active Admin, Generating a resource

Exercise Overview

In this exercise, we will work on building an ecommerce site. In particular, we’ll be focusing on some new and useful gems that we can add on to our site. Our site is called “That Nutty Guy” and it sells gag gifts.

To avoid repetition, we’re fast-forwarding past some of the tasks we did building Flix. Unlike Flix, we’re not going to start this site completely from scratch, but with the designer’s HTML and CSS already incorporated, plus a basic working model with index and show routes up and running.

If you’d like a refresher, or you’re interested in seeing exactly how we got the site up and running from scratch, we’ve included that information in three bonus exercises (B1–B3), which start from the designer’s HTML comps and build a basic working Rails site out of them. This exercise starts where B3 leaves off.

Getting Started

1. We’ve provided the designer’s HTML mockup for our ecommerce website—let’s take a look. On the Desktop, navigate to Class Files > yourname-Rails Class > That Nutty Guy HTML.

2. From the That Nutty Guy HTML folder, open index.html in a browser.

   You can see that we have a nice, clean, responsive design for our ecommerce site.

3. Click on Tinfoil Hat to see the product page design template.

4. Click the Cart at the top right to see the Cart template.

   The design looks great; we just need to make it functional.

5. Open Terminal.

6. Type cd and then press the spacebar once but do not hit Return yet!

7. Switch to the Finder.

8. Navigate to Desktop > Class Files > yourname-Rails Class.

9. Drag the yourname-Rails Class folder from the Finder into the Terminal window (this will enter the path in Terminal).

10. Switch to Terminal.

11. Press Return to change to that directory.

12. Run git clone https://bitbucket.org/noble-desktop/nutty.git to copy the That Nutty Guy git repository.

13. Type cd nutty to enter the new directory.

14. Type git checkout B3 to bring the site up to the end of Bonus Exercise 3.

15. Run bundle to install any necessary gems.

16. Run yarn install --check-files to install JavaScript dependencies.

17. Start up the server by typing:

    rails s
    

18. In a browser, navigate to: localhost:3000

19. Check out the site. It’s a work in progress, to be sure. Our products are showing up, and we can click through each one of them to view its show page, but they’re all showing the same Tinfoil Hat image (terrifying). We also need to create tools for admins to go in and make changes. Leave the browser window open so we can periodically come back and reload the page to see changes.

20. For this exercise, we’ll be working with the nutty folder located in Desktop > Class Files > yourname-Rails Class > nutty.

    We suggest opening the nutty folder in your code editor if it allows you to (like Sublime Text does).

21. In your code editor, open the following file:
    nutty > db > migrate > 20190722203407_create_products.rb

    Here we have specified the product information.

22. In your code editor, open the following file:
    nutty > app > controllers > products_controller.rb

    Here we have a products controller with two views: index (the main page) and show (the product detail page).

23. In your code editor, open the following file:
    nutty > db > migrate > 20190722215056_devise_create_customers.rb

    We also have Devise authentication for our customers. We have a customers table, a migration created by the Devise module.

24. Go back to the browser where localhost:3000 should still be open.

25. At the top right, click the Sign In link. Here you can sign in or create an account by clicking Sign up.

26. In your code editor, open nutty > db > seeds.rb

    This contains all of the product data used to seed our site from scratch.

Starting Up Active Admin

We need to get all our images working. Before we can do that, we need a way to manage products from the back-end of the site. For Flix, we simply created our own forms and simple admin authentication to manage each model. That’s fine for a simple site, but this time let’s try out a gem called Active Admin. It is meant to be a comprehensive, highly-adaptable back-end system for content management. Using it can save you a lot of time building model forms, not to mention giving you the ability to filter, sort, and search through your model objects. It also helps you with all the other administration needs a complex website has. If you want more info about this gem, go to activeadmin.info to read more. Highly recommended!

1. In your code editor, open nutty > Gemfile

2. Scroll to the bottom of the file and add:

   # Use Active Admin for content management
   gem 'activeadmin'
   

   NOTE: Whenever we add a gem, it’s a good idea to include a comment explaining what it’s for in case we forget or another developer needs to edit it.

3. Save the file.

   Now that we’ve got this new gem, we need to run bundle to install it.

4. Remember, we need to stop the server whenever we install a new gem. Switch to Terminal and stop the server by hitting Ctrl–C.

5. In Terminal, type:

   bundle
   

6. Whenever you install a new gem, it’s a good idea to consult the documentation to see if there are any additional installation steps. In a browser, go to activeadmin.info and at the top, click on Documentation.

7. Find the third step for after running the bundle. Go ahead and copy it (Cmd–C):

   rails generate active_admin:install
   

8. Switch to Terminal, paste (Cmd–V) the command, then hit Return.

9. Return to the browser and copy the next step:

   rails db:migrate
   

10. In Terminal, paste the command then hit Return.

11. Active Admin adds its CSS to the asset pipeline, which is all well and good, but we don’t want it mixing with our site CSS and changing the display of some items. To ensure it only appears for Active Admin, we just need to move the file. We can do this from the Terminal easily enough. First we need to create some subdirectories:

    mkdir -p vendor/assets/stylesheets
    

12. Next, let’s move the .scss file:

    mv app/assets/stylesheets/active_admin.scss vendor/assets/stylesheets/
    

    All done!

13. We need to create an admin user. Open a rails console by typing:

    rails c
    

14. Inside of the Rails console, type the following command and press Enter:

    AdminUser.create(email: 'admin@example.com', password: 'password')
    

15. Type exit and press Enter again to leave the Rails console.

16. The next step is to start up our Rails server. In Terminal, type:

    rails s
    

17. In your browser, go to http://localhost:3000/admin and log in with the the information you entered.

18. The first thing we should do after logging in to changing the super insecure login info we used. At the top of the Dashboard, in the gray bar, click Admin Users.

19. There should only be one user currently, admin@example.com. To the far right of it, click Edit.

20. Set the following:

    Email:	your email address
    Password:	any password you like

21. Click the Update Admin user button.

22. Log in again with your new info.

    NOTE: If you want to add another admin, all you need to do is click on the New Admin User button at the top right of the Admin Users page.

Managing the Site with Active Admin

There’s still a bit we need to do in order to be able to manage our site with Active Admin. We need to make Active Admin aware of our product model by generating a resource.

1. In the browser, go back to: activeadmin.info/documentation.html

   The last step on this page tells us what to do.

2. Go back to Terminal. We want to leave our server running, so open up a new tab to work in (hit Ctrl–C).

3. Generate an Active Admin resource for our product:

   rails g active_admin:resource product
   

4. In the browser, go back to: localhost:3000/admin

5. Notice that now there is a Products link at the top. Click it.

   All our products are there with all their info! There are all sorts of parameters we can use to sort the list, as well as a Filters section on the right where we can type in specific filters to find a product.

6. To the far right of each product, notice the options View, Edit, or Delete. Click View next to the first one.

   All its info is displayed. At the bottom is a section where Admins can add comments that are only viewable by admins on the Admin page (they will not display on the public website).

7. Go ahead and add the following comment about this product:
   Out of stock with the manufacturer as of 1/24.

8. Click the Add Comment button.

9. At the top right, click the Edit Product button. As you can see, this area allows us to make any edits to the product info. (You’ll get an error if you actually try to save at this point. We’ll handle that in the next exercise.)

10. Hit Cancel.

    You should be back on the Products page.

11. Notice that there are also bulk editing options here. Click the checkbox to the left of any product(s).

12. Above the items, click the Batch Actions button. You should see an option to Delete Selected (but don’t do it).

    That’s it for now. It’s amazing what we got with Active Admin and just a few commands in Terminal!

13. Leave the two tabs open and the server running in Terminal so we can continue with them in the next exercise.