DEV Community: Khris Punzalan

Deploying your Rails App On Heroku

Khris Punzalan — Fri, 28 Aug 2020 23:19:23 +0000

Here you are done with your project and you are ready to show it to friends and family but hey they’re not developers like you are, they don’t have a local environment setup and they will probably have no idea on how to clone your repository. Obviously the best thing to do is to deploy it so they can just a website that they can use and voila experience your app.

One of the most famous cloud based platforms that developers use is Heroku. So here’s how you can deploy your project easily:

Create an account on Heroku
Install the Heroku CLI on your machine.

You will only do Steps 1 & 2 if this is your first time using Heroku. Now let’s move on to deploying your app. There are two ways you can do this:

OPTION # 1 - Using Heroku in your browser

A. On the top right corner, click the button NEW and choose Create new app. Fill out the form with the name of your app. When you have successfully created an app on Heroku, it’s time to connect it to the app you made in your local environment.

B. Run heroku login.

C. Then run the following commands:

git init
heroku git:remote -a <NAME OF THE APP YOU CREATED ON HEROKU>
git add . 
git commit -am “<commit message>”
git push heroku master

If you already have an existing repository and does not have any changes, you can just simply run heroku git:remote -a <NAME OF THE APP YOU CREATED ON HEROKU> and then git push heroku master.

OPTION # 2 - Using the Command Line

A. On the root directory of your app, Run heroku login.

B. To create the app on Heroku, run heroku create <NAME OF YOUR APP>

C. To check if you have successfully created a remote repository on heroku run git config --list | grep heroku. If it is confirmed then you can now push your app to heroku for deployment by running git push heroku master.

D. When your deployment is successful, do not forget to migrate your database and seed file if you have any:

heroku run rake db:migrate
heroku run rake db:seed

Do not also forget to connect the Github repository when you deploy. So if in case you there's something to want to refactor or update, it will be automatically pushed the changes to your deployed site.

🎉CONGRATULATIONS!🎉
Now, type heroku open to check out your app live!!!

If you are like me who’s a big fan of trial and error approach and needs to delete the app you created on heroku by going to the app on your heroku profile, then settings. At the bottom of the page you’ll see a button that will ask you about deleting your app on heroku.

Next week, we'll cover how to deploy your Rails backend to Heroku and your React frontend to Netlify.

Please read Heroku's documentation for more information.

Trekking it on Rails

Khris Punzalan — Fri, 26 Jun 2020 18:23:20 +0000

TrekIt is an app that I made for my Ruby on Rails project. This app is used to track outdoor activities the user has been doing. I have started out as having really big plans and design for this project (which I will still continue to do) but then reality hit me that there was a time limit and big possibilities of debugging many errors. That seems to be the life of a programmer so I settled with the MVP (“Minimum Viable Product”) first and then plan on expanding it in the future.

Planning

One of the most important things that I have learned in this project is in the planning stage. The more you plan and think about your models and its associations, the less problems you’ll encounter in the course of making your project. Since associations were discussed in our Sinatra project I have been very curious about the more complex associations like has_many and has_many: , through:. This is what I wanted my project to look like. Plan A is make the MVP first which includes the User, Adventure, and Location. Once Plan A is working proceed to Plan B which is adding the Category.

The biggest hurdle for me is not the associations but how to render the views when it is a nested resource and when it is using the same form that I have for the unnested route. There were lots of trial and error, jumping back and forth from my controller and views, rereading past lectures, and unending Google and StackOverflow search.

For using the same form on your nested route hidden field is necessary so you will get the proper id:

This helped me get the location_id in my locations\:id\adventures when I am trying to create a new adventure in a particular location. I also added a custom setter for my nested attributes instead of accept_nested_attributes_for so that there will not be any duplicates of the same exact location. If there are many adventures that happened in specific location then all the details of those adventures are located in one :location_id.

Learning from my mistakes

Now that I have made a project that is required for this project. I am now ready to add more it and expand. In fact, it made me want to work more and make more projects for myself. There is so much more to learn in Rails and it is definitely a powerful language to use. I have learned a lot from making tiny mistakes in this project. In code, little things matter. It could be a spelling mistake, a wrong syntax or an order in your routes that took so much of your time but now that I know the different possibilities of where unexplainable errors are coming from, I now have a checklist in my mind what to check.

A big stepping stone for me!

“Information Overload” is what I had been saying all the time going through the Rails curriculum. There were so many challenges that I encountered for this project. It was one heck of a ride.
I was ready to give up and have started questioning whether this is for me. Time, patience and perseverance are keys and as the old saying goes ‘slowly but surely’. Also with the great support that I have, I was get through this project.

Additional Gems/Lessons that I have learned: gem ‘omniauth-github’, gem ‘faker’, gem ‘dotenv-rails’, and gem ‘thin’. I have also learned and applied bootstrap for the first time!

Future Plans: Learn how to use and incorporate gem ‘devise’, add additional models and scope methods!

