댓글 목록

운영중인 사이트를 네이티브 앱으로 만들기(Android Studio)

페이지 정보

작성자 운영자 작성일 19-10-28 22:01 조회 1,376 댓글 0

동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.

1 단계 : 웹 사이트 만들기 


표준 HTML5, CSS3 및 모든 JavaScript 프레임 워크 (Bootstrap, jQuery Mobile 및 AngularJS)를 사용하여 반응형 웹 사이트 만들기 또는 기존 사용


2 단계 : Android Studio 설치 


먼저 아래 두 가지 OS 설치 옵션 중 하나를 선택하십시오.


Windows 설치


1. Windows 용 Android Studio 최신 버전 다운로드

2. 설치 프로그램 아이콘을 두 번 클릭하고 프롬프트와 버튼을 따라 Android Studio를 설치하십시오.


Mac 설치


1. Mac 용 Android Studio 최신 버전 다운로드

2. 설치 프로그램 아이콘을 두 번 클릭하여 설치 프로그램을 실행하고 라이센스 계약에 동의하십시오.

3. 응용 프로그램을 Mac의 응용 프로그램 폴더로 드래그 앤 드롭하여 Android Studio를 설치하십시오.


3 단계 : 스텁 AP 만들기 


이제 Android Studio가 설치되었으므로 스텁 앱을 만들어 보겠습니다


1. 앱 콘텐츠를 저장할 폴더를 만듭니다.

2. Android Studio를 열고 파일> 새로 작성> 새 프로젝트 ...를 선택하십시오.

3. 나타나는 새 프로젝트 생성 대화 상자에서 다음 정보를 추가 한 후 다음 버튼을 클릭하십시오.

   1. Application Name 

   2. Company Domain 

   3. Project Location

a924f40b00c06d53b827cb079115e2d7_1572265125_1915.jpg
 

4. 대상 Android 장치 대화 상자가 표시되면 이 간단한 프로젝트의 기본값을 그대로 사용하고 다음 버튼을 클릭하십시오.


a924f40b00c06d53b827cb079115e2d7_1572265211_4059.jpg
 

5. 모바일에 Activity 추가 대화 상자에서 Empty Activity 옵션을 선택한 후 다음 단추를 클릭하십시오.


a924f40b00c06d53b827cb079115e2d7_1572265346_5102.jpg
 

6. 모바일에 활동 추가 대화 상자에서 활동 비우기 옵션을 선택한 후 내용을 채운 후 완료(finish) 단추를 클릭하십시오.


a924f40b00c06d53b827cb079115e2d7_1572265499_8008.jpg
 

7. 확인 사항 : Gradle에서 앱 빌드를 완료 한 후 실행 단추(run button)를 클릭하여 모바일 장치 또는 에뮬레이터에서 앱을 실행하여 기본 설정과 작동하는지 확인하십시오. Hello World라는 문구가 포함 된 앱이 로드 되는 것을 볼 수 있습니다.


8. Android 패널에서 res> 레이아웃을 클릭 한 후 activity_main.xml 파일을 두 번 클릭하여 여십시오.


9. 디자인보기에서 TextView를 선택한 다음 Delete 키를 누릅니다.


10. 팔레트 패널에서 위젯 카테고리를 선택한 후 구성 요소 트리 패널의 ConstraintLayout 구성 요소 아래에 WebView 구성 요소를 끌어서 놓으십시오.


a924f40b00c06d53b827cb079115e2d7_1572265695_0312.jpg
 

11. WebView 구성 요소가 선택된 상태에서 속성 패널에서 WebView 구성 요소에 myWebView의 ID를 제공하십시오.


a924f40b00c06d53b827cb079115e2d7_1572265797_6475.jpg
 

