소개

이 기사의 튜토리얼 페이지란, 다음과 같은 페이지를 말한다.

개발 환경

개발 환경( ionic info의 결과)은 다음과 같지만 Ionic3 에서 실행했다.

super 템플릿 만들기

super 템플릿이란?

super 템플릿은 Ionic에 원래 포함되어있는 템플릿입니다.

자세한 내용은 다음 기사를 참조하십시오.
참고 : 이미지로 아는 「템플릿 조견표」【Ionic】

super 템플릿을 만드는 방법

다음과 같은 명령을 실행(Mac의 경우)해 간다.
( [ApplicationName] 에 실제 앱의 이름을 입력)

ionic start [ApplicationName] super

cd [ApplicationName]

ionic serve

이제 방금전과 같은 Ionic Super Starterへようこそ 라는 화면이 나오면 문제없다.

배열 절차

슬라이드 수 결정 ( tutorial.ts 편집)

문장과 이미지 변경 (ja.json 편집)

마지막 페이지 만들기 ( tutorial.html 편집 )

1. 슬라이드 수 결정(tutorial.ts 편집)

디렉토리 : [ApplicationName]/src/pages/tutorial/tutorial.ts이 tutorial.ts의 22행 이후의 다음의 코드가 중요한 코드였다.

tutorialPartial.ts

  constructor(public navCtrl: NavController, public menu: MenuController, translate: TranslateService, public platform: Platform) {
    this.dir = platform.dir();
    translate.get(["TUTORIAL_SLIDE1_TITLE",
      "TUTORIAL_SLIDE1_DESCRIPTION",
      "TUTORIAL_SLIDE2_TITLE",
      "TUTORIAL_SLIDE2_DESCRIPTION",
      "TUTORIAL_SLIDE3_TITLE",
      "TUTORIAL_SLIDE3_DESCRIPTION",
    ]).subscribe(
      (values) => {
        console.log('Loaded values', values);
        this.slides = [
          {
            title: values.TUTORIAL_SLIDE1_TITLE,
            description: values.TUTORIAL_SLIDE1_DESCRIPTION,
            image: 'assets/img/ica-slidebox-img-1.png',
          },
          {
            title: values.TUTORIAL_SLIDE2_TITLE,
            description: values.TUTORIAL_SLIDE2_DESCRIPTION,
            image: 'assets/img/ica-slidebox-img-2.png',
          },
          {
            title: values.TUTORIAL_SLIDE3_TITLE,
            description: values.TUTORIAL_SLIDE3_DESCRIPTION,
            image: 'assets/img/ica-slidebox-img-3.png',
          }
        ];
      });
  }

이 코드에서,
제목 : TUTORIAL_SLIDE1_TITLE내용 : TUTORIAL_SLIDE1_DESCRIPTION이미지 : assets/img/ica-slidebox-img-1.png를 첫 번째 슬라이드로 표시하는 것으로 나타났습니다.

따라서 여기서 슬라이드 수를 결정할 수 있습니다.

2. 문장과 이미지 변경하기 (ko.json 편집)

디렉토리 : [ApplicationName]/src/assets/i18n/ja.json이 ja.json의 20행 이후의 다음의 코드가 중요한 코드였다.

koPartial.json

  "TUTORIAL_SLIDE1_TITLE": "Ionic Super Starterへようこそ",
  "TUTORIAL_SLIDE1_DESCRIPTION": "<b> Ionic Super Starter </b>は、多くのビルド済ページとベストプラクティスを備えた、完全な機能をもつIonicのスターターです。",

여기서 문장을 바꿀 수 있다.

디렉토리 : [ApplicationName]/src/assets/img이 디렉토리의 이미지를 바꾸면 이미지를 변경할 수 있습니다.

3. 마지막 페이지 만들기(tutorial.html 편집)

디렉토리 : [ApplicationName]/src/pages/tutorial/tutorial.html마지막 페이지만 tutorial.html 로 편집할 수 있다.

tutorialPartial.html

    <ion-slide>
      <img src="assets/img/ica-slidebox-img-4.png" class="slide-image" />
      <h2 class="slide-title">{{ 'TUTORIAL_SLIDE4_TITLE' | translate }}</h2>
      <button ion-button icon-end large clear (click)="startApp()">
        {{ 'TUTORIAL_CONTINUE_BUTTON' | translate }}
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
    </ion-slide>

이 코드에서,
제목 : TUTORIAL_SLIDE4_TITLE이미지 : assets/img/ica-slidebox-img-4.png를 네 번째 (마지막) 슬라이드로 표시하는 것으로 나타났습니다.

따라서 여기에서 마지막 페이지를 만들 수 있습니다.