Building a Shopping App
This week, we began a 2-week group project to build an e-commerce store! (Promise I didn’t use Shopify.) It was pretty exciting and we learnt a few things along the way that we tend to take for granted on production sites, like Facebook login, image uploads, etc.
1. Objective:
What did you do this week?
Classroom work
We learnt four main things:
- Facebook login
- Dotenv gem to hide our environment variables
- Admin (route namespacing)
- Filestack to handle our image uploads
Facebook Login (skip this if you already know how!)
Thought it would be good to paste my notes here because we didn’t really have one guide that made everything clear. There were a couple of gotchas along the way.
Configure OmniAuth for Devise (Facebook)
https://github.com/plataformatec/devise/wiki/OmniAuth:-Overview
Create a new app at https://developers.facebook.com/
App review > Make your app public
Go to Dashboard
Copy App ID and App Secret into .env file
+ Add Product > Add Facebook Login
Facebook Login Settings (turn off Strict Mode, turn on Embedded Browser)
Under settings, set Site URL to http://localhost:3000/
Devise model: Replace APP_ID and APP_SECRET with ENV[“APP_ID”] and ENV[“APP_SECRET”]
Some references
https://medium.com/@chinnatiptaemkaeo/integrate-omniauth-facebook-to-rails-5-1389d760d92a
For the project
I actually don’t have a snapshot of my project from last week (because I’m doing this post so late!), so I’ll share it in the next post.
Just a quick overview of what we accomplished:
- Created products and categories
We struggled a bit with this, because we wanted to do a many-to-many association. I think the traditional (and easier) way was just to do a one-to-many, but it seemed to make more sense that a product could belong to more than one category. We learnt quite a few things in the meantime. For one, I am now firmly in the camp of people who don’t use nested attributes!! Instead, I think I’ll now stick with Simple Form’s (actually not entirely sure if this is unique to Simple Form) .association input field, then iterate through the items and create the association in the controller.
2. Added login, admin and Facebook login
Here we were just applying what we learnt during the week.
On my own
Also, because I’ll be working on an external project starting the following week, I had to start learning React! Worked on a few Javascript katas as well… so far it seems like individual katas are fine because the syntax is still manageable. The official React Tutorial (to build a tictactoe app) was quite a major mindset change, though. All those parentheses and brackets and braces……. and semicolons. Sigh!
2. Reflective:
How did you feel this week?
It felt great to have someone actually use my app! Before, it was already great to take the first step to solve the problem, but then to actually see it in action, that was another level of satisfaction.
3. Interpretive:
What did you learn this week? (not a lecture note) Any reflection, questions, and problems
Well, I think the classroom work and the project were quite straightforward, and weren’t a huge jump from the previous weeks’ work. But React is a completely new animal that’s so different! It’s also interesting because to me it feels like a Bootstrap + AJAX mishmash, but implemented in an unfamiliar way! No more rails generate for me…
4. Decisional:
What are you going to do next week? (plan or goal for the next week)
Have to work on React!