How we developed Spetskor - a super-custom mobile application for citizen reporters

We are pleased to introduce the special correspondent mobile application for citizen journalists to the habrasociety, with which you can shoot photo and video reports and promote them under the auspices of Komsomolskaya Pravda. The main creator is Komsomolskaya Pravda Publishing House, IT minions and developers are we, EastBanc Technologies. The project was announced by Komsomolskaya Pravda at the end of April 2014, at the same time the first contests were launched. For our part, we decided to share the technical details of the implementation of the application. In our opinion, this will be interesting for readers, because rarely in one project there are so many non-trivial technological and business tasks at the same time.

"Special correspondent" refers to multi-platform client-server applications with an administrative interface. The client part is implemented on the mobile platforms iOS and Android and contains the following functionality:

• creation of photo and video reports;
• participation in assignments;
• viewing the general reporting feed;
• receiving push notifications, setting the types of received notifications;
• the ability to share content in your accounts on social networks.

The server part consists of the following parts:

• administrative interface;
• API for mobile applications;
• service for processing media content and publishing content on social networks;
• service for sending push notifications.

The business goal of the project is the creation of a managed network of citizen reporters using an application that will allow journalists and the editorial office of Komsomolka to interact effectively. To achieve this goal, it was necessary to give the opportunity to target and segment information by category and topic, and users by region of Russia.

Initially, the following server requirements were formulated:

• scalability;
• user geolocation definition;
• processing of photo and video content;
• integration with popular social networks.

Additional technical requirements:

• Mongodb
• Openshift private cloud
• Python and TurboGears 2 to implement server-side functionality
• Twitter Bootstrap for admin interface.

How the application works

Sections of the administrative interface:

• list of social networks, adding and blocking social networks;
• list of cities, adding a city, viewing city information;
• list of fonts; add and remove fonts. It is possible to add custom font in TTF format;
• list of skins (themes for reporting), adding and editing a skin;
• rubric list, adding rubric. A heading is a set of skins with additional properties containing the name of the heading;
• a list of related hashtags for publishing on social networks;
• list of tasks, adding tasks. The task is similar to a rubric, but can be assigned to certain dates, cities, and even to individual users; push notifications are sent for tasks;
• news list, adding news. News contains textual and graphic information and can be tied to cities and users;
• reporting feed - a tool for moderation and award awards to users. It can also be used to delete reports. For each report, links to publications on social networks are displayed;
• user list - all application users are displayed here. From the user’s page, you can go to the feed of his reports, assign a reward. You can assign a news or task to the user, and a push notification will be sent to him. If the user has already published content on social networks, then links to his profiles on these networks will be shown. Also, the user can be blocked;
• list of managers, adding a manager. Creation of accounts for Komsomolka employees who are responsible for content and work with users in a certain region. Rights are assigned to managers in such a way that they can create tasks and news only for a given set of cities. Managers are also responsible for the moderation of the content.

The process from the point of view of "Komsomolskaya Pravda"

KP employees who are responsible for the work of the Special Corps application are called managers. Each manager is responsible for a specific geographic region.

The main responsibilities of Komsomolskaya’s managers are creating content for a mobile application. Through the administrative panel, managers add tasks and categories, fill them with skins. To customize skins, they can add various fonts.
When there is at least one skin in the section or task, it becomes available in the mobile application, and users create their reports using existing skins.
The reports are sent to the server, processed and get into the tape available to the manager. Depending on the assignment or heading, which can be tied to a specific region, as well as on the geographical coordinates of the report for headings that do not have geographical restrictions, the report will be checked by the manager who is responsible for the corresponding region.

The manager acts as a moderator of reporting, publishing the best in a general feed and assigning awards. Reports that have been published become available in the feed in the mobile application.

Information about the award comes to the author of the report in the form of news, as well as in the form of a push notification if the corresponding type of notification is included in the settings of the mobile application.

In addition to skins and headings, managers can create news to talk about important events and the results of contests. In addition, news is automatically generated to award and award reporters.

One of the interesting tasks in creating the administrative interface for Komsomolskaya’s managers was to implement the ability to create and edit a skin. For this, our colleagues have developed a fully functional WYSIWYG editor: all changes in properties are immediately displayed on the editing page as a preview of the skin. Using Javascript and CSS, the skin is displayed exactly as it will look on mobile devices.

The process from the point of view of users of Spetskor

