DEV Community

Cover image for Let's Connect
Bernard Baker
Bernard Baker

Posted on • Updated on

Let's Connect

Category: COVID-19 Communications


COVID-19 continues to spread around the world. Let's stay connected. And make the world a better place.


What I want to build

I want to build a web-based solution that allows people to schedule calls using a calendar to find out how people are.

So people will receive a call at the same time, conveniently and everyone can connect and share their wellbeing with each other.

Using the Twilio conference API and a Google Calendar a person can set up a scheduled call. And call anyone in the world.

This allows a person to reach people anywhere in the world. And reach rural areas where phone coverage may not be as good. Only one person needs to have a smartphone capable of loading a web page. And a Google account to sign in and use the online service.

I wanted to provide the best solution, which was as simple as possible and had the most reach, inclusive of the smaller demographics relating to smartphone ownership.

It's all about connecting everyone. Taking the responsibility of remembering to call everyone. Making it easier. Giving people less to do each day. And in many cases a friendly voice at the other end of the line.


Demo Link

https://lets-connect.xyz


Link to Code

https://github.com/bernardbaker/lets-connect.xyz


How I'm building it (what's the stack? did I run into issues or discover something new along the way?)

Tech stack

  • Netlify
  • G Suite
  • Google Calendar API
  • Twilio
  • Zapier
  • React
  • Node
  • GitHub
  • NPM
  • JavaScript ES6
  • HTML5
  • SCSS

Issues

  • Scheduling a database read.
  • Creating cron jobs on the fly.
  • Finding a way to extract telephone numbers from an event in Google calendar.
  • Integrating a single Zapier โšก with different Google accounts.
  • Getting the twilio-node SDK working correctly. E.g. calling multiple people using a Twilio conference call. Without the person actually making a call to a Twilio number.
  • Setting up Google's API access.

Discoveries

  • Webhooks are available in Zapier.
  • Twilio has good, understandable documentation and quick start guides that lead you to the API for more advanced use cases.
  • Google OAuth verification process is way too long. When you don't provide the information that they request.
  • Google's APIs are really good.

Additional Resources/Info

GitHub handle: bernardbaker

Discussion (37)

bernardbaker profile image
Bernard Baker Author

Clever guy.

I'm currently waiting for a response from Zapier to find out if a use case is possible.

Your comments inspired me to think out of the box about a problem I've recently been aware of in a technical challenge for this hackathon. I'll test it tomorrow.

Collapse
bernardbaker profile image
Bernard Baker Author

day 3

Do some of the things I didn't do yesterday. We've all been there so don't cringe.

Call loved ones #checkin

Read a blog post about node.js app architecture. Thought it might be interesting. Certain implementation details seemed irrelevant, but the structure and content was good.

Plan on reading through a Twilio quick start guide before the sun goes down. Here in the UK we clap for our front line health care workers on a Thursday evening at 8pm #googleit

Going to spend some time reading through comments and entries. Looking forward to seeing what everyone is writing.

Need a ๐Ÿ’‡.

Collapse
bernardbaker profile image
Bernard Baker Author

day 4

Read through a quick start guide for Twilio. Informative and pretty simple to implement.

Also looked at Zapier.com which is primarily an app service integration tool, featuring triggers and actions. E.g. if this happens in app A then do this in app B. Really useful but didn't solve a challenge I face. Then I dug a little deeper and found that it supports web hooks. So I plan on using that to solve a challenge I face.

Twilio support are pretty good. They resolved my issue in two days.

Planning on reading through the Twilio API for phone calls later today.

Will read through some comments now.

Happy hacking everyone ๐Ÿ‹๏ธ

Collapse
bernardbaker profile image
Bernard Baker Author • Edited

day 29

After working on different projects. I found some time to check in with my hackathon entry and look at things that still need to be done.

I recommend that everyone read through the hackathon entry guidelines again and make sure you've completed all the requirements.

When I read through it again I recalled that I need to provide a comprehensive README.md. Not just a project with the README.md as it is.

