Integratie van Flask en Mollie (payment provider)

Ik doe (web) vrijwilligers werk voor Licht Voor De Wereld, een Belgische ngo die streeft om de blindheid in Afrika te verminderen. Door ondervoeding en niet genoeg vitamine zijn zeer veel mensen daar blind hoewel ze eigenlijk perfect kunnen zien na een eenvoudige operatie.

Recent hadden ze een probleem : hun donatie pagina was gemaakt en gehost door een extern bedrijf, en dat bouwde zijn website af.  Ze hadden daardoor vrij snel een nieuwe donatie pagina nodig, en omdat ze ook nog eens hun eigen website aan het bijspijkeren waren, was er een probleem van het genre kip en ei : de donatie pagina moet op de nieuwe website komen, maar de nieuwe website is nog niet af. En een extern alternatief was niet direct zo gemakkelijk te vinden.

Ondertussen heb ik een tussenoplossing op poten gezet : ik heb over de loop van een week of 2,3 in mijn vrije avonduren een (basic) online donatie site opgezet voor hen, gebruik makend van Flask en met integratie van de API van Mollie.be, hun payment provider die de eigenlijke betaling afhandelt. De design kan inderdaad beter, maar mijn focus lag vooral op het doen werken van de betalingen !

Online LFTW donatie pagina
Online donatie pagina opgezet in vrijwilligerswerk.

Ik moet zeggen dat het vrij goed meeviel om de donatie pagina op te zetten, en de mannen en vrouwen van Mollie zijn beslist bij de pinken. Ik had een paar vragen over hun webhook (=zij geven een melding aan je webserver als de betaling (niet) gebeurd is) en had direct de morgen nadien antwoord, met inbegrip van het oplossen van een stomme bug waar ik me al een paar uren op aan het blindstaren was.

Verder is hun documentatie up-to-date en kon ik hun voorbeelden bij wijze van spreken doornemen en implementeren (het had iets meer voeten in de aarde dan dat, maar goed). Ik heb zelfs een github request of twee aangemaakt voor het gebruik van een andere python library zodat ik ook op windows lokaal kon testen.

Als je denkt dat het het waard, mag je ook een donatie gaan doen (klik op de image hierboven om direct naar de site te gaan) – zo kunnen weer een paar mensen meer het licht in de ogen terugkrijgen !

Hosting Flask on Webfaction

Ik host nogal wat websites via Webfaction, die je toelaten om voor een vaste prijs per maand te kunnen experimenteren met Python, PHP, nodejs en nog andere programmeer talen.

Als je ziet wat je allemaal met je account kan (mag) doen, dan is het eigenlijk een gunstprijs.

Recent moest ik een Flask applicatie die ik geschreven had opladen. Configuratie op de server was toch nog eventjes anders dan op mijn localhost. Daar had ik alles bijeen gegooid, en gebruikte ik de ingebouwde Flask server om het snel te testen.

Maar op de server staat er een echte front-end webserver voor, Nginx of Apache, want een debug Flask server is echt voor het testen, niet voor productie omgevingen.

Die webserver heeft natuurlijk een andere configuratie, en daarom moet je eigenlijk de app die schrijft importeren vanuit index.py.

Wat links die me verder geholpen hebben :

  • Deploying A Flask App on Webfaction : vrij compleet en logisch opgezet, hoewel ik geen Virtual Environment setup gebruikte, en ook geen link naar mijn static folder moest toevoegen in de Apache config (mét werkte het gewoon niet meer). Ik had wat last met het begrijpen van de commando’s in puntje zes van zijn lijst, maar dat is omdat ik module imports niet veel gebruik, en dus ook niet helemaal onder de knie heb – nu al wat meer 🙂
  • Een oudere versie maar gelijkaardige manier van setup, meer kompleet maar minder transparant, kan je vinden op het Webfaction community forum : Installing Flask on Webfaction.

Wat ik het moeilijkste vond was de import van de app. Je importeert vanuit module x (waar x eigenlijk de folder is waarin je __init__.py staat) de app die je beschrijft in diezelfde __init__.py. Daar heb ik toch wel efkes op gevloekt tot het werkte.

