OPEN DATA EDITOR

Project Description

ODEN (Open Data Developer Network) is a novel system for helping developers easily find and consume Open Data in their mobile apps or websites. Open Data is data that can be freely used re-used and redistributed by anyone. ODEN’s developer community needs a wealth of Open Data to exist from a variety of sources for the apps they develop.

The issue we have is that not all of those who want to supply Open Data understand the format Open Data requires. The goal of this project is to create an Open Data Editor to make this process easier. ODEN makes use of schemas JSON Schema to describe what Open Data looks like.

The Open Data Editor will allow those with limited technical knowledge to easily create/edit Open Data without needing to understand these underlying schemas. The Open Data Editor will be a dynamic web form that is built from the selected schema and needs to show an HTML representation of the data in an easy to understand visual as it is being put in

This document will walk you through the process of setting up and creating the application

Technology Used

JSON Schema
HTML5, CSS3, JavaScript
React
Material Design
Firebase

Getting Started

Let’s first clone the repository from GitHub. Choose your workspace directory and enter this into your console:

 $ git clone https://github.com/mikah13/test-skt.git

Once you have everything from our repository. You need to install React. Assuming you have NPM installed, simply paste this piece of code into your console:

$ npm install react

Then you can start the application by running: $ npm start

Firebase Hosting

Hosting React on Firebase is really easy for new comers. All you have to do is following a few steps below:

Step 1: Install Firebase: $ npm install -g firebase-tools
Step 2: Login into Firebase: $ firebase login then run this command $ firebase init to initialize Firebase hosting environment. Now everything will be totally on the console GUI.
Step 3: Select the Firebase features you want to use. Database and Hosting are selected by default — all you need to do is press Enter to go to the next step.
Step 4: Firebase command-line interface will pull up your list of Firebase projects, where you can then choose the corresponding project using the up and down keys.
Step 5: Keep the default for the Database Rules file name and just press enter.
Step 6: Pay attention to the question about public directory, which is the directory that will be deployed and served by Firebase. In our case it is “build”, which is the folder where our production build is located. Type “build” and proceed.
Step 7: Firebase will ask you if you want the app to be configured as a single-page app. By default it is “no” — in our case, we could really benefit from the configuration, so we’ll type “y” and press enter. Later on you’ll be able to use react-router and the URLs will just work.
Step 8: Firebase will warn us that we already have “build/index.html,” which we don’t want to be overwritten. Type “n” and press enter to keep our own “index.html,” generated by our build process earlier.
Step 9:: We are now ready to deploy the app! We’ll do that by running $ firebase deploy. After a few seconds you’ll see the URL — where your app is hosted — of your app.

Now if you want to update your application and upload everything to your hosted website, run these 2 commands on your console:

 $ npm start build

 $ firebase deploy

Credit

Credit to: