과학 및 기술 배경
🚀 처음부터 시작하기

APICloud 시작하기

30첫 번째 모바일을 구축하는 데 걸리는 시간애플리케이션

30분
시작하기
1-2주
스탠드얼론개발
80%
개발효율성 향상

🎯 APICloud 학습 경로

제로에서 독립으로개발전체 학습 경로

1

환경 구축

등록APICloud사용자 이름,다운로드 및 설치APICloud Studio 3개발도구,설정개발매트릭스

  • 등록APICloud사용자 이름
  • 다운로드APICloud Studio 3
  • 설치 및설정개발매트릭스
2

프로젝트설정

APICloud Studio 3새 프로젝트, 에 대해 알아보기프로젝트 구조 및 문서 정리

  • 새로 만들기프로젝트
  • 에 대해 알아보기프로젝트프레임워크
  • 설정애플리케이션정보
3

센터API활용

사용 방법 배우기APICloud센터API,실현데이터서로、온프레미스저장소 등기능

  • api.ajax데이터서로
  • fs모듈(소프트웨어 내)온프레미스비축
  • 페이지 점프 및 매개변수 전달
4

UI고안하다

활용HTML、CSS및JavaScript모바일 구축애플리케이션인터페이스,반응형 디자인 구현하기

  • 기본 페이지 구조 구축
  • 반응형 레이아웃 구현하기
  • 인터랙티브 효과 추가하기
5

클라우드 컴퓨팅

활용APICloud클라우드 컴퓨팅서비스,생성Android및iOS애플리케이션

  • 설정컴파일 매개변수
  • 클라우드에서 편집을 위해 제출
  • 다운로드 및 설치애플리케이션

🛠️ 환경 구축

계정을 등록하고설정개발매트릭스

1. 등록APICloud사용자 이름

  1. 1 인터뷰APICloud공식 웹사이트:https://www.apicloud.com/
  2. 2 오른쪽 상단 모서리를 클릭합니다.「등록」버튼,등록 정보를 입력하세요.
  3. 3 이메일 인증 완료,계정 활성화

2. 다운로드APICloud Studio 3

  1. 1 로그인APICloud계정 게시,인터뷰개발운영자 콘솔
  2. 2 스트라이크(키보드에서)「개발도구」→「Studio 3다운로드」
  3. 3 기초작업시스템다운로드할 해당 버전을 선택하세요.

3. 설치 및설정개발매트릭스

  1. 1 설치 프로그램 실행,지시에 따라 설치를 완료합니다.
  2. 2 활성화(플랜)APICloud Studio 3,활용APICloud계정 로그인
  3. 3 설정개발매트릭스,다음을 포함하여SDK트레일、시뮬레이터 등

🔧 센터API활용

doAPICloud센터API사용 방법

api.ajax데이터서로

함께 사용서비스공정 장비HTTP요청,실현데이터서로

api.ajax({
  url: 'https://api.example.com/data',
  method: 'get',
  data: {
    values: {
      page: 1,
      limit: 10
    }
  }
}, function(ret, err) {
  if (ret) {
    console.log(JSON.stringify(ret));
  } else {
    console.log(JSON.stringify(err));
  }
});

매개변수 설명:

  • url:요청 주소
  • method:요청 방법(get、post등)
  • data:요청 매개변수
  • success:성공 콜백 함수
  • error:실패 콜백 함수

fs모듈(소프트웨어 내)온프레미스비축

에 사용온프레미스비축데이터,문서 포함작업、데이터저장소 등

// 비축데이터
var fs = api.require('fs');
fs.writeFile({
  path: 'fs://userInfo.json',
  data: JSON.stringify({name: '신원 미상', age: 20})
}, function(ret, err) {
  if (ret.status) {
    console.log('스토리지 성공');
  } else {
    console.log('스토어 실패');
  }
});

// 검색데이터
fs.readFile({
  path: 'fs://userInfo.json'
}, function(ret, err) {
  if (ret.status) {
    console.log(JSON.parse(ret.data));
  } else {
    console.log('검색에 실패했습니다.');
  }
});

일반적인 방법:

  • writeFile:파일에 쓰기
  • readFile:파일 읽기
  • appendFile:문서 내용에 대한 추가 사항
  • remove:파일 삭제

페이지 점프 및 매개변수 전달

페이지 간 이동을 위해,를 클릭하고 매개변수

// 새 페이지 열기
api.openWin({
  name: 'detail',
  url: 'detail.html',
  pageParam: {
    id: 1,
    title: '제품 세부 정보'
  }
});

// 수신 매개변수
var pageParam = api.pageParam;
console.log(pageParam.id); // 수출:1
console.log(pageParam.title); // 수출:제품 세부 정보

매개변수 설명:

  • name:페이지 이름
  • url:페이지 주소
  • pageParam:전달된 매개 변수

장비 관련API

디바이스 정보를 가져오는 데 사용、작업가전 제품기능등

// 디바이스 정보 가져오기
api.getDeviceInfo(function(ret, err) {
  if (ret) {
    console.log('장비 모델:' + ret.model);
    console.log('시스템릴리스:' + ret.systemVersion);
    console.log('가전 제품ID:' + ret.deviceId);
  }
});

// 카메라 호출하기
api.getPicture({
  sourceType: 'camera',
  encodingType: 'jpg',
  mediaValue: 'pic',
  destinationType: 'url',
  allowEdit: true,
  quality: 50,
  saveToPhotoAlbum: false
}, function(ret, err) {
  if (ret) {
    console.log('이미지 경로:' + ret.data);
  }
});

인기API:

  • getDeviceInfo:디바이스 정보 가져오기
  • getPicture:카메라 또는 앨범 호출하기
  • vibrate:장비 진동
  • setScreenBrightness:설정화면 밝기

