ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo
Entrepreneurship open school
Programming Course
-Flask and Heroku in Python-
Thursday, May 18, 2017
Tokyo, Japan
Naoki Watanabe
Thursday, May 18. 2017 Programming course 1
Goal of courses: Run Lean and create app
? Search what people what
? Lauch MVP (Minimum Viable Product)
Thursday, May 18. 2017 Programming course 2
Goals of today¡¯s lecture
? Install Python with conda
? Create simple web application with Flask
? Publish your application freely on Heroku via Git
Thursday, May 18. 2017 Programming course 3
Contents
? Install Anaconda powered by Python
? Learn basic Python grammar
? Follow Flask, web framework, tutorial
? Create your web application powered by Flask
? Public your application
Thursday, May 18. 2017 Programming course 4
What is Python and why?
? It¡¯s a programming language.
? Very simple and nice to learn for beginner
? Many company use it (Google¡¯s Gmail, Map, Earth, YouTube).
? It goes with data science, machine learning and deep learning
Thursday, May 18. 2017 Programming course 5
Install Python via Conda
? Conda is package controller
? Anaconda is conda and some packages.
? Search ¡°Anaconda install¡± on Google.
? It is tough to go with python on Windows, and windows user
has to install anaconda, not from python official page.
? There is also miniconda, smaller alternative to anaconda.
Thursday, May 18. 2017 Programming course 6
Thursday, May 18. 2017 Programming course 7
Create a virtual environment
$ conda -V
$ conda create ¨Cn venv
$ source activate venv
(venv) $
To deactivate, $ source deactivate
-n: specifies the name of a virtual environment
To activate/deactivate on Windows, remove source.
$ activate venv
Thursday, May 18. 2017 Programming course 8
For beginner, keep three things in mind
? Codes goes from up to down.
? You can switch code by if else clause.
? You can iterate by for loop.
You will see how to in the next slides.
Thursday, May 18. 2017 Programming course 9
sample.py ¨C print(1) ¨C 1.1
Make a file sample.py that contains only
print(1)
Thursday, May 18. 2017 Programming course 10
sample.py ¨C print(1) 1.2
Run Terminal (Mac or Linux) or Command Prompt (Windows)
$ cd path/to/folder/where/sample.py/is
$ python sample.py
Then, is 1 printed? Your first python code ran perfectly !
Thursday, May 18. 2017 Programming course 11
sample.py 2 ¨C string is what quoted -
Thursday, May 18. 2017 Programming course 12
sample.py 3 ¨C list -
Thursday, May 18. 2017 Programming course 13
sample.py 4 ¨C loop -
Thursday, May 18. 2017 Programming course 14
sample.py 5 ¨C if else clause -
Thursday, May 18. 2017 Programming course 15
sample.6 - function
Thursday, May 18. 2017 Programming course 16
Q. Fizz Buzz
? Count a number from 1 to 100, but any number divisible by
three is replaced by the word fizz and any divisible by five by
the word buzz. Numbers divisible by both become fizz buzz
1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, Fizz
Buzz, 16, 17, Fizz, 19, Buzz, Fizz, 22, 23, Fizz, Buzz, 26, Fizz, 28,
29, Fizz Buzz, 31, 32, Fizz, 34, Buzz, Fizz, ...
To get reminar, use %. Ex. 5%2. To diverge into three or more,
use if¡­elif¡­else.
Thursday, May 18. 2017 Programming course 17
A. FizzBuzz
Thursday, May 18. 2017 Programming course 18
A2. FizzBuzz (one line)
Thursday, May 18. 2017 Programming course 19
Create simple web app with flask
? Flask is a framework to make a website easily.
? You can make a web app just in five lines.
? Pinterest, LinkedIn, and Flask community page use it.
? The most popular Python web framework on GitHub
(mid2016)
? The next slides follows tutorial
http://flask.pocoo.org/docs/0.12/quickstart/
Thursday, May 18. 2017 Programming course 20
hello.py #1 Go to http://localhost:5000
Thursday, May 18. 2017 Programming course 21
hello.py #2 http://localhost:5000/hello
Thursday, May 18. 2017 Programming course 22
hello.py #3 http://localhost:5000/user/bob
Also go to http://localhost:5000/post/999
Thursday, May 18. 2017 Programming course 23
hello.py #4.1 Render html
Thursday, May 18. 2017 Programming course 24
hello.py #4.2 make templates/hello.html
/hello.py
/templates
/hello.html
Thursday, May 18. 2017 Programming course 25
hello.html #4.3 edit hello.html
Thursday, May 18. 2017 Programming course 26
Hypothesis #5.0
? Some people love cat and want to see as many cat gifs.
? You are going to create MVP.
? Application just shows cat gif.
Thursday, May 18. 2017 Programming course 27
cat.py #5.1 Create your own app!
/cat.py
/templates
/cat.html
Thursday, May 18. 2017 Programming course 28
cat.py #5.2
Thursday, May 18. 2017 Programming course 29
We use cat API #5.3
? Application Program
Interface (API) is set of tools
for applications.
? Many service provide API.
? You can use Google Map API,
YouTube API, Amazon API
and many others to create
your web service.
Thursday, May 18. 2017 Programming course 30
cat.html #5.4
Thursday, May 18. 2017 Programming course 31
#5.6 Run application
? It shows a cat gif randomly.
Thursday, May 18. 2017 Programming course 32
cat.py #5.7 Show nice nine gif animations
Thursday, May 18. 2017 Programming course 33
cat.html #5.8 Show nice nine gif anis
Thursday, May 18. 2017 Programming course 34
#5.9 http://localhost:5000
Thursday, May 18. 2017 Programming course 35
cat.py #5.11 powered by Bootstrap
Thursday, May 18. 2017 Programming course 36
Get Bootstrap link #5.12
? Search ¡°Bootstrap getting started¡± on Google
Thursday, May 18. 2017 Programming course 37
cat.html #5.13 powered by Bootstrap
Thursday, May 18. 2017 Programming course 38
#5.14 Run app
Thursday, May 18. 2017 Programming course 39
#5.15 See it¡¯s responding
Thursday, May 18. 2017 Programming course 40
What is Heroku? #1
? You can publish your app on Heroku
? Heroku is free to use (They also have a paid plan.)
? Before start, remove debug=True in cat.py
Thursday, May 18. 2017 Programming course 41
Create Heroku account and install #2
? Search ¡°Heroku¡± on Google
? Create an account (choose Python)
? Install heroku CLI (This may take a while)
? For Mac, brew install heroku
? For Windows, search ¡°Heroku CLI windows¡±. Download and install it.
? Close and start terminal (command prompt on Win) again
Thursday, May 18. 2017 Programming course 42
Create a runtime.txt #3
$ echo python-3.6.1 > runtime.txt
Let runtime.txt contain only above one line.
https://devcenter.heroku.com/articles/python-runtimes
/runtime.txt
/requirements.txt
/cat.py
/templates
/cat.html
Thursday, May 18. 2017 Programming course 43
Create a requirements.txt #4.1
$ pip freeze > requirements.txt
, but change into conda==4.3.16 as Heroku does¡¯nt newer.
Make requirements.txt contain just above two lines.
/cat.py
/requirements.txt
/templates
/cat.html
Thursday, May 18. 2017 Programming course 44
My requirements.txt #4.2
beautifulsoup4==4.6.0
conda==4.3.16
Flask==0.12.2
gunicorn==19.7.1
itsdangerous==0.24
Jinja2==2.9.6
MarkupSafe==1.0
requests==2.12.4
Werkzeug==0.12.2
Thursday, May 18. 2017 Programming course 45
Create a Procfile # 5
$ echo web: gunicorn cat:app --log-file=- > Procfile
Thursday, May 18. 2017 Programming course 46
Login to Heroku and create app #6.1
$ heroku
$ heroku create
You can access URL shown
Thursday, May 18. 2017 Programming course 47
Push app on Heroku #6.2
$ git init
$ git add .
$ git status
$ git commit ¨Cm ¡°Initialize repository¡±
$ git log
$ git push heroku master
Thursday, May 18. 2017 Programming course 48
Upload to Heroku #6.3
$ git push heroku master
$ heroku ps:scale web=1
$ heroku ps
$ heroku open
Thursday, May 18. 2017 Programming course 49
See your app #7
Thursday, May 18. 2017 Programming course 50
Create a repo on GitHub #8.1 if you want
Thursday, May 18. 2017 Programming course 51
Push to your GitHub Repository
Copy Git URL for ¡°git remote add origin <URL>¡±
$ git remote add origin
https://github.com/<username>/<repository_name>.git
$ git push origin master
Thursday, May 18. 2017 Programming course 52
GitHub Repository #8
Thursday, May 18. 2017 Programming course 53
Bibliography
? https://immense-escarpment-11300.herokuapp.com/
? http://qiita.com/kounoike/items/6fc31fe051e5d688f136
? http://flask.pocoo.org/docs/latest/quickstart/
? https://devcenter.heroku.com/articles/getting-started-with-
python
? http://michaeljgilliland.blogspot.jp/2013/01/one-line-fizz-
buzz-test-in-python.html
Thursday, May 18. 2017 Programming course 54
That¡¯s all. Thank you, folks.
Thursday, May 18. 2017 Programming course 55

