Me: The sky is not the limit ☁️

Stranger: Pics or I don’t believe you 🙄

Based on the above conversation, I’m going to show you how to get NASA’s highly coveted Astronomy Picture of the Day (APoD) with Standard Library 🌑 ⭐️

If you’re not familiar with Standard Library, we’re a serverless platform that enables everyone (yes, everyone! Calling all PMs, designers, marketing teams, sales people, oh and engineers… 🙋) to build, ship, and integrate scalable APIs in a matter of seconds. With the help of our online text editor, Code.xyz, you can do all of this right from your browser.

Requirements

• Standard Library account (free)
• NASA API key (free)

Standard Library provides a plethora of API templates that are readily usable. In order to retrieve the APoD API template, go to Code.xyz and search for astronomy-picture-of-the-day by @eileenzhong 💁

Name your API:

One last step before sending the APoD to your phone!

You’ll need to properly configure the env.json file. You’ll notice that there are two sets of variables; however, we will be deploying our code to the dev environment, so we will only need to provide the dev variables.

First, insert your Standard Library library token (STDLIB_LIBRARY_TOKEN):

Then, insert your NASA API key. When finished, your env.json file should look like this:

That’s all the setup you have to do!

To run the program, click “Debug” to bring the parameter input area into view. Enter your phone number, including the country code:

When you click “Run”, you’ll receive NASA’s astronomy picture of the day! 🚀

That’s not even the coolest part.

We don’t want to click “Run” every single day to get this text delivered to our phone. Thankfully, Standard Library has a task scheduler where you can customize a schedule to automagically invoke your newly created API.

In Code.xyz, click the “Tasks” tab. You can then enter a phone number and customize a schedule to your liking:

Suggestion: schedule the task to execute once a day since APoD is an acronym for astronomy picture of the day, and hence, the picture won’t change throughout the day.

When you’re happy with the settings, click the blue “Schedule Task” button to schedule your API.

That’s it! If you know one ☝️, two ✌️, or five 🖐 other people who would appreciate a daily astronomy picture, you can schedule a different task (one for each phone number) for all of them.

Bonus section

If you’ve made it this far, you deserve a reward 🌈 Now, don’t get too excited (actually — do get excited 🙃). With just 2 more lines of code, you can send your friend a random quote along with the APoD!

We’ll be using WordPress’s API to pull a randomized quote: http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1.

Don’t worry about all the RegEx (regular expressions) sitting on line 12. The WordPress API just returns some HTML tags that won’t play nicely in an MMS 📱

Alternatively, you can just replace the value of the quote variable with any chunk of text you’d like to send your friend: const quote = "Hi friend."

Enjoy!

Text Yourself the NASA Picture of the Day with Standard Library and Node.js was originally published in HackerNoon.com on Medium, where people are continuing the conversation by highlighting and responding to this story.

If you’re a subreddit moderator, chances are you’ve received requests from community members to delete an inappropriate comment or ban an ill-mannered user. But it’s 2018 going on 2019 — we’re in the midst of the biggest tech era and spoiled with things like AI, automation and bots. We no longer need to perform menial tasks like monitoring subreddits. Together, we’re going to build a Reddit bot that will automatically check a subreddit for flagged comments in 3 easy steps.

Whether you have no programming knowledge or 15 years of professional experience, you’ll be able to deploy this bot with Standard Library, the API development and hosting platform, in under 10 minutes.

If you’re not familiar with Standard Library, we’re a serverless platform that enables everyone (yes, everyone! Calling all PMs, designers, marketing teams, sales people, oh and engineers… 🙋) to build, ship, and integrate scalable APIs in a matter of seconds. With the help of our online editor, Code.xyz, you can do all of this right from your browser.

Requirements

• Reddit moderator account (for the subreddit you’d like to monitor)
• Standard Library account (free)

Step 1: Get the Reddit bot template

Estimated time: 30 seconds

Head over to Code.xyz in your browser and select reddit-moderator-bot by @eileenzhong (that’s me! 🤓👋) in the Community API Sources tab:

Name your API:

Once done, you’ll conveniently land in Code.xyz (Standard Library’s in-browser text editor) with the Reddit bot project code.

Step 2: Copy and paste

Estimated time: 2-5 minutes

This next step involves expert knowledge of the copy-and-paste skill to set some required environment variables. You’ll notice there are three sets of variables listed in your env.json file: local, dev, and release. We’ll be deploying our code to the dev environment, so we only need to worry about the dev variables for this tutorial!

All fields are found in env.json:

To retrieve your STDLIB_LIBRARY_TOKEN, right click between the quotation marks and select “Insert Library Token…”:

Keys prefaced withREDDIT_-* can be found on Reddit (REDDIT_USERNAME and REDDIT_PASSWORD are your moderator account’s username and password, respectively).

If you don’t already have a Reddit app, register for one here with your moderator account:

Copy the REDDIT_CLIENT_ID and REDDIT_SECRET_KEY:

Paste both into env.json:

When your env.json file is properly filled out like the above screenshot, the bot is ready for some preliminary testing.

Fill out the required parameters (definitions and screenshots below):

Parameter definitions

subreddit: the name of the subreddit you are moderating
threshold: what score do you want the comment to have in order to perform the requested action? 
allowBanPermission: true (allow ban requests) / false (ignore ban requests)

Then click the “Run” button, which will do 2 things: deploy the API and execute it.

Congratulations, your bot is live! 😎 🎉 🎊

When you hit “Run”, your bot scanned through your subreddit for any comments flagged with !delete or !ban and reacted accordingly by starting a vote!

Step 3: Set it and forget it

Estimated time: 1 minute

Now, the final step is to set a task to automate this process and have your bot check your subreddit every few minutes for flagged comments. You can do this in Code.xyz by scheduling a task, which will automatically execute the API you just created according to a schedule of your choosing.

Suggestion: depending on subreddit traffic, you might increase or decrease the frequency of bot invocation. A good start is to have the bot do a scan once every 5 minutes.

Once you click the “Schedule Task” button in the bottom right corner, your Reddit bot will scan r/{subreddit} to reply to any new !ban/!delete requests and perform these tasks on any comments that meet the score threshold according to the schedule you have chosen.

That’s it! 🌟

Build a Reddit Moderator Bot With Standard Library + Code.xyz in 10 Minutes was originally published in DailyJS on Medium, where people are continuing the conversation by highlighting and responding to this story.

Thankfully, I’ve successfully integrated Intercom with a React Native project and can hopefully provide you a painless “how to” guide. I’m writing this tutorial a while after installation… so feel free to message me at any time if you feel there is information that I may have forgotten.

To start this off, (obviously) make an Intercom account and create an app. You’ll be issued an API key and an App ID.

The skeleton of all this is react-native-intercom, a great wrapper library to get us started in the sort-of gnarly web of native+JS code. Just kidding, it’s not that bad.

First, npm install this package and run react-native link. That’s it for the JS stuff. We’ll come back to this later.

iOS

1. Download Intercom for iOS
2. Open up XCode. Drag Intercom.framework to the “Embedded Binaries” section and select “Copy items if needed” to finish.
3. In your app’s target’s “Build Phases”, find the “Run Script Phase” section and copy and paste: bash "${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}/Intercom.framework/strip-frameworks.sh". This script is needed if you’re planning on submitting this to the App Store.
4. Add NSPhotoLibraryUsageDescription to your Info.plist to explain to Apple why it is necessary for this app to have image upload functionality… #ohApple. Personally, I just put “Send photos to help resolve app issues”… duh
5. Finally. Let’s get into the code.

In AppDelegate.m:

#import "Intercom/intercom.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [Intercom setApiKey:@"YOUR-API-KEY" forAppId:@"YOUR-APP-ID"];
    [Intercom registerUnidentifiedUser];
}

Go to Intercom to finish registering your iOS application. Once you’re on the Intercom dashboard, head to your App settings (found in Settings > App Settings) and under the Installation section, click on iOS. Here, you can customize how you want the chat interface to look like (colors, patterns, etc.). Once you click through this, it will tell you to refresh your app after all of the code has been injected properly. When you do a rebuild via XCode or your terminal, you’ll get a congratulatory pop-up from Intercom notifying you that you have successfully finished setting Intercom up.

(Optional) Push notifications

I’m going to assume you already have push notifications setup with your app.

• Launch “Keychain Access” on your computer and find the iOS push certificate for your application. Once you do, expand it and export the 2 items.

• Next, create a PEM file from the .p12 you just exported. In your terminal, navigate to the directory the .p12 is saved in and run this command: openssl pkcs12 -in FILENAME.p12 FILENAME.pem -nodes
• Awesome! Now you have the PEM file. Upload it to Intercom like so:

Finally, in AppDelegate.m:

- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
  [Intercom setDeviceToken:deviceToken];
}

Android

First, add this dependency to app/build.gradle:

dependencies {
    compile project(':react-native-intercom')
}

Then, install Intercom via 1 of 3 options: Google Cloud Messaging (GCM), Firebase Cloud Messaging (FCM), or without push notifications. If you want push notifications, follow either installation with GCM or FCM. Depending on which one of the 3, you’ll add different dependencies to your app’s build.gradle file:

