on
서버리스 모바일 앱 개발 -1
서버리스 모바일 앱 개발 -1
반응형
이것은 2부작 시리즈입니다. 이 시리즈의 두 번째 부분인 AWS 서비스와 백엔드에 대한 내용이 곧 제공될 예정입니다.
반응 네이티브 - AWS 람다 - Dynamodb - S3
안녕하세요.
이 기사에서는 제가 예전에 만든 모바일 애플리케이션을 소개하겠습니다. 저는 몇가지 이론과 코드를 보여주면서 앞으로 나아갈 생각입니다. 누군가에게 유용하게 쓰이기를 바랍니다.
이 기사에서는 React Native 또는 AWS Lambda에 대해 가르치지 않을 것입니다. 그것을 필요로 하는 사람들은 다른 자원들을 볼 수 있다.
다시 한 번 말하지만, 이 글에서는 자세한 내용을 일일이 설명하지 않을 것이다. 이렇게 자세한 설명은 긴 시리즈를 의미한다. 불행히도, 지금은 시간이 많지 않지만, 미래에는 희망적으로.
React Native와 AWS를 적어도 엔트리 레벨에서 알고 계신 분들을 위해 이 글을 쓰고 있습니다. AWS 지식만 있으면 충분합니다. 람다는 알 필요가 없습니다. 이 기사에서는 더 많은 코드를 보여드리겠습니다. 내레이션은 없습니다:(
질문 및 제안사항을 제출해 주십시오. 잘 읽었어요.
더 앱
제가 여기서 만든 어플은 교육 분야에 대한 특별한 어플입니다. 나는 시험을 준비하는 학생들이 질문을 할 수 있는 모바일 어플리케이션을 개발했다. 학생이 질문을 하면 선택한 수업 유형에 따라 해당 교사의 전화로 알림이 전송됩니다. 그리고 나서 선생님은 문제를 풀고 그것을 어플리케이션에 올린다. 학생은 해결책 통지를 받습니다.
응용 프로그램에서 React Native를 사용한 이유는 무엇입니까?
최근 몇 년 동안, 리액트 네이티브는 모바일 애플리케이션 개발에 사용되는 라이브러리들 사이에서 명성을 얻기 시작했다. JS로 글을 쓰는 것, 안드로이드와 IOS의 공통 코드 편집, 그리고 단순함이 저에게는 하이라이트입니다. JS나 TS를 좋아한다면 React Native는 당신을 위한 것입니다.
선택한 반응 네이티브 템플릿: 이제 UI 반응 네이티브 템플릿
모바일 애플리케이션 개발에서 디자인은 중요합니다. 우리, 개발자들은 디자이너가 아니며 나는 이 일을 전문가들에게 맡기는 것이 최선이라고 생각한다. 이러한 이유로 웹에서 찾고 있던 자유 반응 네이티브 템플릿 중 첨부된 템플릿을 찾아서 사용했습니다. 매우 강력하고 명확하며 확장 가능하며 배우기 쉽습니다. 강력히 추천합니다.
프로젝트 코드 다시 작성
여기서 프로젝트의 코드를 찾아서 다운로드할 수 있습니다. 기부금도 환영합니다.
기본 폴더 구조 및 중요 파일 대응
빈 React Native 프로젝트를 생성할 때 제공되는 파일 구조는 일반 프로젝트에 적합합니다. 대응 네이티브 프로젝트에서 중요한 파일 두 개는 패키지입니다.json, package-lock.json 파일. 이 파일에는 대응 네이티브 프로젝트에서 사용할 js 라이브러리의 목록과 버전이 들어 있습니다. 단일 참고: 반응 네이티브 프로젝트를 시작하기 전에 패키지 관리자를 설치해야 합니다. 프로젝트에서 노드 패키지 관리자를 사용합니다.
전체 반응 네이티브 관련 코드는 bulutasor/BulutaSorFrontend2 폴더에 있습니다. 다음은 검사해야 할 폴더입니다.
화면: 모든 화면 코드는 이 폴더 아래에 있습니다.
샘플 화면 코드:
/* eslint-disable no-console */ import React from 'react'; import { StyleSheet, Dimensions, ScrollView, Alert } from 'react-native';// cache app images // import * as Notifications from 'expo-notifications'; import { connect } from 'react-redux'; import { Block, Text, theme, withGalio } from 'galio-framework'; import AnimatedLoader from 'react-native-animated-loader'; import { Card } from '../components'; const { width } = Dimensions.get('screen'); class StudentsSolvedQuestionListScreen extends React.Component { constructor(props) { super(props); this.state = { visible: false, error: null, }; } componentDidMount() { this.state.visible = false; this.state.error = null; } renderArticles = () => { const { error } = this.state; const { questions } = this.props; return ( {error ? {error.message} : null} { (Array.isArray(questions)) ? questions.filter((item) => item.state === 'passive').map( (question) => ) : ( Henüz çözülmüş bir sorun yok. ) } ); }; render() { const { visible } = this.state; return ( {this.renderArticles()} ); } } const styles = StyleSheet.create({ home: { width, }, articles: { width: width - theme.SIZES.BASE * 2, paddingVertical: theme.SIZES.BASE, paddingHorizontal: 2, fontFamily: 'montserrat-regular', }, }); function mapStateToProps(storeState) { return { userName: storeState.userName, password: storeState.password, questions: storeState.questions }; } function mapDispatchToProps() { return { // setQuestions() }; } export default withGalio(connect(mapStateToProps, mapDispatchToProps)(StudentsSolvedQuestionListScreen));
구성 요소: 이 폴더 아래에는 대응 네이티브 템플릿과 함께 제공되는 구성 요소 라이브러리를 찾을 수 있습니다.
import React, { useState } from 'react'; import { Alert, Modal, StyleSheet, TouchableWithoutFeedback, Keyboard, View, Dimensions, TouchableOpacity, } from 'react-native'; import { Text, theme, Block } from 'galio-framework'; import { useNavigation } from '@react-navigation/native'; import { useSelector } from 'react-redux'; import ArButton from './Button'; import Icon from './Icon'; import nowTheme from '../constants/Theme'; const DismissKeyboard = ({ children }) => ( Keyboard.dismiss()}>{children} ); const { width, height } = Dimensions.get('screen'); const SessionBar = (props) => { const [modalVisible, setModalVisible] = useState(0); const user = useSelector((state) => state.user); const navigation = useNavigation(); let userType = 'Öğrenci'; const { isTeacher } = user; if (isTeacher) { userType = 'Öğretmen'; } console.log(`isTeacher:${isTeacher}`); console.log(`userType:${userType}`); return ( { Alert.alert('Modal has been closed.'); } > { setModalVisible(false); } title="Kapat" > Kapat {userType} {user.userName} { setModalVisible(false); logout(); navigation.navigate('LoginScreen'); } title="Oturumu Kapat" > Oturumu Kapat { setModalVisible(true); } > {user.userName} ); }; export default SessionBar; const styles = StyleSheet.create({ registerContainer: { marginTop: 55, width: width * 0.9, height: height < 812 ? height * 0.8 : height * 0.8, backgroundColor: nowTheme.COLORS.WHITE, borderRadius: 4, shadowColor: nowTheme.COLORS.BLACK, shadowOffset: { width: 0, height: 4, }, shadowRadius: 8, shadowOpacity: 0.1, elevation: 1, overflow: 'hidden', }, centeredView: { flex: 1, justifyContent: 'flex-start', alignItems: 'center', margin: 20, backgroundColor: nowTheme.COLORS.WHITE, padding: 20, }, modalView: { backgroundColor: theme.COLORS.WHITE, borderRadius: 20, margin: 35, padding: 35, height: height * 0.6, width: width * 0.6, justifyContent: 'flex-start', alignItems: 'stretch', borderColor: theme.COLORS.BLACK, }, openButton: { backgroundColor: theme.COLORS.WHITE, borderRadius: 20, padding: 10, elevation: 2 }, title: { flex: 2, height: height * 0.07, alignItems: 'center', justifyContent: 'center', }, titleTextStyle: { fontWeight: '400', fontSize: theme.SIZES.FONT * 2, color: theme.COLORS.BLACK, paddingTop: 20 }, createButton: { width: width * 0.5, marginTop: 25, marginBottom: 40, }, profileButton: { padding: 12, position: 'relative', width: width * 0.2, }, cikisButton: { padding: 12, position: 'relative', width: width * 0.2, } });
Android 및 IOS: 이 폴더에서는 컴파일 중 리액트 네이티브 코드로 생성된 환경별 구성을 찾을 수 있습니다. 일부 타사 라이브러리 사용에는 운영 체제별 설정이 필요합니다. 이 경우, 우리가 개입할 코드는 여기에 있습니다. 정상적인 상황에서는 이러한 폴더에 어떠한 개발도 수행되지 않습니다.
Appium: 우리가 모바일 애플리케이션을 개발할 때, 우리는 다른 기기에서 애플리케이션을 테스트해야 합니다. 일반적으로 운영 체제 모델, 버전, 메모리 및 화면 크기에 따라 응용 프로그램이 매우 다르게 작동하거나 더 나쁘게는 작동하지 않을 수 있기 때문에:(최종 사용자가 응용 프로그램에서 경험하기 전에 이 상황을 파악하기 위해 장치 팜에서 응용 프로그램을 테스트하는 것이 매우 유용할 수 있습니다. 저는 그것을 꼭 추천합니다. AWS Device Farm은 여기에서 찾을 수 있습니다.
리덕스
Redux는 데이터 저장소입니다. 일반적으로 응용 프로그램 화면으로 데이터를 분리하는 것이 좋습니다. 이러한 방식으로 화면 간 또는 동일한 화면의 서로 다른 구성 요소 간에 데이터 일관성이 보장됩니다. Redux는 이제 React Native, Vue 또는 Angular와 같은 JS 라이브러리에서 반드시 사용해야 하는 구성 요소입니다. 아래 주소에서 세부 정보에 액세스할 수 있습니다.
그리고 Zafer Ayan의 터키어 기사 하나
결론
이 기사에서, 저는 제 모바일 앱의 반응-토착 코드를 소개하려고 했습니다. 아마도 누군가에게 영감을 줄 것입니다. 이 시리즈의 두 번째 글에서 백엔드에 대해 설명하겠습니다.
당신의 사랑스러운 삶을 기원합니다.
from http://it-ground.tistory.com/180 by ccl(A) rewrite - 2021-09-14 05:01:23