Flask and Angular YHack Deck

Frontend (Angular) / Backend (Flask) tutorial with blackjack app.

Transcript

1. Playing Blackjack A beginner’s tutorial to Flask and AngularJS
2. Backend The logic and management Frontend What you see and interact with
3. The Backend
4. POST /play { 'handTotal': 5, 'dealerSuiteArr': ['hearts', 'clubs'], 'bankAmount': 900, 'userSuiteArr': ['clubs', 'diamonds'], 'dealerHandArr': [4, 9], 'message': '', 'winAmount': 0, 'userHandArr': [1, 4], 'potAmount': 100, 'loseAmount': 0, 'dealerTotal': 13 }
5. Flask: a Python microframework • It’s very lightweight. You don’t need a lot of files. • It’s powerful. You can make a webapp in less than 200 lines. • Very easy to learn. • Great for hackathons and small apps with simple requirements.
6. MVC Framework. • MVC is a really popular design framework for web programming languages! • Three fundamental parts: ◦ Data (model) ◦ Display (view) ◦ Logic (Controller) • These 3 parts are independent, which makes everything reusable.
7. The View. The view displays the model data, and sends user actions (e.g. button clicks) to the controller. Think of HTML, CSS, Javascript.
8. The Controller. The point of the controller is to process the data for the view. In your HTML/CSS, you might want elements that change depending on the data. The controller is the coding logic to get that data ready. This is defining a route!
10. Everything as a Function. In Flask, most of the things you will ever need are imported as python libraries. To handle requests, and do all that good MVC stuff, is easy. A lot of it is done for you in these libraries.
11. The Frontend
12. POST /play { 'handTotal': 5, 'dealerSuiteArr': ['hearts', 'clubs'], 'bankAmount': 900, 'userSuiteArr': ['clubs', 'diamonds'], 'dealerHandArr': [4, 9], 'message': '', 'winAmount': 0, 'userHandArr': [1, 4], 'potAmount': 100, 'loseAmount': 0, 'dealerTotal': 13 }
14. AngularJS: a frontend framework • Client-side MVC • Allows you to build rich user interfaces in a cleaner way
15. Controller • Attached to the DOM using `ng-controller` • Within the controller, we perform business logic for our application
17. Directives • “Markers” that we add into our HTML for data binding • In this case, we are playing with `$scope.name`using Angular’s ngBind
18. Building Blackjack
19. The Basic Layout app/ static/ → images, stylesheets, javascript. templates/ → HTML. logic → Blackjack rules. forms → Getting user input. controllers → Linking form data and routes. initialization file → Initial parameters. tmp/ → Random junk. configuration file → Settings and passwords. server file → Running Flask app.
20. Fill out the missing parts. If you run python app.py, you’ll notice that it crashes. We’ve provided most of the work but left out the Flask and Angular controllers. Together, we’ll walk through the missing parts to flush out the application. Follow along at http://goo.gl/m6avdI
21. Extra time? The app works okay, but it looks really plain and the backend could be more robust. Practice your new skills by adding more features and redesigning the application. Need a help getting started? We’ve already set up Bootstrap.
22. @grub_007 @frankjwu