The Ionic Jenkins Client 🎮

See it in action! -> https://youtu.be/nriUq5Sm0rE

This a very basic client, based on the Ionic Super Starter template, that demonstrates how to make use of the Jenkins REST API in an Ionic application.

Using the Jenkins REST API, you can perform most of all the different actions you can execute using the Jenkins web interface, but for simplicity, this project provides examples of the following:

• How to login after verifying the user credentials (using basic authentication)
• How to list all jobs currently created in the Jenkins server
• How to get details of a specific job (name, type, last execution time and result)
• How to create a new Job (different jobs require their specific and very long list of requirements, so only the basic job is created by providing the name and type)
• How to request a new execution of a job
• How to get information about the server, number of executors, etc
• How to log out and erase credentials
• How to handle possible errors during login or during the app operation using an HTTP interceptor

Use this template to create a larger and more complex Jenkins app written in Ionic, or if you would like to integrate some functionality in your application that require the interaction with a Jenkins server

Jenkins configuration

Since the application is running internally on a browser, you will most likely experience CORS errors when executing REST request to Jenkins. To avoid this:

• Install the plugin CORS Filter in Jenkins.
• Go to Jenkins -> Configuration, and go to the section of CORS Filter.
• In the Access-Control-Allow-Headers add the following headers: authorization, jenkins-crumb, content-type.
• In the Access-Control-Allow-Origins add the URI from where you are making the request (typically this is http://localhost:8100 when running the project in the browser, but you can add * to accept any origin)
• Go to Jenkins -> Configure Global Security and activate the CSRF Protection and Enable proxy compatibility

Getting Started

After you have all the code, to run the project in a browser:

bash $ cd jenkins-client $ npm install $ ionic serve

If you want to generate your own APK (for Android)

bash $ ionic cordova platform add android $ ionic cordova build android

API

For using the Jenkins API, a new provider was created under the src/providers/jenkins folder. There you will be able to find all the different endpoints available. Check out the already created pages for examples.

i18n

Ionic Super Starter comes with internationalization (i18n) out of the box with ngx-translate. This makes it easy to change the text used in the app by modifying only one file.

Adding Languages

To add new languages, add new files to the src/assets/i18n directory, following the pattern of LANGCODE.json where LANGCODE is the language/locale code (ex: en/gb/de/es/etc.).

Changing the Language

To change the language of the app, edit src/app/app.component.ts and modify translate.use('en') to use the LANGCODE from src/assets/i18n/