Build a Google Firebase Web Application (Coursera)

Development, Google

I want to improve my Firebase skills, so I’ve started the Build a Google Firebase Web Application course on Coursera.

I’ve had to fix a problem halfway through – the instructor’s video shows one link in Firebase to “Database”, but the current version of Firebase splits the options into two – “Firestore Database” and “Realtime Database”.

Worse yet, the firebaseConfig object automatically created when setting up the project does not include a databaseURL property needed by firebase.initializeApp(firebaseConfig), causing the script to throw an error when run:

[2022-04-30T17:23:35.218Z]  @firebase/database: FIREBASE FATAL ERROR: Can't determine Firebase Database URL.  Be sure to include databaseURL option when calling firebase.initializeApp().

I was able to figure out the problem – copy the URL from the Realtime Database page in the Firebase console:
https://<PROJECT_NAME>-default-rtdb.firebaseio.com/

I then added it to the firebaseConfig object:

const firebaseConfig = {
  apiKey: "AIza...",
  authDomain: "<PROJECT_NAME>.firebaseapp.com",
  projectId: "<PROJECT_NAME>",
  storageBucket: "<PROJECT_NAME>.appspot.com",
  messagingSenderId: "12########06",
  appId: "1:12########06:web:84******************db",
  measurementId: "G-*********H",
  databaseURL: "https://<PROJECT_NAME>-default-rtdb.firebaseio.com/"
};

I then re-ran the script, and the database populated with the first test records. Woo-hoo!

Android development Guided Projects on Coursera

Development, Google, Work

I’ve been working for Google for 3 1/2 years, but I’ve never done any Android development.

One of my work development goals this year is to build a mobile app using the Maps SDK for Android. I’m not challenging myself to build an app from scratch, because I’m not that interested in mobile app development. I just intend to build an app and extend it a little bit.

Happily, Coursera.org has a series of short Guided Projects on Android app building. These look like they’ll be just what I need to get some understanding of Android app development:

Projects in Series 1:

  1. Build a Simple App in Android Studio with Java
  2. Build a Persistent Storage App in Android Studio
  3. Build a Linear Layout App in Android Studio
  4. Build a Relative Layout App in Android Studio
  5. Build a Table Layout App in Android Studio

Projects in Series 2:

  1. Build an App in Android Studio using Resources
  2. Build an App in Android Studio using Static Files
  3. Build an App in Android Studio using Read – Write
  4. Build an App in Android Studio using onTouch
  5. Build an App in Android Studio using Activities

Projects in Series 3:

  1. Access CSV in an Android Studio Project
  2. Access SQLite in an Android Studio Project
  3. Access WebView in an Android Studio Project
  4. Access NFC in an Android Studio Project
  5. Access Maps in an Android Studio Project

There are a couple more Guided Projects outside this sequence that also look interesting:

Google Cloud Fundamentals Course

Google

I’ve started working on Google Cloud’s Application development learning path, starting with the Google Cloud Fundamentals: Core Infrastructure course.

Going through the course on www.cloudskillsboost.google is a bit clunky – each lesson starts with the Slides document, followed by a series of videos presented by a Googler (Google employee). When you watch a video, you need to manually mark it as Completed. There are quizzes and labs in between videos. The quizzes are free, but the labs require purchase of credits, with each lab costing one or more credits (most seem to be around 5 credits).

Google currently is offering a free month of Google Cloud training, including access to the “complete catalog of over 700 hands-on labs, role-based courses, learning paths, skill badges and certification preparation resources.”

Or at least, they claim they’re offering a free month. I tried signing up Saturday afternoon, and the signup advised me to check my email for the link to get started. It’s been almost 48 hours, and I haven’t seen that email yet. If I don’t see it soon, I’m going to need to try signing up again.

The course progresses fairly smoothly at first, but the sequence of lessons has changed since the course was created in 2018. The “Containers in the Cloud” section starts, “We’ve already discussed Compute Engine…and App Engine…Now I’m going to introduce you to containers and Kubernetes Engine which is a hybrid which conceptually sits between the two and benefits from both.”

Except that the “Applications in the Cloud” lesson is the next lesson after “Containers in the Cloud”. Hmm. Should I follow the material in the order currently presented, or skip to “Applications in the Cloud” before “Containers in the Cloud”? I think I’ll do the latter, since the course Slides document and the videos haven’t been updated since 2018, at least so far. [edited to add:] “Containers in the Cloud” doesn’t appear to have been updated since 2018, but “Applications in the Cloud” has, so it looks like following the current sequence would be better.

Instructional Design and eLearning Portfolio Ideas

Instructional Design
  • Google Maps Platform projects:
    • Choosing your APIs
    • Securing your API keys
  • Setting up a VM for development using Google Cloud Free Tier (public version)
  • Smaller Google Cloud portfolio projects:
  • Distinguished Club Program infographic (static first, then dynamic)
  • Toastmasters Pathways projects for Job Seekers – “Make Connections Through Networking (3)”; “Prepare for an Interview (3)”; “Building a Social Media Presence (4)”
  • Marketing Yourself on LinkedIn
  • Leadership in Toastmasters – “the MF ManiFesto (develop in online guest speeches at clubs on the way to DTM)”; “why we gotta keep getting more members?”; “The SMART Distinguished Club Program – it’s development for you”; “20 or Plus 5” (keynote-length speech for PM5)
  • eLearning for Toastmasters Club Coaches / Club Mentors / Club Sponsors
  • eLearning for Toastmasters club meeting roles – Toastmaster, General Evaluator, Evaluator, Grammarian, Timer
  • Blended learning Toastmasters Club Officer Training (able to be delivered by Area Directors)
  • Adaptive testing project – ???
  • Losing Weight – “‘Diet’ means ‘way of life'”; “Your Hybrid Powerplant (old TM speech)”; “What does ‘fat-burning zone’ mean on exercise bikes?”; “What is Max Heart Rate, exactly?”; “calculating Basal Metabolic Rate (history of BMR calculations)”; “is metabolic advantage a thing?”; “Muscle burns HOW MANY calories?”; “can you exercise yourself thin?”;
  • Visual Guide to Git
  • Job aids using PowerShell GUI or Electron / Ionic apps

Links for Instructional Designers

Instructional Design

Parallax Scroll with CSS

Front End Development, Google, portfolio

My first portfolio project will be FreeCodeCamp’s “Tribute page”, the first project in their beginner Responsive Web Design track.

It’s a fairly simple web page, and it would be pretty easy to create a minimal solution that fulfills all the requirements. But if I’m going to add it to my portfolio, I want something at least a little better than the minimum, so I’ve been thinking about ways to improve the look of the page.

Parallax scrolling is where two or more elements on a web page move at different speeds when the page is scrolled (vertically or horizontally). It’s a little gimmicky, I suppose, but I think it will work for this project.

The Google Web Developers December 2016 Updates (blog) had an article titled Performant Parallaxing that explained how to implement parallax scrolling using CSS that works cross-browser.

It looks like it should be pretty simple to add to my first portfolio project. And since I currently work for Google and plan to use Google Maps Platform examples in my later portfolio works, using their parallax scrolling solution for a non-Google portfolio project seems appropriate. However, the article was written in 2016, so it may require changes to work with current browsers.

Web Development and UX Portfolio project ideas

Front End Development, portfolio, Web Development
  • Google Places Autocomplete – select a city, then search within that city’s bounding rectangle (requires updating the AutocompleteOptions dynamically)
  • Shopping list (PHP backend? Google Cloud? Heroku? Netlify? Appsheets?)
  • Exercise tracker (PHP / Heroku / GCloud / Netlify backend? Appsheets?)
  • Toastmasters contest ballots (Appsheets)
  • Mixed-mode transportation search – combine Google Maps Platform and CapMetro APIs to find the closest bus route when the start or finish is outside CapMetro’s service area.
  • Build a proxy server for Google Maps web service APIs, like Raymond Camden’s article on using Pipedream to build a proxy server for APIs. This CSS-Tricks article talks about other ways to build proxies with serverless functions. Google Cloud AppEngine or Endpoints.
  • Interactive Club Finder for Toastmasters (using Google Dynamic Maps)
  • Pomodoro and other timer as Chrome Extension
  • Google web service API tester (builder/tester?) as Chrome Extension, PowerShell GUI, and/or Electron app
  • Vocabulary flash card-type web app (Firebase/Firestore backend)
  • Re-do my Coursera PHP website using AppEngine Standard PHP backend
  • LinkedIn Learning course “Vanilla JavaScript: Ajax and Fetch”, with the Geocoding redone using Google Maps JavaScript API (using API key secured with HTTP referrer restrictions)
  • Web scraping – How many of the top 25 TED talks end with the speaker saying “Thank you”? (see https://www.facebook.com/groups/ToastmastersInternationalMembers/posts/10158908546323542/ for motivation)
  • Web scraping – Build a tool in Google Cloud Shell using Python to crawl a web site and look for references to Maps JavaScript API (may need to use a headless browser to access the DOM, rather than the source HTML)

GOOGLE DIALOGFLOW

Google, language, Web Development

Well, boy is my face red. I identified the wrong Google product to use to create chatbots. (also, I’m writing this while getting in a few minutes of exercise on my FitDesk stationary bike).

In my previous post, I identified the Hangouts Chat API as the Google product to build chatbots. Oops. I think that’s the product to use to add a chatbot into Hangouts Chat.

No, the correct product to build chatbots is Google Dialogflow. Dialogflow is where one would build the interactions that could be used in another environment, such as Hangouts.

Build a chatbot for language learning?

Google, language, Web Development

I’ve been interested in learning languages for most of my life. One thing I struggle with is making the jump from class, book, or app to conversation.

Today I had a thought – what if we used chatbots as a stepping stone between the book/app knowledge and real-world conversations?

I work for Google, so my first thought was to see if Google has a Chatbot API. Turns out, there’s a Hangouts Chatbot API that can be used for free. Score!

But it’s not the only free chatbot API out there – here’s a list of 10 chatbot APIs (including Google’s)

Now the question is – which ones make it easy (or even possible) to build chatbots in another language?