모바일 서버 만들기 13장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03

Presentation on theme: "모바일 서버 만들기 13장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03"— Presentation transcript:

1 모바일 서버 만들기 13장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03
○ 본 강의 자료는 이지스퍼블리싱에서 제공하는 강의 교안입니다. ○ 본 강의 교안은 아래 출판 서적의 내용을 기준으로 구성되었습니다. 또한 다수의 기타 서적이나 사이트를 참조하였습니다. 레퍼런스를 참조하십시오. 2017, 정재곤, “Do it! Node.js 프로그래밍 (개정판)”, 이지스퍼블리싱 - 강의 교안에 사용된 화면 캡처나 실습 자료의 경우에는 문서 업데이트에 따라 변경될 수 있습니다.

2 모바일에서 주로 사용하는 서버를 어떻게 만드는지 알아보자.
강의 주제 및 목차 강의 주제 모바일에서 주로 사용하는 서버를 어떻게 만드는지 알아보자. 목 차 1 모바일 단말에서 웹서버로 요청하기 2 모바일 단말관리 기능 만들기 3 모바일 단말로 푸시 메시지 전송하기

3 1. 모바일 단말에서 웹서버로 요청하기 난이도 소요시간 20분

4 안드로이드 앱에서 웹 서버로 요청하기 안드로이드 앱은 안드로이드 스튜디오에서 작성 개발도구 설치 필요
안드로이드 개발자 사이트 ▶

5 모바일용 서버 프로젝트 만들기 모바일 단말에서 요청하면 웹 서버에서 데이터만 응답으로 전송

