조코드

아이디에 영어와 숫자만 가능하며 10글자 이내로만 아이디를 받기로 하였다.

edit_id.filters = arrayOf(InputFilter { source, _, _, _, _, _ ->
            val ps: Pattern =
                Pattern.compile("^[a-zA-Z0-9\\u318D\\u119E\\u11A2\\u2022\\u2025a\\u00B7\\uFE55]+$")
            if (source == "" || ps.matcher(source).matches()) {
                return@InputFilter source
            }
            Toast.makeText( this, "영문, 숫자만 입력 가능합니다.", Toast.LENGTH_SHORT).show()
            ""
        }, InputFilter.LengthFilter(10))

A-Za-z0-9는 영어와 숫자만 입력이 가능하게 하는 정규식 특수문자이고 조건에 맞지 않으면 메시지를 띄운다.

\\u318D\\u119E\\u11A2\\u2022\\u2025a\\u00B7\\uFE55 이것은 천지인 키보드에 맞게 정의한 입력방식이다. 

LengthFilter로 10글자까지만 입력 가능하도록 하였다.

로그아웃 버튼을 클릭하였을 때 다이얼로그를 띄운다.

No를 클릭시 null값으로 다이얼로그가 내려가며

Yes클릭 시 로그아웃이 되었다는 메시지와 간단하게 login_activity로 이동하여 메인화면인 로그인 창으로 넘어가도록 하였다.

button_logout.setOnClickListener { view ->
            var dialog = AlertDialog.Builder(this)
            dialog.setTitle("로그아웃을 하시겠습니까?")
            dialog.setMessage("저희 SAFE FARM을 이용해주셔서 감사합니다.")
            dialog.setIcon(R.drawable.icon5)

            fun toast_p() {
                Toast.makeText(this, "로그아웃 되었습니다.", Toast.LENGTH_SHORT).show()
                    val intent = Intent(this,login_activity::class.java)
                    startActivity(intent)
            }
            var dialog_listener = object: DialogInterface.OnClickListener{
                override fun onClick(dialog: DialogInterface?, which: Int) {
                    when(which){
                        DialogInterface.BUTTON_POSITIVE ->
                            toast_p()
                    }
                }
            }
            dialog.setPositiveButton("YES",dialog_listener)
            dialog.setNegativeButton("NO",null)
            dialog.show()
        }

1.5초 내로 두 번 뒤로 가기를 눌렀을 경우 토스트 메세지를 띄우고 앱을 종료시키는 코드이다.

필요한 각 activity에 코드를 넣었다.

var lastTimeBackPressed : Long = 0
    override fun onBackPressed() {
        if(System.currentTimeMillis() - lastTimeBackPressed >= 1500){
            lastTimeBackPressed = System.currentTimeMillis()
            Toast.makeText(this,"'뒤로' 버튼을 한번 더 누르시면 종료됩니다.",Toast.LENGTH_LONG).show() }
        else {
            ActivityCompat.finishAffinity(this)
            System.runFinalization()
            System.exit(0)
        }
    }

이렇게 카드뷰를 만들었다.

build.gradle(Module: app)

implementation 'androidx.cardview:cardview:1.0.0'
implementation 'com.android.support:cardview-v7:28.0.0'

2번째의 implementation의 경우 버전이 안 맞아서 레이아웃에 에러가 나더라 

1번째의 implementation으로 겨우 성공했다. 

build.gradled에서 Sync Now를 하고 implementation에 빨간줄이 뜬다고 무서워하지 마라 

Build의 SUCCESSFUL이 뜨면 성공이다. (나는 오류인줄알고 무서워서 이리저리 만짐...)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@drawable/wave"
    android:orientation="vertical"
    app:cardUseCompatPadding="true"
    >


    <TextView
        android:id="@+id/title_catagory"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="30dp"
        android:text="Farm"
        android:textColor="#fff"
        android:textSize="30dp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/button_logout"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:layout_marginLeft="280dp"
        android:background="@drawable/round_bt"
        android:text="Logout"
        android:textColor="#FFFFFF"
        android:textSize="12sp"
        android:textStyle="bold"
        />

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="20dp"
        android:columnCount="2"
        android:rowCount="3">

        <androidx.cardview.widget.CardView
            android:id="@+id/cardview1"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_rowWeight="1"
            android:layout_column="0"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_margin="8dp"
            android:background="#FFFFFF"
            android:elevation="40dp"
            app:cardCornerRadius="15dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center_horizontal"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:src="@drawable/icon1" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="FARM1"
                    android:textAlignment="center"
                    android:textStyle="bold" />


            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:id="@+id/cardview2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_rowWeight="1"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_margin="8dp"
            android:background="#FFFFFF"
            app:cardCornerRadius="15dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center_horizontal"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:src="@drawable/icon" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="FARM2"
                    android:textAlignment="center"
                    android:textStyle="bold" />


            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:id="@+id/cardview3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_rowWeight="1"
            android:layout_column="0"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_margin="8dp"
            android:background="#FFFFFF"
            app:cardCornerRadius="15dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center_horizontal"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:src="@drawable/icon2" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="FARM3"
                    android:textAlignment="center"
                    android:textStyle="bold" />


            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:id="@+id/cardview4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_rowWeight="1"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_margin="8dp"
            android:background="#FFFFFF"
            app:cardCornerRadius="15dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center_horizontal"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:src="@drawable/icon3" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="FARM4"
                    android:textAlignment="center"
                    android:textStyle="bold" />


            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:id="@+id/cardview5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="2"
            android:layout_rowWeight="1"
            android:layout_column="0"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_margin="8dp"
            android:background="#FFFFFF"
            app:cardCornerRadius="15dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center_horizontal"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:src="@drawable/icon4" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="FARM5"
                    android:textAlignment="center"
                    android:textStyle="bold" />


            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:id="@+id/cardview6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="2"
            android:layout_rowWeight="1"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_margin="8dp"
            android:background="#FFFFFF"
            app:cardCornerRadius="15dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center_horizontal"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:src="@drawable/icon5" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="FARM6"
                    android:textAlignment="center"
                    android:textStyle="bold" />


            </LinearLayout>
        </androidx.cardview.widget.CardView>
    </GridLayout>
