Learning Web Development with Ruby on Rails Launch
- 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)
- 3. INTRODUCTION TO THE PROGRAM
- 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.
- 21. Test-Driven Development TDD Red GreenRefactor 1. Write a failing test 2. Write the code to pass the test 3. Refactor your code if necessary, and run all the tests again
- 22. INTRO TO RUBY ON RAILS
- 23. How Rails Applications work? Controller View Model request Data DataData Response (html) Database Routes
- 24. Rails File System app/ assets (images, stylesheets, javascripts)/ controllers/ models/ views/ Others (helpers, mailers, jobs) config/ initializers/ routes.rb database.yml db migrate/ schema.rb seeds.rb
- 25. Rails File System (Continued) spec MVC folders requests/ features/ support/ spec_helper.rb / rails_helper.rb Gemfile README.md
- 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
- 27. LIVE DEMO
- 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
- 30. Database Structure for Todo List App
- 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
- 34. TEAM FORMATION, NETWORKING AND DISCUSSIONS
- 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.
- 37. MOVING AHEAD
- 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.
- 39. Beyond Physical Meetups • Webinars • Guides in Medium Publications
- 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)