iOS와 안드로이드에서 당신의 영역에서 구동되는 Ionic 웹 응용 프로그램에 원본 처리를 제공합니다!

Realm는 원본을 개발하고 사용하기 쉬운 로컬 데이터베이스로 모바일 개발자가 더욱 빠른 응용 프로그램을 구축할 수 있도록 도와준다.데이터 동기화 서비스인 MongodB Realm Sync를 제공하여 클라이언트와 백엔드의 MongodB Atlas 사이에서 데이터를 쉽게 이동할 수 있습니다.Realm을 사용하면 수천 줄의 코드를 작성하지 않고 직관적인 데이터 처리 방식을 제공할 수 있습니다.
에오니아 팀은 Realm을 활용해 몬고 DB Atlas 데이터베이스에 데이터를 쉽게 저장하는 방법use Ionic with Realm to build a React Web app에 대해 다채로운 기사를 발표했다.
cloning the repo와 실행ionic serve 후에 매우 간단한 작업 관리 웹 응용 프로그램을 가질 수 있습니다.등록할 수 있습니다(모든 사용자/비밀번호 조합을 사용하면 Realm이 사용자의 등록 요구를 충족시킬 수 있습니다).로그인하여 작업을 보고 새 작업을 추가할 수 있습니다.
웹 응용 프로그램에 로그인
작업 찾아보기


에오니아 팀이 웹을 위해 만든 콘텐츠를 바탕으로 에오니아의 가장 좋은 기능 중 하나로 iOS와 안드로이드를 모바일 앱으로 확장해 봅시다. 한 번 작성하고 어디서든 실행하는 인코딩 방법입니다.iOS 애플리케이션부터 시작하겠습니다.

선결 조건

이 글을 읽으려면 다섯 가지가 필요합니다.

Xcode(iOS 개발)를 실행하는 맥OS 구동 컴퓨터.Xcode 13 베타 버전을 사용하고 있습니다.너는 자신의 이성을 가지고 모험할 필요가 없다.

가 설치되었습니다.지침here에 따라 작업을 수행할 수 있지만 TL,it박사npm install -g @ionic/cli

클론은 모바일 기기repo with the Ionic React Web App로 바뀝니다.

우리는 Atlas 데이터베이스를 사용하여 데이터를 클라우드에 저장하고 Realm 응용 프로그램으로 모바일 기기에서 Atlas를 쉽게 사용할 수 있기 때문에 무료 영구 MongoDB 집단과create and import a Realm app schema를 구축하여 서버에서 모든 것을 준비할 수 있도록 해야 한다.

분야 응용 프로그램을 만든 후 분야의 MongoDB 관리 인터페이스에서 분야 응용 프로그램 ID를 복사하여 src/App.tsx 줄에 붙여넣는다.

export const APP_ID = '<Put your Realm App Id here>';설정APP_ID후 실행:

$ npm run build

iOS 애플리케이션

기존 애플리케이션에 iOS 기능을 추가하려면 터미널을 열고 다음을 실행해야 합니다.

$ ionic cap add ios

이것은 iOS Xcode 프로젝트를 만들고 로컬 개발자가 알고 좋아할 것입니다. 코드는 우리의 에오니아 응용 프로그램에서 나온 것입니다.내가 이렇게 할 때 문제가 하나 생겼다. 그것은 환매 협의에서 사용한 콘덴서 버전은 3.1.2이지만 iOS에 대해 나는 적어도 3.2.0이 필요하다는 것이다.그래서 나는 단지 package.json를 바꾸고 npm install를 운행해서 콘덴서를 갱신할 뿐이다.package.json 세션:

