User:Jeropbrenda/Sandbox/Tutorials/Holidays viewer

Overview
This 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 framework, Bootstrap 4 to style the app, and jQuery.
 * MediaWiki Action API modules:
 * API:Parse to fetch holidays.
 * API:Login to login.
 * API:Edit to add new holidays.

Setting up Python
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:. When you run it, it should display "Hello world" at http://localhost:5000/:

Step 3: Create the base layout
Each page in our app will have a bar at the top which contains a header that shows the title of the page, an add icon, a search icon and for pages other than the homepage, an arrow-back icon.

Create a file containing these elements, so that we can extend the file in other pages.

Step 4: List holidays
The home url of the app will trigger a function called. This function will list holidays for a certain date. 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.

If no date is specified, we'll list holidays for today's date. To do that, we need to create a function to get today's date:

Then call the function in :

After we have the date, we may 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:

Then call the functions in :

The html of the holidays returned contains internal links that point to those holidays on Wikipedia, e.g "/wiki/New_Years_Day". We'll need to prepend "//en.wikipedia.org" to these links using jQuery in order to make them external links, and make the links open in a new tab. To do that create a file called "update_links.js" and add the following code to it:

Step 5: Search for holidays of other dates
To get holidays of custom dates, we need to create a search route which will display a page with a form that collects the month and day to search for:

Once the search form has been submitted, we'll need to update the date whose holidays to fetch 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 has been protected so that anonymous users cannot edit it so we need to login in order to add a new holiday.

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

To log in, we need to create a login route which will display a page with a form that collects the username and password, and then send a login request with API:Login with the credentials obtained. Once the user logs in successfully,  is set to.

Step 7: Add a new holiday
To add a new holiday, we need to create an add route which checks if the user is logged in. If not, then they will be redirected to the login page. If they are logged in, the add page will contain a form that collects the date and description of the holiday to add, then 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 editing a real page.

The user will then be redirected to the "List holidays" page where the date of holidays fetched is the date they just added holidays to. The holidays added to the test page are formatted in bold to differentiate them from the real holidays.

To fetch holidays from the test page alongside those on the real page, add the following lines of code to :

We also need to update html to contain the test holidays as well so change the  to.

Until this point, your python file should look like this:

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.