Even zitten spelen met een foto van Kaai16

Wat zegt dat eigenlijk over u, als je in plaats van Watch_Dogs te gaan spelen zoals je dacht te doen, je je een uurtje of 2,3 bezig houdt met 1 foto, met nog wat vegas javascript, om opeens te beseffen dat je eigenlijk een responsive mini-website hebt gemaakt ?

Gedreven ? Zot ? Van het goede teveel ?

Ik heb er in ieder geval veel plezier aan gehad, aan dit prutsen:

test site

 

Je kan het zelf (eventjes) gaan ontdekken op http://demo.eventconnect.be

 

Nieuwe ontwikkeling gedaan : visitekaartje voor de kartonfabriek Henri Goossens

screen-capture-2-585x400

Een nieuwe website gemaakt voor de Henri Goossens kartonfabriek. Deze website dient als visitekaartje op het internet zodat klanten die hen zoeken hen sneller kunnen localiseren en contacteren.

Deze html5 site is volledig responsive, en toont zich dus ook correct in eender welke mobile browser.

In de design werd vooral gewerkt met afgeronde hoeken via CSS3 die alle huidige browsers kunnen tonen. IE7 toont deze site nog ‘hoekig’.

Klanten kunnen zowel via de email link hen contacteren (voor diegenen die een lokale email client geinstalleerd hebben) als via het contact fomulier waar ze een boodschap kunnen nalaten via een modal dialog box die te voorschijn.

Gemaakt met bootstrap, jquery, en php voor de verwerking van het contactformulier.

FR en NL pagina’s zijn voorzien.

Cartonnerie.be linkt naar dezelfde hosting account, maar geeft de franstalige content weer via htaccess rewrite rules.

Fun Project : Scholen in Vlaanderen visueel voorstellen

Ik heb 2 zonen die nog naar school gaan, dus ik ben wel geïnteresseerd in onze scholen in Vlaanderen en welke soorten scholen er zijn. Op Onderwijs Vlaanderen vond ik een adreslijst van alle basisscholen in Vlaanderen, zowel kleuterschool als lagere scholen. En ik vond het wel leuk om daar eens mee te gaan spelen en dat visueel proberen voor te stellen.

Dus heb ik alle basisscholen hun adresinformatie gedownload in een csv bestand (3595 lijnen !). Vervolgens heb ik deze via “base“, een sqlite editor voor Mac, in een sqlite database omgezet. Aan deze database heb ik vervolgens de velden latitude en longitude toegevoegd.

Met behulp van de python library geopy heb ik dan een klein geocoding python script geschreven dat via Google API de adressen omzet in “latitude” en “longitude” coordinaten en deze dan bijschrijft in de database (dat duurt wel even…). En nadien heb ik met behulp van pygmaps deze map coordinaten in een lokale googlemap html file weggeschreven.

En dat geeft dan dit resultaat :

scholen-in-vlaanderen-585x358

Je kan doorklikken op bovenstaande om naar de volledige google map (1,2 MB!) te gaan en daar kan je zoomen tot op straatniveau. Als je hovert over een schoolpunt krijg je de schoolnaam te zien. Rode punten zijn hoofdvestigingen, groene punten zijn bijvestingen van een hoofdschool.

Zo op het eerste zicht hierboven lijkt het dat ons Vlaanderen land overvol zit met scholen, maar gezien het aantal mensen dat ieder jaar toeneemt om te kamperen voor schoolpoort, kan dat niet waar zijn 🙂

Als je zoomt wordt het allemaal wat overzichtelijker.

Twitalytics Update, December 2010 (1)

First of december's overview of tweets about #LeWeb

Some more updates and changes for twitalytics :

In general:

  • I did some more styling changes in the css, hopefully you’ll find them pleasing or at least ok.

