User:Martyav/Apps/Tutorial

Overview
In this tutorial, you will learn how to build a Wikipedia:Picture of the day viewer using the MediaWiki Action API. Download the code from Github

This tutorial will teach you how to do this using:


 * Python 3 and Flask framework
 * MediaWiki Action API’s Images and Imageinfo modules

A step-by-step process to building the app:

Setting up Python
This tutorial uses Python 3. You can download the latest Python version from here:


 * Python for Windows 7, 8, and 10
 * Python for Mac OS X

See the Python beginner's guide for further instructions on installing Python on different operating systems.

Setting up Flask
Pip is a package manager that you can use to install Flask:. If you don't have pip already, install it from the official Pip website.

Step 2: Create a simple Flask application
If you have everything successfully installed, place the following script in  inside your project folder:   and it should display "Hello world" inside your web browser, at http://localhost:5000/:

Step 3: Picture of the day viewer
Now that you have everything set up, you can start writing code for the Picture of the Day viewer. Picture of the day, or POTD, is a featured image displayed daily on the home page of Wikipedia. You'll be getting the picture from a wiki template that changes every day.

Getting today's date
The first order of business is simply knowing what day it is. Because POTD updates daily, you need today's date to access the archives and get at a stable version of the correct picture. To do this, import Python's class.

Next, define a function  that will use the   method to render the template named   from the   directory:. Add in it a variable containing the current date.

Calling the Action API
In a new function,  call API:Images to request the picture embedded within a protected Picture of the Day page (see example), for any given day. Use the filename returned in a call to the API:Imageinfo to retrieve the image's source url. In this example, second API call is handled in the helper function,.

The Action API works by sending back data in response to HTTP requests. To do so, you will import the Python Requests library. To allow  to communicate back and forth with the web page it is serving, use Flask's   class.

Next add two new variables:  and. You will use  object to make requests to the ENDPOINT url.

Wikipedia's archives lists dates by [w:ISO_8601|ISO standard] format -- for instance, 2019-01-31, for 31 January, 2019. You can get the correct format by using the date method,. Finally, alter  to call. Make  return.

Displaying the page
Flask templates mostly contain HTML markup, but they also use Jinja to render dynamic content. Jinja markup looks like this --  -- and is used to inject Python variables or expressions into our basic page structure. Add some basic HTML 5 boilerplate and a few elements to.

Making it interactive
Add a  element to   and add it in submit button inputs: Back and Next. When either button is selected, the form will submit a POST request, and the selected value will be passed back to. This will allow users to browse through the Picture of the Day archives.

Next update  with   function for setting the date presented to the user. Also extend the  route to handle POST requests from the form.

View complete Python and HTML code:

Styling your app
Flask uses a directory, named static, to contain any helper files that stay the same throughout the lifecycle of the app. This is a useful place to put any stylesheets or additional scripts. Our stylesheet will be using some colors and visual motifs based on the Wikimedia Style Guide. Place a CSS file in.

Additional notes
There are several ways to add descriptive text from the POTD page:


 * API:Search provides  which can be used as a link preview
 * can be used to obtain the whole parsed text from articles on Wikis that have the Cirrussearch extension installed (see example).