The user takes a photo or video, selects the category in which he wants to publish the report, selects the desired skin in the section, fills out the report fields (title, subtitle, city, comment) and presses the “Publish” button. Before publishing, the user can select a list of social networks to which he wants to additionally publish his report.

The user does not need to register in the application, and if he does not want to share the report in his accounts on social networks, then he does not need to log in even to them. In the “Special correspondent” application, the user can upload videos and photos absolutely anonymously. If the user has logged into some social network, information about his account will appear on the server, and the name and avatar will be displayed in the general feed of published reports from this author.

To make a report for a task, the user must first open the task and click the "Participate" button in it, then only the skins from the selected task will be shown in the list of available skins when creating a report. Of course, the user can refuse to complete the task at any time.

Example

The administrator in charge of the Siberian Federal District creates one task for Novosibirsk, Krasnoyarsk, Omsk and Tomsk. For example, to shoot a video about how the Olympic flame is being carried through these cities. For each city, the time interval is indicated when this task will be relevant.



Users who are within a radius of 50 km from the scene during the mission will receive a push notification about the mission. A wave of tasks will travel through all the programmed cities in accordance with the time zone and time when the torch will be carried in the city.

Next, the user goes to the scene and removes the report (more on this later), selects and applies the skin, optionally publishes it in his personal accounts on social networks. The report is sent to the server, where it is waiting for processing and moderation.

After processing, the report is displayed in the “My stream” reports, if the report is moderated and approved, it becomes available in the general stream.

This is what the processes that flow "behind the scenes" look approximately. Turn to the implementation details.

Backend architecture

How is information storage organized?

All information from mobile devices is stored in the MongoDB database. The main tasks for which the choice of a DBMS was critical in our project is:

• user selection by region;
• selection of reports by region;
• selection of tasks / headings by region;
• storage of a large amount of binary data;
• scaling
• speed.

MongoDB implements work with geo-indexes, and this greatly simplified the implementation of work with geodata in our application.

One of the options for implementing a MongoDB cluster configuration is replication. This allows you to distribute the load between multiple copies of the database (meeting the scalability requirement).

To work with binary data, we used a part of MongoDB called GridFS, which allows you to store binary data inside the database. To increase the speed of working with binary data, we store them in different collections.

How to load clustered

One of the requirements of the customer was that the back-end for simplicity, support and expansion should be deployed in the OpenShift platform, which allows you to automatically scale resources depending on the load. If the server is heavily loaded, then OpenShift itself can raise another instance of this server.

In our case, one server consists of the following parts:

• administrative interface;
• API for mobile applications;
• service for processing media content and publishing content on social networks;
• service for sending push notifications.

Services for processing media content and sending push notifications are processes that find and execute data in the database for processing. When OpenShift raises additional server instances when the load increases, the number of services increases, and they may try to process the same information. Using the atomic operation in MongoDB, the findAndModify process sets a special status for the content being processed, thereby prohibiting its use by other processes.

Installing the application in OpenShift is done by push command to the remote Git repository where the application was created. OpenShift supports hooks, for example, there is a hook called when installing the application. We use this hook so that the database does not go through the initial initialization every time the application is updated.

API and geolocation

Since tasks and categories in the application can often be limited to geographic regions, it is important to understand the user's location to determine his access rights, as well as to send notifications. To determine the coordinates of the user, the application requests the rights to access geolocation data and, in the case of obtaining permission from the user, receives the coordinates and sends them to the server. If the user forbade the application to receive geolocation information from the smartphone’s operating system, and the application cannot send data to the server, the coordinates are determined by using geoip services. At the request of the application, the approximate position of the user at the place of registration of his provider is determined.

To determine the location of the user who prohibited geolocation in the settings, we used 2 services:

• MaxMind Geolite - a local database of IP addresses and their geographical location (there are problems with accuracy in the Russian Federation and the CIS):
• ip-api.com is an online service that locates with higher accuracy. There is a serious limitation on the number of requests, therefore, information caching is used.

Media Processing Service

A media content processing service is a process that is executed independently of other parts. The main tasks of this process are the selection of content with a certain status from the database, processing and saving the processed data back to the database. Processing of media content consists of two parts: video processing and photo processing.

How video processing is implemented

Video processing is carried out using the third-party avconv program (further development of the ffmpeg application).

A story video can consist of several pieces. It is filmed according to the Vine / Instagram principle: while you hold your finger on the screen, shooting goes as soon as you release it - it is interrupted. Mounting pieces directly on the device is a very resource-intensive process, so the final installation with us takes place on the server.







