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 comprehensive exercise, we'll build a fully functional ecommerce platform called "That Nutty Guy"—a marketplace for novelty and gag gifts. Rather than starting from scratch, we'll leverage powerful Rails gems to accelerate development and implement enterprise-grade features that would take weeks to build manually.

To maximize learning efficiency and focus on advanced concepts, we're bypassing the initial setup phase you completed in the Flix project. Instead, we're starting with a pre-built foundation: designer-approved HTML and CSS, plus a working Rails application with functional index and show routes. This approach mirrors real-world development scenarios where you'll often inherit existing codebases or work with design teams.

For developers seeking a complete walkthrough of the foundational setup—from designer mockups to functional Rails application—we've included three comprehensive bonus exercises (B1–B3). These exercises demonstrate professional workflows for converting static designs into dynamic Rails applications. This main exercise picks up where B3 concludes, focusing on advanced administrative features.

Getting Started

Before diving into Active Admin implementation, let's examine our designer's vision and establish our development environment.

1. We've provided the designer's HTML mockup for our ecommerce website—let's examine the user experience. 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.

   Notice the clean, mobile-first responsive design optimized for modern ecommerce. The layout prioritizes product discovery while maintaining visual hierarchy and user engagement.

3. Click on Tinfoil Hat to examine the product detail page architecture.

4. Click the Cart at the top right to review the shopping cart interface template.

   The design demonstrates current ecommerce best practices—now we'll transform this static experience into a dynamic, database-driven application.

5. Open Terminal to begin setting up our development environment.

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. Examine the current application state. You'll notice our product catalog is functional with working navigation between index and show pages, but all products display the same placeholder image. More importantly, we lack administrative tools for content management—a critical gap we'll address with Active Admin. Keep this browser window open to monitor our progress.

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

    We recommend opening the entire nutty folder in your preferred code editor (such as VS Code, Sublime Text, or RubyMine) to enable efficient project-wide navigation and file management.

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

    This migration defines our product schema, establishing the data structure that will power our ecommerce catalog.

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

    Our products controller implements two essential views: index (the main catalog page) and show (individual product detail pages). This follows Rails conventions for RESTful resource management.

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

    We've implemented Devise authentication for customer management. This migration, generated by the Devise gem, creates a secure customer authentication system with industry-standard password encryption and session management.

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

25. At the top right, click the Sign In link. Test the authentication system by exploring sign-in options or creating a new account via the Sign up link.

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

    This file contains our product catalog data used to populate the database. In production environments, you'd typically import this data from external systems or content management platforms.

Starting up Active Admin

Now we'll address the missing administrative functionality. While we could build custom admin interfaces from scratch (as demonstrated in the Flix project), Active Admin provides a sophisticated, production-ready solution that scales with complex applications.

Active Admin has become the industry standard for Rails administration interfaces since its introduction. It provides automatic CRUD operations, advanced filtering and search capabilities, batch operations, and extensive customization options. Major companies rely on Active Admin to manage complex data models efficiently, and its plugin ecosystem supports everything from image uploads to advanced reporting. For more comprehensive documentation, visit activeadmin.info.

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: Including descriptive comments for gem dependencies is a professional best practice that aids code maintenance and onboarding new developers.

3. Save the file.

   Whenever we introduce new gems to our application, we must run bundle to resolve dependencies and update our application's gem environment.

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. Professional development requires consulting official documentation for proper gem installation procedures. 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 includes comprehensive CSS styling, but we need to prevent conflicts with our public-facing site styles. By isolating Active Admin's CSS, we maintain design integrity across different application sections. Let's create the proper directory structure:

    mkdir -p vendor/assets/stylesheets

12. Next, let's move the SCSS file to prevent style conflicts:

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

    This separation ensures Active Admin's administrative interface styling doesn't interfere with our customer-facing design.

13. We need to create an admin user account. 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 credentials you created.

18. The first security best practice after accessing any new administrative system is updating default credentials. At the top of the Dashboard, in the gray navigation bar, click Admin Users.

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

20. Set the following with your actual information:

    Email:	your email address
    Password:	any secure password you prefer

21. Click the Update Admin user button.

22. Log in again with your new secure credentials.

    NOTE: For team environments, you can easily add additional administrators by clicking the New Admin User button at the top right of the Admin Users page. Consider implementing role-based permissions for larger organizations.

Managing the Site with Active Admin

With Active Admin installed and secured, we need to integrate it with our existing data models. This process involves generating Active Admin resources that provide full CRUD functionality for our application's core entities.

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

   The resource generation step demonstrates how Active Admin automatically creates administrative interfaces for your Rails models.

2. Go back to Terminal. To maintain our running server, open a new terminal tab (hit Cmd+T) to work in parallel.

3. Generate an Active Admin resource for our product model:

   rails g active_admin:resource product

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

5. Notice the new Products link in the top navigation. Click it to access your product management interface.

   Active Admin has automatically generated a comprehensive management interface featuring sortable columns, search functionality, and bulk operations—functionality that would require significant custom development time.

6. Explore the powerful filtering capabilities in the sidebar. You can create complex queries to locate specific products quickly, essential for managing large product catalogs.

7. To the far right of each product, notice the action options: View, Edit, and Delete. Click View next to the first product.

   The detail view presents all product information in an organized format. The admin comments section at the bottom enables internal team communication and documentation—these notes remain private and never appear on the public website.

8. Add a practical admin comment about this product: Out of stock with the manufacturer as of 1/24. Reorder scheduled for Q2.

9. Click the Add Comment button.

10. At the top right, click the Edit Product button. This interface provides comprehensive product editing capabilities. (Note: You may encounter a validation error if you attempt to save at this point—we'll address form customization in the next exercise.)

11. Click Cancel to return to the Products listing.

12. Explore the batch operation features by selecting the checkbox next to one or more products.

13. Above the product listings, click the Batch Actions dropdown. You'll see options like bulk deletion and other administrative operations (exercise caution with destructive operations in production environments).

    These batch capabilities become invaluable when managing hundreds or thousands of products, enabling efficient catalog maintenance and updates.

14. Keep both browser tabs and your terminal server running—we'll continue building upon this foundation in the next exercise, where we'll customize Active Admin interfaces and implement advanced content management features.