Keyword Page:

  • The “Today” button on the keyword page did not work correctly – this is now fixed.
  • Instead of the “All” button, which lost it usefullness some time ago when keywords started having more than a few hundreds of tweets, I’ve added a “Yesterday” button. This means you can go back into the database day-by-day. I’m wondering if I need to add a graph for each days activity (I think yes).
  • The layout of the tweets in the table below the graphs has been rearranged : before you could only order the tweets on language, now you can also order on authorname.
  • Behind the authorname is sometimes a (+). This means that there is information about this author in the database, and clicking on the authorname will show you a dialog box with info on the user and the keywords he is tweeting about (if more than one). There’s also a link to his twitter profile. If there is no (+) you are directly linked to this online twitter profile.
  • Tweets are by default shown chronologically – the date has been moved to the far right column, in small font so you can still verify this.
  • The tweets are now presented with a bit more whitespace around them.

Adding A New Keyword:

  • When you add a new keyword, and it doesn’t exist already, a first update is made immediately for that keyword – you no longer have to wait until the hour strikes before seeing results !
  • todo: rework the results page when searching for a keyword : it is still my very first attempt of a page, and looks hideous to me now.

My Profile :

  • this now only contains your profile information
  • to be added :  a way to update your profile information with a new email, etc. (this might take a while!)

Reports :

  • this now contains the statistics about the keyword and the users tweeting about them
  • it shows keyword + language + number of users tweeting about this keyword

In the backend I’ve also now started using the mailer python module, which is a wrapper that allows you to send mail easier – instead of trying to suss out how smtplib expects it’s parameters for each type of mail, I can just supply them to mailer, and it does the rest ! This’ll open up some new possibilities of alerting in the future.

For example, an e-mail alert when the average threshold has been reached or bypassed on a certain day would be interesting !

Twitter Status Id’s to change to string representation

I almost missed this post on the new status id generator for twitter:

Timeline
———–
by 22nd October 2010 (Friday): String versions of ID numbers will start appearing in the API responses
4th November 2010 (Thursday) : Snowflake will be turned on but at ~41bit length
26th November 2010 (Friday) : Status IDs will break 53bits in length and cease being usable as Integers in Javascript based languages

I just checked my tables – Oef ! On first look, I already store my status id’s as text… 🙂

Plus of course I’m using Python, not Javascript… but it never hurts to check.

Changing from feedparser.py to urllib & simplejson

With all the outages of Twitter recently, my back end system that retrieves the information from twitter was going haywire. Things kept going wrong, tweets were not retrieved, the works.

I initially coded this backend using feedparser, thinking that this code could be user later on to get rss feeds from other sites. It was a mistake to do so – I made that decision thinking that information via atom format or via json format would be similar, but this was not correct. I am *not* saying that feedparser is not good, it’s just not the right tool for the job it has to do !

The atom format that twitter returns (at current date of course – this might very well be fixed later on) is really a hodgepodge of information that is prodded and shaped into the atom format. Lots of info is repeated because really the atom format was made for larger articles of text that need a title intro, a body, etc.

All this means a much larger filesize return – certainly not enormous, but in the long run this adds up in data traffic.

Not all info that you get in json is correct in atom either. Iso_language_code which indicates the language the author primarily uses, was/is set to en-US all the time via atom format.

So with all those outages and checking and finding out that most json queries still returned correct results, I removed the feedparser lines and am now using urllib and simplejson to retrieve and parse the twitter data. Took me about 3 late evenings in a row to work through (I have a full time day job, so I only have time to do this on the train and in the evenings after 9 pm) but it’s running (almost) smooth now.

Still need to weed out a bug in my code, though – the last search does not seem to be processed… grrr.

Sparklines are cool !

Recently I was looking to add some graphics to my python CherryPy application, and I discovered sparklines.

Sparklines are small graphical displays of numerical data that help you to get a timeline view. Their size makes it easy to add them in phrases or to compare different graphs quickly. Below are some examples:

Examples of the sparkline graphics

This javascript jquery plugin is simplicity itself :

  1. Add the js script to your html page and add a jquery function
  2. Generate some numbers between a span tag
  3. And give that span a jquery function classname

And bob’s your uncle !

Go discover it for yourself !