Merge pull request #1 from ChristopherLinnett/refactor-arrays-to-objects

Refactor arrays to objects

README.md

@@ -0,0 +1,16 @@
+# ApneaElearning 2701ICT Griffith University
+
+This application was created as an assessment piece for Griffith University, Interactive Application Development Course.
+This is my first application created using a combination of Ionic/Angular.
+
+This was a great learning experience, while the final application is functional as intended there were ways I could have simplified the process.
+
+Data Typing, My data was stored in arrays, initially this was not an issue. But when it came time for deleting and recalculating indexes combined with async functions, managing this data became difficult.
+My fix was to change from using arrays to mapping key:value pairs for each user, using string interpolation to read/write to individual users.
+
+Data Structuring, The data is stored in JSON within a user file and all permissions/courses etc are built into this. Initially I wanted to use a relational database but had not encountered solutions for this yet.
+The solution I thought better to implement would work the same way as a relational database, and modelled in the same way. With each Database table as one key:value pair with the data stored as objects as changed earlier.
+
+Starting with these two options initially would have made for much easier, creation/reading/updating/deleting of all the data and encountering these problems here has given positive insights for future projects.
+This has taught me the value of utilising proper planning with UML(or equivelant) diagrams before starting the coding process, and wireframing before even starting the coding process.
+Doing this will cut down on the required time to code the project, and increase planning time allowing for a much smoother end product with likely less bugs to fix along the way

android/app/capacitor.build.gradle

@@ -14,6 +14,7 @@ dependencies {
     implementation project(':capacitor-filesystem')
     implementation project(':capacitor-haptics')
     implementation project(':capacitor-keyboard')
+    implementation project(':capacitor-splash-screen')
     implementation project(':capacitor-status-bar')
     implementation project(':capacitor-storage')
 

android/app/src/main/assets/capacitor.config.json

@@ -2,5 +2,22 @@
 	"appId": "com.linnettchristopher.apneaelearning",
 	"appName": "ApneaElearning",
 	"webDir": "www",
-	"bundledWebRuntime": false
+	"bundledWebRuntime": false,
+	"plugins": {
+		"SplashScreen": {
+			"launchShowDuration": 3000,
+			"launchAutoHide": true,
+			"backgroundColor": "#ffffffff",
+			"androidSplashResourceName": "splash",
+			"androidScaleType": "CENTER_CROP",
+			"showSpinner": true,
+			"androidSpinnerStyle": "large",
+			"iosSpinnerStyle": "small",
+			"spinnerColor": "#999999",
+			"splashFullScreen": true,
+			"splashImmersive": true,
+			"layoutName": "launch_screen",
+			"useDialog": true
+		}
+	}
 }

android/app/src/main/assets/capacitor.plugins.json

@@ -19,6 +19,10 @@
 		"pkg": "@capacitor/keyboard",
 		"classpath": "com.capacitorjs.plugins.keyboard.KeyboardPlugin"
 	},
