The slide deck for the first session of Singapore Rails Group (https://medium.com/singapore-rails-learning-group/about-singapore-rails-learning-group-65fffb3a43dd)
Learning Web Development with Ruby on Rails Launch
1.
2. Agenda
1. Introduction to the Program
2. Basic Web Applications Concept
3. Web Development Concepts
4. Introduction to Ruby on Rails
5. Before Coding: Planning your application
6. Live Demo (Todo List)
7. Team Formation, networking and planning your own web
application
8. Moving ahead (and logistics)
4. About the Program
This is a non-profit program that hope to build a community of
people who are interested in learning coding. We use Ruby on
Rails as the medium.
Learning to code alone is tough. So we will do it together.
Goal for you
At the end of the program, you will learn how to build a web application of
easy to moderate difficulty.
5. Vision for This Program
A sustainable initiative in encouraging beginners to learn how to
code. The first batch will contribute and work on a useful and
real-life projects which will help fund this initiative.
Example:
• A functioning web application where users are willing to pay.
We will use the funds to fund continue this initiative.
• Startup idea that is born out of this project
• Participate in Hackathon (and hopefully a donation if you win)
Members can also help non-profit organisation to build web
applications.
6. What happen after the 6 months?
This program will continue for a period of 6 months. At the end
of 6 months, we may:
• Restart this program for new learners or those who want to
reinforce their learning
• Continue to explore more advanced Ruby on Rails concept
• Branch off into specific sub-groups (e.g. Using React on Rails,
Rails API, Optimisation, etc)
Other opportunities?
7. Blend 3 kinds of learning: Online, Offline and Peer
Online Learning
Peer Learning Classroom Learning
8. About Me
• Ng Thiam Hock
• Accounting / Finance trained
• Work in tax and banking for a few years
• Self-learn web development skills
• Won IRAS Hackathon in 2016
• Went on to develop a TinkerTax – a cloud-based Singapore
corporate tax web application
9. About Your Team Projects
• Group of no more than 5
• Individual-Group Project
• Decide on the features and what to do as a team
• Code the project individually
10. Mindset
• You will be frustrated. Do not seek to understand 100%. What's
important is to move on. You will understand them better later. I
promise.
• Google and StackOverflow is your best friend. The documentation is
like your bible. Always consult them. Finding the answers yourself is
always the best way to learn.
• You can also share your findings or what you have learnt in writing. I
will publish it in our medium publication, under your name.
• Do not reinvent the wheel. If something that has been done before,
use it.
11. At the end of today…
Overwhelmed
Frustrated
Confused
Excited to start
13. How websites and web applications work?
Browser
Server
Database
Domain Name Server (DNS)
URL
IP Address
Request
HTML/CSS/JS
Request Data
Data
14. Frontend and Backend Development
Browser
Server
Database
Request
HTML/CSS/JS
Request Data
Data
Front End Development Back End Development
15. Type of HTTP Requests
• GET
• POST
• PATCH/PUT
• DELETE
16. Database Structure
• 2 main types of database: Relational databases and NoSQL
• We will focus more on relational databases
• Think of database as a collection of tables with relationships
between those tables
• You need to define what table to create in the database, the
columns these tables should have, and the relationships
between them.
19. Model-View-Controller (MVC)
• Model: Handle business logic, request data from database and
send data to controller.
• Controller: Decides what data to get, and which view to
render.
• View: What the user is going to see
Controller is like the middleman. Like an insurance agent. Client
(browser) ask for a quote. Agent (controller) go to the insurance
company (model) to request the quote. The insurance company
will then calculate the risks, then give the agent a quote (view),
which is then passed back to the client.
26. Ruby Gems
• Gems are extensions / plugins / libraries
• You can implement common features using gems rather than
writing the code from scratch
• Common features include:
– User Authentication / Authorisation
– Import/Export from Excel / PDF
– Images/File uploading
• Manage the gems in the application using the Gemfile
28. Steps in Planning an Application
1. Decide on the user stories
2. Plan database structure
3. Data Type, conditions and constraints
4. Application structure (more relevant for bigger projects)
5. Logic of the application (more relevant for complex projects)
29. User Stories for Todo List App
• As a user, I should be able to see the home page
• As a user, I should be able to view all my Todo lists
• As a user, I should be able to create Todo list
• As a user, I should be able to delete my Todo list
• As a user, I should be able to edit the name of the Todo list
• As a user, I should be able to view all my Todo list items in my
Todo list
• As a user, I should be able to delete a Todo list item
• As a user, I should be able to mark a Todo list item as done
31. Steps in Developing an Application
1. Based on the user story, write the relevant integration test
2. Write the routes
3. Generate the controller (rails generate controller)
4. Write requests / controller test if necessary
5. Write the controller code
6. Create and write a basic view file
7. Generate the model (rails generate model) and migrate DB
if necessary
8. Write model validation tests / Define factory file
9. Write model validation code
10. Fix your view or model if need be to pass the test
32. Steps in Developing an Application (Continued)
11. If you need additional business logic, work out the
computations and flow first
12. Then write the model test for the logic
13. Beautify your view
14. Refactor your code if need be
15. Run the all the test again to ensure no test is failing
33. Saving and Deploying Your Work
• Create a Github account
• Create a Heroku account
35. Team Formation Structure
• No more than 5 persons per team
• List of project ideas:
– Job Board
– Project Management
– Customer Relationship Management
– Property listing (counter property guru)
– Marketplace (like Lazada, Qoo10, Amazon) – can start off from a
simple eCommerce site first
– Expense tracker
– Clones (Airbnb, Twitter, Facebook, LinkedIn, Instagram)
36. When Planning Your Project…
• Think of the simplest features that you want to do so that you
do not overwhelm yourself. These features will make it
minimally useful.
• For example, for 2 sided users, just think from the perspective
of one user. Complete the features for such user. Then plan
from another perspective.
• You have not learnt authentication. Do visit Devise on how to
implement it. I will write a guide on how to implement Devise
soon.
• If your application requires you to upload photos, you can just
plan it into your user stories first. I will find some resources
which you can use.
38. Future Meetups
1 meetup per month. Each meetup will consists of 3 portions:
• Clarification of things based on previous session and projects
• Sharing of Rails concepts, external speakers (maybe?) or
sharing by one of the participants.
• Coding your project onsite with your project teammates help
The whole meetup will take 3 to 3.5 hours.
40. Communication Channels
Discord Server for informal chat (Please message me for the invitation
link) – I am still thinking whether to continue using this.
Facebook Group: For better organization of discussions, sharing of
articles and resources.
(https://www.facebook.com/groups/learnrailssg/)
Medium Publication: Main publication of this learning group. Most
resources will be there.
(https://medium.com/singapore-rails-learning-group)
Slack/Whatsapp: For internal team communication
41. Asking for Help
If you do not know what to do, let us know (Discord or Facebook)
• what is your user story,
• which step in the development process are you at, and
• what have you done so far for that user story?
If you encounter error, show us the code that you got the error,
what do you expect, and what do you get (including the error
message, if any).
Always google your issues first. Most of the time you will get
your answers.
42. Volunteers
• Designer: To design the banner, logo and icon of this learning
group
• Logistics: Co-organize the logistics
• Curriculum
• Facilitator (with coding knowledge)