...
"dependencies": {

    "@apollo/client": "^3.4.5",
    "@capacitor/android": "3.2.2",
    "@capacitor/app": "1.0.2",
    "@capacitor/core": "3.2.0",
    "@capacitor/haptics": "1.0.2",
    "@capacitor/ios": "3.2.2",
...

현재 우리는 새로운 ios 목록을 가지고 있다.이 폴더에 들어가면 코코아팟이 지원하는 iOS 애플리케이션이 있는 App 디렉토리를 볼 수 있습니다.이 iOS 애플리케이션을 실행하려면 다음이 필요합니다.

를 사용하여 cd ios 디렉토리로 전환합니다.너는 App 목록을 찾을 것이다.cd App

네이티브 iOS 프로젝트와 마찬가지로 pod repo update && pod install를 사용하여 모든 CoCoapod을 설치합니다.이렇게 하면 CoCoaPod의 모든 라이브러리 캐시가 업데이트되고 프로젝트에 필요한 라이브러리와 종속성이 설치됩니다.

생성된 App.xcworkspace 파일을 Xcode로 엽니다.터미널에서 입력만 하면 됩니다 open App.xcworkspace.

Xcode에서 응용 프로그램을 실행합니다.

iOS 애플리케이션에 로그인
작업 찾아보기


이렇게콘덴서 업데이트를 제외하고 우리는 명령 하나만 실행하면 iOS에서 우리의 Ionic 웹 프로젝트를 실행할 수 있습니다!

안드로이드 응용

기왕 우리가 iOS를 위해 Ionic 응용 프로그램을 개발한 이상 안드로이드를 위해 Ionic 응용 프로그램을 개발하는 것은 얼마나 어려운가?사실은 이것이 매우 간단하다는 것을 증명한다.cd프로젝트의 루트 디렉토리로 돌아가고 터미널을 입력하면 됩니다.

 ionic cap android

이렇게 하면 Android 항목이 생성됩니다.완료되면 다음과 같이 애플리케이션을 시작합니다.

ionic capacitor run android -l --host=10.0.1.81

이 예에서 10.0.1.81는 제 IP 주소입니다.보시다시피, 만약 여러 개의 시뮬레이터, 심지어는 삽입식 안드로이드 휴대전화가 있다면, Ionic 프로그램을 어디에서 실행할지 선택할 수 있습니다.

일단 실행되면, 네트워크나 iOS 응용 프로그램처럼 안드로이드에 로그인하고, 로그인하고, 작업을 추가할 수 있습니다.
Android에 작업 추가
Android의 찾아보기 작업


가장 좋은 것은 몬godB Realm 프로그램에서 동기화가 발생했기 때문에 로컬에서 새로운 작업을 추가할 때마다 클라우드에 있는 몬godB Atlas 데이터베이스에 백엔드로 업로드됩니다.같은 몬goDB 분야의 모든 응용 프로그램에 접근하는 다른 응용 프로그램은 이 데이터를 표시할 수 있습니다!

작업 자동 새로 고침

Realm SDKs는 동기화 기능으로 유명하다.만약 서버나 응용 프로그램에서 어떤 내용을 변경했다면, 같은 데이터에 접근할 수 있는 다른 사용자들은 거의 이 변경 사항을 즉시 볼 수 있을 것이다.캐시 손실, 백그라운드에서 실행되는 복잡한 네트워크/멀티스레드 코드 작성, 자동 전송 알림 수신 등의 문제를 걱정할 필요가 없습니다. MongodB Realm은 이러한 모든 문제를 해결해 줍니다.
그러나 이 예에서, 우리는 React의 Apollo GraphQL Client 접근 데이터를 사용한다.이 클라이언트를 사용하면 Realm 응용 프로그램에 로그인하여GraphQL 조회를 실행할 수 있습니다. 웹 디자인을 위한 방식으로는 하드디스크에 접근해서 데이터를 저장할 수 없습니다.영역 문건.이것은 단지 더 간단한 방법일 뿐 리얼m에서 원래 좋았던Apollo GraphQL Client을 사용할 수 있기 때문에 우리는 동기화를 실현하지 못했다.다행히도 Apollo GraphQL 조회는 매개 변수 하나pollInterval만 전달하면 자동으로 자신을 갱신할 수 있다.이거 대박이라고 했잖아.데이터를 새로 고칠 간격을 밀리초 단위로 설정합니다.
따라서 useTasks.ts에서 모든 작업을 가져오는 함수는 다음과 같이 반초마다 자동으로 데이터를 갱신합니다.

function useAllTasksInProject(project: any) {
 const { data, loading, error } = useQuery(
   gql`
     query GetAllTasksForProject($partition: String!) {
       tasks(query: { _partition: $partition }) {
         _id
         name
         status
       }
     }
   `,
   { variables: { partition: project.partition }, pollInterval: 500 }
 );
 if (error) {
   throw new Error(`Failed to fetch tasks: ${error.message}`);
 }

 // If the query has finished, return the tasks from the result data
 // Otherwise, return an empty list
 const tasks = data?.tasks ?? [];
 return { tasks, loading };
}

정신을 가다듬다

자동 리셋을 추가하는 것은 좋지만, 모바일 프로그램에서는 데이터를 드래그해서 데이터 목록을 리셋하는 데 익숙하다.이를 위해서는 이온 성분IonRefresher을 우리 가정 성분에 첨가해야 한다.

<IonPage>
     <IonHeader>
       <IonToolbar>
         <IonTitle>Tasks</IonTitle>
         <IonButtons slot="end">
           <IonButton onClick={addNewTask}>
             <IonIcon slot="icon-only" icon={add}></IonIcon>
           </IonButton>
         </IonButtons>
       </IonToolbar>
     </IonHeader>
     <IonContent fullscreen>
       <IonRefresher slot="fixed" onIonRefresh={doRefresh}>
         <IonRefresherContent></IonRefresherContent>
       </IonRefresher>
       <IonHeader collapse="condense">
         <IonToolbar>
           <IonTitle size="large">Tasks</IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonList>
         {loading ? <IonLoading isOpen={loading} /> : null}
         {tasks.map((task: any) => (
           <TaskItem key={parseInt(task._id)} {...task}></TaskItem>
         ))}
       </IonList>
     </IonContent>
   </IonPage>

보시다시피 IonRefresher 구성 요소는pull to refresh 기능을 추가합니다. 플랫폼마다 맞춤형 마운트 표시기를 포함합니다.

<IonRefresher slot="fixed" onIonRefresh={doRefresh}>
   <IonRefresherContent></IonRefresherContent>
</IonRefresher>

새로 고치기 위해서, 우리는 전화 doRefresh 를 한 후에 전체 페이지를 다시 불러옵니다.

 const doRefresh = (event: CustomEvent<RefresherEventDetail>) => {
   window.location.reload(); // reload the whole page
   event.detail.complete();  // we signal the loading indicator to hide
 };

작업 삭제

현재, 우리는 임무의 상태를 바꾸기 위해 오른쪽에서 왼쪽으로 미끄러질 수 있다.그러나 나는 우리가 임무를 삭제할 수 있도록 왼쪽에서 오른쪽으로 미끄러지는 것을 추가하고 싶다.기존 IonItemSliding 컨트롤에 카드 컨트롤러를 추가하기만 하면 됩니다.이런 상황에서, 우리는 컨트롤러의 시작부터 미끄러지기를 희망한다.이렇게 하면 우리는 오른쪽에서 왼쪽과 왼쪽에서 오른쪽 언어 사이의 어떠한 잘못된 뜻도 피할 수 있다.사용자가 새로운 '삭제' 단추를 누르면 (위험한 색을 사용할 때 빨간색으로 표시됩니다) 호출됩니다 deleteTaskSelected.

<IonItemSliding ref={slidingRef} className={'status-' + task.status}>
     <IonItem>
       <IonLabel>{task.name}</IonLabel>
     </IonItem>
     <IonItemOptions side="end">
       <IonItemOption onClick={toggleStatus}>Status</IonItemOption>
     </IonItemOptions>
     <IonItemOptions side="start">
       <IonItemOption onClick={deleteTaskSelected} color="danger">Delete</IonItemOption>
     </IonItemOptions>
   </IonItemSliding>

이 작업을 삭제하려면 useTaskMutations.ts에 정의된 GraphQL 돌연변이를 사용합니다.

const deleteTaskSelected = () => {
   slidingRef.current?.close();  // close sliding menu
   deleteTask(task);             // delete task
 };

요점을 요약하고 다시 말하다.

이 글은 Ionic React 웹 응용 프로그램부터 몇 줄의 코드만 있으면 iOS와 안드로이드에서 실행되는 모바일 응용 프로그램으로 바꾸는 것이 얼마나 쉬운지 보여준다.그리고 우리는 이 세 응용 프로그램에 몇 가지 기능을 동시에 추가하기 쉽다.에오니아는 영역 기반 응용 프로그램을 어디서든 실행할 수 있도록 아주 간단하게 해 줍니다!
in this branch의 이 글repo에서 코드를 볼 수 있습니다. 입력만 하면 됩니다.

$ git clone https://github.com/mongodb-developer/ionic-realm-demo
$ git checkout observe-changes

그러나 이것은 Realm을 당신의 Ionic 응용 프로그램에 통합하는 유일한 방법이 아닙니다.콘덴서와 네이티브 SDK를 사용해 향후 후속 게시물에서 아이오니아의 리얼엠을 어떻게 사용하는지 보여드리겠습니다.