바이브레이션 및 AWS 확대로 안드로이드 구축 — 제3부분

바이브레이션 및 AWS 확대로 안드로이드 구축 — 제3부분

소개하다.

세 부분으로 구성된 시리즈의 마지막 부분으로, Flatter와 AWS Amplify를 이용해 안드로이드 모바일 애플리케이션을 구축하는 방법을 소개한다.작년에 우리는 플래터를 사용하여 쇼핑 리스트 프로그램을 구축한 다음Amplify Datastore을 사용하여 오프라인 데이터 동기화 기능을 응용 프로그램에 추가했다.그리고 연도에 우리는 Flatter에 로그인/등록 UI를 구축했고 Amazon Cognito를 사용하여 백엔드 인증 흐름을 실현했다.
이 시리즈의 마지막 부분에서는 밀린 작업에서 두 가지 추가 기능을 추가하여 응용 프로그램을 완성할 것입니다.

클라우드에 사용자 프로필 이미지를 저장하는 기능 추가

분석을 통해 사용자의 행위를 추적하는 기능을 추가했다.

우리는 무엇을 건설해야 합니까?
Amplify Auth Category
본 논문에서 사용자 프로필 UI에 그림을 추가할 수 있는 화면 흐름을 구축할 것입니다.아바타 변경을 클릭하면 Android Gallery가 시작되고 이미지를 선택할 수 있습니다. 이미지를 선택하면 구성 파일 화면으로 돌아가 선택한 이미지를 표시합니다.디스플레이를 제외하고, 이미지는 응용 프로그램 백엔드에 업로드될 것이며, 사용자는 장치를 뛰어넘어 개인 정보 이미지를 유지할 수 있다.

flatter에서 사용자 인터페이스 구축

이전과 마찬가지로 이 프로세스의 첫 번째 단계는 Flatter에서 UI를 구축하는 것입니다.'프로필 이미지 위젯' 을 구축하려면 두 개의 위젯이 필요합니다. 1/a 원형 프로필 위젯은 이미지를 보고, 2/a 단추는android 갤러리 보기를 시작하여 새로운 이미지를 선택할 수 있도록 합니다.사용자 인터페이스 코드는 다음과 같다.
단면도.던지다

다음은 프로필 뷰의 두 개의 작은 위젯입니다 — 보시다시피 BloC를 사용하여 상태 객체를 UI로 전달합니다.이런 상황에서 우리가 휴대전화 라이브러리에서 이미지를 캡처하면state 대상은 우리의 이미지를 저장한다.만약 우리도 단추 코드를 본다면, 갤러리를 켜서 Change Avatar Request () 로 호출하는 방법을 볼 수 있습니다 — 이제 한번 봅시다.
그룹 프로필.던지다

따라서 Profile BloC의 map Event To State () 방법에서 변경 Avatar Request 이벤트가 발생하면 우리는 많은 일을 하고 있습니다.

이미지 선택기를 사용하여 선택한 이미지 설정

이 이미지를storage Repository에 전달하여 업로드

이미지 키로 사용자 대상을 이미지로 업데이트

사용자 프로파일을 업데이트하고 업로드된 이미지의 URL을 가져옵니다.

이를 위해 imagepicker와storageRepository 등 설정해야 할 것들이 부족합니다.이제 우리 이거 하자.

이미지 선택기 추가

따라서 이미지 선택기는 Android Gallery 애플리케이션을 열고 이미지를 선택할 수 있는 패키지입니다.Flatter의 패키지 저장소 에서 이 기능을 얻을 수 있습니다. 저희가 호출하고자 하는 패키지pub.dev입니다.pub에서 image picker 패키지로 이동하면개발자: 안드로이드 시스템의 설치 설명을 받았습니다.
image_picker 이미지 선택기 안드로이드 설치 설명
따라서, 안드로이드 장치에 사용할 이미지 picker를 설치하기 위해pubspec에 추가하는 것이 필요합니다.yml.
라이브러리 작성
앞에서 설명한 바와 같이, 우리는 Repository 모드 포장과 추상적인 베이스 메모리 메커니즘의 API 호출을 사용합니다.저장소의 경우 AWS Amplify 스토리지 기능/범주를 추상화하고 있습니다.따라서 계속하기 전에 이 종류를 설치합시다.
이를 위해 프로젝트의 터미널에서 다음 명령을 실행합니다.

amplify add storage

그리고 "누가 접근 권한이 있어야 하는가"문제를 제외하고는 기본값을 선택하도록 알려 줍니다. 이 문제에서는Auth 사용자만 선택하고 그들에게 완전한 CRUD 권한을 줍니다.
일단 우리가 이것에 대해 만족을 느낀다면, 우리는 전화를 할 것이다

amplify push

이 모든 변경 사항을 AWS 계정으로 전송하고 업로드한 파일에 대한 올바른 액세스 제어를 내장하는 S3 저장소를 제공합니다.
종속성 및 API 호출 추가
다음 단계에서 우리가 해야 할 일은'pubspec'를 바꾸는 것이다.yml'main의 configure Amplify () 방법을 업데이트하기 전에amplify storage s3 플러그인을 추가합니다.던지다.지금쯤 그럴 것 같습니다. Amplify StorageS3에 대한 호출이 추가되었습니다.

새로운 image picker와amplify storage s3 라이브러리를 추가한 후, 우리의pubspec입니다.yml은 지금 다음과 같습니다.

