I tried a coding workshop and created a web app in a day -- here's what I learned

Photo: Getty Images.

Coding isn’t easy.

It’s not something that you can pick up instantly or simply do well by following instructions.

So I took on a weekend coding workshop at Coder Factory, which recently launched Australia’s first accredited coding boot camp, where I was introduced to the nuts and bolts of programming and building a web app from scratch.

For this particular course, we used the programming language Ruby on Rails which is used by Airbnb, Zendesk, Shopify and corporates including Westfield and Commbank.

Our instructor Pete Argent, who is the founder of Coder Factory, explained that Ruby on Rails was a great language to learn for beginners looking to build web apps and sites.

During the crash course, the biggest consensus in the class was that typing the code wasn’t the hardest part — it was understanding why we were doing what we were doing.

By the end, I had by no means a finished product, but what I had acquired was a familiarity with the language itself and a better understanding of what it took to create even a simple button on a site.

Here’s a walkthrough of my day.

The writer was a guest of Coder Factory.

Before embarking on any coding, Argent asked us what problem we wanted to solve and how we wanted to solve it.

Photo: Supplied.

I suggested an app which could help those with low battery look for their nearest charging station.

The language we used was Ruby on Rails, or Rails. Shown below is the text editor which is where I edited all my code.

Photo: Supplied.

This may look daunting at first but after a while, it becomes easier to decipher what you're doing. It's a common language for beginners and especially handy for those looking to build web applications. Airbnb, Groupon, Kickstarter, Shopify and Zendesk are all users of Ruby on Rails.

Here's the terminal of the computer. This is where all the magic happens.

Photo: Supplied.

It's what I used to run the code that I had written in the text editor so that it would appear on a local server. I did this by typing in commands such as 'new firstapp' to create a new app in my text editor and 'rails s' to install ruby and start the server.

Now that I've got the server running, here's a look at the landing page of my web app.

Photo: Olivia Chang.

Since I haven't changed any of the code in the text editor yet, the page shows up with a default welcome message.

We decided the first thing was to change the landing page by adding a custom welcome message.

Photo: Olivia Chang.

In my text editor, I edited the homepage so that it read 'hello!'

Here's how it looked on the site.

Photo: Olivia Chang.

Next I wanted to give the user the option to sign in/sign out with their email.

Photo: Olivia Chang.

Now I have the option to sign up!

Photo: Olivia Chang.

I went back into my text editor and went into the 'navbar' folder and added in a custom menu on my navigation bar.

Photo: Olivia Chang.

Here are the four menu buttons: home, sign in, pricing and about.

Photo: Olivia Chang.

I then wanted to start a list/database of free charging stations and their address.

Photo: Olivia Chang.

Going into the text editor, I created a new 'form' under my charging station folder. I made sure I had the following fields: name, description, business type, address and conditions. I also added in a submit button at the bottom.

Here's how the table turned out.

Photo: Olivia Chang.

I entered in the details of a charge bar which is located at Quay Bar in Sydney.

Photo: Olivia Chang.

I deliberately kept the latitude and longitude fields empty so that I could replace them with a Google map of the location instead.

Now I have two in my sample set.

Photo: Olivia Chang.

Like other sites such as Airbnb which show their listing on a map, I also wanted to insert a Google map.

Photo: Olivia Chang.

Now this part got quite tricky. To insert a Google map, I had to go to the Google Developers website and copy the code for the map back into my text editor.

There are various maps I could choose from such as base maps, styled maps, satellite imagery and street level imagery.

Photo: Olivia Chang.

I decided to go for the standard base map. I had to input the address and find the latitude and longitude to get the right location AND then copy a separate piece of code from the Google developers website so that I could get the red marker showing.

I then wanted to create a reviews box so that people could rate the charging station based on factors such as price and availability.

Photo: Olivia Chang.

Voila! Here's the reviews box.

Photo: Olivia Chang.

Now that I had the foundations for the web app, I knew I wanted to give it a more professional look.

Photo: Olivia Chang.

I went to Start Bootstrap which has a bunch of free themes and templates online and chose this landing page theme.

Here's the finished product. I jazzed up the landing page by adding in the code from the template I downloaded with the help of Argent.

The web app was still far from ready with only limited functionalities. The experience taught me that coding isn't something that can be easily learned through a manual -- you have to really understand why you're putting code in a certain folder and why you are typing a specific command.

Though my web app is not something that can be used, it definitely had the legs to be turned into a beautiful web app if I had more than one day to work on it.

Business Insider Emails & Alerts

Site highlights each day to your inbox.

Follow Business Insider Australia on Facebook, Twitter, LinkedIn, and Instagram.