서비스를 해야할 일이 있어 앱을 만들까 하다가 웹 페이지를 만들어서 웹과 모바일 양쪽에서 사용 하는게 좋을것 같아 간단한 테스트를 해봅니다.

 

일단 껍데기만 있는 앱을 하나 만들어 봅니다.

 

1. 프로젝트 생성


android_webview


이런! 만들고 나니 WebWEb으로 하였군요.  아무리 구상 단계지만 너무 성의가 없네요.


android_webview


어째든 샘플이니까 그냥 계속 진행 합니다.


android_webview


Empty Activity를 선택하고 나머지는 그냥 Next 버튼을 클릭 합니다.

 


2. 레이아웃 수정

 

Layout을 수정할 차례군요.


android_webview


기본으로 생성되는 Hello World는 삭제하고


android_webview


좌측 Palette에 있는 WidgetsWebView를 찍어서 우측에 넣어 줍니다.


android_webview


단순하지만 원하는 모양 입니다.

 

 

3. 코딩

 

이제 코딩을 시작 합니다.


3.1 AndroidManifest.xml


인터넷을 사용하려면 권한이 있어야 하니 권한을 추가 합니다.

 

<uses-permission android:name="android.permission.INTERNET" />

 

3.2 activity_main.xml


Layout에 추가한 WebViewID를 생성해 줍니다작업할 때 생성했으면 넘어갑니다.

 

<WebView
   
android:id="@+id/webvw"
   
android:layout_width="match_parent"
   
android:layout_height="match_parent"
   
tools:layout_editor_absoluteX="8dp"
   
tools:layout_editor_absoluteY="8dp" />

 

3.3 MainActivity.java


마지막으로 웹 페이지가 나오도록 코딩을 완료 합니다.

 

webView = (WebView) findViewById(R.id.webvw);
webView.setWebViewClient(new WebViewClient());

webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);

webView.loadUrl("https://copycoding.tistory.com");

 

 

4. 결과

 

https://copycoding.tistory.com를 호출한 결과를 볼까요?


android_webview


 

잘 나오는 군요. 가상 서버에서 작업 중인 로컬 웹 서버를 호출해 보았습니다.

 

webView.loadUrl("http://192.168.1.118:8080/tistory/");

 


android_webview

 

예쁜 이미지만 입히면 되겠습니다.  이제 열심히 일만 하면 되겠군요.

 


5. 전체 소스

 

5.1 AndroidManifest.xml

 

<?xml version="1.0" encoding="utf-8"?>
<manifest
xmlns:android="http://schemas.android.com/apk/res/android"
   
package="copycoding.tistory.mobileweb">

    <uses-permission
android:name="android.permission.INTERNET" />

    <application
       
android:allowBackup="true"
       
android:icon="@mipmap/ic_launcher"
       
android:label="@string/app_name"
       
android:roundIcon="@mipmap/ic_launcher_round"
       
android:supportsRtl="true"
       
android:theme="@style/AppTheme">
        <activity
android:name=".MainActivity">
            <intent-filter>
                <action
android:name="android.intent.action.MAIN" />

                <category
android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

 

 

5.2 activity_main.xml

 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
   
xmlns:app="http://schemas.android.com/apk/res-auto"
   
xmlns:tools="http://schemas.android.com/tools"
   
android:layout_width="match_parent"
   
android:layout_height="match_parent"
   
tools:context=".MainActivity">

    <WebView
       
android:id="@+id/webvw"
       
android:layout_width="match_parent"
       
android:layout_height="match_parent"
       
tools:layout_editor_absoluteX="8dp"
       
tools:layout_editor_absoluteY="8dp" />
</android.support.constraint.ConstraintLayout>

 

 

5.3 MainActivity.java

 

package copycoding.tistory.mobileweb;

import
android.support.v7.app.AppCompatActivity;
import
android.os.Bundle;
import
android.webkit.WebSettings;
import
android.webkit.WebView;
import
android.webkit.WebViewClient;

public class
MainActivity extends AppCompatActivity {

   
private WebView webView;
    private
WebSettings webSettings;
   
@Override
   
protected void onCreate(Bundle savedInstanceState) {
       
super.onCreate(savedInstanceState);
       
setContentView(R.layout.activity_main);

       
webView = (WebView) findViewById(R.id.webvw);
       
webView.setWebViewClient(new WebViewClient());

       
webSettings = webView.getSettings();
       
webSettings.setJavaScriptEnabled(true);

       
webView.loadUrl("https://copycoding.tistory.com");
   
}
}



전에 카카오뱅크에서 빠른 해외송금에 대해 설명을 했는데 이번에는 돈을 찾는 방법에 대해 알아 보겠습니다.

 