12. MainActivity.java 파일을 열고 MainActivity() 클래스 내에 다음 강조 표시된 코드를 추가하십시오.


      public class MainActivity extends AppCompatActivity {

           private WebView view; 

           @Override


13. setContentView() 메소드 명령문 아래의 onCreate() 메소드 내에 다음 강조 표시된 코드를 추가하십시오.


     setContentView(R.layout.activity_main); 

     String myURL = “file:///android_asset/www/index.html”; 

     WebView view = (WebView) findViewById(R.id.myWebView); 

     view.loadUrl(myURL); 

     view.getSettings().setJavaScriptEnabled(true); 

     view.setWebChromeClient(new WebChromeClient()); 


   노트:

  -, setJavaScriptEnabled (true); 메소드가 암시하는 대로 JavaScript를 사용 가능하게 설정하십시오.

  -, setWebChromeClient() 메소드는 페이지가 다른 브라우저 창에 로드 되지 않도록 사용됩니다.

  -, 삼중 슬래시 (file:///)에 주목하십시오. 그러나 파일 이름 대신 웹 URL (예 : http://www.mycompanyname.com/) 일 수 있습니다. 그러나 다음 강조 표시된 코드를 작성하여 AndroidManifest.xml 파일에서 앱에 인터넷 권한을 부여해야 할 수도 있습니다. (필요한 경우 확인)


<manifest xmlns:android="http://schemas.android.com/apk/res/android"

  package="com.example.cornelius.helloworldapp" >

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


14. 빨간색 단어 WebView의 첫 번째 인스턴스 내부를 클릭 한 다음 Alt + Enter를 누릅니다.

15. 누르면 Alt 키를 + 파일의 상단에 웹보기를 가져옵니다 입력 : 체크 포인트.


 import android.support.v7.app.AppCompatActivity; 

 import android.os.Bundle; 

 import android.webkit.WebView; 


16. 앱 폴더를 마우스 오른쪽 단추로 클릭하고 새로 작성> 폴더> 자산 폴더를 선택한 후 완료 단추를 클릭하십시오.


 참고 : 빈 자산 폴더가 생성됩니다.


17. 새로 만든 자산 폴더를 마우스 오른쪽 버튼으로 클릭하고 디렉토리를 선택한 다음 새 디렉토리 대화 상자의 텍스트 필드에 www를 입력하고 확인 버튼을 클릭합니다.


참고 : www 디렉토리가 생성됩니다.


18. 새로 작성된 www 디렉토리를 마우스 오른쪽 단추로 클릭하고 새로 작성> 파일을 선택한 후 새 파일 대화 상자의 텍스트 필드에 index.html을 입력하고 확인 단추를 클릭하십시오.


  참고 : 이렇게 하면 index.html 파일이 생성됩니다.


19. 탭 중 하나에 나타나는 index.html 파일에 다음 HTML 코드를 작성하십시오.


 <!DOCTYPE html>

 <html>
 <body>

   <h1>Hello World App</h1>

  </body>

 </html>


20. 확인 사항 : 실행 버튼을 클릭하여 모바일 장치 또는 에뮬레이터에서 앱을 실행하여 기본 설정과 호환되는지 확인하십시오. Hello World App이라는 문구가 제목으로 표시되는 앱이 표시됩니다.


a924f40b00c06d53b827cb079115e2d7_1572266544_0214.jpg
 

21. 다음 강조 표시된 HTML 코드를 index.html 파일에 작성하십시오.


 <!DOCTYPE html>

 <html>

 <head>

  <script src="app.js"></script>

 </head>

 <body>

 <h1>Hello World App</h1>


 <label for="name">Enter Name:</label>

  <input id="name" value="" placeholder="Enter your name"/>


 <button onclick="myMsg()">Display Message</button>

 <br><br>

 <button><a href="page2.html">Page 2</a></button>


 </body>

 </html> 


22. www 폴더 AGAIN을 마우스 오른쪽 단추로 클릭하고 새로 만들기> 파일을 선택한 다음 나타나는 새 파일 대화 상자에 app.js를 입력하고 확인 버튼을 클릭합니다.


23. 나타나는 app.js 파일에 다음 JavaScript 코드를 입력하십시오.


 function myMsg()

 {

  alert("Hello, "+document.getElementById("name").value+ "!!");

 };


24. www 폴더 AGAIN을 마우스 오른쪽 단추로 클릭하고 새로 만들기> 파일을 선택한 다음 새 파일 대화 상자에 page2.html을 입력하고 확인 버튼을 클릭합니다.


25. 나타나는 page2.html 파일에 다음 HTML 코드를 작성하십시오.


 <html>

 <body>

 <h1>Page 2</h1>

 <button><a href="index.html">Go to Home Page</a></button>

 </body>

 </html>


26. 실행 단추를 클릭하고 연결된 장치 (컴퓨터에 장치가 연결된 경우) 또는 사용 가능한 에뮬레이터에서 장치를 선택한 다음 확인 단추를 클릭하십시오.


27. 확인 사항 : 장치 또는 에뮬레이터에 앱이 로드 되어 있어야 합니다. 다음을 통해 올바르게 작동하는지 테스트하십시오.

   1. 이름 입력 텍스트 필드에 이름을 입력 한 후 메시지 표시 버튼을 클릭하면 메시지 표시와 경고를 볼 수 있습니다

   2. 페이지 2 단추를 클릭하여 표시된 페이지 2를 확인한 다음 홈 페이지로 이동 단추를 클릭하여 홈 페이지로 돌아갑니다.


   참고 : 2 페이지로 이동 한 후 에뮬레이터 또는 모바일 장치에서 뒤로 버튼을 클릭하면 현재 앱 홈 페이지가 아닌 이전에 로드 된 앱으로 이동 될 수 있습니다. 이것은 다음 단계에서 해결 될 것입니다.


28. MainActivity.xml 파일 아래에 MainActivity 클래스의 닫는 중괄호 아래에 강조 표시된 다음 단어 (onBack)를 입력 한 다음 Enter 키를 누릅니다.


 view.setWebChromeClient(new WebChromeClient());

 }

 onBack


29. 확인 사항 : 단어가 다음 강조 표시된 코드로 확장되었음을 알 수 있습니다.


 view.setWebChromeClient(new WebChromeClient());

 }

 

 @Override

 public void onBackPressed() {

  super.onBackPressed();

 }


