Playing Blackjack A beginner’s tutorial to Flask and AngularJS 

Backend The logic and management Frontend What you see and interact with 

The Backend 

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 } 

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. 

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. 

The View. The view displays the model data, and sends user actions (e.g. button clicks) to the controller. Think of HTML, CSS, Javascript. 

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! 

No content

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. 

The Frontend 

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 } 

No content

AngularJS: a frontend framework ● Client-side MVC ● Allows you to build rich user interfaces in a cleaner way 

Controller ● Attached to the DOM using `ng-controller` ● Within the controller, we perform business logic for our application 

No content

Directives ● “Markers” that we add into our HTML for data binding ● In this case, we are playing with `$scope.name`using Angular’s ngBind 

Building Blackjack 

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. 

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 

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. 

@grub_007 @frankjwu