돈은 찾는 방법은 WU(Western Union) 가맹 은행을 찾으면 됩니다.  돈을 찾을 수 있는 위치는 송금 후 수취인에게 송금 내역을 카톡으로 공유할 때 넘겨 주는 정보와 


카카오뱅크 해외 빠른 송금


웨스턴유니온 송금받기 가이드 정보를 참고 합니다.


카카오뱅크 해외 빠른 송금


Guide for Receiver를 클릭 하면 아래처럼 돈을 찾는 방법을 설명하는 페이지로 이동을 합니다.


카카오뱅크 해외 빠른 송금


여기에서 here(이곳을) 링크를 클릭하면


카카오뱅크 해외 빠른 송금


내 위치와 돈이 묻혀있는 보물지도왜이러지? . 내일 로또 사야겠다.

WU 취급점 위치가 나오면 그 중에 가까운 곳으로 이동을 합니다서류작업을 ATM기를 사용 하거나 양식을 이용하여 작성할 수 있습니다아래에 설명하는 방법 말고도 다른 방법이 있겠지만 알고 있는 방법만 설명 합니다.



1. ATM을 이용 하는 방법

 

1) 가까운 은행을 찾습니다.


카카오뱅크 해외 빠른 송금


2) 터치스크린 컴퓨터 또는 ATM기를 찾아 봅니다.


카카오뱅크 해외 빠른 송금


3) 화면에서 Western Union을 찾아 클릭 합니다.


카카오뱅크 해외 빠른 송금


4) 화면이 바뀌고 Select Service to Begin에서 Pick up Money를 선택 합니다. 나머지는 개인 정보 입력이라 말로 설명 드립니다대단한 내용은 없고 이름, 주소, 전화번호 입력하는 내용 입니다.

 

5) Personal Information에 이름과 전화번호를 입력 합니다. [Continue] 클릭

 

6) 집 주소를 입력해야 하는데 모든 정보는 보내는 사람이 보낼 때 받는 사람에 대해서 정보를 입력한 정보와 동일하게 입력 합니다. [Continue] 클릭

 

7) 최대 300달러를 받을 수 있다는 Important Information이 나오면. [Next] 클릭


8) Receive Money에는 보내는 사람이 보낼 떄 입력한 정보와 동일한 정보를 입력합니다. MTCN 번호는 위쪽을 보면 맨 처음 카톡 이미지 상단에 있는 번호 입니다. 받을 금액을 적고 송금 국가를 선택하고 [Next] 버튼을 클릭 합니다.

 

9) Receiver Identification에는 돈을 찾는 사람의 정보를 입력하고 [Continue] 버튼을 클릭 합니다.

 

10) 마지막으로 개인정보 수집에 관한 어쩌고 저쩌고써있으면 밑에 체크박스 선택 하고 Finalize and proceed to Register 버튼을 클릭 합니다..

 

11) 서류작업은 끝입니다.

 

12) 카운터에 가서 Western Union bank 돈 찾으러 왔다고 말하고, ID를 보여달라고 하면 여권을 보여주고 돈을 받아 나옵니다. 

 


2. 청구 양식 이용

 

은행에 비치되어 있거나 없는 경우 카운터에 웨스트 유니언 돈을 받으려고 한다고 말하고 종이 양식을 받아 채워 넣고 여권과 함께 제출하여 돈을 찾습니다은행마다 요청 양식이 다른데 ATM기에 입력한 내용과 동일한 정보를 입력 합니다.


카카오뱅크 해외 빠른 송금



1. Eclipse Apache-Tomcat 설치

 

eclipseapache-tomcat Spring Framework를 이용해 개발을 하기 위한 가장 기본 작업 입니다.가능하면 하나의 세트로 만들어 압축하고 보관해 두었다가 다른 작업을 테스트할 때 가져다 사용하면 좋습니다. 설치 방법은 전에 올린 내용을 참고 하면 됩니다.


eclipse java apache-tomcat 설치 (Windows)



2. Spring plug-in 설치

 

eclipse에서 plug-in으로 spring을 설치 하려면 marketplace에 가야 합니다메뉴 위치는

Help > Eclipse Marketplace

에 있습니다.


eclipse_spring_plugin


Marketplace 팝업 창에서 spring 또는 sts를 입력하여 검색을 합니다.


eclipse_spring_plugin


Spring Tools 3Spring Tools 4가 있습니다.  둘 중 목적에 맞게 선택하고 Install 버튼을 클릭 합니다. 버전 별로 설치 내용에 차이가 있으니 확인해 봅니다.

 

- Spring Tools 3 선택한 경우


eclipse_spring_plugin


- Spring Tools 4 선택한 경우


