You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
App to create Airbnb-style property listings with pages to make bookings and update property details. Code taken from Udemy Tutorial: [Ionic 4 - Build iOS, Android & Web Apps with Ionic & Angular](https://www.udemy.com/ionic-2-the-practical-guide-to-building-ios-android-apps/), using the [Ionic 5 framework](https://ionicframework.com/docs).
* App to view and book places to stay. All places listed on the 'discover.page' and clicking on an item navigate to a place detail page using the place id in the browser.
26
26
* Places are displayed under 2 list option: 'ALL PLACES' and 'BOOKABLE PLACES'. The first place is displayed using an ion-card, the remaining places are displayed using a list with a thumbnail image. There is code to prevent the user from being able to book their own places, using a userId matching function to show/hide the booking button.
@@ -31,65 +31,56 @@ App to create Airbnb-style property listings with pages to make bookings and upd
**general** all operators return observables. You have to subscribe to observables.
34
+
***general** all operators return observables. You have to subscribe to observables.
35
+
***switchMap** for http requests that emit just one value and for long-lived streams for Firebase real-time database and authentication. They do not need to be unsubscribed as they complete after emission. **switch:** because the result observable has switched from emitting the values of the first inner observable, to emitting the values of the newly created inner (derived) observable. The previous inner observable is cancelled and the new observable is subscribed. **map:** because what is being mapped is the emitted source value, that is getting mapped to an observable using the mapping function passed to switchMap. (The alternative operator is mergeMap).
36
+
***of** used with a single value for an 'emit once and complete' stream.
37
+
***take** emits only the first n values from an observable (e.g. take(1) emits only the first 2 values )
38
+
***tap** used to perform side effects. Every data value is received from the source, an action is taken on a part of the data then the data passeed on unchanged.
39
+
***map** transforms things. It passes each source value through a transformation function then outputs the results, e.g map(x => 10*x).
40
+
***pipe** composes operators. Creates a pipeline of small reusable operators like map and filter.
41
+
***from** converts a mix of other objects and data types into Observables
35
42
36
-
**switchMap** for http requests that emit just one value and for long-lived streams for Firebase real-time database and authentication. They do not need to be unsubscribed as they complete after emission. **switch:** because the result observable has switched from emitting the values of the first inner observable, to emitting the values of the newly created inner (derived) observable. The previous inner observable is cancelled and the new observable is subscribed. **map:** because what is being mapped is the emitted source value, that is getting mapped to an observable using the mapping function passed to switchMap. (The alternative operator is mergeMap).
37
-
38
-
**of** used with a single value for an 'emit once and complete' stream.
39
-
40
-
**take** emits only the first n values from an observable (e.g. take(1) emits only the first 2 values )
41
-
42
-
**tap** used to perform side effects. Every data value is received from the source, an action is taken on a part of the data then the data passeed on unchanged.
43
-
44
-
**map** transforms things. It passes each source value through a transformation function then outputs the results, e.g map(x => 10*x).
45
-
46
-
**pipe** composes operators. Creates a pipeline of small reusable operators like map and filter.
47
-
48
-
**from** converts a mix of other objects and data types into Observables
49
-
50
-
## Ionic Controllers Used
43
+
## :books: Ionic Controllers Used
51
44
52
45
*[Alert Controller](https://ionicframework.com/docs/api/alert) alert appears on top of app contents.
53
-
54
46
*[Loading Controller](https://ionicframework.com/docs/api/loading) overlay used to display activity and block user input. Loading indicators can be created, including spinners.
55
47
56
-
## Observables
57
-
58
-
An [observable](https://rxjs-dev.firebaseapp.com/guide/observable) is created using 'new Observable'. It is subscribed to using an Observer and executed to deliver next / error / complete notices to the Observer, before the execution is disposed of. Subscribers should be wrapped in try/catch blocks.
48
+
## :books: Observables
59
49
60
-
a [BehaviourSubject](http://reactivex.io/rxjs/manual/overview.html#behaviorsubject) is a subject that requires an initial value and emits its current value to subscribers.
50
+
* An [observable](https://rxjs-dev.firebaseapp.com/guide/observable) is created using 'new Observable'. It is subscribed to using an Observer and executed to deliver next / error / complete notices to the Observer, before the execution is disposed of. Subscribers should be wrapped in try/catch blocks.
51
+
* a [BehaviourSubject](http://reactivex.io/rxjs/manual/overview.html#behaviorsubject) is a subject that requires an initial value and emits its current value to subscribers.
61
52
62
-
## Array Operators
53
+
## :books:Array Operators
63
54
64
55
*[Array.push()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) adds one or more elements to the end of an array and returns the new aray length.
65
56
66
-
## Screenshots
57
+
## :camera:Screenshots
67
58
68
59
69
60
70
61
71
62
72
63
73
64
74
-
## Technologies
65
+
## :signal_strength:Technologies
75
66
76
-
*[Ionic v5.0.0](https://ionicframework.com/)
77
-
*[Angular v8.1.2](https://angular.io/)
78
-
*[Ionic/angular v 4.7.1](https://ionicframework.com/)
* Authorization module using Angular Routing with the Angular [canLoad auth guard interface](https://angular.io/api/router/CanLoad) to prevent access to pages if user is not logged in.
145
136
*[Theme variables.scss](https://ionicframework.com/docs/theming/css-variables) file used to create a global color theme using the [Ionic color palette](https://ionicframework.com/docs/theming/color-generator) (note colors were in rgb not #hex as shown in the Ionic tutorial).
*[Firebase backend database](https://firebase.google.com) used to store place and booking data. Images are stored in the same database.
150
141
* Bookings can be cancelled from booking.page.
142
+
* Bookings can be made and new places added to offers page. If a different user is logged in they cannot book their own places (the booking button does not show) - which is correct.
143
+
* Camera images now show.
151
144
* Place details can be edited (as long as user id matches) using a neat button that slides from the right.
152
145
*[Google Maps Javascript API](https://developers.google.com/maps/documentation/javascript/tutorial) map-modal added to new-offer page. Clicking on 'SELECT LOCATION' will open Google Maps at a fixed location. Address of place extracted from Google Maps data and stored in Places database.
153
146
*[Capacitor Geolocation API](https://capacitor.ionicframework.com/docs/apis/geolocation) used to provide current location.
*[Google Cloud Storage](https://www.npmjs.com/package/@google-cloud/storage) used for storage of image data.
157
150
* Auth tokens on the backend.
158
151
159
-
## Status & To-do list
152
+
## :clipboard:Status & To-do list
160
153
161
-
* Status: working. Bookings can be made and new places added to offers page. If a different user is logged in they cannot book their own places (the booking button does not show) - which is correct. Camera images now show.
154
+
* Status: working. Updated to latest Ionic & Angular versions.
162
155
* To-do: Bookable place list is the same as the 'All Places' list - bookable places should not include the logged in users' places. 'My Offers' includes everyones places.
163
156
164
-
## Inspiration
157
+
## :clap:Inspiration
165
158
166
159
[Acadamind Udemy Course: Ionic 4 - Build iOS, Android & Web Apps with Ionic & Angular](https://www.udemy.com/ionic-2-the-practical-guide-to-building-ios-android-apps/)
167
160
168
-
## Contact
161
+
## :envelope:Contact
169
162
170
163
Repo created by [ABateman](https://www.andrewbateman.org) - feel free to contact me!
0 commit comments