Build a Javascript Slack App

A Summary of the Official Building a Bolt JS App

  1. Create a new slack app in the apps portal.
  2. Go to Basic Information page in the apps portal and install the app in your Slack instance.
  3. To edit and host the code for your slack app: Create a Glitch app from Slack’s template.
  4. Copy the signing secret and the Bot token from Basic Information and OAuth pages in the apps portal into your glitch app’s .env file.
  5. Go to Event Subscriptions in the apps portal and add app_home_opened.
    1. request_url for glitch apps is https://YOUR_APP_NAME.glitch.me/slack/events.
    2. Add bot event app_home_opened. Save changes.
  6. Go to your app’s “home” page in the Slack app. You should see the example text and button from the code in Glitch.
  7. You can now use shortcuts, listen for events, post messages, and more with the bolt js framework. To try one, just replace the example “app.home.opened” function.
  8. Each of the functions above has listener functions for interacting with Slack. 

Add a Shortcut in a Bolt JS Slack App

  1. Go to your app’s Interactivity page in the apps portal.
    1. request_url for glitch apps is https://YOUR_APP_NAME.glitch.me/slack/events.
    2. Name is whatever you want showing up in the Slack app.
    3. callback_id is your function name that you will use in your code.
  2. In glitch, add the code from https://slack.dev/bolt-js/concepts#shortcuts.
  3. That’s it. To add more functionality to your shortcut, check out https://github.com/slackapi/bolt-js#making-things-happen.
slack shortcut example
slack shortcut example

Parse Quick Start for iOS Swift 3 and Xcode 8

So now that you set up a free Parse server on Heroku using my previous guide you might be wondering how to start using it in your iOS project. Checking the main Parse documentation shows a bunch of Objective-C, which isn’t helpful if you’re using Swift 3.

Here are the steps I gathered from perusing the web and some testing:

  1. Install Parse libraries (SDK/Framework).
    1. I prefer cocoapods to maintain to a single standard and since so many other frameworks use it.
    2. Create ‘Podfile‘ file in the xcode project folder with the following contents:
      source 'https://github.com/CocoaPods/Specs.git'
      platform :ios, '10.0'
      use_frameworks!
      
      target 'PROJECT_NAME' do
        pod 'Parse'
      end
    3. Run ‘pod install‘ in terminal in the same directory as the Podfile.
  2. Connect your Swift 3 app to Parse server.
    1. Import Parse framework by adding ‘import Parse‘ at the top of ‘AppDelegate.swift‘ file.
    2. In ‘AppDelegate.swift‘ under function ‘application(… didFinishLaunchingWithOptions …)‘ add the following code:
      let configuration = ParseClientConfiguration {
      	$0.applicationId = "YOUR_PARSE_APP_ID"
      	$0.clientKey = "YOUR_PARSE_CLIENT_KEY"
      	$0.server = "https://PARSE_SERVER_NAME.herokuapp.com/parse"
      }
      
      Parse.initialize(with: configuration)
      
  3. Test Parse server connection.
    1. Import Parse framework by adding ‘import Parse‘ at the top of ‘ViewController.swift‘ file.
    2. In ‘ViewController.swift‘ file, add the following code under function ‘ViewDidLoad‘:
      let testObj = PFObject(className: "testObj")
      testObj["foo"] = "bar"
      testObj.saveInBackground()
    3. You should see the new object in your Parse Dashboard.

Notes/Troubleshooting

If XCode can’t find the Parse module with the import command after you open the new .xcworkspace file, try the following:

  • Press Command+Option+Shift+K and then Run your app.
  • Or from the menu -> Product, press Option on your keyboard and you’ll see Clean Build Folder.

Free Parse Server on Heroku

Parse Server is a great platform for managing logins and storing data used by your apps in the cloud.

You can install and use parse server on many different cloud hosting providers, but setting up Parse Server on Heroku is one of the few ways you can try out and use it for free.

Additionally you can also install Parse Dashboard on Heroku for managing and viewing data on your Parse Server using a nice GUI.

Sources:

Install Parse Server on Heroku (easy)

  1. Use Heroku’s helpful “deploy to Heroku” link for Parse: https://heroku.com/deploy?template=https://github.com/ParsePlatform/parse-server-example
  2. Type in a unique app name. You will need this in a bit. screen-shot-2016-11-04-at-10-28-34-am
  3. For config variables, change APP_ID and MASTER_KEY to your own unique values. For SERVER_URL change “yourappname” to whatever you picked for your App Name. screen-shot-2016-11-04-at-10-29-51-am
  4. Click the big Deploy button. A helpful build process will be displayed and your parse server should be ready to go in about 1 minute.

At this point you can start using your Parse Server with its standard SDKs and REST interface.

If you had any issues with the automated deployment, you can also use the manual process in the Heroku devcenter source link above. The only thing you will need to do is make sure you set the Master_Key and App_ID by going to your Config Variables under your Heroku app’s Settings tab, and adding “MASTER_KEY” and “APP_ID” variables.

