Technology Radar

Technology Radar is a tool that helps organizations to monitor their own discoveries. Keep track of your technologies according to your previous successes and failures.

This project is freely based on technology-radar by ThoughtWorks.

In short

• ES6 and React
• Hosted publicly by GitHub Pages
• Hosted privately by Heroku
• Automatic deploy with git push origin production
• Google Spreadsheets as database
• Cloud version - no setup required

Live demo

Here you can find our live demo so you can explore all features.

https://kata-team.github.io/technology-radar

To-Do List

• Responsive Web Design
• Search items
  • search by title, description and comments
  • filter by category
  • filter by status
  • filter by tags
• Google Spreadsheets integration
• Live demo with GitHub Pages
• Continuous Delivery with Travis CI
• Deploy your private site with Heroku

Play locally

To get started, clone the repository.

cd technology-radar/

cp .env.example .env

npm install
npm start

# http://localhost:3000/

Available tasks

• npm test A linter tool for identifying and reporting on patterns in JavaScript.
• npm start Run HTTP Server on http://localhost:3000/ and watch for changes.
• npm run build Compile "javascripts" and "stylesheets".
• npm run deploy Alias for "build". After that, will push changes of the build folder to master branch.

Google Spreadsheets integration

Technology Radar provides a Google Spreadsheets integration, so you can use spreadsheets as database to storage your data.

Here you can find the example used for our live demo. Feel free to duplicate the document and make your own.

https://docs.google.com/spreadsheets/d/112MlfyXSlIQ8nae85Te_xWDBP136GRaYeHlDdKgYyPo

Create your own

1. Open the document using the provided link.
2. Click on File → Make a copy... and choose a filename.
3. Modify the document adding or removing items.
4. Select File → Publish to the web... and click on Publish.
5. Now you just need to copy the worksheetId from the url (e.g. 112MlfyXSlIQ8nae85Te_xWDBP136GRaYeHlDdKgYyPo)
6. Open the file .env and paste to REACT_APP_SPREADSHEET_ID.
7. Save the file e compile the project with npm run build.

Cloud

Now that you have a "database", the easiest and fastest way to create your own Technology Radar is to use the cloud based version.

https://kata-team.github.io/technology-radar/?id=SPREADSHEET_ID

https://kata-team.github.io/technology-radar/?id=112MlfyXSlIQ8nae85Te_xWDBP136GRaYeHlDdKgYyPo

GitHub Pages

The project is a set of html, css and javascript so it can be executed using GitHub Pages.

We use GitHub Pages to provide you our live demo.

You can configure GitHub Pages to publish your site's source files from master, gh-pages, or a /docs folder on your master branch for Project Pages and other Pages sites that meet certain criteria.

If your site is a User or Organization Page that has a repository named <username>.github.io or <orgname>.github.io , you cannot publish your site's source files from different locations. User and Organization Pages that have this type of repository name are only published from the master branch.

https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/

For this project we preferred to use master branch to publish our site instead of gh-pages branch:

1. As written in GitHub documentation, if you use <username>.github.io or <orgname>.github.io, the site is only published from the master branch.

2. If you have a gh-pages branch inside your repository, you cannot switch off the GitHub Pages functionality.

   

3. If you have a private repository and want to publish a private site, you cannot use gh-pages branch (read point before).

Setup GitHub Pages

on Code

1. Open the configuration file at package.json.
2. Change repository.url link with your repository link.
3. After that you can deploy to master with npm run deploy.
4. You can also deploy to master using TravisCI.

on GitHub

1. Go to your repository page and click on settings.
2. Scroll down to the GitHub Pages section.
3. Set the source to master branch and click on Save.
4. That's it! Now your site is published.

Travis CI

We use Travis CI for Continuous Delivery.

• When you push your code to remote, Travis will automatically test you code and warn you if something goes wrong.
• If you push to production branch, Travis will test, build and push your code to master branch (using the deploy script).

Setup Travis CI

Obtaining a Github token

1. Log into Github and go to user Settings page.
2. Click on Personal access tokens.
3. Click on Generate new token.
4. Add a Token description (e.g. TravisCI).
5. Select public_repo under scope section.
6. Click on Generate token button.
7. Copy the provided token (after a page refresh you will never be able to get that token again)

Add token and worksheetId to TravisCI

1. Log into TravisCI and go to repository Settings page.
2. Add new Environment Variables.
   • Name: GH_TOKEN
   • Value: paste here the token value
3. Click on Add button.
4. Add new Environment Variables.
   • Name: REACT_APP_SPREADSHEET_ID
   • Value: paste here the worksheetId value
5. Click on Add button.

Heroku

Even if the repository is private, the published site with GitHub Pages is always public.

If you want a protected Technology Radar, you can use Heroku. In this way you can restrict the access to your GitHub organization.

Step 0 - Add Jekyll Auth to your site

this caption is just a memo; we did this already for this project.

Jekyll Auth is a simple way to use GitHub OAuth to serve a protected Jekyll site to your GitHub organization.

1. Create a file called Gemfile inside the public folder with the following content:

   source "https://rubygems.org"
   
   gem 'jekyll-auth'

2. cd into your public directory and run bundle install.

3. Run bundle exec jekyll-auth new which will copy the necessary files to set up the server.

Step 1 - Prerequisites

• Choose a name for you application.
• This name should only contain lowercase letters, numbers, and dashes.
• This name will be used for the Heroku App name field and will determine the application url.
• The App name is unique on Heroku, so you cannot use an already taken name.
• In our example we use technology-radar (that is now an already taken name 😆)

Step 2 - Create a GitHub Application

1. Navigate to the GitHub app registration page.
2. Give your app a name, a description and a logo.
3. Tell GitHub the URL you want the app to eventually live at. Use the name you decided previously. If using a free Heroku account, this will be something like: https://technology-radar.herokuapp.com
4. Specify the callback URL; should be like this: https://technology-radar.herokuapp.com/auth/github/callback note that this is https, not http.

Step 3 - Setting up hosting with Heroku

Step 4 - Upgrading

If you want to upgrade your Heroku hosted application you have to fork our repository.

Now you can open you application on Heroku and configure the Deploy.

1. Click on Deploy tab and configure Heroku with your GitHub repository. Choose your user/organization, select the repository and click on Connect.

   

2. If you want, you can also enable automatic deploys from GitHub.

   

3. or just run the deploy 😄

   

4. You can watch our repository for changes. When we push a new version on production, you can sync your fork manually or use external tools.