Tutorial Módulo 1 de Introdução com Flask

Tutorial Flask 1

1. Jeffrey Snover | Distinguished Engineer& Lead Architect
Jason Helmick | Senior Technologist, Concentrated Technology
Introduction to web sites with
Python and Flask

2. Meet Susan Ibach| @hockeygeekgirl
Technical Evangelist
Helping developers understand Visual Studio, app
building
Microsoft Certified Trainer
My first program was written in basic on a computer with
64K of memory
Will not admit how many years coding experience
Basic, Fortran, COBOL, VB, C#, HTML, Python
Frequent blogger and presenter
marathoner, wife, and mother of two awesome boys!

3. Meet Christopher Harrison | @geektrainer
Content Developer
Focused on ASP.NET and Office 365 development
Microsoft Certified Trainer
Still misses his Commodore 64
Long time geek
Regular presenter at TechEd
Periodic blogger
Certification advocate
Marathoner, husband, father of one four leggedchild

4. Course Topics
Introduction to web sites with Python and Flask
01 | Introduction to Flask 04 | Data storage locations
02 | Creating web pages in Flask 05 | Using Redis
03| Requesting user input 06 | Cloud deployment

5. Setting Expectations
•Target Audience
–New Python developers looking to take the "next step"
–Burgeoning web developers
•Suggested Prerequisites/Supporting Material
–Some Python experience
–MVC experience
–Introduction to Programming with Python MVA

6. •Microsoft Virtual Academy
–Free online learning tailored for IT Pros and Developers
–Over 1M registered users
–Up-to-date, relevant training on variety of Microsoft products
•“Earn while you learn!”
–Get 50 MVA Points for this event!
–Visit http://aka.ms/MVA-Voucher
–Enter this code: WebDevPythonFlask(expires January 15, 2015)
Join the MVA Community!

7. Click to edit Master
subtitle style
01 | Introduction to Flask
Susan Ibach | Technical Evangelist
Christopher Harrison | Content Developer

8. •What is a web application?
•What is Flask?
•Why Flask?
•Getting started
•Hello, Flask
•HTML primer
Module Overview

9. Click to edit Master
subtitle style
What is a web application

10. "A web application or web app is any software that
runs in a web browser. It is created in a browser-
supported programming language (such as the
combination of JavaScript, HTML and CSS) and relies
on a web browser to render the application."
- Wikipedia

11. Web applications defined
•Two main moving parts
–Server
•Several different technologies
–MVC
–PHP
–node.js
•Works with all browsers
–Client
•Browser
•HTML, JavaScript and CSS
•May be other components
–Database
–Services

12. Click to edit Master
subtitle style
What is Flask?

13. Flask is a microframework for Python based
on Werkzeug, Jinja 2 and good intentions.
http://flask.pocoo.org/

14. Flask defined
•A lightweight framework
–Does what it needs to do and nothing else
•Server-side technology
•Componentized and customizable
–Does just a little out of the box
–Components for additional functionality
•Database access
•Templates
•Services

15. Flask features
•Based on Python
–Flexible language
•Open source
–BSD license

16. Click to edit Master
subtitle style
Why Flask?

17. Why Flask?
•Unobtrusive
–Doesn't get in your way
•Low entry point
–Don't need to cover a lot of frameworks to get started
•Great place to learn concepts
–But you can use it to create real-world applications

18. Click to edit Master
subtitle style
Getting Started

19. Getting started
•Necessary components
•Environments
•Visual Studio templates
•Hello, Flask!

20. •There are a lot of different
tools out there you can use
to write Python Code.
•In this course we will use
Visual Studio + Python Tools
for Visual Studio
You need to install software on your PC/laptop

21. The installation steps are explained at the Python
Tools for Visual Studio website
1.Install Visual Studio 2013 Community Edition
2.Install Visual Studio 2013 Update 4 so you have the latest
features
3.Install Python Tools for Visual Studio
4.Install the Python 3.4 interpreter
http://pytools.codeplex.com/documentation for full instructions

22. Environments
•Flask depends on extensions
•Extensions must be installed
•Two targets
–System or Python
•Globally available
–Local environment
•Available for just that project
Pro Tip:
It's generally best to use local environments
This allows you to upgrade individual projects

23. DEMO
Hello, Flask!

24. Click to edit Master
subtitle style
HTML primer

25. HTML primer
•HTML concepts
•Elements
•Attributes
•Additional resources

26. HTML concepts
•Hypertext markup language
•Standard markup for creating web pages
•Components
–Elements
–Attributes

27. Elements
•Consist of tags
•Tags are contained in "angle brackets"
<>
•Typically in open/close pairs
<body>
</body>
•Technically case insensitive
–Convention is to use lower case letters

28. Closing tags
•Browsers will always make a "best effort" at rendering pages
–HTML doesn't need to be perfect
–Try to make it as clean as possible
•Aids the browser
•Aids the developer
•Tags with nothing between the open and close can be left open
–However, best practice is to close them
–Shortcut
<br />

29. Element types
Semantic:
Used to describe data
New with HTML5
Examples:
•header
•footer
•nav
Controls:
Add items to a page
Commonly forms
Examples:
•button
•a
•input
Display:
Only determines format
Generally avoid
Examples:
•b
•em
•strong

30. Standard HTML page
<html>
</html>
<head>
<title>Hello, Python!</title>
</head>
<body>
<div>Hello, HTML!</div>
</body>

31. Attributes
•Used to add additional context to elements
•Always placed in the opening tag
•Typically key/value pairs
–Single or double quotes
<input type='text' />
<a href='http://www.microsoft.com'>Microsoft</a>

32. DEMO
HTML Basics

33. What did we learn?
•How to manage Python environments
•Begin developing web applications using Flask and Python

34. What can we do with this knowledge?
•Begin pursuing deeper knowledge of web application
development