eclipse_spring_plugin


Spring Tools 3을 선택하고 진행 합니다.


eclipse_spring_plugin


필요한 파일에 대해 설치를 하기 전에 라이센스에 대해 확인을 요청 합니다.


eclipse_spring_plugin


라이센스를 확인하고 Finish 버튼을 클릭 합니다.

 

설치가 진행되고 나면 반영을 하기 위해 재 시작을 하게 됩니다.


eclipse_spring_plugin


재 시작을 하고 eclipsespring dashboard가 보이면 잘 설치가 된 것 입니다.


eclipse_spring_plugin



3. MVC 프로젝트 생성

 

프로젝트를 하나 생성해서 테스트 해보도록 합니다상단 메뉴에서 팝업 메뉴를 따라 갑니다.

File > New > Other


eclipse_spring_plugin


Spring 폴더를 확장 해서 Spring Legacy Project를 선택 하고 Next 버튼을 클릭 합니다.


eclipse_spring_plugin


Project name을 대충 입력 하고 Spring MVC Project를 선택 한 후 Next 버튼을 클릭 합니다.


eclipse_spring_plugin


파일을 추가로 다운로드 받아야 한다는 군요.  package 명은 편한 대로 프로젝트에 적합한 단어를 찾아 입력 합니다.


eclipse_spring_plugin


Finish 버튼을 클릭하고 잠시 기다림을 갖습니다.


eclipse_spring_plugin


프로젝트가 생성 되었습니다.  어떤 파일이 있는지 폴더를 펼쳐 보았습니다프로젝트를 생성하면 기본적인 파일이 같이 생성이 되어 있습니다어떤 내용인지 프로젝트를 실행해 봅니다.


eclipse_spring_plugin


프로젝트 명에 마우스를 대고 우측 버튼을 눌러 Run As를 찾아서 다시 Run on Server를 클릭 해 줍니다.


eclipse_spring_plugin


설치된 WAS(여기서는 Tomcat)을 선택 해주고 Next 버튼을 클릭 합니다.


eclipse_spring_plugin


우측에 지금 테스트 하려는 MvcTest만 남기고 Finish 버튼을 클릭 합니다.


eclipse_spring_plugin


결과가 나왔습니다이게 기본으로 들어 있는 프로그램 이군요.



개인적으로 java관련 개발을 진행 할 때 가장 기본이 되는 설정 이라고 생각 됩니다어느 프로그램을 먼저 설치하든 관계 없지만 윈도우 특성상 설치 후 재실행이 적은 순서로 작업 하면 됩니다저의 작업 순서는

1. WAS 설치 (여기서는 Apache)

2. Java 설치

3. Eclipse 설치

4. WAS 설정

5. TEST Project

 

 

1. Apache 설치

 

아파치 사이트에 가서 맘에 드는 걸로 고르면 됩니다.

https://tomcat.apache.org/download-80.cgi



eclipse_java_apache_tomcat


좌측에 버전 별로 리스트가 되어 있습니다하나를 클릭 합니다저는 8.5


eclipse_java_apache_tomcat


예전엔 네트워크 상태가 좋지 않아 국내 밀러 서버를 선택 했는데 그냥 다운받아도 되고 다운받을 서버를 선택해도 됩니다운영체제에 맞게 다운로드 합니다.  Apache Tomcat은 압축을 풀어 주기만 하면 됩니다물론 msi를 받으신 분은 설치를 해야 합니다저는 압축을 풀고 파일을 C:\project로 이동을 했습니다. 이제 환경 설정에서 설정을 진행 합니다.

 

- 변수 추가

환경 변수의 하단 시스템 변수에서 새로 만들기 버튼을 클릭 하고 다음을 추가 합니다.

 

CATALINA_HOME

C:\project\apache-tomcat-8.5.39


eclipse_java_apache_tomcat


Path에도 추가를 해줍니다이번엔 bin까지 추가 합니다.

C:\project\apache-tomcat-8.5.39\bin


eclipse_java_apache_tomcat


Apache Tomcat 설정이 완료 되었습니다.



2. Java 설치

 

Oracle 사이트에서 java를 다운받아 설치 합니다자세한 내용은 너무 길어 다음을 참고 합니다.

 

Java 설치 환경 설정

 

 

3. Eclipse 설치

 

Eclipse도 이클립스 사이트에 접속하여 다운로드 합니다.

https://www.eclipse.org


eclipse_java_apache_tomcat


그냥 파일 위치를 찾아 들어가기가 귀찮으면 아래 링크로 들어가서 다운로드 합니다.

 

https://www.eclipse.org/downloads/packages/


eclipse_java_apache_tomcat


