아이오닉 웰컴 투어 슬라이더

이전에 이러한 내용을 본 적이 있으실 것입니다. 처음으로 앱을 열면 앱에 대한 이 둘러보기를 통해 여러분을 환영합니다.

오늘은 Ionic에서 직접 이 중 하나를 만드는 방법을 보여 드리겠습니다.

결과는 다음과 같은 환영 흐름입니다.

환영 구성 요소 만들기

Ionic starter에서 다운로드할 수 있는 내GitHub부터 시작하겠습니다.

여기서는 먼저 이 실제 환영 흐름을 만드는 데 집중한 다음 적시에 표시하는 방법을 다루겠습니다.

이를 위해 Ionic CLI를 활용할 수 있는 welcome라는 새 페이지를 만듭니다.

ng g page Welcome

이렇게 하면 환영 페이지와 모든 속성이 생성됩니다.app-routing.module.ts 파일에도 추가됩니다.

이제 애플리케이션을 실행하면 환영 URL을 방문할 수 있어야 합니다.

ng serve
// Visit: http://localhost:4200/welcome

이제 빈 시작 화면이 표시됩니다.
따라서 적절한 둘러보기를 위해 몇 가지 슬라이드를 추가해 보겠습니다.
welcome.page.html 파일을 열고 다음을 추가합니다.

<ion-content>
  <ion-slides pager="true">
    <ion-slide>
      <div class="slide">
        <img src="./assets/logo.png" />
        <h2>Welcome</h2>
        <p>
          Daily Dev Tips created this amazing sliding introduction to welcome you!
        </p>
      </div>
    </ion-slide>

    <ion-slide>
      <img src="./assets/logo.png" />
      <h2>What is Daily Dev Tips?</h2>
      <p>
        Daily Dev Tips is a blog that provided one unique article every single day!
      </p>
    </ion-slide>

    <ion-slide>
      <img src="./assets/logo.png" />
      <h2>Why do you do it?</h2>
      <p>Because I enjoy writing, it's my way of learning and improving.</p>
    </ion-slide>

    <ion-slide>
      <img src="./assets/logo.png" />
      <h2>Ready for it?</h2>
      <ion-button fill="clear" routerLink="/tabs/tab1"
        >Yes, let's go <ion-icon slot="end" name="arrow-forward"></ion-icon
      ></ion-button>
    </ion-slide>
  </ion-slides>
</ion-content>

이렇게 하면 4개의 슬라이드가 생성되며 마지막 슬라이드에서 볼 수 있듯이 tab1 페이지로 이동하는 버튼을 포함했습니다.

또한 welcome.page.scss에서 슬라이드가 잘 보이도록 몇 가지 기본 스타일을 추가합니다.

ion-slides {
  height: 100%;
}
.swiper-slide {
  display: block;
}
.swiper-slide h2 {
  margin-top: 2.8rem;
}
.swiper-slide img {
  max-height: 50%;
  max-width: 50%;
  margin: 60px 0 40px;
  pointer-events: none;
}
p {
  padding: 0 40px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ion-color-step-600, #60646b);
}

이것을 실행하면 의도한 대로 슬라이더가 제공됩니다.

첫 번째 사용자를 시작 흐름으로 리디렉션

이제 시작 흐름 페이지가 작동하므로 사용자가 처음으로 앱에 들어갈 때 사용자를 리디렉션해야 합니다.

우리의 경우 app.component.ts 내부에 수표를 추가할 것입니다.
initializeApp 함수 내에서 localStorage 기능을 사용하여 검사를 소개합니다.

if (!localStorage.getItem('welcome')) {
  localStorage.setItem('welcome', 'true');
  this.router.navigateByUrl('/welcome');
}

localStorage에 "welcome"이라는 항목이 있는지 확인합니다. 그렇지 않은 경우 생성됩니다. (값은 무엇이든 될 수 있습니다).
그리고 사용자는 시작 페이지로 리디렉션됩니다.
다음에 앱이 실행되고 localStorage 항목이 발견되면 아무 일도 일어나지 않습니다.

이제 새로운 사용자를 위한 멋진 환영 흐름을 만들었습니다.

오늘의 코드는 GitHub 에서 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나