☁️ 실제 클라우드 컴파일

활용APICloud클라우드 컴퓨팅서비스움직임 생성애플리케이션

클라우드 컴퓨팅프로세스

  1. 1 APICloud Studio 3에서 정곡을 찌르세요 애플리케이션 개발
  2. 2 코드를APICloud클라우드
  3. 3 APICloud 개발에서 "클라우드 컴퓨팅"을 선택합니다.
  4. 4 설정컴파일 매개변수,예:애플리케이션(사물의) 이름、버전 번호、아이콘
  5. 5 컴파일을 선택합니다.플랫폼(Android/iOS)
  6. 6 스트라이크(키보드에서)「컴파일 시작」버튼
  7. 7 컴파일이 완료되기를 기다리는 중,컴파일된애플리케이션

컴파일 매개변수설정

기본 정보

  • 애플리케이션(사물의) 이름:장치에 표시애플리케이션(사물의) 이름
  • 버전 번호:애플리케이션버전 식별자
  • 애플리케이션아이콘(컴퓨팅):장치에 표시애플리케이션아이콘(컴퓨팅)
  • 시작 그래프:애플리케이션시작 시 표시되는 사진

높은 수준설정

  • 패키지 이름:애플리케이션고유 식별자
  • 인증서:iOS필요설정개발선수 증명서
  • 권한:애플리케이션까다로운시스템권한
  • 모듈(소프트웨어 내):원하는APICloud모듈(소프트웨어 내)

일반적인 문제

Q: 클라우드 컴파일에 실패한 경우 수행해야 할 작업?

A: 컴파일 로그 보기,오류 메시지에 따른 수정 사항。일반적인 원인은 다음과 같습니다.:코드 오류、인증서설정이슈、권한설정버그.

Q: iOS컴파일에 필요한 인증서?

A: iOS컴파일에는 다음이 필요합니다.Apple개발사용자 계정 및 해당 인증서(Development또는Distribution인증서).

Q: 컴파일애플리케이션장치에 설치하는 방법?

A: Android애플리케이션이 작업은 다음을 통해 직접 수행할 수 있습니다.APK파일 설치;iOS애플리케이션통과 필요TestFlight또는기업배포 방법 설치.

Q: 클라우드 컴파일에 걸리는 시간?

A: 일반적으로 다음이 필요합니다.3-10분,정확한 시기는 다음에 따라 다릅니다.애플리케이션크기 및 현재 컴파일 대기열 상태.

💡 실제 전투사례

처음부터 간단한 모바일 구축애플리케이션

사례:간단한 일기 예보애플리케이션

활용APICloud간단한 일기 예보 작성애플리케이션,다음을 달성하세요.기능:

  • 현재 위치의 날씨 정보 얻기
  • 날씨 아이콘 및 온도 표시
  • 향후 며칠 동안의 일기 예보 표시

구현 단계:

  1. 1 새로 만들기프로젝트,설정애플리케이션정보
  2. 2 고안하다애플리케이션인터페이스,다음을 포함하여홈및 상세 페이지
  3. 3 활용api.ajax날씨 통화APIgain데이터
  4. 4 활용api.getLocation현재 위치 가져오기
  5. 5 거래 데이터에 표시되며 인터페이스 켜짐
  6. 6 테스트 및 클라우드 컴파일애플리케이션

코드 예제

// 날씨 보기데이터
function getWeather(city) {
  api.ajax({
    url: 'https://api.example.com/weather',
    method: 'get',
    data: {
      values: {
        city: city,
        key: 'your_api_key'
      }
    }
  }, function(ret, err) {
    if (ret) {
      console.log(JSON.stringify(ret));
      // 업데이트UI날씨 표시데이터
      updateWeatherUI(ret);
    } else {
      console.log(JSON.stringify(err));
      api.alert({msg: '날씨 보기데이터실패(예: 실험)'});
    }
  });
}

// 현재 위치 가져오기
function getCurrentLocation() {
  api.getLocation({
    type: 'gps',
    timeout: 10000,
    accuracy: 'high'
  }, function(ret, err) {
    if (ret) {
      console.log(JSON.stringify(ret));
      // 위도와 경도를 기준으로 도시 이름 가져오기
      getCityByLocation(ret.lat, ret.lon);
    } else {
      console.log(JSON.stringify(err));
      api.alert({msg: '위치 확인에 실패했습니다.'});
    }
  });
}

// 업데이트된 날씨UI
function updateWeatherUI(data) {
  // 도시 이름 업데이트
  document.getElementById('cityName').innerHTML = data.city;
  // 온도 업데이트
  document.getElementById('temperature').innerHTML = data.temp + '°C';
  // 업데이트된 기상 조건
  document.getElementById('weatherDesc').innerHTML = data.desc;
  // 날씨 아이콘 업데이트
  document.getElementById('weatherIcon').src = data.icon;
  // 업데이트된 미래 일기 예보
  updateForecast(data.forecast);
}

📚 추천 학습 리소스

도움말속도가 빨라지고 있습니다.APICloud개발품질 리소스

공무원(관공서 관련)문서

APICloud공무원(관공서 관련)문서센터,구성플랫폼선물(직업 등)、환경 구축、센터API사용 등

공식 방문하기문서

동영상튜토리얼

APICloud 공무원(관공서 관련)동영상 튜토리얼 라이브러리, 환경설정, 페이지 디자인, 모듈 호출 실습 데모

참조동영상튜토리얼

개발도구

APICloud Studio 3다운로드 및 매뉴얼,UFIDA 맞춤형 에디션개발IDE(를 기준으로VS Code)

다운로드개발도구