CDKit: App Stores Design Automation

CDKit is a DevOps framework that helps to deploy mobile apps (iOS and Android) to the app stores (iTunes and Google Play).

This tool create the App Store and Google Play screenshots with different themes and devices and it includes:

• iOS and Android screenshots
• Support for phones and tablets formats
• Support for child themes
• A HTML preview for all the screenshots generated with a magnifier!
• Easy integration on CI/CD pipelines

Quick video

Getting started

Configure your screens

1. Create a folder with your app bundle ID (ex. com.company.app):

mkdir app/com.company.app

2. Create a screens.json (see template below) and add configure each title, subtitle and source filename.

Example of a /app/{bundle ID}/screens.json

[{
    "title": "Pipelines list",
    "subtitle": "Take care of your pipelines.",
    "screenshot": "pipelineList.png"
  },
  {
    "title": "Pipeline history",
    "subtitle": "Get the history of your pipelines.",
    "screenshot": "pipelineHistoryList.png"
  },
  {
    "title": "Console",
    "subtitle": "See why your build failed.",
    "screenshot": "consoleLog.png"
  },
  {
    "title": "Agents list",
    "subtitle": "Take a look at your Go Agents.",
    "screenshot": "agentList.png"
  },
  {
    "title": "Agents details",
    "subtitle": "Go Agent details and last jobs.",
    "screenshot": "agentDetails.png"
  },
  {
    "title": "Environments",
    "subtitle": "Pipelines, agents and variables.",
    "screenshot": "environmentDetails.png"
  },
  {
    "title": "Settings",
    "subtitle": "Configure the way you use the app.",
    "screenshot": "settings.png"
  },
  {
    "title": "Login",
    "subtitle": "Login to your GO.CD server.",
    "screenshot": "login.png"
  }
]

Create a child theme

It's optional, but probably the default colors of the theme will not be the same as your design :)

You can create a child theme based on a theme to customize the colors, font and more!

See the Themes section to create your child theme.

Run the CLI

node src/cli.js --app {bundle ID} --platform {android|ios} --screenshots {path to your device screenshots}

Example:

node src/cli.js --app com.company.app --platform ios --screenshots ~/screenshots

Themes

List of themes

For this early version, there is only one theme: default.

Default

This theme allow you to customize:

• device mockup (all available)
• font file
• background color
• title color
• title font size
• subtitle color
• subtitle font size

Create a child theme for your app

You can overwrite a theme for an app by changing the default values (font name, colors, background color, etc.).

To do that, you need to look at the theme configuration (theme.json under the folder /src/layouts/themes/{theme name}/) and add the value(s) that you want to customize.

Your theme will overwrite the defaults values of the theme that your app is using.

Example of a /app/{bundle ID}/theme.json

{
  "theme": "default",
  "backgroundColor": "#86569A",
  "font": "HelveticaNeueLight.ttf",
  "title": {
    "color": "#FFFFFF"
  },
  "subtitle": {
    "color": "#C2AACC"
  }
}

Device mockups

Available

iOS

• Apple iPad Pro 12.9" (white)
• Apple iPhone 7 Plus (white)
• Apple iPhone X (black)

Android

• Google Pixel 2 (black)
• Google Nexus 9
• Google Nexus 7 2013

TODO

• Add multi-languages support
• Add more recent devices
• Create more themes
• Generate the HTML preview instead of using a static HTML file (needed for multi-languages support)
• Extend the CLI with a wizard to create a new app (bundleID, theme to use, number of screenshots, etc.)