Integrations by jwass91 · Pull Request #428 · stevekrouse/WoofJS

jwass91 · 2017-06-28T15:54:32Z

Added the simple getData() function to Woof and then gave detailed documentation for use of several APIs.

Added documentation for the following:

Firebase
Local Storage
General Get Requests
Currency Conversion
Sunrise/Sunset Data
Scientific Calculator
Trivia
Weather
Financial Data (currently having CORS issues)
Quotes (currently having CORS issues)
Jokes (currently having CORS issues)

stevekrouse · 2017-06-28T16:01:57Z

[This is an automated integration to preview this pull request's changes to the website.]

https://cdn.rawgit.com/stevekrouse/WoofJS/295004908a0ce07dd087954e7e7e79dab9227f89/index.html

stevekrouse

Looks great! Really excited about how thorough you were here.

One note I gave in multiple places was that I'd like you to put spaces after the // on comment lines. It's just a stylistic thing that's important to me.

stevekrouse · 2017-07-03T22:23:52Z

-                        description: "Beautify the selected code with proper indentation",
-                        code: "Ctl-B"
-                    }, ],
+                    "Integrations": {


Change the name of this #Keyboard class to #Integrations so the color styles apply to this button.

https://github.com/stevekrouse/WoofJS/blob/master/docs/docs.css#L232

stevekrouse · 2017-07-03T22:25:40Z

    border-radius: 10px;
 }

+#Firebase {


These colors don't seem to jive well with the color scheme of the rest of the docs buttons. Maybe use a color generator tool online to find ones that'd go well together and with the rest of the button colors. I imagine @nicolekelner could give good advice here too

stevekrouse · 2017-07-03T22:27:32Z

    <script id="block-template" type="text/x-template">
        <div class="block">
+            <div v-if="block.integrationDescription" class="alert" :class='block.integrationDescriptionClass' role='alert'>{{ block.integrationDescription }}<br v-if="block.integrationDocumentationLink"><br v-if="block.integrationDocumentationLink">
+            <a v-if="block.integrationDocumentationLink" target='_blank' class="btn btn-primary" :href="block.integrationDocumentationLink" role="button" style="width:100%;">Click Here For The API's Full Documentation</a>


Maybe the for this link could simply be "Full Documentation"

I try to avoid links that say "click here for".

I also probably want to avoid the phrase "API" in favor of the phrase "integration"

stevekrouse · 2017-07-03T22:28:55Z