Originally Posted on December 14, 2019

Juggling JavaScript

Khris Punzalan — Fri, 26 Jun 2020 18:19:09 +0000

For my JavaScript SPA Project, I have an app called 飲む(nomu) . It is an app for cocktail lovers where the user can input their favorite cocktails, even their experimental cocktail mixes. As challenging as this project can be, I have learned so much about JavaScript and added some new Rails knowledge. I realized that there is still a lot more to learn.

Like what Socrates said, “The more I know, the more I realize I know nothing.”

Here are some of the lessons that I have learned based on the errors that I have encountered while doing this project:

1. Foreign Key Violation on postgresql

I spent I don’t know many hours figuring out why my destroy action in my controller is not working and almost gave up on this functionality. During that time, my friend and I figured out that postgres is not allowing me to delete a cocktail because ActiveRecord tried deleting an instance of a cocktail while my liquor table is still referencing it. One option that I found is adding referential integrity options set to cascade. In this it is ON DELETE. ON DELETE CASCADE will delete that instance of a cocktail and the other rows on your table associated with it. There are other options like ON DELETE SET NULL and ON DELETE RESTRICT that I could probably use as well but I will have to dig deeper into to know how they work and what option to use depending on the functionality of my application. Second option is setting the dependent option in your model like this:

class Cocktail < ApplicationRecord
       has_many :liquor_cocktails, dependent: :destroy
class Liquor < ApplicationRecord
       has_many :liquor_cocktails, dependent: :destroy

:destroy causes all the associated objects to also be destroyed

I went with the second option which I think is the safer way to go as I don't want to directly affect what I have in my database.

2. `.bind()` `.this`

MDN web docs definition of .bind():

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

This is the first time I have actually seen how useful .bind() is.
So in my code above, I use .bind() to invoke a function that has a parameter of this meaning I want to use the same object when that function is called. In this case when I click submit in my form the values that I entered in my form is the same exact object that I want to create. What’s this? This is how I think of it: this === self === Object. With this object do(bind) this action..bind() acts a bridge between the object and a function is another way of thinking about it. My reference might be a little off but it has helped me understand it more. Still confused? This video has helped understand it better.

3. `debugger` is your best friend in JavaScript

It’s most likely a personal preference but you should love it more than console.log()! I would not have done this project without these two though! However, debugger helps me see what’s happening in my code at that moment in time. I would be blindly troubleshooting and guessing what my code is returning if I had not learned this tool and my project would probably take twice as long without learning to know how to debug. Debugger has helped me fix a lot of errors and although it took me a while to fix some of them I would not have done so if there is no tool like it. This video tutorial is actually a good start to learn how to use debugger.

Originally Posted on February 22, 2020

trekkingIt on React Redux

Khris Punzalan — Fri, 26 Jun 2020 18:13:22 +0000

For my final project, I have gone back to what I have focused my past projects on, an adventure tracker which I named trekIt. It’s an app for people like me and my partner who are fond of doing outdoor activities. The idea came from a real map that we have in our house where we put a pin on every park that we have been to and explored. It gives us a sense of accomplishment that we can visually see and track these locations and it makes us excited and motivated to have a goal hence the digital map on this app so we can carry it wherever we go.

To make that happen, I know that I will have to use an api that will help me render this map. At first, I was leaning towards using Google Maps Api and then my cohort lead suggested MapBox so I gave it a shot. The Mapbox api has good documentation but it’s mostly targeted for Javascript so I went into this rabbit hole of trying to make it work for this project. I almost gave up and went back to my first option of using google but I found out that Uber has created a React wrapper for Mapbox.

That made my life a little easier and I started making good progress producing a map. This wrapper has its own component that you can import to render the map. It also has its own Markers and Popup component that you can easily use to add to your map. In my mapbox component, I have also passed down the state of my app as props so that the users can render markers on the map of all the locations they have saved.

There are so many things that I have learned from this section of the curriculum and here are a few of them:

Props and State

At the beginning of the curriculum, I was so confused with the difference of these two words! Props is short for “properties”. These are passed into the components from parent to children. State, on the other hand, holds information/data about the component. State is changeable using setState. this.setState will only cause a rerender of a particular component and its children but props is not changeable or should not change. They are immutable.

Redux

Image Source: http://codesheep.io/2017/01/06/redux-architecture/

This resource was shared to us by our cohort lead. Since I am a visual learner I have learn the flow of what is going on behind the scenes when developers choose to use redux.

With Redux, it helps us manage the state of our application that is kept in a store. That being said, since our state is just in one place we are able to access from any component without having to send down props from one component to another.

The core concepts of Redux are store, actions and reducers. In the store, we keep all of our data, actions, based on the word itself, are the things we can do to our store and reducers act as a bridge between the store and the actions. It basically gets order from the actions and it decides how the store should be changed/updated.

Originally Posted on April 25, 2020