I also found out that I had a file exposing some credentials.

Found a really handy script ๐Ÿง™ online to remove it from GitHub. Which by the way left my GitHub refs in tatters. So I had to set up remote, pull down my repo' again. And well. Not what anyone would like to see in the morning before the submission deadline.

Link to the article ownyourbits.com/2017/01/18/complet.... #dontuseit

1 day left - it's so exciting....

Collapse
bernardbaker profile image
Bernard Baker Author

day 7

I spent a good part of my evening hacking Twilio. The documentation is good. But I couldn't find a solution or information on how to solve a use-case ๐Ÿ—ฏ๏ธ.

After reading and trying many times โš”๏ธ, looking for ๐Ÿ›. It was apparent that I hand 't made an error, I had simply not added an attribute to twilio-node client API call being made.

I found this challenging and very time-consuming. But I did manage to get it fixed. After joining the community support website, creating a ticket and waiting.....

Waiting..... Waiting..... ๐Ÿ˜ซ. So I reached out to the instant chat option and the support technician helped me sort it out.

And then there is Zapier. Didn't realise that I was using a free account ๐Ÿ˜ฎ. Looks like an upgrade is needed ๐Ÿ’ณ.

But with that being worked on, or completed. You can see what I've been doing and plan on doing here github.com/bernardbaker/twiliohack.... Check out the branches and the issues โšก.

Collapse
bernardbaker profile image
Bernard Baker Author • Edited

day 5

So today I plan to start hacking away at getting a website online using Netlify, creating a repo for the project. Setup GitFlow << info, run through a Twilio quick start, and look into linking a visitor's Google Calendar.

While I do that, it's always advisable to set up a project and issue tracking on GitHub. Follow the development here github.com/bernardbaker/twiliohack....

Made good progress with Twilio today. Got a conference call running and I'm able to add multiple people to the call.

Collapse
bernardbaker profile image
Bernard Baker Author

day 20

I was very excited to get up and work on my project. I was literally up around 6 am. And the first thing I wanted to do was work on the UI ๐Ÿ˜ป.

So what am I working on:

  • the user's journey starting at the sign-in, through to the notification that a call has been scheduled.
  • looking for bugs and edge cases around the flow of the user navigating the app.
  • zapier.com zap not firing.
Collapse
bernardbaker profile image
Bernard Baker Author

day 13

With a recent win in a covidglobalhackathon.com/projects/... being the highlight of my past week ๐Ÿ™‹I feel that my efforts to fight COVID19 around the world are showing results.

And today I plan to configure Zapier to trigger calls for the Let's Connect project. Amongst other things like getting the app verified by Google, a privacy policy, terms of service, acceptable use, etc. There is a fair amount of work to be completed. Those areas have their challenges.

I'll also be doing some training, a CSS course to improve my skills ๐Ÿ“—.

Checking comments, making suggestions and contributing to projects will fill part of my day โœŒ๏ธ.

So to everyone who is taking part. Keep the momentum going and update everyone with your progress ๐Ÿ˜œ.

Collapse
bernardbaker profile image
Bernard Baker Author • Edited

day 27

After grocery ๐Ÿ›๏ธ shopping and my experience of wealth ๐Ÿ’ธ with food plentiful and a number of people less than expected. I returned home, excited to work on my hackathon project.

I've added a basic attempt to reduce the malicious use of the API. And limited the length of time a person can hold a call with loved ones to two minutes. My reason behind this is that as many people as possible should be able to access this service. Not just a few people, at everyone else's expense โค๏ธ.

With only a few days to go. I can't wait to spend an evening reading through the entries to see what everyone has created โŒจ๏ธ.

Collapse
bernardbaker profile image
Bernard Baker Author

day 14

I plan to continue learning from a course I am taking on CSS. It's long. And covers parts of the language that I already know, terminology, semantics and syntax and parts that I don't.

I've re-configured the โšกat zapier.com. It triggers a webhook. And the calls are made.