64-bit을 클릭 해야 합니다이것도 한번에 다운로드 되지 않고 페이지 이동이 있습니다이것도 다운로드 서버 위치를 변경할 수 있습니다.


eclipse_java_apache_tomcat


다운로드 받은 파일은 압축을 풀고 C:\project 폴더로 이동 하였습니다이제 모든 개발 관련 프로그램이 한곳에 모였습니다여기에 프로젝트 작업을 진행할 workspace 폴더도 추가로 생성 합니다.


eclipse_java_apache_tomcat


eclipse 폴더에서 eclipse를 실행해 봅니다만일 java오류가 발생하면 환경 설정이 잘못 된것 입니다.


eclipse_java_apache_tomcat


문제 없이 지나가면 새로 생성해둔 폴더 workspace를 잡아 주고 Launch 버튼을 클릭 합니다.


eclipse_java_apache_tomcat


. welcome창이 보이는걸 보니 이클립스가 잘 실행이 되었습니다.  


eclipse_java_apache_tomcat



4. WAS 설정

 

WAS(Apache Tomcat) 설정을 합니다.  welcome 창을 닫고 하단에 Server 탭을 찾아 봅니다안보인다면 메뉴에서 찾으면 됩니다.

Window > Show View > Servers


eclipse_java_apache_tomcat


어떤 방법이건 eclipse 하단에 다음처럼 Servers 폴더가 보이면 됩니다.


eclipse_java_apache_tomcat


파란색 글씨 No Servers are...를 더블 클릭 하면 서버리스트가 나옵니다.


eclipse_java_apache_tomcat


여기서 Tomcat v8.5를 선택 하고 Next를 클릭 합니다.  WAS를 다른걸 설치 하셨으며 그것으로 설정 하셔도 됩니다


eclipse_java_apache_tomcat


Tomcat 말고도 여러 가지가 있으니 설치 후 선택만 하면 됩니다선택한 WAS의 위치를 설정하는 창이 나타 납니다.


eclipse_java_apache_tomcat


Browser를 클릭 해서 Apache Tomcat 압축을 풀어놓은 폴더를 설정해 주고 Finish 버튼을 클릭하면 완료 됩니다.


설치 후의 모습입니다좌측에 서버가 생겼고 우측 하단에도 나타났는데 stopped 상태 이군요.


eclipse_java_apache_tomcat


 

5. TEST Project

 

제목이 너무 거창 하군요내용이 많든 적든 하나의 프로젝트이니 신규 프로젝트를 하나 생성합니다.


File > New > Dynamic Web Project


eclipse_java_apache_tomcat


project name은 아무렇게나 적고 Finish 버튼을 클릭하면 끝입니다.


eclipse_java_apache_tomcat


보여줄 내용을 위해 파일 하나를 생성해 봅니다.  WebContent에 마우스를 놓고 우측 버튼 클릭해서 JSP File을 선택 합니다.

WebContent > New > JSP File


eclipse_java_apache_tomcat


폴더 위치는 WebContent가 선택 되어 있는지 확인을 합니다.


eclipse_java_apache_tomcat


파일명을 index.jsp로 하고 Finish 버튼 클릭하면 파일 편집 창을 볼 수 있습니다


eclipse_java_apache_tomcat


Hello World를 입력하고 저장 했습니다실행을 해봐야 겠죠.


eclipse_java_apache_tomcat


프로젝트 명 또는 Tomcat v8.5에 마우스를 놓고 우측 버튼을 클릭 해서 Start를 선택하거나 Server 탭에서 Start 아이콘을 클릭 하거나 동일 합니다.


eclipse_java_apache_tomcat


최초에 나오고 다시는 안 나타나는 창입니다. 액세스 허용을 해줍니다.


eclipse_java_apache_tomcat


서버는 설정된 WAS를 선택하고 Next를 클릭 합니다.


eclipse_java_apache_tomcat


Test 프로젝트가 왼쪽에 있다면 오른쪽으로 이동시키고 Finish 버튼을 클릭 합니다. 서버가 기동을 하고 started 상태가 되면 eclipse 창 가운데 웹 브라우저가 나타나며 결과를 보여 줍니다.  


eclipse_java_apache_tomcat


Hello World 창이 안보이면 아무 브라우저에서 http://localhost:8080/Test/ 를 입력해 봅니다.

 

이제 기본적인 Base 작업 환경이 완료가 되었습니다여기에서 Maven으로 작업을 하던 STS를 설치해서 작업을 하던 그냥 Spring만 설치해서 작업을 하던 plug-in들을 설치해서 하던 main()이 들어있는 콘솔, 배치 작업을 하든 맘대로 해도 됩니다.



1···75767778798081···118

+ Recent posts