Video can be shot from two cameras - front and rear, you can switch between them during the shooting. The resolution of the video shot on various smartphones is different. However, when publishing, we create videos 640 * 640. The overall video processing process includes the following steps:

1. We determine the angle of rotation of the video (information is taken from the metadata of the video file).
2. Turn over to the desired orientation.
3. Apply crop (crop).
4. Perform scaling.
5. Apply a skin.
6. After processing all the pieces, we glue it in one clip - all this is done on the server, without "manual" work and human participation.

All publish.

How image processing is implemented

Photo processing is simpler: images are processed using the Pillow library.
The mobile application sends to the server the original photo, as well as information about the report. In general, the steps for processing a photo report are similar to video processing.

How is loading in social networks implemented?

The application supports reporting uploads to major social networks: VKontakte, Odnoklassniki, Twitter, Facebook, Instagram, YouTube.

Uploading reports to the user's social networks

If the user decides to share his report on social networks, he needs to choose in the application in which network he wants to share the report. Further, the process will be as follows:

1. The user logs in to the selected social network.
2. The user is requested permission to access the profile and publish to his feed on behalf of the Special Corps application.
3. If the user allows, the mobile application receives the Access Token and sends it to the server
4. The server requests a token user profile and stores some user information in the database: name, surname and link to the avatar.

After the user uploaded his report to the server and the media content of the report was processed, the process of downloading the report to social networks starts directly. If this is a video report, then it can be uploaded to Vkontakte, Facebook, YouTube. If a user selects one of these social networks and also selects Twitter or Odnoklassniki, the video will be uploaded to the video hosting social networks and the link to the video will be uploaded to Twitter / Odnoklassniki. All networks except YouTube are available for photo reporting.

Uploading reports to customer’s social networks

In addition to publishing the report in user accounts of social networks, the report will be uploaded to the customer’s private Twitter and YouTube accounts. For this, separate applications on social networks were created. User authorization is not needed for uploading to Twitter (tokens used to publish publications do not have a statute of limitations). And to upload to YouTube, you need primary user authorization (we did it in the application admin panel), during which the server receives 2 keys from YouTube: access_token and refresh_token. Access Token - a key that is used to upload videos to YouTube and is valid for a certain period of time. Refresh Token is needed to generate a new Access Token when needed.

Refresh Token has no statute of limitations and can become outdated only when the user takes away the rights to publish from this application. Another nuance related to YouTube: the number of videos uploaded via the API is limited, only 2000 videos. Therefore, the publication counter is maintained on the server and the ability to add multiple YouTube accounts is organized. To publish the video, the server will select the account in which the least number of videos are published.

In addition to private accounts, there is the same pair of public accounts. There, reports are published only after moderation.

You can use hashtags in the report. Some social networks when publishing content allow you to specify them separately. The user can specify hashtags in the commentary to the report, and the customer manager, in addition, can tag the task or the heading.

Service for sending push notifications

Since our application is released on iOS and Android, we support both Apple Push Notification Service and Google Cloud Messaging.

The standard practice is this: first, the application asks the identifier of the ability to show push notifications from the mobile device. At this time, the operating system itself asks the user if he wants to accept them.



We did not agree to only “off” or “on” for all application notifications. It was necessary to customize the process, because some of the users want to learn about new assignments, some about new reports, some want to get a notification that their report has been published, but others don’t need it.

They decided to work with the task using the server settings and configuration. If the user agreed to accept push notifications, then he has the opportunity to configure what types of notifications he wants to receive:

• about new reports in the general stream,
• about news and missions,
• about rewards assigned to the user.

Total

To be honest: it was an exciting experience in developing a product that was grandiose not only from a technical point of view, but based on the global idea of ​​creating a huge network of citizen journalists throughout the country, bringing citizen journalism to a professional level, providing them with resources to promote using the most popular Russian publication .

The application is launched. For example, civilian reporters have already received royalties for Night at the Museum . If you live in the capital, then right now you can fight for fame and money by creating interesting reports on the topic “Heat in Moscow” , and “Komsomolka” gives Novosibirsk citizens the chance to become rich and famous by going to the city zoo for a photo shoot(fellow countrymen, hurry, pictures of the white bear Shilka are a win-win option!).

Download "Special correspondent" in Google Play and AppStore .