There are a few bugs that I would like to address that I foresee happening. If someone doesn't answer ๐Ÿ˜•. If someone is called from Twilio while in another conference ๐Ÿ“ต. Maybe send an SMS?? But that's all to be considered at a later date ๐Ÿค”.

So how is everyone doing? Please leave a comment if you read this.

Collapse
bernardbaker profile image
Bernard Baker Author • Edited

day 1

Just signed up and created a Twilo account.

Quick and easy to do. Looking forward to connecting people during COVID-19.

Collapse
bernardbaker profile image
Bernard Baker Author • Edited

day 17

Today I'll be updating the terms of use and policies ๐Ÿ‘ฉโ€โš–๏ธ. Which is required as part of the Google app verification.

Pages that need to be updated:

  • Terms of service
  • Cookie policy
  • Privacy policy
  • Acceptable use policy
  • Acceptable use definitions
  • Sub Processors

I'll also be attending a remote React conference today remote.reactsummit.com ๐Ÿง™๐Ÿฝโ€โ™‚๏ธ.

Collapse
bernardbaker profile image
Bernard Baker Author

day 16

Today I've got to do some updates to be verified by Google ๐Ÿงฐ. Make a new page which has the Google Sign In ๐Ÿญ, which will be a sweet bit of progress for me.

Legal pages need to be done as well. Which is a requirement of Google OAuth policy to be verified.

Heard back from zapier.com โšกmy use case isn't possible. But I've already put a solution in place. Which wasn't too hard, but did require some thinking outside of the box.

Thinking about quotas is relatively simple. I can check before-hand if a person has used the online service, but that has its edge cases ๐Ÿ•ต๏ธโ€โ™‚๏ธ.

Hope everyone is making progress. To hackinity and beyond ๐Ÿš€.

bernardbaker profile image
Bernard Baker Author

GPW? Grand Prize Winner ๐Ÿงš๐Ÿคฉ๐Ÿคธ.
That would be amazing. And all from an idea to help people. Wow!

I saw your Google Code In '19 digital plaque. That's an achievement ๐Ÿคฉ.

Thread Thread
bernardbaker profile image
Bernard Baker Author

I read about the work you did here codein.withgoogle.com/organization....

Impressive work for the improving things in the ๐ŸŒ.

Collapse
bernardbaker profile image
Bernard Baker Author • Edited

day 8

Yesterday I put a demo site online. And went through the Google verification process. I'm still waiting to hear back from a service provider about an integration I want to set up. Haven't heard anything back yet. And sloppy trial and error configuration and coding isn't going to be productive.

And today I'll set up a Google sign in. I've got a package from NPM that I plan on using.

There are plenty of thoughts about how to hack through the different techs and integrations.

Collapse
bernardbaker profile image
Bernard Baker Author

day 9

I plan on taking some time out today.

Got another hackathon project to work on.

And just to relax, meditate and enjoy the sunshine on my face. Through a window of course ๐Ÿ˜ท .

But with the excitement of the hackathon in my veins, it's easy to be lured back to the enjoyment of programming.

What I got done this morning. Setup Google Calendar access, so that events can be read.

What's next โ›ฑ๏ธ... allowing the signed-in user to create an event, schedule it and add the phone numbers that they would like called.

Collapse
bernardbaker profile image
Bernard Baker Author • Edited

day 19

After reading a reply to a comment from Will Cheung I thought of another feature that I could add to my hackathon project.

When a user uses Let's Connect, all the people that they want to contact receive an SMS message letting them know that someone will connect with them at a given date and time. Including the timezone difference if there is one.

And now, back to my daily โš™๏ธ:

  • update the front end to allow a user to add phone numbers from around the world
  • send the request to schedule a call to the API
  • test a โšกin zapier.com

Events are being created in a Google Calendar using the Calendar API. And Zapier is looking for events in the calendar. And I'm now waiting for my phone to ring ๐Ÿคž.

Collapse
bernardbaker profile image
Bernard Baker Author

day 25