라이브러리를 추가하고 백엔드를 구성한 후 마지막 섹션에서는 저장소에 저장소 API 호출을 패키지화합니다.
저장소던지다

보시다시피 이것은 응용 프로그램의 모든 다른 저장소와 유사합니다. 왜냐하면 이 저장소는 저장소를 포장하고 있기 때문입니다.uploadFile () 및 스토리지에서 getURL() 메서드를 확대합니다.저장api 호출 — 또한 이미지를 보기 위해 파일을 다시 다운로드하는 것이 아니라 Flatter NetworkImage 위젯을 사용합니다(위의 profile view.dart 참조)

분석 추가

현재, 우리의 여정의 마지막 부분에서, 우리는 사용자가 야외에서 이 프로그램을 실제로 사용하는 상황을 추적할 수 있도록 응용 프로그램에 분석을 추가할 것이다.이를 위해 우리는 유형을 사용하여 사용자의 행위를 추적하기 위해 빠른 분석을 실현할 것이다.우리는 우선 일반적인 절차에 따라 그것을 우리 프로젝트에 추가해야 한다. 즉,

터미널에서 확대 추가 분석 실행 — 다음 프롬프트

를 입력하십시오.
Amplify’s Analytics

터미널에서 확대 Push-y 실행 — 변경 사항을 백엔드에 배치합니다.Analytics 범주는 다른 모든 Amplify 범주와 마찬가지로 개발자로부터 서비스를 추상화하여 용량 할당의 복잡성을 줄여줍니다.분석에 있어서 우리는 이 서비스를 백엔드 분석 서비스로 설정했다.이벤트 흐름을 분석해서 Amazon Pinpoint 흐름에 전송한 다음, 다른 공급자가 흐름의 이 사건들을 처리할 수 있습니다.

다음에 "amplify analytics pinpoint"의존항을pubspec에 추가합니다.yml

Amazon Kenesis 공공규범.yaml 세션

마지막으로main의 확대 설정 코드를 업데이트합니다.dart, 새로운 분석 분류 포함

|참고: 모든 작업이 올바르면 어플리케이션 재부팅이 가능해야 합니다. — 만약 이것이 예상과 맞지 않는다면, 설정의 내용을 검사하십시오.이 파일의dart는 확대 클래스의 모든 설정 세부 정보입니다.프로젝트에 추가된 클래스에 설정 값이 없으면 프로그램이 시작할 때 이상을 던지고 부족한 세부 정보를 제공합니다.
모든 것이 정상적이라고 가정하면 프로그램이 시작되고 있으며, 다음 단계는 어떤 사건을 포착할지 결정하는 것이다.이 프로그램에서, 우리는 모든 사용자가 쇼핑 목록에 추가한 쇼핑 항목에 대해 흥미를 느낄 것이다.Amplify Analytics의 가장 큰 특징은 사용자의 상세한 정보를 절약하고 우리가 추적하고자 하는 이벤트에 쉽게 추가할 수 있다는 것이다.바로 시작해보도록 하겠습니다.
shoppinglistItem 보기.던지다

여기서 사용자가 쇼핑 목록에서 새 항목을 만드는 UI 호출을 캡처합니다.recordNew Event 메서드는 이벤트를 장식하여 에 보냅니다.
shoppinglistItem 보기.던지다
Pinpoint
이벤트를 등록하기 전에 작은 수정을 합니다. 기본적으로 이벤트는 30초마다 Pinpoint 서버로 갱신됩니다.이 기본값은 구성에서 변경할 수 있습니다.필요하면 다트도 돼요.자세한 내용은 참조 및 Amplify Analytics 범주를 사용하여 얻을 수 있는 자세한 정보를 참조하십시오.

여기 있다 총결산

이것이 바로 Android Flatter 프로그램을 구축하여 쇼핑 리스트 데이터를 저장하는 여정입니다. 마지막 부분에서 개인 정보 이미지를 업로드하고 분석을 통해 사용자의 행동을 추적하는 기능을 추가했습니다.우리는 Flatter pub에서 기존 구성 요소를 도입하는 능력에 대해 토론했다.본기 컨트롤과 상호작용을 하다.그런 다음 Amplify의 스토리지 범주를 이 항목에 추가했습니다. 이 항목은 Amazon S3 bucket에 애플리케이션 이미지를 저장할 수 있는 올바른 권한을 제공합니다.마지막으로 Analytics 클래스를 추가하여 Amazon Pinpoint 실례를 제공하여 장치에서 사용자의 상호작용을 추적하고 싶은 모든 이벤트를 저장합니다.
이 강좌에서는 바이브레이션과 AWS Amplify를 결합하여 어플리케이션 개발 및 공급의 수명 주기를 가속화하는 방법에 대해 알아봤습니다.따라서, 최종적으로 당신은 그 어느 때보다 기능이 강한 응용 프로그램을 사용자에게 더 빨리 전달할 수 있습니다.
만약 이 블로그를 따라 이 프로그램을 구축하고 싶다면, 완성된 코드는 에서 복제할 수 있고, 카일 (aka) 을 따라 그의 뛰어난 #30daysofflatter에서 복제할 수 있다는 것을 기억하십시오.
읽어주셔서 감사합니다. 질문이 있으면 트위터에 연락 주세요.
다음까지...