Predix Seed - A picture of a black background code editor with php code

Hello good people,

Our hackathon ended with a great demo last week, where teams demonstrated the development of the last 2 weeks. Functional users were receptive and gave great feedback to make the products better for our business. The energy of being in a room full of people working to create software, meeting new developers interested in making an impact, and learning more about the people I work with was a blast!! It is always a huge help to know someone who has a Mac charger when you forget yours DOH!

With that being said, I’ve decided to begin a new series on the Predix Seed. This first post will focus on why its helpful to use and show the results of a successful set up from the GitHub repo.

This article is based on the assumption you have set up following the guide for your OS here: Development environment

Predix Seed Overview

Have you ever started a new application from scratch, only to find out later you didn’t follow the best practices or implemented functionality in an incorrect way? Well I have no shame in admitting I have. When your starting to develop with new technologies for the first time, the exploratory phase indeed leads to rework. It is part of the learning process. Finding these design flaws early (even functionality requirements that are wrong from users) helps to truly save time and money for your company.

From the post, The True Cost of a Software, the author estimates the cost of bugs in three categories:

  1. Requirements phase: $100
  2. QA Testing phase: $1,500
  3. Production phase: $10,000

Predix Seed - A picture of written text with a bug taped to it. Signifying the first computer bug recorded.

 

 

 

 

 

 

 

 

 

 

 

In other words, working with new technologies without a baseline starting point can be costly. We as Software Engineers have a responsibility to our companies to help reduce these cost by producing quality code, and iterating often with customers to find incorrect requirements ASAP. That is where the Predix Seed comes in, to help us have a baseline to start our Predix applications with help from the Predix team.

The Predix UI seed was created to accelerate app development for those developing on the Predix Platform. It is a starter kit that includes various examples for working with Predix UI components and micro-services. The code’s re-usability is where it shines, letting us create new apps following the correct guidelines at a very fast pace.

In my experience so far, creating apps starting with the starter kit has worked well. Once you understand the code base, you will be able to quickly add and remove features as needed to meet the needs of your users. I hope to help a long the way in this series.


Predix Seed Tech Stack

The seed is using the following technologies:

  • Frontend
    • Polymer – A Web Component API framework to create re-usable web components in applications. Check out Predix UI for a few examples.
      • New and existing components can be used together with the Seed to create a consistent feel and easy re-use for your team
  • Backend
    • NodeJS– Server-side framework utilizing Javascript that serves the app
    • ExpressJS – Express is one of the most common routing modules used in conjunction with Node
  • Dependencies / Tasks
    • Npm – the package manager for our NodeJS modules to manage server dependencies
    • Bower – the package manager for the frontend, each px-component is its own bower install
    • Gulp – Task automation in your development/deployment processes
If you haven't used any of the technologies above, I recommend taking the tutorials on the Polymer/Node/Express sites to learn the basics.

Predix Seed Set Up

Pictures are a bit small in the post, please click on them to see them enlarged. I felt it would be better than having them full size. 

Please let me know your feedback and I can change accordingly.

Set up for the Predix Seed can be found in the GitHub repo: https://github.com/PredixDev/predix-seed

  1. Cloning the repo
    • You should see the following folders/files in your directory

Predix Seed - The file/folder structure after cloning the repoa

  1. Assuming you have node/bower/gulp installed from the Predix Guide, let’s do the installs
    • Npm Install
      1. “node_modules” created in your root directory

Predix Seed - Blue powershell screen with white text that show node modules being installed successfully.

    • Bower Install
      1. When utilizing this command, you can use the –force tag to automatically download the latest versions of the bower packages. If you do not, then you will be picking a lot of them yourself :).
      2. “bower_components” should be created in your public directory

Predix Seed - Blue powershell screen with white text that show bower packages being installed successfully.

    • Gulp
      1. You should see the following output
        • As we are not using any Predix Services, the empty objects are normal. The Seed is using mock data for now. I will go into details on integrating services in a later post.

Predix Seed - Blue powershell screen with white text that show gulp running successfully.

  1. Check out the UI
    • Navigate to your browser: localhost:5000

Predix Seed - Dashboard of mock data from the Predix Seed in the web browser.

Predix Seed - Data tableof mock data from the Predix Seed in the web browser.

 

Congrats you have successfully set up and ran the Predix Seed locally!!


Concluding Comments

Thank you for taking the time to read part 1 of the Predix Seed series. The seed can look complex when you first open up its repo in your code editor. Next post, I’ll be diving into the UI philosophy and start deciphering the code that is making it work! I hope this helps to reduce the complexity for you.

If you are having any trouble with the set up, please leave a comment or post on the Predix Community Forums!

Have a great week!

Kaleb McKelvey

Resources:

  1. First computer bug
Share: