Difference between revisions of "Apps Code"

From Hubitat Documentation
Jump to: navigation, search
(Installing custom apps)
Line 6: Line 6:
  
 
#<big>The developer of the app will normally post a link to their app code. Follow their directions to get to the source code.</big>
 
#<big>The developer of the app will normally post a link to their app code. Follow their directions to get to the source code.</big>
#<big>Typically developers will use GitHub to host code. When copying the code, choose the '''RAW''' button so that you are getting the raw form of the code, with no HTML formatting.</big>[[File:GitHub raw button v2.png|none|thumb|600x600px|link=https://docs.hubitat.com/images/5/5c/GitHub_raw_button_v2.png
+
#<big>Typically developers will use GitHub to host code. When copying the code, choose the '''RAW''' button so that you are getting the raw form of the code, with no HTML formatting.</big>[[File:GitHub raw button v2.png|none|thumb|600x600px|link=https://docs.hubitat.com/images/5/5c/GitHub_raw_button_v2.png |alt=Located at the top of the GitHub window for the code you want to copy, there is a button labelled "RAW". This will ensure you are copying the raw form of the code, with no HTML formatting.]]
]]
 
 
#<big>'''Select All''' the raw code, and then '''Copy''' the code.</big>
 
#<big>'''Select All''' the raw code, and then '''Copy''' the code.</big>
 
#<big>From the home page of your hub, select '''Apps Code''' in the side bar.</big>
 
#<big>From the home page of your hub, select '''Apps Code''' in the side bar.</big>
#<big>Select the '''+New App''' button in the upper right corner of the Apps Code page.</big>[[File:New User App dialogue 2.0.png|none|thumb|600x600px|link=https://docs.hubitat.com/images/6/61/New_User_App_dialogue_2.0.png
+
#<big>Select the '''+New App''' button in the upper right corner of the Apps Code page.</big>[[File:New User App dialogue 2.0.png|none|thumb|600x600px|link=https://docs.hubitat.com/images/6/61/New_User_App_dialogue_2.0.png |alt=The button to create a new custom app is located at the top-right of the "Apps Code" page on your hub]]
]]
+
#<big>In the blank text field, paste the code. Alternatively, you can select the '''Import''' button and past a URL to the developers code in raw text format.</big>[[File:Import user app code URL 2.0.png|none|thumb|600x600px|link=https://docs.hubitat.com/images/7/79/Import_user_app_code_URL_2.0.png |alt=Pressing the "Import" button at the top of the custom App code page will allow you to enter the URL which points directly to the URL of the developers code in raw text format]]
#<big>In the blank text field, paste the code. Alternatively, you can select the '''Import''' button and past a URL to the developers code in raw text format.</big>[[File:Import user app code URL 2.0.png|none|thumb|600x600px|link=https://docs.hubitat.com/images/7/79/Import_user_app_code_URL_2.0.png
+
#<big>Select the '''Save''' button in the top right. When '''modified''' goes away, your app is saved.</big>[[File:User app code unsaved 2.0.png|none|thumb|600x600px|link=https://docs.hubitat.com/images/5/5c/User_app_code_unsaved_2.0.png |alt=When first pasting or importing new custom apps code, or when making any change to existing custom apps code, "Modified" will be shown to the left of the "Import" button at the top of the custom apps code page. Save the code by pressing the "Save" button. The "Save" button is fourth from the right, at the top of the custom apps code page.]]
]]
 
#<big>Select the '''Save''' button in the top right. When '''modified''' goes away, your app is saved.</big>[[File:User app code unsaved 2.0.png|none|thumb|600x600px|link=https://docs.hubitat.com/images/5/5c/User_app_code_unsaved_2.0.png
 
]]
 
  
 
<big>You may experience an error in this step. If you do, your app will not save and it will not work. Please contact the developer of the app in the Hubitat Community forum. It is usually best if you take a screen shot of the error to help them diagnose the problem. Once the code is fixed, come back and try again.</big>
 
<big>You may experience an error in this step. If you do, your app will not save and it will not work. Please contact the developer of the app in the Hubitat Community forum. It is usually best if you take a screen shot of the error to help them diagnose the problem. Once the code is fixed, come back and try again.</big>
Line 23: Line 19:
 
