show tutorial with onboarding screen

[michaelchin]

https://www.reddit.com/r/ionic/comments/l0d4on/ionic_5_onboarding_screen_ui_speed_code/

[yiyanw]

@michaelchin
I checked this video tutorial and their source code, I found that this is not official component and it is based on angularJS. So we need to rewrite it if we want this functionality.
Here is the source code link: https://github.com/gihan667/ionic-onboarding-screen

[michaelchin]

@michaelchin I checked this video tutorial and their source code, I found that this is not official component and it is based on angularJS. So we need to rewrite it if we want this functionality. Here is the source code link: https://github.com/gihan667/ionic-onboarding-screen

It should not be too difficult. See the ionic slides doc below. We can show the slides at startup and use a flag to control if user wants to see it again next time. The flag can be saved in Preference (

gplates-app/src/functions/settings.ts

Line 9 in 73178df

Preferences.set({ key: 'serverURL', value: url })

).

https://ionicframework.com/docs/api/slides

Be aware that the ionic team has deprecated the ion-slides and ion-slide components in favor of using the official framework integrations provided by Swiper. So, you need to figure out how to use/migrate to Swiper. It seems to me not different either.

Matthew has used Swiper in his component. See here

gplates-app/src/components/CustomToolbar.tsx

Lines 97 to 107 in 73178df

	<IonButton className="round-button" id="help-button">
	<IonIcon icon={helpOutline} />
	<IonPopover className="popover" trigger="help-button">
	<IonContent>
	<Swiper
	pagination={pagination}
	modules={[Pagination]}
	className="swiper"
	>
	<SwiperSlide>
	<div className="help">

[matthew-merkas]

@michaelchin Did you have any specific content in mind for the tutorial, or should I just create something myself?

[michaelchin]

@michaelchin Did you have any specific content in mind for the tutorial, or should I just create something myself?

We can use some placeholders for now. Eventually Maria will give us some material to fill in.

[michaelchin]

@matthewmerkas this looks very nice! thank you ! well done!