</LinearLayout>

그 뒤에 androidx.cardview.widget.CardView 를 사용하여 그 안에 카드뷰를 꾸미면 된다.

app:cardCornerRadius="15dp"
app:cardElevation="8dp"

참고로 CornerRadius는 카드의 모서리를 둥글게 하는것

Elevation 카드의 그림자이다.

(나는 코드를 적었는데도 화면상의 변화가 없길래 당황했는데 알고보니 Run 'app' 을 실행시키니 변화가 생겼다.

가상머신이나 폰으로 실행시켜보자.)

github.com/parksung-woo/4JO.git

README.md

프로젝트 개요 : 농장의 일은 온도와 습도 같은 환경에 예민하게 반응한다.
               개발한 프로젝트의 어플리케이션으로 온도와 습도를 관련하여 농장을 편리하게 관리할 수 있도록 하기 위해 제작을 결심했다.
               
프로젝트 소개: 안드로이드 App에 접속하여 회원가입을 진행 후 농장을 만들어 해당 농장의 온도,습도정보를 확인할 수 있다.
              온도의 따라 라즈베리파이에 연결된 Fan을 원격으로 동작시켜 온도를 낮출 수 있고, 
              그래프와 카메라를 이용하여 농장의 온도변화와 실시간 화면을 확인할 수 있다.
              웹의 관리자 화면에서는 관리자 비밀번호를 입력 후 회원가입한 회원정보 리스트를 확인할 수 있다.
              회원정보 리스트에서 회원정보를 수정 및 삭제 가능

      App기능  
                  1. 회원가입
                   - ID, password, password_confirm, nickname입력 후 회원가입
                     (primary key:ID, password = password_confirm, 모든 빈칸을 채워야 회원가입 가능)
                     (ID:최대 10글자 가능. password:최대 12글자 가능, nickname: 최대 3글자 가능)
                  2. DB에 실시간으로 저장된 온도, 습도 정보 확인
                     (이상 수치 발생 시 log저장 후 푸시 알림 및 Fan 자동 작동)
                  3. 스위치 버튼 클릭 시 라즈베리파이에 연결된 DC 모터를 이용하여 원격 Fan 수동 작동
                  4. 그래프를 통한 온도 확인
                  5. 라즈베리파이에 연결된 카메라를 통해서 실시간 농장 확인
      
      웹 기능(관리자 화면)
                  1. 관리자 비밀번호 입력 후 Member list 출력 화면
                  2. Member list에서 회원정보 수정 및 삭제 가능
               
      Local에서 돌리기 위한 매뉴얼
                  1. 안드로이드 App : android client 폴더 - team4Android 실행 (Size=Picel 3XL, Minimum SDK=API 22:Android 5.1(Lollipop)) 
                  2. Spring boot: backend 폴더 - service 실행(Intellij(Ultimate Version))
                    (본인의 AWS DB 주소 및 local ip주소 변경 후 RUN)
                  
                  
    #개발환경
        -Web
        * SERVER : TOMCAT 11.0
        * DATABASE : MariaDB 10.3.20(AWS EC2 RDS생성)
        * IDE : Intellij(Ultimate Version)
        * FrontEnd : Bootstrap, Javascript, HTML5, CSS3
        * Language & Framework : Java 8, Spring boot 2.3.1

        -App
        * Language & Framework : Kotlin , Anroid Studio(compileSdkVersion 30, minSdkVersion 22)
        * DATABASE : MariaDB 10.3.20             

        * Git(2.27.0) & Sourcetree, Slack 메신저, oven 스토리 보드 활용

        * 라즈베리파이 Model 3 B

youtu.be/zlyImqBj1nI

youtu.be/dA6TSTVa8gE

youtu.be/0rKVD-X7DDs

     라즈베리파이 시연영상

1. https://getwaves.io/

wave를 이용해서 로그인 레이아웃을 만들었다.

2. https://hatchful.shopify.com/

로고를 만들어주는 사이트.

로고를 받아와서 splash화면을 만들었다.

https://www.remove.bg/ko 로고 배경이 마음에 안 든다면 여기서 배경을 쉽게 제거 가능하다. (다른 사진도 배경 없애기 가능.)

3. https://www.flaticon.com/kr/

무료 아이콘을 사용할 수 있는 사이트.

카테고리 화면에 아이콘을 넣어 레이아웃을 꾸몄다.

4. https://www.remove.bg/ko

위에 말한 것 처럼 이미지의 배경을 삭제해준다. 간단한 이미지라는 전제하에 대부분 원하는대로 지워준다.

5. https://www.pptwear.com/

ppt를 만드는데 참고한 사이트 (근데 유료라 진짜 참고만 함...)

6. https://unsplash.com/

원하는 이미지를 다운받을 수 있다. 나는 웹의 배경사진으로 사용하였다.