├── .gitignore ├── README.md ├── config.py ├── index.html ├── main.css ├── my_app ├── __init__.py ├── static │ └── main.css ├── templates │ └── index.html └── views.py ├── requirements.txt └── run.py /.gitignore: -------------------------------------------------------------------------------- 1 | venv/ 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Welcome to the HackMIT 2020 Beginner Workshop! 2 | 3 | with-rails 4 | 5 | ## Important Notes 6 | * If you plan on attending the workshop, please make sure to complete [**Pre-Workshop Setup**](#pre-workshop-setup) before the event! 7 | * If you want to submit to the **Beginner** track at HackMIT, you must have attended at least one of the beginner workshops! 8 | 9 | ## Overview 10 | The HackMIT 2020 Beginner Workshop will be a crash course into the basics of creating a web app. In three 1 hour sessions, we will teach you the basics of creating a webpage, writing a backend, using databases, calling 3rd party APIs, and how to tie them all together. 11 | 12 | **Topics** 13 | 14 | The breakdown of topics for each workshop: 15 | 1. Friday, Midnight (aka Sat 12:00 AM): Workshop 1 16 | * Intro to using Git 17 | * Creating a frontend with HTML/CSS 18 | 2. Saturday, 10:00 AM: Workshop 2 19 | * Creating a backend with Flask 20 | * Connecting it all with Javascript 21 | 3. Saturday, 11:15 AM: Workshop 3 22 | * Using databases 23 | * Intro to APIs 24 | 25 | **Prerequisites**: 26 | * You should have some fundamental coding knowledge, on the level of AP Computer Science or a college introduction CS course is more than enough. 27 | * You should have some familiarity with Python. Python fundamentals will not be taught 28 | * Finish all the steps of **Pre-Workshop Setup** (below) before the event 29 | 30 | 31 | **Workshop Structure and Resources** 32 | * The slides for the workshop can be found at [go.hackmit.org/beginner-slides](https://go.hackmit.org/beginner-slides) 33 | * This repository will be used as your starting off point. You will build your app off of here 34 | * We will also provide a repository of the final code from each of the workshops for your future reference 35 | 36 | # Pre-Workshop Setup 37 | #### 1. Setup Github 38 | Make sure you have github installed on your computer. 39 | 40 | [Setup Instructions](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) 41 | 42 | You can test this by opening your terminal (or git bash in the case of Windows) and typing: 43 | `git --version` 44 | You should see a printout similar to 45 | `$ git version 2.17.1` 46 | 47 | #### 2. Navigating the Terminal (or Command Prompt) 48 | If you are not familiar with using your Terminal (or Git Bash in the case of Windows), here are some good [starter instructions](https://www.macworld.com/article/2042378/master-the-command-line-navigating-files-and-folders.html). 49 | At the very minimum, you will need to know how to: 50 | * navigate your filesystem with `cd` 51 | * show current files in directory with `ls` 52 | * run basic commands like `python ` 53 | 54 | #### 3. Setup SSH Key (optional) 55 | There are two ways to link to Github repositories: HTTP and SSH. Using HTTP requires no setup but will require you to enter your username and password each time you want to push changes online. SSH gets around this. 56 | 57 | [Setup an SSH Key](https://docs.github.com/en/enterprise/2.15/user/articles/adding-a-new-ssh-key-to-your-github-account) on your computer 58 | 59 | Adding an ssh key to your computer allows you to interface with git easier, but is not required. If you're stuck on this, move on! 60 | 61 | #### 4. Clone this Repo 62 | 63 | Click the big green "Clone" button on the right. Choose either "Clone with SSH" if you have it set up or "Clone with HTTPS" otherwise and copy the link 64 | 65 | Run `git clone ` in your terminal under a directory of your choice 66 | 67 | #### 5. Setup Python3 68 | [Setup Instructions](https://www.python.org/downloads/) 69 | 70 | You can test by running in your terminal 71 | `python --version` 72 | 73 | Make sure you have Python 3.x installed! 74 | 75 | **Note**: If you have python 3 installed but `python --version` gives you a Python 2.x version, make sure `python3 --version` gives you a Python 3.x version. Substitute all future calls to `python` with `python3` 76 | 77 | #### 6. Pip 78 | [Setup Instructions](https://pip.pypa.io/en/stable/installing/) 79 | 80 | In your terminal, run: `pip --version` or `pip3 --version` and make sure you get a printout. Make sure to use the pip version that corresponds to your python 3 version: 81 | 82 | Example output: `pip 19.2.3 from /home//python3.8/site-packages/pip (python 3.8)` 83 | 84 | 85 | #### 7. Install Requirements File 86 | In your terminal, navigate to the root directory of this repository, `cd beginner-workshop-2020` 87 | 88 | Run `pip install -r requirements.txt` in the command line to install all of the requirements contained in this file. 89 | 90 | #### 8. Install Postman 91 | Postman is an application that allows you to easily format requests to API endpoints. We will be using it to debug our backend endpoints, and it may be useful for any future backend development. 92 | 93 | [Setup Instructions](https://www.postman.com/downloads/) 94 | 95 | #### 9. Check that everything is installed 96 | In the root directory of the repo, run: 97 | 98 | `python run.py` 99 | 100 | It should run without errors. Navigate to `localhost:5000` in a web browser. You should see "Hello World" printed on the page. This means you have succesfully completed setup. See you at the workshop! 101 | 102 | ## Troubleshooting 103 | 104 | If you are having trouble setting up, or have any questions about the workshop, feel free to email **help@hackmit.org** or join our [Event Slack](https://join.slack.com/t/hackmit2020/shared_invite/zt-gjlojqk6-vwId_VUJpCS3ZcAmxr_3sQ) and use the *#beginner* channel. 105 | 106 | 107 | ## Resources 108 | 109 | #### From the workshop 110 | * Beginner Slides: https://go.hackmit.org/beginner-github 111 | * Code from the workshop are on branches **workshop1**, **workshop2**, **final** (commands to checkout branches are on the slides!) 112 | 113 | #### Git 114 | * Git basic commands overview: https://training.github.com/downloads/github-git-cheat-sheet/ 115 | * Git detailed cheatsheet: https://education.github.com/git-cheat-sheet-education.pdf 116 | * Git documentation: https://git-scm.com/about 117 | * Git tutorial: https://www.freecodecamp.org/news/learn-the-basics-of-git-in-under-10-minutes-da548267cc91/ 118 | 119 | 120 | #### HTML/CSS 121 | * Best go to website for HTML/CSS reference and tutorials: https://www.w3schools.com/ 122 | * CSS Cheat Sheet: https://websitesetup.org/wp-content/uploads/2019/11/wsu-css-cheat-sheet-gdocs.pdf 123 | * My favorite CSS tutorial on Flexboxes (makes life with CSS easier): https://flexboxfroggy.com/ 124 | * Semantic Ui: https://semantic-ui.com/ 125 | CSS import tag: `` 126 | * JS import tag: `` 127 | * Bootstrap: https://getbootstrap.com/docs/4.5/getting-started/introduction/ 128 | 129 | 130 | #### Flask: 131 | * My favorite flask tutorial: https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world 132 | * Flask Documentation + Official Tutorial: https://flask.palletsprojects.com/en/1.1.x/ 133 | 134 | 135 | #### JS + Jquery 136 | * Jquery documentation: 137 | * Javascript tutorial: https://javascript.info/ 138 | * Javascript functions cheat sheet: https://htmlcheatsheet.com/js/ 139 | * Import link: `` 140 | ** note: "CDN" stands for "Content Delivery Network", CDNs host a lot of libraries you can import anytime. When you need the link, just google " CDN" and you should be able to find a link 141 | 142 | 143 | #### Databases: 144 | Tutorial of using databases with Flask: https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-iv-database 145 | 146 | #### APIs: 147 | * List of Public APIs you can play with: https://github.com/public-apis/public-apis 148 | -------------------------------------------------------------------------------- /config.py: -------------------------------------------------------------------------------- 1 | DEBUG=True -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hack Book 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techx/beginner-workshop-2020/57ec18a74d83ff0eec24712686f4eebfdca6545d/main.css -------------------------------------------------------------------------------- /my_app/__init__.py: -------------------------------------------------------------------------------- 1 | import os 2 | from flask import Flask, session, request 3 | 4 | app = Flask(__name__) 5 | 6 | #load main config 7 | app.config.from_pyfile('../config.py') 8 | 9 | 10 | import my_app.views -------------------------------------------------------------------------------- /my_app/static/main.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techx/beginner-workshop-2020/57ec18a74d83ff0eec24712686f4eebfdca6545d/my_app/static/main.css -------------------------------------------------------------------------------- /my_app/templates/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techx/beginner-workshop-2020/57ec18a74d83ff0eec24712686f4eebfdca6545d/my_app/templates/index.html -------------------------------------------------------------------------------- /my_app/views.py: -------------------------------------------------------------------------------- 1 | from my_app import app 2 | from flask import render_template, request, redirect 3 | import requests 4 | 5 | @app.route("/") 6 | def index(): 7 | return "Hello world!" -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | click==7.1.2 2 | Flask==1.1.2 3 | itsdangerous==1.1.0 4 | Jinja2==2.11.2 5 | MarkupSafe==1.1.1 6 | requests==2.22.0 7 | Werkzeug==1.0.1 8 | -------------------------------------------------------------------------------- /run.py: -------------------------------------------------------------------------------- 1 | from my_app import app 2 | 3 | if __name__ == '__main__': 4 | app.run(host="0.0.0.0", port=5000, debug=True) --------------------------------------------------------------------------------