{"_id":"56a0bda03697d80d002ac5fd","category":{"_id":"56d5a8ecf612b80b00fb69cd","version":"56a0bd9e3697d80d002ac5e7","__v":1,"pages":["56d5a90ef612b80b00fb69ce"],"project":"54774d9af3736008009e9e0e","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-03-01T14:36:28.699Z","from_sync":false,"order":9,"slug":"tutorials","title":"Tutorials"},"project":"54774d9af3736008009e9e0e","__v":5,"user":"548193732dca603300bf6ea1","parentDoc":null,"version":{"_id":"56a0bd9e3697d80d002ac5e7","project":"54774d9af3736008009e9e0e","__v":20,"createdAt":"2016-01-21T11:14:38.131Z","releaseDate":"2016-01-21T11:14:38.131Z","categories":["56a0bd9f3697d80d002ac5e8","56a0bd9f3697d80d002ac5e9","56a0bd9f3697d80d002ac5ea","56a0bd9f3697d80d002ac5eb","56b098a43a5b810d00745e3f","56b098da8f7a4f0d0029dd10","56d5a8ecf612b80b00fb69cd","570989853ab43c0e0072b2d6","571006aa10300c0e007f6133","5735a52431a73b1700887ca0","5744b0529e045c0e00b7a7a2","5744b1d0b56d431700d8a4fb","5744b1fb55d65a0e00b436e1","5744b218f9c7411700ce560e","5744b220f9c7411700ce560f","5744b2259e045c0e00b7a7a7","5744b22cf8b79f0e00de6a2d","5744b23155d65a0e00b436e4","5744b242c758290e00fbc235","5744b2569e045c0e00b7a7a8","5756a3f2bb92962900dafe3d","57ee23e81e42900e0014a42f","581c822c98676e0f00d240ef"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"Sockets","version_clean":"1.1.0","version":"1.1"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-10-19T22:38:39.882Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"## Chapter Contents:\n\n1. [Install Weather App Solution](#step-1-install-weather-app-solution)\n2. [Integrate a 3rd Party Service](#step-2-integrate-a-3rd-party-service)\n3. [Run Your Application](#step-3-run-your-application)\n4. [Go Further](#go-further)\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Step 1 - Install Weather App Solution\"\n}\n[/block]\nThe initial steps will walk you through creating a new Syncano account, creating your Instance, and installing the Weather App Solution. \n\n##Step 1.1 Sign Up\nIf you haven't already, you will need to sign up for a [new Syncano account](https://dashboard.syncano.io/#/signup). If you already have one, you can skip to [step 1.2](#section-step-1-2-create-a-new-instance).\n\n1. Click the link above\n2. Enter an email address\n3. Enter a secure password\n4. Click \"Create My Account\"\n\n\n##Step 1.2 Create a New Instance\nAn `Instance` is your backend. Here, you will store data, define server processes, and build automations for your application. \n\n###If you just created a new account\n\n1. Click \"Create Your First Instance Now\" \n2. Then click \"Confirm\" to create a new `Instance`\n\n###If you already have an account\n1. Log in to Syncano \n2. Click the plus icon in the bottom right corner\n3. Then click \"Confirm\"\n\nDon't forget the `Instance` name that you just created -- you will need it in the next step!\n\t\n##Step 1.3 Install the Solution\nHave you ever written an application and wished someone else had already done parts of it for you? That's what `Solutions` are -- functionality developed by members of the Syncano community.  In order to get you going, we have done most of the work for you.\n\nIn the upper right corner, click \"Solutions\". This is where you will find various pre-made functionality to install into your `Instance`. You can narrow your choices with tags, as well as add `Solutions` to your list of favorites. \n\n1. Follow this link - [Syncano Weather App](https://dashboard.syncano.io/#/solutions/76/edit)\n2. Click \"Install Solution\"\n3. Select the `Instance` you created in the previous step\n4. Select version at `1.0`\n5. Click \"Confirm\"\n\nAfter you click confirm, you should be redirected to your `Instance`, with the notification in the bottom left telling you that it was successfully installed.\n\n###Step 1 Complete\nCongratulations -- you have completed step 1! You should now have a new `Instance` with the `Syncano Weather App Solution` installed.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Step 2 - Integrate a 3rd Party Service\"\n}\n[/block]\nSyncano is great for tying together many different 3rd party APIs for your app to consume. In this step, we will set up [OpenWeatherMap](http://openweathermap.org/) to use in our application.\n\n##Step 2.1 Sign Up for OpenWeatherMap\nOpenWeatherMap is a great data source for all things weather. This app merely scratches the surface of what's possible. The great thing is, they have a free account that has a high limit of API calls for you to test.\n\n1. Go to the [OpenWeatherMap Signup Page](http://home.openweathermap.org/users/sign_up)\n2. Enter in a username, email address, and secure password\n3. Click to agree with their \"Terms of Service\"\n4. Click \"Create Account\"\n5. After logging in, copy and store your `API Key` -- it's just after your email address and name\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"A Note about OpenWeatherMap API\",\n  \"body\": \"This is a **free** service, and not within Syncano's control. In our testing, we have experienced issues with their API response times, although rarely. If you see something that doesn't seem to be working, please [submit an issue to this repo](https://github.com/Syncano-Community/weather-app/issues)!\"\n}\n[/block]\n## Step 2.2 Update Script Configurations\nAs a part of the `Solution` you installed, there are `Config` settings for the Scripts that the app uses.  You must update the `Config` before you can proceed, or nothing will work.\n\n\n###Get your Account Key\n1. Make sure you are logged in to your Syncano Dashboard\n2. Click \"Account\" in the upper right corner\n3. Click your user name (the top menu item)\n4. Then click the \"Authentication\" menu item\n5. Copy and store your `Account Key` for the next step.\n\n###Update Your First Config\n\n1. Click the logo in the upper left to get back to your Instance list\n2. Click the Instance with the `Syncano Weather App Solution` installed\n3. In the left side menu, click \"Scripts\"\n4. Click the `weather_get_data` Script\n\nYou should now be on the `Edit` screen with some code in the editor. Don't make any change here, first click `CONFIG` to switch to that screen. On this screen you will see key/value pairs - update the config with your credentials:\n\n\n1. Update the `accountKey` value `ENTER-ACCOUNT-KEY-HERE` with the `Account Key` you copied from the last step. Make sure there are no quotes or anything around your key.\n2. Update the `open_weather_map_api_key` value \"OPENWEATHERMAP-API-KEY\" with the `OpenWeatherMap API key`. Make sure there are no quotes or anything around your key. \n3. Click `Save` \n\nAt this point, you can test the Script on the `Edit` screen. Click the `Edit` button at the top of the `Config` Copy and paste the following code in the `Payload` area below the editor.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\\"city\\\": \\\"Indianapolis\\\", \\\"stateOrCountry\\\": \\\"IN\\\"}\",\n      \"language\": \"json\",\n      \"name\": \"Payload\"\n    }\n  ]\n}\n[/block]\nNow click the play button on the right, and the terminal window will display the results of your Script run. If it doesn't work, check your `Config` and make sure you have entered typed correctly.\n\nIf everything is working, you should receive something similar to this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\\"forecast\\\":\\\"{\\\\\\\"1456333200\\\\\\\":{\\\\\\\"temp_min\\\\\\\":273.5,\\\\\\\"temp_max\\\\\\\":277.21,\\\\\\\"short_description\\\\\\\":\\\\\\\"Snow\\\\\\\"},\\\\\\\"1456419600\\\\\\\":{\\\\\\\"temp_min\\\\\\\":271.59,\\\\\\\"temp_max\\\\\\\":273.75,\\\\\\\"short_description\\\\\\\":\\\\\\\"Snow\\\\\\\"},\\\\\\\"1456506000\\\\\\\":{\\\\\\\"temp_min\\\\\\\":269.51,\\\\\\\"temp_max\\\\\\\":274.13,\\\\\\\"short_description\\\\\\\":\\\\\\\"Snow\\\\\\\"},\\\\\\\"1456592400\\\\\\\":{\\\\\\\"temp_min\\\\\\\":272.21,\\\\\\\"temp_max\\\\\\\":277.05,\\\\\\\"short_description\\\\\\\":\\\\\\\"Clear\\\\\\\"}}\\\",\\\"city_id\\\":4260977,\\\"city_name\\\":\\\"Marion County\\\",\\\"current_temp\\\":281.26,\\\"short_description\\\":\\\"Clear\\\"}\",\n      \"language\": \"text\",\n      \"name\": \"Result\"\n    }\n  ]\n}\n[/block]\n###Update `weather_update_active` Configuration\nWe need to now update the `weather_update_active` configuration. For this, make sure to first note the `weather_get_data` ID. It's located next to the name in parenthesis.  _Most likely, if this is a new `Instance`, the ID should be `1`. If not, make sure you remember the number_.\n\n1. In the left side menu, click \"Scripts\"\n2. Click the `weather_update_active` Script\n3. Click `Config`\n4. Update the `accountKey` value `ENTER-ACCOUNT-KEY-HERE` with the `Account Key` you copied from the last step. Make sure there are no quotes or anything around your key.\n5. Update `codeboxId` with the `weather_get_data` Script ID.\n\n##Step 2 Complete\nYour application’s backend is completely set up now. Everything you need to run the front end code is done. Let's get the front end working next.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Step 3 - Run Your Application\"\n}\n[/block]\nSo far, you have installed a `Solution` into a new `Instance`, created your `OpenWeatherMap` account, and updated your `Script` configurations.  There are only a couple more tasks left.\n\n##Step 3.1 - Create an Instance API Key\nIn order to run the application, we need to create an Instance API key - which is a key for this specific Instance and scopes the data to only objects which have granted it access. You can read more about the [different authentication options](http://docs.syncano.com/docs/authentication) in our documentation.\n\n1. Make sure you are logged in your Syncano Dashboard\n2. Navigate to your Instance with the `Weather Sample App` Solution installed\n3. Click on \"API Keys\" in the left menu\n4. Click the plus icon, type in a description, and click \"Confirm\" -- you don't need to change any settings\n\nAfter you confirm, you will see your `API Key`. Copy that and save it somewhere for later.\n\n##Step 3.2 - Download the Application Code\nThere are a few last steps before you can view the application in your browser, but we are getting closer. Excited? Me too!\n\n1. Download the [`weather-app`](https://github.com/Syncano-Community/weather-app/archive/master.zip) repo. \n2. Unzip the files and open the folder. \n3. Locate the `index.js` file in the `scripts` folder, and open it in your favorite text editor, such as Atom, WebStorm, or VIM. \n\n###Step 3.3 - Update the Application Code\nThere are 3 items you need to modify in the `index.js` file.\n\n+ Webhook URL\n+ Instance API Key\n+ Instance Name\n\n###Update the Webhook URL\n\n1. Make sure you are logged in to your Syncano Dashboard\n2. Click the Instance with the `Syncano Weather App Solution` installed\n3. Click on `Script Endpoints` in the left side menu (it's the default page for the Instance)\n4. Click the link icon under `URL` for the `weather_webhook` endpoint\n5. Update `index.js` line 8 with your Webhook URL\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var BASE_URL = \\\"YOUR WEBHOOK GOES HERE\\\";\",\n      \"language\": \"javascript\",\n      \"name\": \"index.js\"\n    }\n  ]\n}\n[/block]\n### Update the Syncano Credentials\n\n1. Locate lines 9-12 in `index.js`\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var syncano = new Syncano({\\n\\tapiKey: 'YOUR API KEY GOES HERE',\\n\\tinstance: 'YOUR INSTANCE NAME GOES HERE'\\n});\",\n      \"language\": \"javascript\",\n      \"name\": \"index.js\"\n    }\n  ]\n}\n[/block]\n2. Change `apiKey` to be the Instance API Key from the last step. Of course, it's in quotes.\n3. Change `instance` to be the Instance name with the `Weather Sample App` Solution installed.\n4. Save `index.js`\n\n###Step 3 Complete - Declare Victory\n\nIn the `weather-app-master` folder, locate the `index.html` file, and open it in your browser. Type in a city and state name, and press enter.  \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Go Further\"\n}\n[/block]\nAt this point, you can look around at the other pieces in your Syncano Instance. Take a look at the Script and learn what they do. Create your own, and try it out with the console.\n\nTwo main items we haven't covered -- \n+ Tasks - there is a schedule set up to run once every hour to update the data.\n+ Channels - this is where the live updates come from. Whenever a city is updated, a Channel will send it to the front end code. \n\nAlso -- after you have entered a few cities, make sure to look at Data Classes and view the `weather_active_cities` data objects that have been created. \n\nNow, go build your own application, and tell us about it!","excerpt":"This is the sample Weather Application for the Syncano platform. You will learn how to use Solutions, create Scripts and use it all in a JavaScript application.","slug":"weather-app-js","type":"basic","title":"Weather App (JS)"}

Weather App (JS)

This is the sample Weather Application for the Syncano platform. You will learn how to use Solutions, create Scripts and use it all in a JavaScript application.

## Chapter Contents: 1. [Install Weather App Solution](#step-1-install-weather-app-solution) 2. [Integrate a 3rd Party Service](#step-2-integrate-a-3rd-party-service) 3. [Run Your Application](#step-3-run-your-application) 4. [Go Further](#go-further) [block:api-header] { "type": "basic", "title": "Step 1 - Install Weather App Solution" } [/block] The initial steps will walk you through creating a new Syncano account, creating your Instance, and installing the Weather App Solution. ##Step 1.1 Sign Up If you haven't already, you will need to sign up for a [new Syncano account](https://dashboard.syncano.io/#/signup). If you already have one, you can skip to [step 1.2](#section-step-1-2-create-a-new-instance). 1. Click the link above 2. Enter an email address 3. Enter a secure password 4. Click "Create My Account" ##Step 1.2 Create a New Instance An `Instance` is your backend. Here, you will store data, define server processes, and build automations for your application. ###If you just created a new account 1. Click "Create Your First Instance Now" 2. Then click "Confirm" to create a new `Instance` ###If you already have an account 1. Log in to Syncano 2. Click the plus icon in the bottom right corner 3. Then click "Confirm" Don't forget the `Instance` name that you just created -- you will need it in the next step! ##Step 1.3 Install the Solution Have you ever written an application and wished someone else had already done parts of it for you? That's what `Solutions` are -- functionality developed by members of the Syncano community. In order to get you going, we have done most of the work for you. In the upper right corner, click "Solutions". This is where you will find various pre-made functionality to install into your `Instance`. You can narrow your choices with tags, as well as add `Solutions` to your list of favorites. 1. Follow this link - [Syncano Weather App](https://dashboard.syncano.io/#/solutions/76/edit) 2. Click "Install Solution" 3. Select the `Instance` you created in the previous step 4. Select version at `1.0` 5. Click "Confirm" After you click confirm, you should be redirected to your `Instance`, with the notification in the bottom left telling you that it was successfully installed. ###Step 1 Complete Congratulations -- you have completed step 1! You should now have a new `Instance` with the `Syncano Weather App Solution` installed. [block:api-header] { "type": "basic", "title": "Step 2 - Integrate a 3rd Party Service" } [/block] Syncano is great for tying together many different 3rd party APIs for your app to consume. In this step, we will set up [OpenWeatherMap](http://openweathermap.org/) to use in our application. ##Step 2.1 Sign Up for OpenWeatherMap OpenWeatherMap is a great data source for all things weather. This app merely scratches the surface of what's possible. The great thing is, they have a free account that has a high limit of API calls for you to test. 1. Go to the [OpenWeatherMap Signup Page](http://home.openweathermap.org/users/sign_up) 2. Enter in a username, email address, and secure password 3. Click to agree with their "Terms of Service" 4. Click "Create Account" 5. After logging in, copy and store your `API Key` -- it's just after your email address and name [block:callout] { "type": "info", "title": "A Note about OpenWeatherMap API", "body": "This is a **free** service, and not within Syncano's control. In our testing, we have experienced issues with their API response times, although rarely. If you see something that doesn't seem to be working, please [submit an issue to this repo](https://github.com/Syncano-Community/weather-app/issues)!" } [/block] ## Step 2.2 Update Script Configurations As a part of the `Solution` you installed, there are `Config` settings for the Scripts that the app uses. You must update the `Config` before you can proceed, or nothing will work. ###Get your Account Key 1. Make sure you are logged in to your Syncano Dashboard 2. Click "Account" in the upper right corner 3. Click your user name (the top menu item) 4. Then click the "Authentication" menu item 5. Copy and store your `Account Key` for the next step. ###Update Your First Config 1. Click the logo in the upper left to get back to your Instance list 2. Click the Instance with the `Syncano Weather App Solution` installed 3. In the left side menu, click "Scripts" 4. Click the `weather_get_data` Script You should now be on the `Edit` screen with some code in the editor. Don't make any change here, first click `CONFIG` to switch to that screen. On this screen you will see key/value pairs - update the config with your credentials: 1. Update the `accountKey` value `ENTER-ACCOUNT-KEY-HERE` with the `Account Key` you copied from the last step. Make sure there are no quotes or anything around your key. 2. Update the `open_weather_map_api_key` value "OPENWEATHERMAP-API-KEY" with the `OpenWeatherMap API key`. Make sure there are no quotes or anything around your key. 3. Click `Save` At this point, you can test the Script on the `Edit` screen. Click the `Edit` button at the top of the `Config` Copy and paste the following code in the `Payload` area below the editor. [block:code] { "codes": [ { "code": "{\"city\": \"Indianapolis\", \"stateOrCountry\": \"IN\"}", "language": "json", "name": "Payload" } ] } [/block] Now click the play button on the right, and the terminal window will display the results of your Script run. If it doesn't work, check your `Config` and make sure you have entered typed correctly. If everything is working, you should receive something similar to this: [block:code] { "codes": [ { "code": "{\"forecast\":\"{\\\"1456333200\\\":{\\\"temp_min\\\":273.5,\\\"temp_max\\\":277.21,\\\"short_description\\\":\\\"Snow\\\"},\\\"1456419600\\\":{\\\"temp_min\\\":271.59,\\\"temp_max\\\":273.75,\\\"short_description\\\":\\\"Snow\\\"},\\\"1456506000\\\":{\\\"temp_min\\\":269.51,\\\"temp_max\\\":274.13,\\\"short_description\\\":\\\"Snow\\\"},\\\"1456592400\\\":{\\\"temp_min\\\":272.21,\\\"temp_max\\\":277.05,\\\"short_description\\\":\\\"Clear\\\"}}\",\"city_id\":4260977,\"city_name\":\"Marion County\",\"current_temp\":281.26,\"short_description\":\"Clear\"}", "language": "text", "name": "Result" } ] } [/block] ###Update `weather_update_active` Configuration We need to now update the `weather_update_active` configuration. For this, make sure to first note the `weather_get_data` ID. It's located next to the name in parenthesis. _Most likely, if this is a new `Instance`, the ID should be `1`. If not, make sure you remember the number_. 1. In the left side menu, click "Scripts" 2. Click the `weather_update_active` Script 3. Click `Config` 4. Update the `accountKey` value `ENTER-ACCOUNT-KEY-HERE` with the `Account Key` you copied from the last step. Make sure there are no quotes or anything around your key. 5. Update `codeboxId` with the `weather_get_data` Script ID. ##Step 2 Complete Your application’s backend is completely set up now. Everything you need to run the front end code is done. Let's get the front end working next. [block:api-header] { "type": "basic", "title": "Step 3 - Run Your Application" } [/block] So far, you have installed a `Solution` into a new `Instance`, created your `OpenWeatherMap` account, and updated your `Script` configurations. There are only a couple more tasks left. ##Step 3.1 - Create an Instance API Key In order to run the application, we need to create an Instance API key - which is a key for this specific Instance and scopes the data to only objects which have granted it access. You can read more about the [different authentication options](http://docs.syncano.com/docs/authentication) in our documentation. 1. Make sure you are logged in your Syncano Dashboard 2. Navigate to your Instance with the `Weather Sample App` Solution installed 3. Click on "API Keys" in the left menu 4. Click the plus icon, type in a description, and click "Confirm" -- you don't need to change any settings After you confirm, you will see your `API Key`. Copy that and save it somewhere for later. ##Step 3.2 - Download the Application Code There are a few last steps before you can view the application in your browser, but we are getting closer. Excited? Me too! 1. Download the [`weather-app`](https://github.com/Syncano-Community/weather-app/archive/master.zip) repo. 2. Unzip the files and open the folder. 3. Locate the `index.js` file in the `scripts` folder, and open it in your favorite text editor, such as Atom, WebStorm, or VIM. ###Step 3.3 - Update the Application Code There are 3 items you need to modify in the `index.js` file. + Webhook URL + Instance API Key + Instance Name ###Update the Webhook URL 1. Make sure you are logged in to your Syncano Dashboard 2. Click the Instance with the `Syncano Weather App Solution` installed 3. Click on `Script Endpoints` in the left side menu (it's the default page for the Instance) 4. Click the link icon under `URL` for the `weather_webhook` endpoint 5. Update `index.js` line 8 with your Webhook URL [block:code] { "codes": [ { "code": "var BASE_URL = \"YOUR WEBHOOK GOES HERE\";", "language": "javascript", "name": "index.js" } ] } [/block] ### Update the Syncano Credentials 1. Locate lines 9-12 in `index.js` [block:code] { "codes": [ { "code": "var syncano = new Syncano({\n\tapiKey: 'YOUR API KEY GOES HERE',\n\tinstance: 'YOUR INSTANCE NAME GOES HERE'\n});", "language": "javascript", "name": "index.js" } ] } [/block] 2. Change `apiKey` to be the Instance API Key from the last step. Of course, it's in quotes. 3. Change `instance` to be the Instance name with the `Weather Sample App` Solution installed. 4. Save `index.js` ###Step 3 Complete - Declare Victory In the `weather-app-master` folder, locate the `index.html` file, and open it in your browser. Type in a city and state name, and press enter. [block:api-header] { "type": "basic", "title": "Go Further" } [/block] At this point, you can look around at the other pieces in your Syncano Instance. Take a look at the Script and learn what they do. Create your own, and try it out with the console. Two main items we haven't covered -- + Tasks - there is a schedule set up to run once every hour to update the data. + Channels - this is where the live updates come from. Whenever a city is updated, a Channel will send it to the front end code. Also -- after you have entered a few cities, make sure to look at Data Classes and view the `weather_active_cities` data objects that have been created. Now, go build your own application, and tell us about it!