Mini-Workshop Instructions

We're running four practical mini-workshops during AngularConnect. Check the schedule to see what time they start.

Read on to find out the instructions you need to know for each workshop. We'd recommend downloading and reading the pre-requisites before the conference to save time at the start of the workshops.

Please note, the mini-workshops are free to attend and don't require registration. They are separate from the workshops taking place before the conference on 18 September.

Create a blogging app with Angular and Firebase

Overview of what we'll cover

  • Creating a new project on Firebase and set up Cloud Firestore database
  • Adding the firebase project to our Angular application
  • Using Angular material and Bootstrap to style the application
  • Ability to add a new blog post using CKEditor
  • Feature to edit and delete a blog post
  • Creating custom pipes
  • Deploying the application on Firebase

Software downloads

  • Nodejs (LTS Version) - https://nodejs.org/en/
  • Angular CLI - https://cli.angular.io/
  • Visual Studio Code - https://code.visualstudio.com/
  • A Gmail account is required to work with Firebase. If you do not have a Gmail account then create it prior to the workshop

If time permits then we will extend our application to cover the following features: Authentication with Google, Post comments on each blog, Pagination on the home page.

Pre-reading

A fundamental understanding of Angular framework is required for this workshop. If you have no prior knowledge of Angular then angular.io is a great place to start with. We’d also recommend you get yourself familiar with using Visual Studio Code.

See what you are going to create in this workshop at blogdemo-f966e.firebaseapp.com.

The workshop steps are at github.com/AnkitSharma-007/blogsite/blob/master/README.md.

Pre-requisites

  • Basic knowledge of HTML and CSS
  • A basic knowledge of Angular:
    • What is Angular?
    • Angular component
    • Angular Module
    • Angular Services

Beyond VS Code - Extending your favorite code editor

Prerequisites

A basic knowledge of the following languages/tools will be assumed during the workshop. You might find it hard to follow along, if you have never heard of/used them.

Preparation steps

If you intend to code along on your laptop (which will help you get the most out of the workshop and is the recommended way to attend), having completed the following steps beforehand will help ensure your environment is set up correctly and you will be able to keep up (even, for example, in the event of a bad/congested internet connection during the workshop).

  • Have Git and Node.js installed

  • Have VS Code installed

  • Clone this GitHub repositoryavailable from Friday 13 September.
    Command: git clone https://github.com/gkalpak/my-first-vscode-extension.git
  • Install dependencies
    Command: cd my-first-vscode-extension && npm install

Cypress or the end of laborious end-to-end testing

Overview of what we'll cover

We will test a web application using Cypress from scratch. Step by step, we will learn about Cypress features, implement those in our tests. We will be testing various aspects of the application (navigation, clicks, user input), and see how to debug and improve our tests, make then more readable, and even how to mock the server-side in order to test more scenarios on the front-end.

Pre-requisites

Some javascript knowledge is best but not required. Any kind of coding experience is a pre-requisite though as we will be writing code. Also please make sure that your dev environment is set-up before the workshop start as it's going to be a fast-paced event.

Setup instructions

  1. Download latest Node JS version from nodejs.org/en
  2. Install that Node JS version using the installer for your OS
  3. Once installed, open a terminal window and run the command node --version to make sure Node JS was successfully installed.
  4. Create a specific folder for source files, for instance: C:\sources
  5. Download the following zip file: github.com/alcfeoh/ng-store-cypress/archive/master.zip
  6. Extract the above zip file in the source folder created at step 4. You should now have a C:\sources\ng-store-cypress-master folder
  7. Open a terminal in the C:\sources\ng-store-cypress-master folder and run the command npm install (this step can take several minutes)
  8. Then in that same terminal run: npx cypress open. A window from Cypress will open. You're all set!

Acquire developer superpowers with Angular Workspace

You can download a PDF of the instructions for this mini-workshop here.

Sponsors

Interested in sponsoring? Please get in touch with our sponsorship team to request a sponsor pack and find out more.

Premier Sponsor

Platinum Sponsors

Gold Sponsors

Sponsors

Join our mailing list

Sign up to receive updates about AngularConnect, including speaker previews, ticket launches, Call for Proposal details and other exclusive content. We won’t spam you and will only send you emails we genuinely think you’ll find interesting. You can unsubscribe at any time and you can find more information in our Data Promise.