User:Jeropbrenda/Sandbox/Tutorials/Holidays viewer

Overview
This tutorial covers how to create a demo app that fetches the day's holidays and observances from Wikipedia, allows searching for holidays of other dates and logging to add new holidays.

Download the code from Github

The tools and technologies used to create the demo app are:
 * Python 3 and Flask, a Python framework.
 * JQuery and Bootstrap.
 * MediaWiki Action API modules: API:Parse, API:Login and API:Edit.

Step 1: Set up Python and Flask development environment
Python comes pre-installed on most Linux distributions. For other operating systems, see the Python beginner's guide for installation instructions.

Install Flask by running. If you don't have pip, get it from the official Pip website.

Step 2: Create a simple Flask application
Create a folder named  which will contain all the app's files. Inside the folder, create a file named  and place the following code in it.

Run the app using the command  and open http://127.0.0.1:5000/ on your browser. You should see "Holidays and observances" displayed.

Step 3: Create the base layout
The app will have four pages: the homepage which lists holidays for a certain date, a search page to search for holidays of other dates, a login page to enter login credentials, and an add page to add new holidays.

Each page will have some common elements:
 * A bar at the top which contains a header that shows the title of the page.
 * An add icon which links to the add page.
 * A search icon which links to the search page.
 * For pages other than the homepage, an arrow-back icon which links to the homepage.
 * Ocassionally, there will be an alert bar to provide information or warnings.

Create a base layout file called  to contain these elements. Note that we are using Bootstrap classes to apply a specific CSS style to an element, Materialize icons for the add, search and arrow-back icons, and Jinja to extend the base layout to other pages and to pass variables from Python to HTML.

Other pages will extend  using the code below:

Step 4: List holidays
The root url of the app will trigger the  function, which lists holidays for a certain date.

In the function and throughout the app,  refers to the date of the holidays to be listed,   refers to the title of the page, and   refers to the html which contains the holidays to be listed. We'll also be using the  function which renders a specific html file from the templates directory. Other arguments added to the function are variables which are being passed to the html file.

In app.py, update  with the code below:

Get today's date
If no date is specified, we'll list holidays for today's date. To use Python's datetime module to get today's date, import the module with  then create the following function:

Call the function in :

Get the holidays to be listed
Once we have the date, we get the holidays for that date. Wikipedia has a page for each date and the holidays are under a section titled "Holidays and observances". To get the holidays, we need to get it's section number and the content in that section number.

Create a function to get the section number using API:Parse:

Create a function to get the content of the holidays in that section using API:Parse as well:

Call the functions in :

Update holiday links
The html of the holidays returned contains Help:Links that point to those holidays, e.g "/wiki/New_Years_Day". We need to prepend "//en.wikipedia.org" to these links using jQuery in order to make them external links in our app, and make them open in a new tab. To do that, create a file called  and add the following code to it:

Then add jQuery to  using:

Step 5: Search for holidays of other dates
To get holidays of other dates, create a search route to display a form that collects the month and day to search for:

Once the search form has been submitted, update  to be the date that has been entered. To do that, add the following code to :

Step 6: Log in
The page to which we'll be adding a new holiday is protected from edits by anonymous users, so we need to login in order to add a new holiday.

Create a global boolean variable to track the login state of the user:.

To log in, create a login route to display a form that collects the username and password, then send a login request to API:Login with the credentials obtained. Once the log-in is successfull, set  to.

Step 7: Add a new holiday
To add a new holiday, create an add route to display a form that collects the date and description of the holiday. Before displaying the add form, check if the user is logged in. If not, redirect them to the login page. Once the add form is submitted, send an edit request with API:Edit.

The edit adds new holidays to this page on Test Wikipedia: Sandbox/Holidays_and_observances. This is to prevent adding test holidays to English Wikipedia.

After the holiday is successfully added, redirect to the homepage where the holidays listed are for the date which holidays were just added to. The holidays added to the test page are formatted in bold to differentiate them from the real holidays.

Update list_holidays(...) to fetch the test holidays alongside the real holidays:

Step 8: Styling the app
To add more style to our app, create a stylesheet named  and link to it from   by adding.

Application layout


At this point, the structure of your app should be: $HOME/holidays-viewer ├── templates/ │  └── add.html └── index.html └── layout.html └── login.html └── search.html ├── static/ │  └── style.css └── update-links.js ├── app.py

With  and   being:

Next steps

 * Got questions about this tutorial? Ask here on Discourse or on this tutorials discussion page.
 * Contribute a demo app that you have developed using the MediaWiki API to this code samples repository.