/Hymn-Finder

A web crawler that extracts hymns from Hymnary.com

Primary LanguageSCSS

Spring Boot

APIs

To view JSON as parsed, download the JSON Formatter Chrome extension.

Deploy to Heroku

1. Connect to JawsDB

  1. From the Heroku Dashboard, navigate to Resources > Find more add-ons.
  2. Setup a remote connection in MySQL Workbench.

  1. Run db_scripts in the new database.

1. Use environment variables

Java

  1. Add a FilterRegistrationBean to WebConfig.java for Angular to circumvent CORS.
  2. Add a prod spring profile in application.yml with Username and Password from JawsDB. (The Connection String will be automatically set in the JAWSDB_URL Environment Variable in Heroku.)
  3. Create Procfile (for maven): web: java $JAVA_OPTS -Dserver.port=$PORT -jar target/*.jar in the project root.

Angular

  1. Add baseUrl: 'http://localhost:8080/' to environment.ts'.
  2. Add baseUrl: 'https://unboundpreaching.herokuapp.com/' to environment.prod.ts.
  3. Change all services to use environment.baseUrl.
  4. Change outputPath in angular.json to "outputPath": "../src/main/resources/static",
  5. Run ng build --prod.

Heroku Settings

  1. Navigate to Settings > Reveal Config Vars and change SPRING_PROFILES_ACTIVE to prod.
  2. Enable dyno formation under Resources after deployment.

Angular

Deploy to Netlify

ng add @netlify-builder/deploy
ng deploy

Continuous Deployment:

Site Settings > Build & deploy > Continuous Deployment > Build settings > Base directory: webapp

Dependencies

Run npm install to download project dependencies.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Debugging Angular in IntelliJ

# Run > Edit Configurations > Add New Configuration > JavaScript Debugger > Ensure breakpoints are detected when loading scripts
$ npm start
# Debug

New APP

$ ng new webapp
# Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
$ n
# Would you like to add Angular routing?
$ n
# Which stylesheet format would you like to use?
$ CSS
  1. Edit index.html
  2. Edit app.component.html
  3. Change favicon
  4. Switch strict mode off
ng generate class model/sermon
ng generate component components/sermon-list 
ng generate service services/sermon

Components

ng generate component xyz
ng generate module accounts/accounts --routingrm -r import formsModule @angular/forms

Include in declarations in app.module</...>ng generate component account-listng generate component accounts/components/account-list --lint-fix --skip-import * Barrel file under components folder. ng new angular-madlib

ng new angular-unbound-preaching

ng add @angular/material

Add dependency

ng add _____
npm install --save vjs-video
npm install --save @types/videojs
npm install --save video.js @videojs/themes
npm install --save videojs-seek-buttons
npm install --save video.js
npm install --save @videojs/http-streaming

Awwwards Inspiration

CSS Reference

Sermon Finder

Get started with YouTube API inside Python

Ensure you have Python installed, then:

# Activate command prompt if using powershell
$ cmd
# Create a virtual environment
$ python -m venv venv
# Activate your virtual environment
$ cd venv/Scripts && activate && cd ../..
# Install dependencies to venv
$ pip install -r requirements.txt
# Run the program
$ python src/main/resources/ytsearch.py

Setup Virtual Environment in IntelliJ

File > Project Structure > SDKs > Add New SDK > ...\venv\Scripts\python.exe

Create Local MySQL Database

Install MySQL and MySQL Workbench

choco install -y mysql
choco install -y mysql.workbench

Ensure MySQL Service is running.

Setup New Connection > Leave Username as root and Password empty.

Select the "Schemas" tab in the Navigator, right-click and select "Create Schema..."

Name it "sermondb". Alternatively simply run the following query and then refresh the schemas.

create schema `sermondb` ;

Client Secrets

git update-index --skip-worktree src/main/resources/client_secret.txt

YouTube API Documentation

Videos:

Internet Archive API Documentation

Pastor Anderson's Complete YouTube Channel From Old To New

TODO: Upcominig Features

Insert Date String in IntelliJ

Install the Current date generator plugin, then

  1. settings > Other Settings and insert '(A) 'yyyy-MM-dd' 'HH:mm' '
  2. Settings > Keymap > Plug-ins > Current date generator

Notes

Hyper Text Transfer Protocol (http) secure (https) (interviewee missed this question)

  • TCP Network (exchange bytes with one thing, peer to peer)
  • UDP (now that I have a connection, how do I request something, and you give me something back?)

All about request and response.

Client (Browser, JSOUP, etc) sends request to server, and what comes back is a response.

Client Request

  • URI (Universal Resource Identifier)
  • URL (Universal Resource Locator)
  • Verb (GET, POST, UPDATE (PATCH), PUT (Replace), DELETE, OPTIONS)
  • Headers
  • Body (optional)

Idempotent (If I do the things, and then I do the thing again, I should get the same results)

Server Response

  • Headers

  • Body

  • Status Code

  • 200s - success

  • 300s - not here/moved

  • 400s - your fault

  • 500s - my fault