├── .gitignore
├── README.md
├── index.html
├── jquery.js
├── manifest.json
├── notes.txt
├── package-lock.json
├── package.json
├── semantic.css
├── src
├── assets
│ ├── android-drawer.png
│ ├── android-inbox.png
│ ├── arrow-down-b.png
│ ├── arrow-right-b.png
│ ├── close.png
│ ├── minus.png
│ └── plus.png
├── background.js
├── components
│ ├── Accordian.js
│ ├── App.js
│ ├── AuthDialog.jsx
│ ├── AuthModal.jsx
│ ├── Dashboard.js
│ ├── Lowerbar.js
│ ├── Modal.js
│ ├── SegmentFive.js
│ ├── SegmentFour.js
│ ├── SegmentOne.js
│ ├── SendDialog.jsx
│ ├── SendModal.jsx
│ ├── Step.js
│ └── Toolbar.js
├── configure-webpack.js
├── contentscript.js
└── main.js
├── style.css
└── webpack.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # Typescript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # Yarn Integrity file
55 | .yarn-integrity
56 |
57 | # dotenv environment variables file
58 | .env
59 |
60 | # Database files
61 | db/
62 |
63 | # Build files
64 | bundles/
65 |
66 | .vscode/
67 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # LiveAPI
2 | Successful apps are built on data. As developers, we don’t always have access to the data that would help make our app successful. While the internet is a nearly-bottomless source of public data in the form of websites, that data is not always structured or available programmatically through an API. Time spent building an extraction algorithm and server is time not spent building your app.
3 |
4 | We’re developing LiveAPI, a developer tool to turn any website’s public data into an API in a few minutes. LiveAPI has two parts: a Chrome Extension to select data to extract and a user-hostable server that extracts data and serves up the user-created API endpoints.
5 |
6 | The following three-part guide that walks through how to get started and use LiveAPI.
7 |
8 | * [Part 1: Installation](https://medium.com/@brett.beekley/using-liveapi-part-1-installation-ba1aa13bc73b)
9 | * [Part 2: Authentication](https://medium.com/@pennwu/liveapi-a-visual-data-extraction-tool-part-2-17a1d32b2d52)
10 | * [Part 3: Using the Chrome Extension](https://medium.com/@melissjs/liveapi-a-visual-data-extraction-tool-part-3-e9d60c9ab28d)
11 |
12 | Installation Guide
13 | A primary goal of ours when building LiveAPI is to make setup painless. Installing the Chrome Extension only takes two clicks on the Chrome Web Store. You can now start using the LiveAPI extension on any site by clicking the icon in the top-right Chrome Menu and following the Using the Chrome Extension part of this guide. Setting up a server generally isn’t as simple. Keeping to our goal, we’ve automated the server installation process through a script that installs all of the necessary prerequisites, builds the code and starts the LiveAPI services. This script can be executed in one shell command:
14 |
15 | sudo curl -shttps://raw.githubusercontent.com/live-API/LAPI-Server/master/bin/pull.sh | bash -s
16 |
17 | This command is tested for MacOS and Amazon Linux, but should work on other flavors of RHEL and on Ubuntu. If you have any setup or compatibility issues, let us know on Github. We’re still early in determining our compatibility and would love your feedback.
18 |
19 | Port Setup
20 | LiveAPI server runs on port 4000 (http) and 4443 (https) by default and is accessible by adding the port to the domain (e.g. liveapi.yoursite.com:4443). To serve and access LiveAPI over the standard http and https ports, you can update the HTTP_PORT and HTTPS_PORT variables in server.js.
21 |
22 | If using AWS to host LiveAPI, EC2 requires the application to have root access to run on ports under 1000. To avoid running a web server like LiveAPI as root, you can use iptables to forward port 443 to LiveAPI’s 4443. See this guide for more information. What We’re Asking to Sudo
23 |
24 | The setup command grabs a shell script from github and runs it as the root. Since we don’t recommend executing unfamiliar code as root, we’ll outline what the scripts do. The pull.sh script is relatively simple and does the following:
25 |
26 | Installs git
27 | Pulls the latest LiveAPI server code from github
28 | Starts the installation script (start.sh)
29 |
30 | The installation script, start.sh, contains everything else need to install and start the server:
31 | Installs NodeJS/npm
32 | Installs MongoDB
33 | Installs Node module dependencies
34 | Builds and bundles the front-end JS
35 | Generates self-signed SSL certificates
36 | Starts the server
37 |
38 | Starting the server using npm start does the following:
39 | Starts the Mongo daemon
40 | Starts LiveAPI
41 | Manual Installation
42 |
43 | Alternatively, LiveAPI can be installed and started manually. Make sure to do each of the steps listed in the bullets above. If you are bringing your own SSL certs, such as from a CA, you can drop the certificate (cert.pem) and private key (key.pem) in the SSL folder in the root of LiveAPI.
44 |
45 | The minimum NodeJS version required for LiveAPI is 7, but there may be other requirements we have not found yet. We have tested on NodeJS >8.1.4 and MongoDB >3.4.4, but let us know on Github if you have any problems with these or other versions.
46 |
47 | Using LiveAPI Part 2: Creating Users and Authentication
48 | If you have not installed the LiveAPI server on your computer, or a cloud-hosting solution like AWS, read Part 1 to setup the server.
49 |
50 | By now, here is what you have completed:
51 | [x] Installation on AWS / Locally
52 | [x] Setup SSL Certificate
53 | [x] Start the LiveAPI server
54 |
55 | We built authorization into LiveAPI to allow you to control the endpoints created. First, create the admin account.
56 |
57 | Creating an Admin Account
58 | Go to https://localhost:4443/config. If your SSL Certificate is working correctly, you will see the above sign-in bar. Create the admin account by entering your login credentials. This will create a cookie in the browser, and bring you to the new page.
59 |
60 | If you get an error, your SSL certificate is not working. Visit Part 1: Installation on instructions to create an SSL certificate!
61 |
62 | Invite additional users
63 | When you want multiple people accessing the created endpoints, use invitation links to create their account. This gives the admin control over who has access to the endpoints created, and the corresponding data that is scraped.Entering the invitation link will prompt a username and password.
64 |
65 | Using LiveAPI Part 3: Chrome Extension
66 | If you have not installed the LiveAPI server on your computer, or a cloud-hosting solution like AWS, read Part 1 to setup the server.
67 |
68 | If you have not created one or more user accounts on your server, read Part 2 on authentication.
69 |
70 | Once steps one and two are finished, install the LiveAPI Chrome Extension from the Chrome Extension webstore.To activate the extension, navigate to the target URL you wish to scrape and click the browser action icon (right side on browser top bar). The UI bar will move you through the necessary steps for designing your endpoint.
71 |
72 | Step 1:
73 | Click on a DOM element of your choice that contains one of the properties that you want in your data objects; you will see your selection highlighted in yellow. Select another of the same kind on the page and if the elements are structurally similar, LiveAPI will highlight the remaining items of that kind on the page. Deselect anything you do not wish to include. Enter a name for your new property (such as “title”) then click “Save”. Repeat as desired for additional elements.
74 |
75 | Note:
76 | Use names with no spaces that are camelCased or snake_cased. Please do not use spaces or special characters besides dashes. These will be your keys in your key value pairs of each object.
77 |
78 | Step 2 and 3 are not functional at the moment and are in development.
79 |
80 | Step 4:
81 | Authenticate yourself with the credentials you created on the LiveAPI server. The address field is where you indicate the URL and port of your server. In most cases the port will be 4443.
82 |
83 | Step 5:
84 | Create a name for your endpoint. Observe the same rules for naming as above because this name will be part of your endpoint URI. Enter an interval measured in seconds and click “Create Endpoint”. You will then have the choice to navigate to your endpoint to verify accuracy of your data or you can elect to begin another endpoint design.
85 |
86 | And that’s it!
87 | Because data should be open and free.
88 | LiveAPI is and always will be open source. We welcome contributions from other developers.
89 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |