Free Online GitHub Conference May 6th

Andrew Sverdrup — Wed, 06 May 2020 05:49:16 +0000

GitHub is putting on a free online conference tomorrow (May 6th). The conference starts at 8:30AM Pacific Time. Checkout the schedule and tune in to the sessions that look interesting to you! No registration required.

Link: https://githubsatellite.com/

Twilio App to get COVID-19 Updates

Andrew Sverdrup — Fri, 01 May 2020 03:44:56 +0000

What I built

Category Submission: COVID-19 Communications

I built a Twilio app that sends users the latest COVID-19 statistics for either a state or country.

Demo Link

You can try it out by texting 415-562-0796. Here is a short video demo:

Link to Code

The code is here https://github.com/programming-liftoff/twilio-covid-data/blob/master/twilio-function.js.

I also made a tutorial how this function was used in Twilio to create the complete program https://dev.to/programmingliftoff/build-a-twilio-app-to-get-covid-19-case-counts-gii.

The Stack

I built this using Twilio Functions, Twilio Studio, and this COVID-19 API https://corona.lmao.ninja/docs/.

Build a Twilio App to get COVID-19 Case Counts

Andrew Sverdrup — Fri, 01 May 2020 03:20:42 +0000

This article was originally published on programmingliftoff.com as Build a Twilio App to get COVID-19 Case Counts.

In this tutorial you'll learn how to build a Twilio app that sends users the latest COVID-19 statistics for their state or country. I make a video for this tutorial. You can watch it or scroll down for the written tutorial!

Here's a Demo of What We'll Build

Create a Free Twilio Account

In this tutorial we'll use a free Twilio trial account. If you sign up with my referral link (https://www.twilio.com/referral/upSwBH) you get a $10 Twilio credit when/if you upgrade your trial account to a paid account. You can also sign up without my referral link at https://www.twilio.com/try-twilio.

Get a Phone Number from Twilio

To get a phone number, head to https://www.twilio.com/console/phone-numbers/search. There you can search for a number by digits in the number, or by the location (area code) of the number. Once you click Search, some numbers will be listed. Find one you like and click Buy. There is a $1 monthly fee, but it's covered by the free credits you got when you created your account.

Create a Twilio Studio Flow

Find the Twilio Studio option in the left sidebar, or visit https://www.twilio.com/console/studio/dashboard. Then click Create a flow. Enter a name for the flow, for example 'COVID data'. Choose Start from scratch on the template selection screen. At this point you should be shown a blank studio flow.

In the Widget Library on the right, scroll down to the Messaging section and click-and-drag Send Message onto the canvas. The widget options should be shown on the right. Enter 'SendReply' for the widget name, and enter 'Hello, Twilio!' for the message body, then click Save. Next, drag the dot from the Incoming Message trigger to the 'SendReply' widget. Finally, click Publish in the top right to publish the Studio flow. You've created your first Studio flow!

Run the Studio Flow when a Text is Received

Now that you've created a flow, it's time to test it. Head to https://www.twilio.com/console/phone-numbers/incoming to view the phone number you purchased earlier. Go ahead and send you number a text message. You can send anything you want, such as 'Test'. You should get a preconfigured reply from Twilio. We want our Studio flow to run and send a customized reply when we text it, so we'll set that up now.

Click on your phone number (on the https://www.twilio.com/console/phone-numbers/incoming page). Then scroll to the bottom. In the Messaging section, choose Studio Flow in the A message comes in dropdown. Then on the right, choose the name of the Studio flow you just created. Finally, click Save at the bottom. Now this flow will run whenever your number receives a text message!

Note that 'Sent from your Twilio trial account - ' will be added to the beginning of every message. You can only remove this by adding your credit card to your account, which you can do by clicking the blue 'Upgrade Project' button near the top of the page. It's not necessary to upgrade for this tutorial as long as you don't mind that trial text in the messages.

Create a Twilio Serverless Function

At this point we've setup our Twilio app to send a reply whenever we text it. That's great, but it's always the same reply, which isn't very useful. Remember, our goal is to send the user the latest COVID statistics for whatever state or country they send. To do that, we'll need to run some code that retrieves the COVID data when a text is received. Let's get started creating that function!

Tip: Click the pin icon next to the name of the Twilio service in the left sidebar to make it easier to access.

First use the left sidebar nav to open the Twilio functions section. Click the Create a Function button. Choose the JSON Response template and click Create.

Choose a function name, such as 'Get COVID data'. Enter a path for the function, such as '/covid'. Check the Access Control box to check for a valid Twilio signature when the function is called.

Twilio serverless functions are just like a Google Cloud or AWS serverless function. Anyone can call the function if they know its URL. By checking the Access Control box, you're saying that you only want the function to run if it was called by another Twilio service (in our case that will be the Studio flow). It's smart to lock cloud resources down like this to help prevent abuse.

Leave the Event blank. We'll setup the trigger event in the Studio flow. Finally, change the response object to be: let response = { message: event.location };. Then click Save to save the function.

The event parameter is passed to the function by the Studio Flow. We haven't added the function to the Studio Flow yet, but we'll see how to do that shortly.

Add the Twilio Function to the Studio Flow

Alright, now that we've created a function, let's add it to the Studio flow. Open up the 'COVID data' Studio flow. Then, in the Widget Library on the right, scroll down to the Tools & Execute Code section and click-and-drag Run Function onto the canvas. Then click on that function widget to see the widget options on the right. Update the name to 'GetCOVIDdata' and select the 'Get COVID data' function in the Function URL dropdown. Also click the + next to Function Parameters and add location as the key and {{trigger.message.Body}} as the value, then click Save.

The function parameters are added to the event object that we saw earlier in the function definition. We set the value equal to a template string, which is the body of the incoming text message.

Next update the Incoming Message trigger to call the function rather than the 'SendReply' widget (drag the end of the end of the Incoming Message arrow from 'SendReply' to the function). Then drag the dot from the function Success state to the 'SendReply' function. Finally, click on the 'SendReply' widget and change the message body from 'Hello, Twilio!' to {{widgets.GetCOVIDdata.parsed.message}} and click Save to save that change to the widget.

{{widgets.GetCOVIDdata.parsed.message}} is a template string. widgets.GetCOVIDdata.parsed returns a JSON object with the response from the 'GetCOVIDdata' function. Since we updated the function response to { message: event.location }, the template string will be replaced with the location parameter, which is the body of the text message that the user sent. That means that currently this will echo the users text message back to them!

Click Publish in the top right to publish the changes to the Studio flow. It should now look similar to the image below:

Now that we've created our serverless function and added it to the Studio flow, let's test to make sure it's working. If you send a text to your Twilio number, you should now get a reply with the same message you sent. If so, you're ready to tackle the last challenge in this tutorial, updating the function to fetch and return the COVID data for the location texted to it.

Completing the COVID Data Function

Update the Twilio function with the contents of the following gist. It's explained in more detail below.

One important thing to note is that we've made the handler function async. This is because we use await for the api call. We get the location from the event param as we did before, this time adding trim() to remove any whitespace. Next we check if the location is in the states array. If it is we make a request to the /states/<location> API route. If not we assume it's a country and make a request to the /countries/<location> API route.

Docs for the COVID-19 API we're using can be found here https://corona.lmao.ninja/docs/.

If the API request is successful we get the cases and deaths from the response data object and use it to construct a message to return via the callback function. If there is an error we update the message with a generic error message and pass that to the callback. Be sure to Save the function!

Since the Studio Flow already sends the message as the reply we don't need to update that, however there is one more update we need to make before the function will work. You may have noticed we imported axios at the top of the function. axios isn't accessible to the function by default, but we can add that node module. With the Functions option open, click Configure in the left sidebar and scroll down to the Dependencies section. Click the red/white + button and in the new line that is added, enter axios as the name and 0.19.2 (currently the latest version) as the version. Click Save and your function will be re-deployed with that dependency!

You did it!

If you've made it this far, you've successfully created a text message service with Twilio that replies with the latest COVID-19 data for the location sent by the user. Great job! It's really neat how you can create a text message service like this relatively easily with Twilio Studio and Twilio Functions. These tools do take some time to learn and get comfortable with, but once you know how to use them you've got some really powerful tools at your disposal.

How to deploy a Create React App Website to GitHub Pages

Andrew Sverdrup — Mon, 24 Feb 2020 00:08:47 +0000

In this video we'll create a website using Create React App and deploy it as a static site to GitHub Pages! Best of all, we'll do all this for free and in less than 10 minutes! Once you deploy your site, post the link to it in the comments to share it with others!

Checkout our website at https://programmingliftoff.com for more awesome tutorials.

Thanks for watching,

Andrew

Free access to Pluralsight this weekend (2/7-2/9 2020)

Andrew Sverdrup — Sat, 08 Feb 2020 21:45:36 +0000

Pluralsight is offering free access to all of their courses this weekend! This is a great opportunity to browse multiple courses to see which ones you like, or dive deep into a course and try to learn as much as you can. Comment below with what programming language or topic you are going to learn more about this weekend!

Here is the link: https://www.pluralsight.com/offer/2020/february-free-weekend

Attend a FREE Frontend Coding Conference!

Andrew Sverdrup — Sun, 08 Dec 2019 02:53:24 +0000

I recently heard about a free online conference for web developers called backendlessconf_. It's hosted by ZEIT (zeit.co) and their CEO Guillermo Rauch will be speaking at it along with many others. I heard a great talk from Guillermo Rauch a few weeks ago at the GitHub Universe conference in San Francisco, so I'm looking forward to attending a conference that he has helped put together.

The conference is happening next Saturday December 14th (2019). You can register for it (for FREE!) here: https://backendlessconf.com/.

This will be my first online conference so I'm not sure how it will compare to an in-person conference. If you've attended an online conference before I'd love to know what you thought of it (and what conference it was). Feel free to leave a comment with your experiences!

DEV Community: Andrew Sverdrup