GSoC'18 Project Proposal: Automating ownCloud's Screenshots with Puppeteer

Welcome, GSoC'18 students!

This project idea aims to solve a couple of recurring problems on many OSS projects when it comes to promote and document your app by capturing screenshots:

Keeping the screenshots up-to-date

As for today, ownCloud has a central repository holding the "authoritative" screenshots source used in our documentation and referenced everywhere on the platform repositories:

Creating those has always been a manual process: capturing new and replacing old screenshots upon releases. More than often resulting in outdated contents referenced here and there. That's both some bad onboarding experience for those not familiar with the project and don't do justice to newer and better versions of the app.

Auto-generate visual context information on PRs

They say one image is worth a thousand words, right? When implementing new features, it's important to get everyone on board and show them what does your PR actually do.

It's fair to provide context for non-technical audiences or just a TL;DR to complement, explain and sell your changes to the broader public. Screenshots and gifs are a great way to do so. However, creating them manually can become a rather dull task everyone will stop doing once they get a chance.

Here's where automation comes in very handy; we can reuse the same logic to solve the previous problem and integrate with GitHub's App APIs and generate visual comments on those pull requests that either include new features or modify existing ones.

Summer project description

We'll use our official Docker images together with Google Chrome's Puppeteer tool to explore its automation possibilities and the value it can bring to an OSS project like ownCloud.

Some of the tasks that you might face as part of this project are:

  1. Define set of interesting feature files to generate screenshots for different scenarios.
  2. Provide a framework/simple way to describe these scenarios that allow developers to extend and implement their own (e.g. Gherkin). In https://github.com/owncloud/core/tree/master/tests/ui/features you can find how some of these features are already implemented.
  3. Integrate with the project's existing CI pipeline as an additional release step.
  4. Both automate and version the replacement in the docs (e.g. the docs for 9.1.6 should not contain screenshots from 10.0 and vice-versa).
  5. Integrate with GitHub's App & Bot APIs to reuse this logic on those PRs that contain changes to the feature definitions or fixes on the user interface.

If there's enough time, we can also study different ways to uncouple and inject state to ownCloud's web frontend in order to rather mock the real contents of the server; keeping an isolated layer for the individual UI components.

You can get a taste on how Puppeteer works in https://try-puppeteer.appspot.com:

If you happen to be interested in participating in this (I'm offering as mentor) or any of the other ownCloud GSoC projects don't hesitate to contact us here in central or #owncloud and #owncloud-dev on Freenode-IRC.

Happy coding!

Hi @alfageme, I would like to work on this project. Please provide any information that should help me get started.

1 Like

Hey @alkesh47 that's great to hear, thanks for your interest in the project! :blush:

We've created #owncloud-gsoc on freenode-IRC for you guys interested in applying to any of our projects. You can find us hanging out there and ask you for questions

There's still some time before Google will publish participant organizations (you can see the timeline in https://summerofcode.withgoogle.com/how-it-works/#timeline) - on Feb. 12 we'll know for sure if we got accepted. Formal student applications will start one month later. In the meantime, I can point you to some beginner issues to to get you familiar with the project and our codebase:

What is your programming experience if I might ask? A short introduction with some background info about yourself can be useful to get to know you.

@alfageme Thanks for the info. I am comfortable with the front end tools such as HTML/CSS and JS. I have used Docker in some of my projects and am familiar with the shell scripting and serverless computing.
Thanks for pointing to the issues, I shall begin work on them promptly. The ones labelled junior jobs would be a great place to start I guess?

Yup, the linked list contains all the issues tagged "junior job" in the core repo. Ping me on GitHub (I'm @SamuAlfageme there) if you start working on any of them. Best!

@alfageme I would like to work on this project. Can you help me to get started with this?

Hey @kartik-25! Thanks for your interest in the project!

You can find advice on how to get started with ownCloud and some context on my previous comment: https://central.owncloud.org/t/gsoc18-project-proposal-automating-ownclouds-screenshots-with-puppeteer/11443/3

Don't forget to join #owncloud-gsoc on freenode-IRC Cheers!