// GCM
dependencies {
    compile 'io.intercom.android:intercom-sdk:3.+'
}
  
// FCM
dependencies {
    compile 'io.intercom.android:intercom-sdk-base:3.+'
    compile 'io.intercom.android:intercom-sdk-fcm:3.+'
}

// No push
dependencies {
    compile 'io.intercom.android:intercom-sdk-base:3.+'
}

In MainApplication.java:

import com.robinpowered.react.Intercom.IntercomPackage;
import io.intercom.android.sdk.Intercom;

@Override
protected List<ReactPackage> getPackages() {
 return Arrays.<ReactPackage>asList(
   new IntercomPackage()
 )
};

@Override
  public void onCreate() {
    super.onCreate();
    Intercom.initialize(this, "YOUR-API-KEY", "YOUR-APP-ID");
}

As with before, navigate back to Intercom to finish registering your Android application. When you build via Android Studio and run the app in the emulator, you’ll get a congratulatory pop-up notifying you of a successful setup.

(Optional) Push Notifications

I set up push notifications with GCM, but if you are going with FCM, it’s a similar protocol :)

First, go to Google Developers Page to set up Google services for your application.

If you do not already have an application listed/registered, you can add one with a specified app name and the package name of your Android app:

Once you click the blue “Continue to Choose and configure services", you’ll be presented with two important pieces of data: your server API key and your sender ID.

The server API key will go into the Intercom Android “Enable Push Notifications” section:

The sender ID will go into your app’s res/values/strings.xml:

<string name="intercom_gcm_sender_id">YOUR_SENDER_ID</string>

JAVASCRIPT!!

And now… to unravel the magic in JavaScript.

In whichever component you desire…

import React, { Component } from 'react';
import Intercom from 'react-native-intercom';

class IntercomExample extends Component {
    componentDidMount() {
        Intercom.registerForPush();   
        Intercom.addEventListener(
        Intercom.Notifications.UNREAD_COUNT, this._onUnreadChange);       
    }

    componentWillUnmount() {
        Intercom.removeEventListener(
        Intercom.Notifications.UNREAD_COUNT, this._onUnreadChange);      
    }

    componentWillMount() {
      Intercom.handlePushMessage();
    }

    _onUnreadChange = ({ count }) => {
        console.log(count);    
    }

    render() {
        // code code codez
    }

}

And there you have it! Intercom fully integrated into your application.

Feel free to message and/or leave a comment if you need help setting up Intercom. I’m also open to suggestions on improvements (whether that’s for writing tutorials in the future or regarding this post)! Cheers!

Per Facebook’s docs, "sometimes an app needs access to a platform API that React Native doesn't have a corresponding module for yet." Unfortunately, React Native doesn’t have a corresponding module for Amplitude. With that being said, this tutorial serves to help you integrate Amplitude easily into your app. :)

First things first…

1. Register for an account on the Amplitude website
2. Retrieve your API Key

iOS

With iOS, we’ll be building via Xcode and bridging JavaScript with native code (obj-C).

In AppDelegate.m, we’ll be initializing our API key so we don’t have to initialize it in every file that uses Amplitude:

#import "Amplitude.h"

... didFinishLaunchingWithOptions: (NSDictionary *) launchOptions {

// your code here

  [[Amplitude instance] initializeApiKey:@"insertyourapikeyhere"];

// your code here

}

You will be adding two files to YourApp/ios (RNAmplitude.h and RNAmplitude.m):

RNAmplitude.h

#import "RCTBridgeModule.h"

@interface RNAmplitude : NSObject <RCTBridgeModule>
@end

RNAmplitude.m

#import "RNAmplitude.h"
#import "Amplitude.h"
#import "AMPIdentify.h"

@implementation RNAmplitude

RCT_EXPORT_MODULE();

- (dispatch_queue_t)methodQueue {
 return dispatch_get_main_queue();
}

RCT_EXPORT_METHOD(initializeApiKey:(NSString *)apiKey) {
 [[Amplitude instance] initializeApiKey:apiKey];
}

RCT_EXPORT_METHOD(setUserId:(NSString *)userId) {
 [[Amplitude instance] setUserId:userId];
}

RCT_EXPORT_METHOD(setUserProperties:(NSDictionary *)properties) {
 [[Amplitude instance] setUserProperties:properties];
}

RCT_EXPORT_METHOD(logEvent:(NSString *)eventwithProperties:(NSDictionary *)properties) {
 [[Amplitude instance] logEvent:eventwithEventProperties:properties];
}

@end

And that’s it! You’ve just added Amplitude to your iOS app.

Android

With Android, we’ll be adding code to existing Java files in the project.

In build.gradle, add this line of code:

compile 'com.amplitude:android-sdk:2.13.0'

In your manifest file, add:

<uses-permission android:name="android.permission.INTERNET" />

You will need to add 2 files, RNAmplitude.java and RNAmplitudePackage.java, to your project:

RNAmplitude.java

package com.YourApp;

import com.amplitude.api.Amplitude;
import android.app.Activity;
import android.app.Application;

import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.bridge.ReadableMapKeySetIterator;
import com.facebook.react.bridge.ReadableType;

import org.json.JSONException;
import org.json.JSONObject;

import java.util.Map;

import java.io.*;

public class RNAmplitude extends ReactContextBaseJavaModule {
 private Activity mActivity = null;
 private Application mApplication = null;

 public RNAmplitude(ReactApplicationContext reactContext,  
 Application mApplication) {
   super(reactContext);
   this.mActivity = getCurrentActivity();
   this.mApplication = mApplication;
 }

 @Override
 public String getName() {
   return "RNAmplitude";
 }
 
 @ReactMethod
 public void initialize(String apiKey) {
  Amplitude.getInstance().initialize(getCurrentActivity(), 
  apiKey).enableForegroundTracking(this.mApplication); 
 }

 @ReactMethod
 public void logEvent(String identifier, ReadableMap properties) {
   try {
      JSONObject jProperties = 
      convertReadableToJsonObject(properties);
      Amplitude.getInstance().logEvent(identifier, jProperties);
   } catch (JSONException e) {
      return;
   }
 }

 @ReactMethod
 public void setUserId(String id) {
   Amplitude.getInstance().setUserId(id);
 }

 public static JSONObject convertReadableToJsonObject(ReadableMap 
 map) throws JSONException {
   JSONObject jsonObj = new JSONObject();
   ReadableMapKeySetIterator it = map.keySetIterator();

   while (it.hasNextKey()) {
      String key = it.nextKey();
      ReadableType type = map.getType(key);

      switch (type) {
         case Map:
            jsonObj.put(key, 
            convertReadableToJsonObject(map.getMap(key)));
            break;         
         case String:
            jsonObj.put(key, map.getString(key));
            break;
         case Number:
            jsonObj.put(key, map.getString(key));
            break;
         case Boolean:
            jsonObj.put(key, map.getString(key));
            break;
         case Null:
            jsonObj.put(key, map.getString(key));
            break;
       }
   }
   return jsonObj;
 }

}

RNAmplitudePackage.java

package com.YourApp;

import android.app.Activity;
import android.app.Application;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.*;
import java.io.*;

public class RNAmplitudePackage implements ReactPackage {

   private Application mApplication = null;

   public RNAmplitudePackage(Application application) {
      mApplication = application;
   }

   @Override    
   public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
      List<NativeModule> modules = new ArrayList<>();
      modules.add(new RNAmplitude(reactContext, this.mApplication));
      return modules;
   }

   @Override    
   public List<Class<? extends JavaScriptModule>> createJSModules() 
   {
        return Collections.emptyList();
   }

   @Override    
   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) 
   {
        return Collections.emptyList();
    }

}

In MainApplication.java:

@Override
protected List<ReactPackage> getPackages() {
 return Arrays.<ReactPackage>asList(
   new MainReactPackage(),
   new RNAmplitudePackage(this),
 )
};

Since I initialized my api key in native code in my iOS counterpart, I’m going to be consistent and initialize my key in native code for Android. Thus, in MainActivity.java, I’m going to add the following line to onCreate():

Amplitude.getInstance().initialize(this, "insertyourapikeyhere");

Finally, the moment we’ve all been waiting for…

In your .js/.jsx files:

import { NativeModules } from 'react-native';
import { RNAmplitude as Amplitude } from 'NativeModules';

// To use Amplitude:
// Amplitude.logEvent("Some event", { "JSON Key" : "JSON Value" });

Noteworthy: you want to keep the package name and associated methods the same across obj-C and java code. That way, when you import the module into your JavaScript files, you won’t need any code or logic to differentiate between Android and iOS!

Have fun, and code on.

Feel free to ping me at ejzhong@berkeley.edu if you need help getting Amplitude amp’d up #NoPunIntended

What if I told you that you can update your CSS and see the changes simultaneously? Yes, it is possible.

Simply open up your dev tools, load your working directory into the sources panel workspace, and watch the magic happen. Here are the step-by-step instructions:

Yup, that’s all. Now you can do all CSS-related code in the styles pane right in the browser and your .css file will automatically update as well.

Style on!