Whilst working through a list of things to do today. I did some work on my project for this hackathon and ran into the following problems.

1) UI user journey flow through the application. Fixed a few bugs.
2) zapier.com not firing webhooks. So I'm reaching out to the community for help.
3) Timezone offset for hours was wrong. Debugged the front-end where the date is created.

Hope everyone is really making the effort to help fight COVID19 by participating in this hackathon.

Collapse
bernardbaker profile image
Bernard Baker Author • Edited

day 26

So I found out why my zapier.com zaps aren't working. Because a feature in the zap requires a level-up in my subscription plan. So I upgraded my subscription and I'll be testing shortly.

There are a few things that I want to configure with Twilio regarding making a conference call.

And with 4 days to go before submissions are entered. There is a lot of work to be done.

I hope everyone is making good progress.


And with further investigation I found out that two things were wrong with the project. The zapier.com Webhooks were not configured properly. And an API function was completing before a promise was resolving.

Collapse
bernardbaker profile image
Bernard Baker Author • Edited

day 28

Had some good news from zapier.com.

"Hi Bernard, First, we wanted to let you know how much we appreciate what youโ€™re doing to help fight COVID-19. Everyone at Zapier thanks you from the bottom of our hearts for keeping us all safe. We determined that youโ€™re eligible for our Supporting COVID-19 Responders plan and adjusted your Zapier account to provide a free Starter (750) Plan until December 31, 2020."

With a full day of training tomorrow. I look forward to working on my hackathon project the following day ๐Ÿงก.

Collapse
bernardbaker profile image
Bernard Baker Author • Edited

day 2

Woke up, thought creatively about how I might put my idea together.

Things to consider; if an API isn't available, hack, hack, and hack some more.

What is the best channel to ask questions while researching online to find a plausible answer.

Read through APIs, think.... Think some more, ask questions + @ sum(point) setup public repo on GitHub ๐Ÿง—

Read through comments on Hackathon page, got inspired, got angry, left comment. And I'm open for discussions.

Collapse
bernardbaker profile image
Bernard Baker Author

day 18

Had a headache ๐Ÿ˜ง๐Ÿ’Š๐Ÿ’Štoday so I didn't plan on working on the hackathon. But I simply couldn't resist typing some code.

Or thinking ๐Ÿง about solving a problem, and more importantly what I wanted to achieve by fixing the problem. Not simply wanting it to work.

Learnt a few things about IAM and Service Accounts. Which are ๐Ÿง˜ and make you feel ๐Ÿ’† about things.

Linking the different technologies together wasn't difficult, although reading the documentation.... always comes in handy. At the time I justified my ignorance by telling myself that it's a hackathon.

So now I've connected the React front end, to a Google Sign In. Which retrieves the user data. And the events are being scheduled by a backend service. It's currently writing to the calendar ๐ŸŒฟ.

Next I'll update some web URLs. And after that work on the UI and add the features that allow a person to enter the phone ๐Ÿ“ž numbers of loved ones and people that they want to get in touch with.

bernardbaker profile image
Bernard Baker Author

That's a good point. I only considered what it might be like to win. And went through all the prizes when you mentioned it to me. I did look at others like that ๐ŸŒž.

Thread Thread
bernardbaker profile image
Bernard Baker Author

Guess what?? I won in another hackathon.

Collapse
philnash profile image
Phil Nash

Looking forward to seeing this come together Bernard!

Collapse
bernardbaker profile image
Bernard Baker Author

Thanks!

bernardbaker profile image
Bernard Baker Author
Collapse
bernardbaker profile image
Bernard Baker Author

That's very nice of you ๐Ÿคธ. The concept seems simple. But it's been challenging Vladimir.

I update my daily progress, which everyone can read.

Collapse
bernardbaker profile image
Bernard Baker Author

day 33

Just received an email from Google ๐Ÿ˜ญ. Contacted support ๐Ÿง. Problem solved ๐Ÿคธ.

bernardbaker profile image
Bernard Baker Author

Thank you ๐ŸŒž