More Related Content

Programming Lecture 2nd - Flask and Heroku in Python -

  • 1. Entrepreneurship open school Programming Course -Flask and Heroku in Python- Thursday, May 18, 2017 Tokyo, Japan Naoki Watanabe Thursday, May 18. 2017 Programming course 1
  • 2. Goal of courses: Run Lean and create app ? Search what people what ? Lauch MVP (Minimum Viable Product) Thursday, May 18. 2017 Programming course 2
  • 3. Goals of today¡¯s lecture ? Install Python with conda ? Create simple web application with Flask ? Publish your application freely on Heroku via Git Thursday, May 18. 2017 Programming course 3
  • 4. Contents ? Install Anaconda powered by Python ? Learn basic Python grammar ? Follow Flask, web framework, tutorial ? Create your web application powered by Flask ? Public your application Thursday, May 18. 2017 Programming course 4
  • 5. What is Python and why? ? It¡¯s a programming language. ? Very simple and nice to learn for beginner ? Many company use it (Google¡¯s Gmail, Map, Earth, YouTube). ? It goes with data science, machine learning and deep learning Thursday, May 18. 2017 Programming course 5
  • 6. Install Python via Conda ? Conda is package controller ? Anaconda is conda and some packages. ? Search ¡°Anaconda install¡± on Google. ? It is tough to go with python on Windows, and windows user has to install anaconda, not from python official page. ? There is also miniconda, smaller alternative to anaconda. Thursday, May 18. 2017 Programming course 6
  • 7. Thursday, May 18. 2017 Programming course 7
  • 8. Create a virtual environment $ conda -V $ conda create ¨Cn venv $ source activate venv (venv) $ To deactivate, $ source deactivate -n: specifies the name of a virtual environment To activate/deactivate on Windows, remove source. $ activate venv Thursday, May 18. 2017 Programming course 8
  • 9. For beginner, keep three things in mind ? Codes goes from up to down. ? You can switch code by if else clause. ? You can iterate by for loop. You will see how to in the next slides. Thursday, May 18. 2017 Programming course 9
  • 10. sample.py ¨C print(1) ¨C 1.1 Make a file sample.py that contains only print(1) Thursday, May 18. 2017 Programming course 10
  • 11. sample.py ¨C print(1) 1.2 Run Terminal (Mac or Linux) or Command Prompt (Windows) $ cd path/to/folder/where/sample.py/is $ python sample.py Then, is 1 printed? Your first python code ran perfectly ! Thursday, May 18. 2017 Programming course 11
  • 12. sample.py 2 ¨C string is what quoted - Thursday, May 18. 2017 Programming course 12
  • 13. sample.py 3 ¨C list - Thursday, May 18. 2017 Programming course 13
  • 14. sample.py 4 ¨C loop - Thursday, May 18. 2017 Programming course 14
  • 15. sample.py 5 ¨C if else clause - Thursday, May 18. 2017 Programming course 15
  • 16. sample.6 - function Thursday, May 18. 2017 Programming course 16
  • 17. Q. Fizz Buzz ? Count a number from 1 to 100, but any number divisible by three is replaced by the word fizz and any divisible by five by the word buzz. Numbers divisible by both become fizz buzz 1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, Fizz Buzz, 16, 17, Fizz, 19, Buzz, Fizz, 22, 23, Fizz, Buzz, 26, Fizz, 28, 29, Fizz Buzz, 31, 32, Fizz, 34, Buzz, Fizz, ... To get reminar, use %. Ex. 5%2. To diverge into three or more, use if¡­elif¡­else. Thursday, May 18. 2017 Programming course 17
  • 18. A. FizzBuzz Thursday, May 18. 2017 Programming course 18
  • 19. A2. FizzBuzz (one line) Thursday, May 18. 2017 Programming course 19
  • 20. Create simple web app with flask ? Flask is a framework to make a website easily. ? You can make a web app just in five lines. ? Pinterest, LinkedIn, and Flask community page use it. ? The most popular Python web framework on GitHub (mid2016) ? The next slides follows tutorial http://flask.pocoo.org/docs/0.12/quickstart/ Thursday, May 18. 2017 Programming course 20
  • 21. hello.py #1 Go to http://localhost:5000 Thursday, May 18. 2017 Programming course 21
  • 22. hello.py #2 http://localhost:5000/hello Thursday, May 18. 2017 Programming course 22
  • 23. hello.py #3 http://localhost:5000/user/bob Also go to http://localhost:5000/post/999 Thursday, May 18. 2017 Programming course 23
  • 24. hello.py #4.1 Render html Thursday, May 18. 2017 Programming course 24
  • 25. hello.py #4.2 make templates/hello.html /hello.py /templates /hello.html Thursday, May 18. 2017 Programming course 25
  • 26. hello.html #4.3 edit hello.html Thursday, May 18. 2017 Programming course 26
  • 27. Hypothesis #5.0 ? Some people love cat and want to see as many cat gifs. ? You are going to create MVP. ? Application just shows cat gif. Thursday, May 18. 2017 Programming course 27
  • 28. cat.py #5.1 Create your own app! /cat.py /templates /cat.html Thursday, May 18. 2017 Programming course 28
  • 29. cat.py #5.2 Thursday, May 18. 2017 Programming course 29
  • 30. We use cat API #5.3 ? Application Program Interface (API) is set of tools for applications. ? Many service provide API. ? You can use Google Map API, YouTube API, Amazon API and many others to create your web service. Thursday, May 18. 2017 Programming course 30
  • 31. cat.html #5.4 Thursday, May 18. 2017 Programming course 31
  • 32. #5.6 Run application ? It shows a cat gif randomly. Thursday, May 18. 2017 Programming course 32
  • 33. cat.py #5.7 Show nice nine gif animations Thursday, May 18. 2017 Programming course 33
  • 34. cat.html #5.8 Show nice nine gif anis Thursday, May 18. 2017 Programming course 34
  • 35. #5.9 http://localhost:5000 Thursday, May 18. 2017 Programming course 35
  • 36. cat.py #5.11 powered by Bootstrap Thursday, May 18. 2017 Programming course 36
  • 37. Get Bootstrap link #5.12 ? Search ¡°Bootstrap getting started¡± on Google Thursday, May 18. 2017 Programming course 37
  • 38. cat.html #5.13 powered by Bootstrap Thursday, May 18. 2017 Programming course 38
  • 39. #5.14 Run app Thursday, May 18. 2017 Programming course 39
  • 40. #5.15 See it¡¯s responding Thursday, May 18. 2017 Programming course 40
  • 41. What is Heroku? #1 ? You can publish your app on Heroku ? Heroku is free to use (They also have a paid plan.) ? Before start, remove debug=True in cat.py Thursday, May 18. 2017 Programming course 41
  • 42. Create Heroku account and install #2 ? Search ¡°Heroku¡± on Google ? Create an account (choose Python) ? Install heroku CLI (This may take a while) ? For Mac, brew install heroku ? For Windows, search ¡°Heroku CLI windows¡±. Download and install it. ? Close and start terminal (command prompt on Win) again Thursday, May 18. 2017 Programming course 42
  • 43. Create a runtime.txt #3 $ echo python-3.6.1 > runtime.txt Let runtime.txt contain only above one line. https://devcenter.heroku.com/articles/python-runtimes /runtime.txt /requirements.txt /cat.py /templates /cat.html Thursday, May 18. 2017 Programming course 43
  • 44. Create a requirements.txt #4.1 $ pip freeze > requirements.txt , but change into conda==4.3.16 as Heroku does¡¯nt newer. Make requirements.txt contain just above two lines. /cat.py /requirements.txt /templates /cat.html Thursday, May 18. 2017 Programming course 44
  • 46. Create a Procfile # 5 $ echo web: gunicorn cat:app --log-file=- > Procfile Thursday, May 18. 2017 Programming course 46
  • 47. Login to Heroku and create app #6.1 $ heroku $ heroku create You can access URL shown Thursday, May 18. 2017 Programming course 47
  • 48. Push app on Heroku #6.2 $ git init $ git add . $ git status $ git commit ¨Cm ¡°Initialize repository¡± $ git log $ git push heroku master Thursday, May 18. 2017 Programming course 48
  • 49. Upload to Heroku #6.3 $ git push heroku master $ heroku ps:scale web=1 $ heroku ps $ heroku open Thursday, May 18. 2017 Programming course 49
  • 50. See your app #7 Thursday, May 18. 2017 Programming course 50
  • 51. Create a repo on GitHub #8.1 if you want Thursday, May 18. 2017 Programming course 51
  • 52. Push to your GitHub Repository Copy Git URL for ¡°git remote add origin <URL>¡± $ git remote add origin https://github.com/<username>/<repository_name>.git $ git push origin master Thursday, May 18. 2017 Programming course 52
  • 53. GitHub Repository #8 Thursday, May 18. 2017 Programming course 53
  • 54. Bibliography ? https://immense-escarpment-11300.herokuapp.com/ ? http://qiita.com/kounoike/items/6fc31fe051e5d688f136 ? http://flask.pocoo.org/docs/latest/quickstart/ ? https://devcenter.heroku.com/articles/getting-started-with- python ? http://michaeljgilliland.blogspot.jp/2013/01/one-line-fizz- buzz-test-in-python.html Thursday, May 18. 2017 Programming course 54
  • 55. That¡¯s all. Thank you, folks. Thursday, May 18. 2017 Programming course 55