+	{
+		"pkg": "@capacitor/splash-screen",
+		"classpath": "com.capacitorjs.plugins.splashscreen.SplashScreenPlugin"
+	},
 	{
 		"pkg": "@capacitor/status-bar",
 		"classpath": "com.capacitorjs.plugins.statusbar.StatusBarPlugin"

android/capacitor.settings.gradle

@@ -17,6 +17,9 @@ project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-keyboard'
 project(':capacitor-keyboard').projectDir = new File('../node_modules/@capacitor/keyboard/android')
 
+include ':capacitor-splash-screen'
+project(':capacitor-splash-screen').projectDir = new File('../node_modules/@capacitor/splash-screen/android')
+
 include ':capacitor-status-bar'
 project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')
 

capacitor.config.ts

@@ -4,7 +4,24 @@ const config: CapacitorConfig = {
   appId: 'com.linnettchristopher.apneaelearning',
   appName: 'ApneaElearning',
   webDir: 'www',
-  bundledWebRuntime: false
+  bundledWebRuntime: false,
+  plugins: {
+    SplashScreen: {
+      launchShowDuration: 3000,
+      launchAutoHide: true,
+      backgroundColor: "#ffffffff",
+      androidSplashResourceName: "splash",
+      androidScaleType: "CENTER_CROP",
+      showSpinner: true,
+      androidSpinnerStyle: "large",
+      iosSpinnerStyle: "small",
+      spinnerColor: "#999999",
+      splashFullScreen: true,
+      splashImmersive: true,
+      layoutName: "launch_screen",
+      useDialog: true,
+    },
+  },
 };
 
 export default config;

ios/App/Podfile

@@ -9,13 +9,14 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
-  pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
-  pod 'CapacitorCamera', :path => '../../node_modules/@capacitor/camera'
-  pod 'CapacitorFilesystem', :path => '../../node_modules/@capacitor/filesystem'
-  pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
-  pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard'
-  pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
-  pod 'CapacitorStorage', :path => '../../node_modules/@capacitor/storage'
+  pod 'CapacitorApp', :path => '..\..\node_modules\@capacitor\app'
+  pod 'CapacitorCamera', :path => '..\..\node_modules\@capacitor\camera'
+  pod 'CapacitorFilesystem', :path => '..\..\node_modules\@capacitor\filesystem'
+  pod 'CapacitorHaptics', :path => '..\..\node_modules\@capacitor\haptics'
+  pod 'CapacitorKeyboard', :path => '..\..\node_modules\@capacitor\keyboard'
+  pod 'CapacitorSplashScreen', :path => '..\..\node_modules\@capacitor\splash-screen'
+  pod 'CapacitorStatusBar', :path => '..\..\node_modules\@capacitor\status-bar'
+  pod 'CapacitorStorage', :path => '..\..\node_modules\@capacitor\storage'
 end
 
 target 'App' do

package.json

@@ -28,6 +28,7 @@
     "@capacitor/haptics": "1.1.4",
     "@capacitor/ios": "3.5.0",
     "@capacitor/keyboard": "1.2.2",
+    "@capacitor/splash-screen": "^1.2.2",
     "@capacitor/status-bar": "1.0.8",
     "@capacitor/storage": "^1.2.5",
     "@ionic/angular": "^6.0.0",

src/app/app-routing.module.ts

@@ -13,11 +13,6 @@ const routes: Routes = [
     loadChildren: () =>
       import('./users/login/login.module').then((m) => m.LoginPageModule),
   },
-  {
-    path: 'quizlanding',
-    loadChildren: () =>
-      import('./quiz/landing/landing.module').then((m) => m.LandingPageModule),
-  },
   {
     path: 'in-progress',
     loadChildren: () =>

src/app/app.component.ts

@@ -2,6 +2,8 @@ import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { LoginPage } from './users/login/login.page';
 import { UserService } from './users/user.service';
+import { SplashScreen } from '@capacitor/splash-screen';
+
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
@@ -13,7 +15,13 @@ export class AppComponent implements OnInit {
     private userService: UserService
   ) {}
 
-  ngOnInit(): void {
-  }
+  /**
+   * Show the splash screen, and hide it automatically when the app is ready.
+   */
+  async ngOnInit(): Promise<void> {
+    await SplashScreen.show({
+      autoHide: true
+    });
+}
 
 }

src/app/app.module.ts

@@ -10,17 +10,24 @@ import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { DetailContentPage } from './content/detail-content/detail-content.page';
 import { IonicStorageModule } from '@ionic/storage-angular';
+import { SwipernavComponent } from './shared/swipernav/swipernav.component';
+import { InProgressPageModule } from './quiz/in-progress/in-progress.module';
+import { InProgressPage } from './quiz/in-progress/in-progress.page';
+
 @NgModule({
-  declarations: [AppComponent, DetailContentPage],
-  entryComponents: [DetailContentPage],
+  declarations: [AppComponent, DetailContentPage,SwipernavComponent, InProgressPage],
+  entryComponents: [DetailContentPage, SwipernavComponent, InProgressPage],
   imports: [
     BrowserModule,
     IonicModule.forRoot(),
     AppRoutingModule,
     FormsModule,
     CommonModule,
     SwiperModule,
-    IonicStorageModule.forRoot()
+    IonicStorageModule.forRoot(),
+  ],
+  exports: [
+    SwipernavComponent
   ],
   providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
   bootstrap: [AppComponent],