Install Parse Dashboard on Heroku

  1. Install Node.js, Git and the Heroku Toolbelt on your machine.
  2. Run the following commands in your terminal/command line app. You can use whatever options you want for ‘npm init’.
    mkdir my-parse-dashboard
    cd my-parse-dashboard
    git init
    npm init
    npm install --save parse-dashboard

    This will create a git repository for the parse-dashboard code and download the required code.

  3. In my-parse-dashboard directory, create 2 text files (parse-dashboard-config.json and Procfile) to hold configuration data for Parse Dashboard.
    {
      "apps": [
        {
          "serverURL": "https://parse-server38.herokuapp.com/parse",
          "appId": "parseServer38",
          "masterKey": "secretMasterKeySK$%@F09292",
          "appName": "My Parse Server App"
        }
      ],
      "users": [
        {
          "user":"user1",
          "pass":"securePass281"
        }
      ]
    }

     

    web: ./node_modules/.bin/parse-dashboard --config ./parse-dashboard-config.json --allowInsecureHTTP

     

  4. Commit all files to your git repository.
    git add package.json Procfile parse-dashboard-config.json
    git commit -m "Initial Commit"

     

  5. Push repository to Heroku.
    heroku login 
    heroku create
    git push heroku master

     

  6. Deploy app in free tier and open it.
    heroku ps:scale web=1
    heroku open

     

  7. Use the username and password from the config file to login to Parse Dashboard.

You should now be able to use a GUI to view and manage your Parse Server.

Notes and Potential Errors

  • Parse Dashboard: Application suffered an error. Check Logs.
    • Use heroku logs command in terminal to view logs.
    • This happened to me due to an error in parse-dashboard-config.json. Make sure all fields match what you configured when setting up Parse Server heroku app and look up syntax for further reference.
  • Parse Dashboard: “Server not available” for Parse Server App.
    • Occurred when I put in HTTP instead of HTTPS in the serverURL field in parse-dashboard-config.json.
  • Use the following commands after making changes in parse-dashboard-config.json.
    git add parse-dashboard-config.json
    git commit -m "updated blah blah"
    git push heroku master

     

Google Maps SDK and APIs using Swift 3 / Xcode 8

While trying out the Google Maps SDK on iOS and Google Maps Directions API I noticed that Google’s Getting Started code hasn’t been updated for Swift 3. Here are the changes required to get the code to work.

Google Maps SDK

  1. Follow first 3 steps (install latest xcode, install sdk, get api key) at https://developers.google.com/maps/documentation/ios-sdk/start.
  2. Create a single view application in Xcode. For viewDidLoad() function in ViewController.swift, add the following code. Note: I decided to include the API key under viewDidLoad() for simplicity.
    GMSServices.provideAPIKey("YOUR_API_KEY")
    
    let camera = GMSCameraPosition.camera(withLatitude: -33.868,
          longitude:151.2086, zoom:6)
    let mapView = GMSMapView.map(withFrame: CGRect.zero, camera:camera)
    let marker = GMSMarker()
    
    marker.position = camera.target
    marker.snippet = "Hello World"
    marker.appearAnimation = kGMSMarkerAnimationPop
    marker.map = mapView
    
    self.view = mapView
  3. Run the app. You should see a map with a single marker centered over Sydney, Australia. If you click on the marker, you should see the text “Hello World” above it. If you see the marker, but the map is not visible, confirm that you have provided your API key.

screen-shot-2016-10-14-at-12-28-09-pm

Google Maps Directions API

I decided to use Alamofire iOS library to make HTTP requests to the Google Maps Directions API as it makes it much easier than the built-in Swift methods.

  1. Use Alamofire installation instructions here: https://github.com/Alamofire/Alamofire. I went with the CocoaPods method as it was what Google Maps SDK used and it worked well for me.
  2. Get an API key for Google Maps Directions API here: https://developers.google.com/maps/documentation/directions/ (about halfway down the page).
  3. Create a single view application in Xcode. For viewDidLoad() function in ViewController.swift, add the following code.
    Alamofire.request("https://maps.googleapis.com/maps/api/directions/json?" +
                "origin=Disneyland&destination=Universal+Studios+Hollywood4&" +
                "key=YOUR_API_KEY").responseJSON
                { response in
                    print(response.request)  // original URL request
                    print(response.response) // HTTP URL response
                    print(response.data)     // server data
                    print(response.result)   // result of response serialization
                    
                    if let JSON = response.result.value {
                        print("JSON: (JSON)")
                    }
            }
  4. Run the app. You should see the waypoints and directions in the Xcode Console.

screen-shot-2016-10-14-at-12-28-26-pm

HelloWorld Android App in 10 Steps

Finished product.

I was a little annoyed by the fact that the setup of a development environment and the creation of a simple app for the Android system was so spread out all over the place on Android’s developer website, so I decided to write up my own quick guide/tutorial/howto.

Don’t get me wrong, the developer website is great, I just wanted all the steps to installing the environment and creating an app in one place.

These instructions apply whether you’re using a Mac, PC, or Linux. All of the software below is cross-platform.

Please leave a comment if anything is unclear.

1)   If you don’t already have it, download/install JDK.

2)   Download and install Eclipse IDE for Java Developers (any package of Eclipse should be okay though; this particular one was the smallest download).

3)   Download and install the latest version of Android SDK. Continue reading “HelloWorld Android App in 10 Steps”