+                    "Integrations": {
+                        Firebase: [
+                            {
+                                integrationDescription:"Firebase is Google's mobile platform that helps you with cloud storage.",


I would describe Firebase as "database that helps you store cloud data" and drop the words "google" and "mobile" from the description

I would also put Firebase towards the bottom of these integrations. It's hard to use. Definitely shouldn't be the first one.

stevekrouse · 2017-07-03T22:31:57Z

+                            {html:"<hr style=\"height:7px;border:none;color:#e0e0e0;background-color:#e0e0e0;\"/>"},
+                            {
+                                description: "Import JavaScript code from an external URL. The second input happens after the code is imported.",
+                                code: "importCodeURL('https://www.gstatic.com/firebasejs/3.4.0/firebase.js', () => {\n  firebase.initializeApp({\/* credentials here */})\n})",


This line of code doesn't really help you without the rest of the firebase functions discussed in the tutorial, so I would probably remove it from here.

You could include the importCodeURL either as its own integration or as a function in the More Blocks section, unrelated to firebase. That is, maybe demonstrate how to import another JS library other than firebase like the lodash library or something.

stevekrouse · 2017-07-03T22:43:45Z

+                            },
+                            {
+                                description:"Here is a walk through of a program shows how much 10 GBP is currently worth in USD.",
+                                code:'//First set up temporary text that will be replaced\nvar temp = new Text({\n text: "...", \n size: 60, \n color: "white", \n fontFamily: "arial",\n})\n//Then set your variables for the request\nvar base = "GBP"\n//Then set the url for your request\nvar url = "http://api.fixer.io/latest?base=" + base\n//Finaly call the getData() function\ngetData(url, data => {\n //Replace the temporary text with the converted amoung\n temp.text = Math.round( 10*data.rates.USD * 100) /100 + " USD"\n}) ',


Spaces after // here.

Also could you format this expression like Math.round(10 * data.rates.USD * 100) / 100? Ditto for the second example below

stevekrouse · 2017-07-03T22:56:55Z

+                        "Sunrise and Sunset Data":[
+                            {
+                                integrationDescription:"Use the Sunrise-Sunset API to get data about upcoming or past sunrises and sunsets.",
+                                html:"<a target='_blank'  href='http://www.latlong.net/'>Click here to find latitude and longitude values</a>",


I would have it be more like, "You will need latitude and longitude values for this integration which you can find here."

stevekrouse · 2017-07-03T22:57:32Z

+                            {html:"<hr style=\"height:7px;border:none;color:#e0e0e0;background-color:#e0e0e0;\"/>"},
+                            {
+                                description:"Here is a walk through of how to display today's sunrise time in NYC:",
+                                code:'//First set up temporary text that will be replaced\nvar temp = new Text({\n text: "...", \n size: 60, \n color: "white", \nfontFamily: "arial",\n})\n//Then set your variables for the request\nvar lat = 40.7128\nvar lng = -74.0059 \n//Then set the url for your request\nvar url = "https://api.sunrise-sunset.org/json?lat=" + lat + "&lng=" + lng\n//Finaly call the getData() function\ngetData(url, data => {\n //Replace the temporary text\n temp.text = data.results.sunset\n}) ',


I think this shows the sunset time

stevekrouse · 2017-07-03T23:00:37Z

+                                tags:"trivia"
+                            },
+                            {
+                                integrationDescription:"To generate your url visit the Trivia API Documentation.",


I'd phrase this more like "You can customize the category and number of questions retrieved here."

stevekrouse · 2017-07-03T23:01:45Z

+                                tags:"weather temperature"
+                            },
+                            {
+                                description:"Here is a walk through of how to display the current wind speed and conditions in NYC:",


I'd probably remove this extra example given how similar it is to the first one and that you have it below in the list

stevekrouse

I looked into the CORS issues you mentioned...

stevekrouse · 2017-07-03T23:13:12Z

+                        //     {
+                        //         description:"Here is a walk through of how to display a Chuck Norris joke from a specific category:",
+                        //         html:"<a target='_blank'  href='https://api.chucknorris.io/jokes/categories'>Click here to see all the options for categories</a>",
+                        //         code:'//First set up temporary text that will be replaced\nvar temp = new Text({\n text: "...", \n size: 15, \n color: "black", \nfontFamily: "arial",\n})\n//Then set your variable for the request\nvar category = "sport"\n//Then set the url for your request\nvar url = "https://api.chucknorris.io/jokes/random?category=" + category\n//Finaly call the getData() function\ngetData(url, data => {\n //Replace the temporary text\n temp.text = data.value\n})',


This worked for me. No CORS errors.

stevekrouse · 2017-07-03T23:14:21Z

+                        //     {html:"<hr style=\"height:7px;border:none;color:#e0e0e0;background-color:#e0e0e0;\"/>"},
+                        //     {
+                        //         description:"Here is a walk through of how to display the current stock price of Apple:",
+                        //         code:'//First set up temporary text that will be replaced\nvar temp = new Text({\n text: "...", \n size: 60, \n color: "white", \nfontFamily: "arial",\n})\n//Then set your variable for the request\nvar symbol = "AAPL"\n//Then set the url for your request\nvar url = "http://marketdata.websol.barchart.com/getQuote.json?key=1767804045c7c86775d9f86a36e06c55&symbols=" + symbol\n//Finaly call the getData() function\ngetData(url, data => {\n //Replace the temporary text\n temp.text = data.results.lastPrice\n})',


We're going to need something called JSONP to make this work. This is tricky but not impossible.

Or we could use the library this guy created https://github.com/barchart/barchart-ondemand-client-js. This could be a decent demo of how to use importCodeURL

jwass91 · 2017-07-05T21:02:42Z

I just pushed the revisions to the integrations. But there were a few things I wasn’t able to fix:

For the import code (which i moved back to more blocks) it didn’t seem to work for lodash so I left it importing firebase.
I wasn’t able to find the cloud data blocks on scratch to get a screenshot.
For now I left the market data commented while I work to implement JSONP or a different API but thought we might as well get the other integrations out for now.

stevekrouse · 2017-07-06T17:09:25Z

For the import code lodash thing, I was thinking it could look like the following which I was able to get working:

// import the lodash utility library
// https://lodash.com/docs/4.17.4
importCodeURL('https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js', () => {
  _.flatten([1, [2, [3, [4]], 5]])
})

No worries about the cloud data screenshot.

I have a bit of a pet peeve against leaving in commented code that doesn't work. Here's how I'd prefer to solve this:

Create a new branch finance-integration off of this integrations branch. There, uncomment the finance blocks. Push this new branch to github with a pull request. Explain that you still need to work on JSONP to get it to work.
In this integrations branch, delete the finance blocks entirely and commit that. Then merge in this branch.

jwass91 · 2017-07-06T19:46:16Z

Just took care of those last edits.

Now the finance integration here: #430

jwass91 added 3 commits June 22, 2017 20:26

added firebase and local storage to docs

bf519d1

Initial steps for integrations documentation

0682ee2

added several integrations

2950049

stevekrouse requested changes Jul 3, 2017

View reviewed changes

stevekrouse reviewed Jul 3, 2017

View reviewed changes

revisions to integrations

5ab1aa1

jwass91 added 2 commits July 6, 2017 15:38

fixed importCode docs

59e080b

removed commented finace code

abcffea

stevekrouse merged commit 2f2d485 into master Jul 6, 2017

stevekrouse deleted the integrations branch July 6, 2017 20:33

Conversation

jwass91 commented Jun 28, 2017

Uh oh!

stevekrouse commented Jun 28, 2017

Uh oh!

stevekrouse left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

stevekrouse left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jwass91 commented Jul 5, 2017

Uh oh!

stevekrouse commented Jul 6, 2017

Uh oh!

jwass91 commented Jul 6, 2017

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants