An Angular + Ionic + Firebase playground project.
Create a prototype with the following functions:
- User Login / User Signup
- Creation / Administration of multiple bakeries
- Creation / Administration of recipes associated with a bakery
Target: Cloud WebApp
- JS Framework: Angular
- UI: Ionic
- Backend: Firebase
- Data-management: rxjs
root/
├─ functions/
│ ├─ src/
│ │ ├─ index.ts
The cloud functions are the serverless backend of this app. They perform complex or sensitive functions like creation or editing of bakeries.
List of cloud functions:
saveUserEmailInSettings
: Update the user settings collection with the user emailupdateUserBakeriesOnBakeryCreate
: Keep the bakery array in the user settings collection in sync with bakeriesupdateUserBakeriesOnBakeryUpdate
: Same task asupdateUserBakeriesOnBakeryCreate
listBakeryUsers
: Resolve users with email for a specific bakery. We need this because by default you can not list users.addUserToBakery
: Add a user to a specific bakery. Can also promote a user to admin status.removeUserFromBakery
: Remove a user from a specific bakery. Can also demote a user.createOrEditRecipe
: Edit a specific recipe or create it if it does not exist.deleteRecipe
: Delete a specific recipedeleteBakery
: Delete a specific bakerycreateBakery
: Crete a new bakery for the authenticated usereditBakery
: Edit a specific bakery
All functions check whether the user has the permission to perform a certain action.
The components are located inside the app folder along the main app module.
root/
├─ src/
│ ├─ app/
- bakery-list: Lists all bakeries of the logged-in user
- bakery-admin: Administration panel for a bakery
- login: Login page with user signup
- recipe-detail-view: Detail view for a recipe
- recipe-list: Lists all recipes for a bakery
Because the layout of ionic requires the header FAB button to be along the header, we need to create special FAB components for each Edit or Add button.
- bakery-add-fab: Only active on the bakery-list page
- bakery-admin-user-add-fab: Only active on the bakery-admin panel
- recipe-edit-fab: Active for both the recipe list and recipe detail view
- recipe-edit-form: Edit / Create form for a recipe. Gets triggered by recipe-edit-fab
- app: Bootstrap app component required by angular
All routes except login are grouped together via the nested group function from angular router.
You can find the nested route structure inside bakery-routing.module.ts
You need to install the angular cli and run npm install
in the project root folder. Obvious, for this you need a nodejs setup.
After the firebase setup you should be able to build the application with ng build --configuration production
.
For development, you can use ng serve
You need a firebase cli setup and firebase project with cloud functions enabled. After you have done this, you need to create src/environments/environments.ts
and src/environments/environments.prod.ts
. For this, you can use src/environments/environments.example.ts
as template. In addition, you need to setup a .firebaserc
config in the project root folder.
Note: You need to enable the E-Mail/Password auth provider in firebase.
Note: Do not forget to run npm install
in the functions' directory.
firebase deploy --only functions
firebase deploy --only firestore
Note: Build angular first with ng build --configuration production
firebase deploy --only hosting