6 사용자 리스트를 데이터로 전송 user.js 파일에 listuser 함수를 만들고 데이터를 JSON 포맷으로 전송하도록 작성
var listuser = function(req, res) { var database = req.app.get('database'); if(database.db) { database.UserModel.findAll(function(err, results) { if(err) { ….. return; } if(results) { console.dir(results); res.writeHead('200', {'Content-Type' : 'application/json; charset = utf8'}); res.write(JSON.stringify(results)); res.end(); } else { ……. module.exports.listuser = listuser;

7 설정에 등록하고 웹페이지 작성 라우팅 함수는 config.js 파일에 등록하고 클라이언트 웹 페이지 작성
route_info : [ {file : './user', path : '/process/listuser', method : 'listuser', type : 'post'} ], <form id = "form1" method = "post" action = "/process/listuser"> <table> <tr class = "row" align = "center" valign = "middle"> <td id = "buttonContainer"> <input id = "submitButton" class = "ui primary button" type = "submit" value = "조회" name = ""/> </td> </tr> </table> </form>

8 일단 웹페이지로 확인 웹페이지에서 정상적으로 응답이 오는지 확인한 후 모바일에 적용
▶

9 안드로이드 앱 프로젝트 만들기 새로운 프로젝트 만들고 화면 구성

10 기본 코드 구성 버튼 클릭 시 서버에 요청하도록 기본 코드 구성
▶ public class MainActivity extends AppCompatActivity { EditText editText; TextView textView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); editText = (EditText) findViewById(R.id.editText); textView = (TextView) findViewById(R.id.textView); } public void onButton1Clicked(View v) { String url = editText.getText().toString(); }

11 build.gradle 파일에 설정 추가 volley와 gson을 사용하도록 설정 추가 ……. dependencies {
compile 'com.android.volley:volley:1.0.0' compile 'com.google.code.gson:gson:2.3.1' }

12 버튼 클릭 시 volley를 이용해 요청 StringRequest 객체를 만들고 큐에 넣으면 요청 전송됨
public void onButton1Clicked(View v) { String url = editText.getText().toString(); StringRequest request = new StringRequest(Request.Method.POST, url, new Response.Listener<String>() { @Override public void onResponse(String response) { try { println("onResponse() 호출됨 : " + response); } catch (Exception e) { e.printStackTrace(); } } },

13 버튼 클릭 시 volley를 이용해 요청 StringRequest 객체를 만들고 큐에 넣으면 요청 전송됨
new Response.ErrorListener() { @Override public void onErrorResponse(VolleyError error) { error.printStackTrace(); } } ) { @Override protected Map<String, String> getParams() { Map<String, String> params = new HashMap<>(); return params; } }; request.setShouldCache(false); Volley.newRequestQueue(this).add(request); println("웹 서버에 요청함 : " + url); }

14 권한 설정 후 확인 AndroidManifest.xml 파일에 INTERNET 권한 추가 후 동작 확인
<uses-permission android : name = "android.permission.INTERNET"/>

15 2. 모바일 단말관리 기능 만들기 난이도 소요시간 20분

16 모바일 단말 관리 기능 처리 과정 서버에 단말 정보를 보내어 등록하고 필요 시에 단말 정보 조회

17 데이터베이스 스키마 추가 단말 정보를 저장하기 위한 데이터베이스 스키마 추가 var Schema = { };
Schema.createSchema = function(mongoose) { var DeviceSchema = mongoose.Schema({ mobile : {type : String, index : 'hashed', 'default' : ''} , osVersion : {type : String, 'default' : ''} , model : {type : String, 'default' : ''} , display : {type : String, 'default' : ''} , manufacturer : {type : String, 'default' : ''} , macAddress : {type : String, 'default' : ''} , registrationId : {type : String, 'default' : ''} , created_at : {type : Date, index : {unique : false}, 'default' : Date.now} , updated_at : {type : Date, index : {unique : false}, 'default' : Date.now} }); …….

18 스키마에 메소드 추가 데이터 조회 등을 위한 메소드 추가
DeviceSchema.path('mobile').validate(function(mobile) { return mobile.length; }, 'mobile 칼럼의 값이 없습니다.'); DeviceSchema.static('findByMobile', function(mobile, callback) { return this.find({mobile : mobile}, callback); }); DeviceSchema.static('findAll', function(callback) { return this.find({}, callback);

19 스키마에 메소드 추가 데이터 조회 등을 위한 메소드 추가
DeviceSchema.static('load', function(options, callback) { options.select = options.select || 'mobile'; this.findOne(options.criteria) .select(options.select) .exec(callback); }); // 모델에 스키마 등록 mongoose.model('Device', DeviceSchema); console.log('DeviceSchema 정의함.'); return DeviceSchema; }; // module.exports에 DeviceSchema 객체 직접 할당 module.exports = Schema;

20 스키마 등록 설정 파일에 스키마 등록 module.exports = { ……. db_schemas : [
,{file : './device_schema', collection : 'devices’, schemaName : 'DeviceSchema', modelName : 'DeviceModel'} ],

21 라우팅 함수 추가 단말 정보 추가를 위한 addDevice 함수 추가
var adddevice = function(req, res) { console.log('device 모듈 안에 있는 adddevice 호출됨.'); var database = req.app.get('database'); var paramMobile = req.param('mobile'); var paramOsVersion = req.param('osVersion'); var paramModel = req.param('model'); var paramDisplay = req.param('display'); var paramManufacturer = req.param('manufacturer'); var paramMacAddress = req.param('macAddress'); if (database.db) { var device = new database.DeviceModel({"mobile" : paramMobile , "osVersion" : paramOsVersion, "model" : paramModel , "display" : paramDisplay, "manufacturer" : paramManufacturer , "macAddress" : paramMacAddress });

22 라우팅 함수 추가 단말 정보 조회를 위한 listDevice 함수 추가
var listdevice = function(req, res) { console.log('device 모듈 안에 있는 listdevice 호출됨.'); var database = req.app.get('database'); if (database.db) { database.DeviceModel.findAll(function(err, results) { if (err) { ….. return; } if (results) { console.dir(results); var context = { title : '단말 목록', devices : results }; req.app.render('listdevice', context, function(err, html) { res.end(html); });

23 라우팅 함수 등록 새로 추가한 라우팅 함수들을 config.js 파일에 등록 module.exports = { …….
route_info : [ ,{file : './device', path : '/process/adddevice', method : 'adddevice', type : 'post'} ,{file : './device', path : '/process/listdevice', method : 'listdevice', type : 'post'} ],

24 웹페이지 작성 단말 정보 조회를 위한 listdevice.ejs 파일 작성
<div class="ui very relaxed selection celled list"> <% for (var i = 0; i < devices.length; i++) { var curMobile = devices[i]._doc.mobile; var curOsVersion = devices[i]._doc.osVersion; var curModel = devices[i]._doc.model; var curDisplay = devices[i]._doc.display; var curManufacturer = devices[i]._doc.manufacturer; var curMacAddress = devices[i]._doc.macAddress; var curNo = devices.length - i; %> <div class = "item"> <div class = "ui grid"> <div class = "two wide column"><% = curNo %></div>

25 웹페이지 작성 단말 정보 조회를 위한 listdevice.ejs 파일 작성
<div class = "fourteen wide column“ onclick = "javascript : window.location = '/process/listdevice"> <div class = "ui header"> <h4 class = "ui left aligned header"> <% = curMobile %> </h4> <h5 class = "ui right aligned orange header"> <% = curOsVersion %> <% = curModel %> <% = curDisplay %> <% = curManufacturer %> <% = curMacAddress %> </h5> </div> <% } %>

26 단말 정보 추가를 위한 앱 만들기 화면 구성

27 서버에 요청하기 위한 정보 URL 입력한 정보를 이용해 서버 연결
public void onButton2Clicked(View v) { String url = editText2.getText().toString(); StringRequest request = new StringRequest(Request.Method.POST, url, ……. public class DeviceInfo { String mobile; String osVersion; String model; String display; String manufacturer; String macAddress; …….

28 단말 정보 확인 전화번호 등 단말 정보 확인 코드 작성
public DeviceInfo getDeviceInfo() { DeviceInfo device = null; String mobile = null; TelephonyManager telephonyManager = (TelephonyManager) getSystemService(Context.TELEPHONY_SERVICE); if(telephonyManager.getLine1Number() != null ) { mobile = telephonyManager.getLine1Number(); } String osVersion = Build.VERSION.RELEASE; String model = Build.MODEL; …. );

29 서버에 단말 정보 전송 StringRequest 객체를 이용해 서버에 단말 정보 전송
StringRequest request = new StringRequest(Request.Method.POST, url, … @Override protected Map<String, String> getParams() { Map<String, String> params = new HashMap<>(); DeviceInfo device = getDeviceInfo(); params.put("mobile", device.getMobile()); params.put("osVersion", device.getOsVersion()); params.put("model", device.getModel()); params.put("display", device.getDisplay()); params.put("manufacturer", device.getManufacturer()); params.put("macAddress", device.getMacAddress()); return params; } };

30 권한 추가하고 동작 여부 확인 AndroidManifest.xml 파일에 권한 추가한 후 웹브라우저에서 테스트
<uses-permission android : name = "android.permission.ACCESS_WIFI_STATE"/> <uses-permission android : name = "android.permission.READ_PHONE_STATE"/>

31 웹브라우저에서도 확인 가능 요청 패스를 /process/listdevice 로 하여 요청하면 웹브라우저에서도 테스트 가능

32 3. 모바일 단말로 푸시 메시지 전송하기 난이도 소요시간 30분

33 푸시 메시지 전송 서버 구성 node-gcm 모듈을 이용해 푸시 메시지 전송 서버 구성 가능
% npm install node-gcm --save

34 FCM 서비스 등록 FCM 서비스를 위해 개발자 콘솔에서 등록
▶

35 등록 ID 저장 함수 작성 클라이언트에서 보내온 등록 ID를 저장하는 함수 작성
var register = function(req, res) { console.log('device 모듈 안에 있는 register 호출됨.'); var database = req.app.get('database'); var paramMobile = req.param('mobile'); var paramRegistrationId = req.param('registrationId'); if(database.db) { database.DeviceModel.findOneAndUpdate({mobile : paramMobile}, {registrationId : paramRegistrationId}, {multi : true}, function(err, result) { if(err) { ….. } if(result) { console.log("등록 ID 업데이트함."); console.dir(result); res.writeHead('200', {'Content-Type' : 'application/json;charset=utf8'}); res.write("{code : '200', 'message' : '등록 ID 업데이트 성공'}"); res.end();

36 앱 기능 작성 앱의 화면에 등록ID 전송 기능 추가

37 단말 등록 기능 작성 버튼 클릭 시 단말의 등록 ID 확인 …….
public void onButton3Clicked(View v) { String regId = FirebaseInstanceId.getInstance().getToken(); println("등록 ID : " + regId); // 등록 ID를 모바일 서버에 전송 sendToMobileServer(regId);

38 서버에 전송 등록 ID를 서버에 전송 public void sendToMobileServer() { …….
@Override protected Map<String, String> getParams() { Map<String, String> params = new HashMap<>(); params.put("mobile", getMobile()); params.put("registrationId", GCMInfo.RegistrationId); return params; } };

39 웹 브라우저에서 전송 웹 브라우저에서 관리자가 푸시 메시지를 전송할 수 있도록 구성 가능
var sendall = function(req, res) { console.log('device 모듈 안에 있는 sendall 호출됨.'); var database = req.app.get('database'); var paramData = req.param('data'); if(database.db) { database.DeviceModel.findAll(function(err, results) { if(err) { ….. } if(results) { console.dir(results); var regIds = []; for(var i = 0; i < results.length; i++) { var curId = results[i]._doc.registrationId; console.log('등록 ID #' + i + ' : ' + regIds.length); regIds.push(curId); } console.log('전송 대상 단말 수 : ' + regIds.length);

40 웹 브라우저에서 전송 웹 브라우저에서 관리자가 푸시 메시지를 전송할 수 있도록 구성 가능 // node-gcm을 사용해 전송
var message = new gcm.Message(); message.addData('command', 'show'); message.addData('type', 'text/plain'); message.addData('data', paramData); var sender = new gcm.Sender(config.gcm_api_key); sender.send(message, regIds, function (err, result) { if(err) { ….. } console.dir(result); res.writeHead('200', {'Content-Type' : 'text/html;charset=utf8'}); res.write('<h2>푸시 메시지 전송 성공</h2>'); res.end(); });

41 라우팅 함수 등록 새로 만든 sendall 라우팅 함수를 config.js 파일에 등록 module.exports = {
……. route_info : [ ,{file : './device', path : '/process/sendall', method : 'sendall', type : 'post'} ], …….

42 단말 리스트를 보여주는 템플릿 파일 작성 단말 리스트를 보여주기 위한 listdevice.ejs 파일 작성
<div> <form action = "/process/sendall" method = "post" class = "content ui form"> <div class = "field"> <label>전송할 메시지</label> <input type = "text" class = "ui input" name = "data"> </div> <button type = "submit" class = "ui button">공지전송</button> </form>

43 결과 확인 단말 정보 확인 및 푸시 메시지 전송 여부 확인

44 참고 문헌 [ References] 기본 서적
2017, 정재곤, “Do it! Node.js 프로그래밍 (개정판)”, 이지스퍼블리싱 Node.js Site