<big>Not all user apps will require OAuth (Open Authorization). Consult the app developers documentation for instruction.</big>
 
<big>Not all user apps will require OAuth (Open Authorization). Consult the app developers documentation for instruction.</big>
  
#<big>After saving your user app code, select the '''Enable OAuth''' button and then '''Update''' to automatically generate the keys</big>.[[File:Enable OAuth 2.0.png|none|thumb|600x600px|link=https://docs.hubitat.com/images/d/d4/Enable_OAuth_2.0.png
+
#<big>After saving your user app code, select the '''Enable OAuth''' button and then '''Update''' to automatically generate the keys</big>.[[File:Enable OAuth 2.0.png|none|thumb|600x600px|link=https://docs.hubitat.com/images/d/d4/Enable_OAuth_2.0.png |alt=If a custom app requires OAuth, which stands for (Open Authorization), an OAuth button will become available after the custom apps code has been saved. The OAuth button will be located third from the right at the top of the custom apps code page. Pressing the OAuth button will open a pop-up window. In the OAuth pop-up window, there is an "Enable OAuth in App" button at the top-left of this pop-up window. Pressing this button will generate an Open Authorization key for the custom app. Press the "Update" button at the lower right of the pop-up window.]][[File:OAuth initial dialogue 2.0.png|none|thumb|600x600px|link=https://docs.hubitat.com/images/6/63/OAuth_initial_dialogue_2.0.png |alt=If it becomes necessary to update the OAuth keys for a custom app which required Open Authorization, press the OAuth button located third from the right at the top of the custom apps code page. Pressing the OAuth button will open a pop-up window. In the OAuth pop-up window, press the "Update" button at the lower right of the pop-up window.]]
]][[File:OAuth initial dialogue 2.0.png|none|thumb|600x600px|link=https://docs.hubitat.com/images/6/63/OAuth_initial_dialogue_2.0.png
 
]]
 
  
 
*<big>If your client secret key becomes compromised, you may refresh it to protect the OAUTH2 endpoint security.</big>
 
*<big>If your client secret key becomes compromised, you may refresh it to protect the OAUTH2 endpoint security.</big>
**<big>To refresh the client secret, open your user app code, select OAuth and check to box for '''Refresh Client Secret''', the select '''Update'''</big>[[File:OAuth refresh client secret 2.0.png|none|thumb|600x600px|link=https://docs.hubitat.com/images/2/26/OAuth_refresh_client_secret_2.0.png
+
**<big>To refresh the client secret, open your user app code, select OAuth and check to box for '''Refresh Client Secret''', the select '''Update'''</big>[[File:OAuth refresh client secret 2.0.png|none|thumb|600x600px|link=https://docs.hubitat.com/images/2/26/OAuth_refresh_client_secret_2.0.png |alt=If your client secret key becomes compromised, you may refresh it in order to protect the OAuth 2 endpoint security. To refresh the client secret, press the OAuth button located third from the right at the top of the custom apps code page. Pressing the OAuth button will open a pop-up window. Just below the Client Secret field, select the check box for Refresh Client Secret, then press the Update button at the bottom of the OAuth pop-up window.]]
]]
 
  
 
'''<big>Loading Your User Developed App</big>'''
 
'''<big>Loading Your User Developed App</big>'''
Line 36: Line 29:
  
 
#<big>Select '''Apps''' from the sidebar.</big>
 
#<big>Select '''Apps''' from the sidebar.</big>
#<big>Select the '''+Add User App''' button.</big>[[File:Install Saved User App 2.0.png|none|thumb|600x600px|link=https://docs.hubitat.com/images/2/2a/Install_Saved_User_App_2.0.png
+
#<big>Select the '''+Add User App''' button.</big>[[File:Install Saved User App 2.0.png|none|thumb|600x600px|link=https://docs.hubitat.com/images/2/2a/Install_Saved_User_App_2.0.png |alt=With your user app code saved, press the "Add User App" button, which is second from the right at the top of the Apps page]]
]]
+
#<big>Find your ''User App'' in the list and select it to instantly add it.</big>[[File:Install user app list 2.0.png|none|thumb|600x600px|link=https://docs.hubitat.com/images/c/c7/Install_user_app_list_2.0.png|alt=After pressing the "Add User App" button, a pop-up window labelled "Install New User App" will appear. Press the custom app in the list you want to install]]
#<big>Find your ''User App'' in the list and select it to instantly add it.</big>[[File:Install user app list 2.0.png|none|thumb|600x600px|link=https://docs.hubitat.com/images/c/c7/Install_user_app_list_2.0.png]]
 
  
 
