Python Cloud Computing #2: Practical Hands-on Using Heroku - Part 1 of 2

Heroku Office Entrance

Heroku Office Entrance
Pulled out the image from here.


This is yet another article in this series that shows a practical hands-on using another Python Cloud Computing solution there existed in our planet: Heroku. We will going to try to publish our Openshift's Flask Biography application in Heroku, and along the way --it's unavoidable-- we will compare the process with Openshift, which due to Openshift's generosity in offering 1 GB free plan (including database and user uploaded files!), I still think Openshift is the best Python Cloud Computing platform for developers out there. I got to remind you though, I am not talking in term of its performance comparison in handling multitude number of visitors. We are just going to find out how to create, deploy and manage application installed in Heroku. The branch that we are going to use, is the Blueprints branch in our public pythonthusiast/bio Github repository.

Great, lets get started!


Flask Biography Tutorial Part XIV - Redesign The Application using Blueprints

Blueprints Modularized Version of Biography Application

Figure 1 - Blueprints Modularized version of Biography Application

In a retrospect, the intention that drive me in finishing this Flask Biography Application is because I would like to start a series that extensively talk about Python Cloud Computing. As I deploy the application in PythonAnywhere, I realize that the application structure is far from complete (I dare not to say perfect..). Back at that time, I throw all application's classes, object, method, configuration, etc, into a single Python file (or let's call it Python module. It's much more Pythonic that way). For the sake of simplicity, it's cool actually. But things will become seriously ill, if the application begins to grows.

In the previous article, we have done an initial work of restructuring the single application module into several modules and using Flask-Classy to better manage our routes/views method. But the restructuring work is not yet finished: you can't clearly see any separation of concerns (a.k.a application features) toward the existing application code. And that's where Flask Blueprints nicely fits into our discussion.Taken from Armin own writing, "Blueprints can greatly simplify how large applications work and provide a central means for Flask extensions to register operations on applications. A Blueprint object works similarly to a Flask application object, but it is not actually an application. Rather it is a blueprint of how to construct or extend an application". At the moment we won't talk about Flask Extension, instead we will obey Armin's word, that Flask Blueprints object, is blueprint (sorry for the blueprintception) to construct or extend an application. Meaning, to construct a large Flask application, one must use Flask Blueprint object in doing so. Coupled with the proper use of Python package and module, you will be able to construct a large Flask application in a much effective way.

Great, what are we waiting for? Let's go deeper!


Flask Biography Tutorial Part XIII - Structuring Project to Support Larger Flask Application


Splitting module/file into several *.py files/modules


If you have followed this Flask series until this article, you will know that up until now our Flask article still lived inside a single file: Is it a bad practice? Perhaps. But it really is fun. It is a proof that a web application can be contained within one single Python module, which is a realization of the initial April Fools Joke that drive the creation of our beloved Flask web framework: it's possible to create such, but certainly not advisable.

Having said that, Flask still don't impose any strict directory organization or modules separation. Compare this with Django, where it come up with a monolithinc ready to use project directory that you must adhere, in Flask world, you can freely to choose to follow a simple organization of your Flask application into package as this official guide shows you, or turning your Flask application into a highly modular application using Blueprints. In this article we are going to implement a much more simplified version of Flask project directory organization : splitting module into several *.py files/modules that wrap logically related class/code into its own module. The idea is simple: e.g., if you want to add a new form, you don't have to scroll through the code that talks about models. In the next subsequent article, we will then modularize our application using Blueprints.

Let's get started!


Flask Biography Tutorial Part XII - Implementing Profile Page using Inline Editing

Utilizing X-editable to edit biography page

Utilizing X-editable to in-place editing our biography page

