{"id":25269915,"url":"https://github.com/javascript-pro/kochart","last_synced_at":"2025-04-06T06:15:14.598Z","repository":{"id":89534166,"uuid":"72962748","full_name":"javascript-pro/kochart","owner":"javascript-pro","description":"Symfony with Knockout/Chart Example","archived":false,"fork":false,"pushed_at":"2016-11-07T10:07:46.000Z","size":992,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-12T11:37:30.045Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://kochart-listingslab.rhcloud.com","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/javascript-pro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-06T01:08:24.000Z","updated_at":"2019-09-26T23:07:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"fb258028-9915-4cc5-9c34-407baed5672b","html_url":"https://github.com/javascript-pro/kochart","commit_stats":null,"previous_names":["javascript-pro/kochart"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javascript-pro%2Fkochart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javascript-pro%2Fkochart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javascript-pro%2Fkochart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javascript-pro%2Fkochart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javascript-pro","download_url":"https://codeload.github.com/javascript-pro/kochart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247441060,"owners_count":20939239,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-12T11:28:00.175Z","updated_at":"2025-04-06T06:15:14.577Z","avatar_url":"https://github.com/javascript-pro.png","language":"PHP","readme":"\u003ch3\u003e\u003ca href=\"https://github.com/listingslab/kochart\" target=\"_blank\"\u003e\u003cimg src=\"http://kochart-listingslab.rhcloud.com/img/github.png\" align=\"right\" /\u003e\u003c/a\u003eThe Github repository for this application is publically available here: \u003ca href=\"https://github.com/listingslab/kochart\" target=\"_blank\"\u003ehttps://github.com/listingslab/knockout\u003c/a\u003e\u003c/h3\u003e\n\n\u003ch3\u003eCloud Server\u003c/h3\u003e\n\u003cp\u003eFirst we used Red Hat's excellent and free \u003ca href=\"https://www.openshift.com\" target=\"_blank\"\u003eOpenShift\u003c/a\u003e PaaS to spin up a publically accessible, working Symfony App in a couple of minutes. OpenShift applications are automatically created as Git repos, meaning we simply clone the repo locally, develop it and then push the master branch to the repo's origin on OpenShift to deploy the live application.\n\n\u003ch3\u003eDevelopment Environment\u003c/h3\u003e\n\u003cp\u003eAfter cloning the repo, we needed to install the Symfony dependencies to get the App running locally. See this link for info on how to use \u003ca href=\"https://getcomposer.org/download/\" target=\"_blank\"\u003ecomposer\u003c/a\u003e. Once we had installed our dependencies, we pointed the root directory of our Apache webserver running PHP 5.6.2 to php/web to complete the setup of our Symfony development environment.\u003c/p\u003e\n\n\u003ch3\u003eSymfony\u003c/h3\u003e\n\u003cp\u003eWe wanted Symfony to do 2 things.\u003c/p\u003e \n\u003col\u003e\n    \u003cli\u003eTo provide a basic API-like data source for our application on the url \u003ca href=\"http://kochart-listingslab.rhcloud.com/api\" target=\"blank\"\u003e/api/\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003eTo render our front end Single Page App on the root URL\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eTo this end, we created a new Bundle to handle it; \u003ca href=\"https://github.com/listingslab/kochart/tree/master/php/src/Listingslab/Bundle\" target=\"_blank\"\u003eListingslab/Bundle\u003c/a\u003e using the Symfony2 bundle generator (php app/console generate:bundle)\nThere are 3 files to look at.\u003c/p\u003e \n\n\u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://github.com/listingslab/kochart/blob/master/php/src/Listingslab/Bundle/Resources/config/routing.yml\" target=\"blank\"\u003erouting.yml\u003c/a\u003e\u003cbr/\u003eHandles routing to give us an API endpoint and a SPA on the root URL\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://github.com/listingslab/kochart/blob/master/php/src/Listingslab/Bundle/Resources/views/Default/index.html.twig\" target=\"_blank\"\u003eindex.html.twig\u003c/a\u003e\u003cbr /\u003eThe template for the Single Page App served from the root URl.\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://github.com/listingslab/kochart/blob/master/php/src/Listingslab/Bundle/Controller/DefaultController.php\" target=\"_blank\"\u003eDefaultController.php\u003c/a\u003e\u003cbr /\u003ePHP code to create a fake API response.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch3\u003eThe Frontend Plan\u003c/h3\u003e\n\u003cp\u003eThe front end is a combination of third party JavaScript libraries (Knockout, Chart.js, jQuery) and Twitter's Boostrap to provide a simple, quick but responsive \u0026 moderen layout. The intention was to create a chart of the data from the API and then update the data with new values every few seconds. Making the chart data Observable Arrays allows knockout to handle the UI update and we decided to extend that to create a table of constantly updating values and averages for the changing data. The resulting app is a very rough working prototype for a real time sensor monitoring frontend.\u003c/p\u003e\n\n\u003ch3\u003eFrontend Development with Gulp \u0026 Bower\u003c/h3\u003e\n\u003cp\u003eTo facilitate the development of the frontend, we kept all development assets in a folder called 'frontend' and use \u003ca href=\"https://github.com/listingslab/kochart/blob/master/gulpfile.js\" target=\"_blank\"\u003eGulp\u003c/a\u003e to watch for any changes and to copy the files to the right places in the Symfony app. Alongside Gulp we also used \u003ca href=\"https://bower.io/\" target=\"_blank\"\u003eBower\u003c/a\u003e to manage our front end dependencies such as Bootstrap \u0026 Knockout etc. When developing the fontend, we simply run 'gulp' in the commandline and let the automation take care of itself.\u003c/p\u003e\n\n\u003ch3\u003eThe \u003ca href=\"https://github.com/listingslab/kochart/blob/master/frontend/js/main.js\" target=\"_blank\"\u003emain.js\u003c/a\u003e    \u003c/h3\u003e\n\u003cp\u003eOnce the SPA was set up, we could finally concentrate on the JavaScript to connect everything up and create the App. On Document Ready, we load the data using $.getJSON( '/api'). When the loading is complete we set up our knockout observables.\u003c/p\u003e","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavascript-pro%2Fkochart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavascript-pro%2Fkochart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavascript-pro%2Fkochart/lists"}