<big>That's it! You're all set to create glorious home automations with your new app.</big>  
 
<big>That's it! You're all set to create glorious home automations with your new app.</big>  
  
 
*<big>Don't forget to thank the developer in the community forum for their hard work.</big>
 
*<big>Don't forget to thank the developer in the community forum for their hard work.</big>

Revision as of 19:55, 21 April 2021

Go to the top of the page

The Hubitat community has developed some great apps to help you automate your devices in new, cool ways.

Installing custom apps

  1. The developer of the app will normally post a link to their app code. Follow their directions to get to the source code.
  2. Typically developers will use GitHub to host code. When copying the code, choose the RAW button so that you are getting the raw form of the code, with no HTML formatting.
    Located at the top of the GitHub window for the code you want to copy, there is a button labelled "RAW". This will ensure you are copying the raw form of the code, with no HTML formatting.
  3. Select All the raw code, and then Copy the code.
  4. From the home page of your hub, select Apps Code in the side bar.
  5. Select the +New App button in the upper right corner of the Apps Code page.
    The button to create a new custom app is located at the top-right of the "Apps Code" page on your hub
  6. In the blank text field, paste the code. Alternatively, you can select the Import button and past a URL to the developers code in raw text format.
    Pressing the "Import" button at the top of the custom App code page will allow you to enter the URL which points directly to the URL of the developers code in raw text format
  7. Select the Save button in the top right. When modified goes away, your app is saved.
    When first pasting or importing new custom apps code, or when making any change to existing custom apps code, "Modified" will be shown to the left of the "Import" button at the top of the custom apps code page. Save the code by pressing the "Save" button. The "Save" button is fourth from the right, at the top of the custom apps code page.

You may experience an error in this step. If you do, your app will not save and it will not work. Please contact the developer of the app in the Hubitat Community forum. It is usually best if you take a screen shot of the error to help them diagnose the problem. Once the code is fixed, come back and try again.

Enabling OAuth

Not all user apps will require OAuth (Open Authorization). Consult the app developers documentation for instruction.

  1. After saving your user app code, select the Enable OAuth button and then Update to automatically generate the keys.
    If a custom app requires OAuth, which stands for (Open Authorization), an OAuth button will become available after the custom apps code has been saved. The OAuth button will be located third from the right at the top of the custom apps code page. Pressing the OAuth button will open a pop-up window. In the OAuth pop-up window, there is an "Enable OAuth in App" button at the top-left of this pop-up window. Pressing this button will generate an Open Authorization key for the custom app. Press the "Update" button at the lower right of the pop-up window.
    If it becomes necessary to update the OAuth keys for a custom app which required Open Authorization, press the OAuth button located third from the right at the top of the custom apps code page. Pressing the OAuth button will open a pop-up window. In the OAuth pop-up window, press the "Update" button at the lower right of the pop-up window.
  • If your client secret key becomes compromised, you may refresh it to protect the OAUTH2 endpoint security.
    • To refresh the client secret, open your user app code, select OAuth and check to box for Refresh Client Secret, the select Update
      If your client secret key becomes compromised, you may refresh it in order to protect the OAuth 2 endpoint security. To refresh the client secret, press the OAuth button located third from the right at the top of the custom apps code page. Pressing the OAuth button will open a pop-up window. Just below the Client Secret field, select the check box for Refresh Client Secret, then press the Update button at the bottom of the OAuth pop-up window.

Loading Your User Developed App

Once your app has successfully saved, you will need to load it to your hub before you can use it.

  1. Select Apps from the sidebar.
  2. Select the +Add User App button.
    With your user app code saved, press the "Add User App" button, which is second from the right at the top of the Apps page
  3. Find your User App in the list and select it to instantly add it.
    After pressing the "Add User App" button, a pop-up window labelled "Install New User App" will appear. Press the custom app in the list you want to install

That's it! You're all set to create glorious home automations with your new app.

  • Don't forget to thank the developer in the community forum for their hard work.