UPDATED: Previously I said that I use wsgi/static/upload to store user's uploaded avatar. Although it's working, it still imposed one important problem: the content of wsgi/static/upload itself will be removed for each subsequent git push command. We must store user's data into $OPENSHIFT_DATA_DIR/upload directory. How do we do this? Simple. First, (if it's currently existed) remove the folder wsgi/static/upload, and then create an executable binary script within the folder .openshift/action_hooks/post_deploy, with the content: ln -sf $OPENSHIFT_DATA_DIR/upload $OPENSHIFT_REPO_DIR/wsgi/staticgi/static/. Make sure to set the flag bit into executable using the command: chmod +x post_deploy (I don't think you can do this in Windows. *nix/OSX will do just fine for this).This script will be run each time we push the repository to Openshift --after the application successfully deployed, making a link to upload directory of user's uploaded avatar. This way, user's avatar will get stored in $OPENSHIFT_DATA_DIR/upload and will always available each time we push our application to Openshift.

As I start a new series on this blog about Python Cloud Computing and working my first way of making our Flask Biography Application runnable within PythonAnywhere, I realize that I haven't completed the last important thing for this application to be fully functional: editing biography for registered users. This biography application will become practically useless if users don't have the ability to edit their full name, tagline, avatar and short biography. Having said that, let's make it even better by implementing in-place editing for all those fields, where in-place editing simply means users will be able to edit those fields directly within the same page. We are going to use Vitaliy Potapov's X-editable for this purpose. It's an awesome Open Source product!


Django KFIMember Tutorial Part III - Configure Inital PostgreSQL Database Locally and Remotely in Openshift

Configuring PostgreSQL on Openshift

Configuring PostgreSQL on Openshift

ARTICLE UPDATE : As I have unresolved problem when using Python 3.3 combined with Django 1.6 and PostgrerSQL 9.2 in Openshift, I dropped Python 3.3 requirement and rework this application using Python 2.7 instead.

In Part II of this article we have already have an initial working application using Django and also import it into PTVS project. That's a good start. But the application still lack a fundamental requirement for any web database application : database support. In this article we are going to configure the initial Django database and improve it even further by using database migration feature using South. One important note about this article though, it first focused itself for Windows user.  Afterward, we are going to have a look on how it's done for *nix user, especially Ubuntu.


Flask Biography Tutorial Part XI : Managing Database Migration in Production Environment Using Alembic


Our Openshift's application current state using the latest revision
Our Openshift's application current state using the latest revision

Although I never marked our live Bio Application as published, actually at the current state it shouldn't be treated as a production quality application. The main reason is simple : up until now, our database will always be recreated when application started, discarding any data already entered by our users. We do this to allow us focusing our work on perfecting application features than to manage our own database migration script.

Today we are going to have a look on how exactly a database migration technique is implemented. It will allow our application to be stamped as Production Quality application, as it will allow users to registered safely into our application. Whatever development changes we introduce, our users data will not just get thrown to the void. The database schema will be upgraded and existing data will be merged to the new schema.

In our beloved Python world there are plenty of database migration tools available. But as we use SQLAlchemy, well, don't you think that the author of SQLAlchemy should be the  the legitimate author to write its database migration tool? Well then, introducing Alembic!


Django KFIMember Tutorial Part I - Deciding Application Scope, Production and Technology Stacks

If this is your first encounter with PTVS, I bet you haven't imagine this kind of screenshot, even in your wildest dreams.

If this is your first encounter with PTVS, I bet you haven't imagine this kind of screenshot, even in your wildest dreams... Cool

ARTICLE UPDATE : As I have unresolved problem when using Python 3.3 combined with Django 1.6 and PostgrerSQL 9.2 in Openshift, I dropped Python 3.3 requirement and rework this application using Python 2.7 instead.

Yes, I know. I haven't finished my Flask Biography Tutorial yet. But I thought I would like to start an initial post of what my next tutorial series would be like. I have several ideas actually, popping from my head of what Python topic (library or framework to be exact) I would like to explore more, which are:

  1. Django : "The Web framework for perfectionists with deadlines". I am pretty much sure, no software developers were not intrigued by that tagline! Before diving into Python, I evaluate Ruby on Rails previously. And I got the sense that Django is Python answer to RoR, which is not that untrue.
  2. Pyramid, mainly because previously I got offered for Pyramid based remote job.
  3. Isometric traffic control simulation game build using (probably) XNA + Python for scripting. Why? Because in one occasion where I explained to my 6 years old daughter of what is an Isometric image (after I saw her to be so enthusiast looking at an isometric pixel-art image), she and also her 3 years old brother seems to be interested on it.

    It's so addicted!
    It's so addicted! Try to find Batman in that beautiful pixel art image taken from nasc

  4. Twisted, to be able to develop a large scale of network event-driven application. It may be just a chat server for the aforementioned Isometric traffic control simulation game, or a more complex multiplayer server for it.

Eventually, as I also have been offered a job to develop membership website for our Koperasi Freelancer Indonesia (KFI), I thought the timing is perfect if I blog my experience in developing it as my next tutorial series in this blog. With one interesting twist of plot : we are going to add another development platform, Python Tools for Visual Studio + Windows Azure. But still not forgetting those  who use *nix. In this series, we are going to see how well Windows Azure match up with Openshift in context of deploying Python web application.

Hence, welcome to the first installment of Pythonthusiast's Django Tutorial!


Flask Biography Tutorial Part X : Building Portfolio Form Modal Dialog using Flask-WTF, Bootstrap 3, Bootbox, Bootstrap Tags Input and jQuery



I got to admit something : I really have fun writing this current article! It shows concise way for new comer in Python web development area to truly understand how to integrate Bootstrap and its extensions, jQuery and Flask to build feature that increase user experience in interacting with the application.

Previously we haven't utilize jQuery and many Bootstrap extensions there exist in the web, making our application solely depends on what Flask community gave us (which is great!). But, as we already choose to leverage Bootstrap 3 in our application, this decision bring great advantage : we can easily tap to plethora of Bootstrap extension built by community and add it in our own application to gain benefit of its functionality. Specifically we are going to maximize the use of this open source products to our application:

  1. jQuery, especially its .getJSON and .post method to allow our Portfolio form live as a modal dialog box complete with Ajax validation and Ajax form submission. I got to beg you pardon for this, for thinking in the previous post that we have to use jQuery client side validation. Turn out what I really want is an Ajax based validation technique. I will explain later what are the differences. But one important thing is, we don't have to double our validation mechanism complexity by also implementing it in client-side.
  2. Bootstrap Tags Input, making entering tags as comma separated value is a pleasant experience.
  3. Bootbox that lets our application utilize a popup confirmation dialog easily.

Ready? Let's start!


Flask Biography Tutorial Part IX : Creating Product Portofolio Page


A compact layout of our Portfolio table

Figure IX-1 Portofolio grid in Bio Page complete with action buttons


Before we going further on our journey of making a fully functional Bio Application, lets return to our early concept of this application : product portfolio show case. And guess what we missed. Correct. We missed the required application model for a product portfolio. If you rethink our application models until this state, we know we haven't add a portfolio model/table. This part of article series will guide you on how exactly it's done by adding Portfolio model using SQLAlchemy relationship field in our existing Users mode.


Flask Biography Tutorial Part VIII : Using Hash to Store Password Securely


Password stored in a plain text format... Oh Dear!
Figure VIII-1 Password stored in a plain text format... Oh Dear!


I assess myself as no security expert, but storing a plain text password in a database is surely a bad practice. If someone (probably hacker) gain access to your database, (s)he can easily read your users password. Without any hassle. In this article I will show how you can easily utilize python md5 package to convert our users password into MD5 string and making curious hacker not that easy in reading it.

NOTE : rahasia is Indonesian word for secret.


Flask Biography Tutorial Part VII : Adding Sign In Form Using Bootstrap 3 and Login Feature Using Flask-Login


Figure VII-1 Persuasive Signin Form in a Bootstrap 3 Navbar

In adding Sign In feature for our Bio Application, I have decided one important thing : the login status or form should always available and already opened in Navbar. Because Bootstrap 3 Navbar if properly setup will always available at the top of every page, this will result in a persuasive sign in form : a kind of form that engage user to directly fill its input fields and hit Submit button! Wherever (s)he is... (More)

Flask Biography Tutorial Part VI : Adding Sign Up Form using Bootstrap 3 and Flask-WTF

    Figure VI-1 A secure Sign Up form with validation and nice visual layout

Welcome to the sixth instalment of this Bio Application Development Tutorial. I constructed this tutorial, in such a way that even a newcomer in Python will be able to grasp its content and follow it easily. Thanks to Python intuitive coding environment, my job is not that hard. But it is you who really decide whether my goals are met or I still have to refine how I presented ideas, instructions and concepts.

Previously, our Bio Application having its first data access capability by using a great ORM tool, SQLAlchemy. It able to construct Users tables, populate data and query those data.  But it still lack an important feature : a visitor still unable to register him/herself into our application. In this article, we are going to show you how exactly it is done.


Flask Biography Tutorial Part V : Implementing Application Model using SQLAlchemy + PostgreSQL 9.2


Even Batman need a Biography
Even Batman needs a Biography

In this fifth article we are going to liven up our bio application with real data coming from the database. From our previous post, we already have a nice visual representation of our bio application. Now it is time to supply its content with user very own data. It will make your application feels so nice. Alive.

We are going to utilize SQLAlchemy to do :

  • Model definition : let's define a single Users class which will hold all of our registered users.
  • Data population : as we already have the place to store the data, now let's populate it with sample data.
  • Data query : if certain user page is requested, for example (I reserved this username, sorry), let's query his/her data and ...
  • Data display : .. let's display it in our bio.html template page.

A sharp eyed reader may notice, "How do you populate those data? I don't see any user signup action there!". Correct! We are going o skip those important feature for now. Here, I am going to concentrate you on the SQLAlchemy part. I think my next article will going to talk about those Signup form. 


Flask Biography Tutorial Part IV : Application Layout and Templating Using Bootstrap 3 and Jinja 2

Saviour of the CSS Soulless creature
 Bootstrap is The Saviour for the CSS soulless coder like me.
For the sake of the Lord, quick, get it here!

If you have followed this article until this point, it means that you really curious on how you can develop a working Python web application. Previously we have understand how to create a working (but dumb) Flask application. Today we are going to start by laying out our application user interface using a very cool front-end framework : Bootstrap.


Flask Biography Tutorial Part III-Addendum : Preparing Local Python Environment in Windows and Mac OS X

Python server running in Windows 7 Git Bash environment
Our Python Application Server Running in Windows 7 Git Bash environment

As I write my 4th article talking about using Bootstrap 3 and Jinja for application layout and templating, I realize that in my last post, I neglect a clear and complete instructions of preparing local Python environment both for Windows and OSX users. I only focusing on Linux users (or, Ubuntu/Debian derived distro to  be precise). As I use those three OSes in a VirtualBox environment, I feel like I had to write it. Let's begin with the most irritating development environment to work with : Windows. Laughing



Copyright(c) 2014 -
By using this website, you signify your acceptance of Terms and Conditions and Privacy Policy
All rights reserved