30. 새로 작성된 코드를 다음 강조 표시된 if / else 문으로 수정하십시오.


 @Override

 public void onBackPressed() {


 if(view.canGoBack())

 {

  view.goBack();

 }

 else

 {

 super.onBackPressed();

 }


 }

 

31. 또한 앱 제목을 제거하려면 다음 강조 표시된 코드를 추가하십시오.


 protected void onCreate(Bundle savedInstanceState) {

  requestWindowFeature(Window.FEATURE_NO_TITLE);

  super.onCreate(savedInstanceState);


32. 필요한 경우 확장명을 변경해야 할 수도 있습니다.


  From:

  public class MainActivity extends AppCompatActivity {


  To:

  public class MainActivity extends Activity {


33. 빨간색 단어 활동을 클릭하고 Alt + Enter를 누릅니다.


34. 실행 단추를 클릭하고 연결된 장치 (컴퓨터에 장치가 연결된 경우) 또는 사용 가능한 에뮬레이터에서 장치를 선택한 다음 확인 단추를 클릭하십시오. 제목이 제거되었음을 알 수 있습니다.


4 단계 : 웹 사이트 추가 


기본 컨텐츠가 작동하므로 www 폴더의 고유 한 웹 컨텐츠로 바꾸십시오.


1. HTML 파일 (index.html 및 page2.html)과 JavaScript 파일 (app.js)을 삭제하십시오.

2. 웹 컨텐츠를 www 폴더로 이동하십시오.


팁 : Android Studio 외부에서 컨텐츠를 이동 한 다음 돌아 가기가 더 쉬울 수 있습니다.


3. 확인 사항 : 실행 버튼을 클릭하여 모바일 장치 또는 에뮬레이터에서 앱을 실행하여 예상대로 작동하는지 확인하십시오.


91강 운영중인 사이트를 네이티브 앱으로 만들기(PhoneGap Build)에서에서 2-6 단계를 참조하거나 Android Studio를 사용하여 앱의 디버그 및 릴리스 버전을 만듭니다.

댓글목록 0

등록된 댓글이 없습니다.