COMP3330 Ch03 IDEs PDF

Chapter 3. IDEs and Tools for Mobile App Development 2024-2025 COMP3330 Interactive Mobile Application Design and Programming Dr. T.W. Chim (E-mail: [email protected]) Department of Computer Science, The University of Hong Kong...

Chapter 3. IDEs and Tools for Mobile App Development 2024-2025 COMP3330 Interactive Mobile Application Design and Programming Dr. T.W. Chim (E-mail: [email protected]) Department of Computer Science, The University of Hong Kong Why IDEs? IDE = Integrated Development Environment You cannot write programs on a phone. But you may do so on a tablet You need an IDE (to be run on a computer). Software application that allows the computer programmer to develop software for a certain platform on a PC. Normally has: source editor, compiler and/or interpreter and debugger. Upon everything is fine, you can upload / transfer your apps to the smart phone. SDK for a certain model is sometimes required (e.g., Nokia S60) 2 Some tools for mobile app development ❖ Android ❖ iOS ❖ AIDE ❖ Xcode ❖ App Inventor ❖ Appcode ❖ DroidScript ❖ Atom ❖ CppDroid ❖ SublimeText 3 ❖ Android Web Developer (AWD) ❖ CodeRunner 2 ❖ Python Suite ❖ … ❖ Java Suite ❖ Eclipse ❖ Arduino ❖ Visual Studio ❖ Unreal Engine ❖ Android Studio ❖ Corona ❖ PhoneGap ❖ … 3 IDE for Android app IDE: Eclipse + some additional plug-ins Programming language: Java 4 IDE for Android app IDE: Android Studio Programming language: Java / Kotlin (aim at simplifying Java syntax) 5 IDE for Android app IDE: MIT App Inventor A graphical web-based app development tool for Android 6 IDE for iPhone / iPad app IDE: Xcode Programming language: Objective C / Swift 7 Mac and Xcode Xcode can only run on Mac OS. If you want to use Mac but do not want to buy a MacBook, you can consider using cloud-based Mac service. MacinCloud (https://checkout.macincloud.com/) XCodeClub (http://www.xcodeclub.com/) VirtualMacOSX (http://virtualmacosx.com/index.php/shared-plans) You can use an ordinary browser to access their site and the virtual Mac environment will appear in form of remote desktop. You need to pay for the service. Let’s use MacinCloud as an example, you can pay $25 USD monthly plus $0.99 USD initial setup fee. All the virtual Mac environment has common software like Xcode installed. 8 Mac and Xcode MacInCloud: 9 IDE for Windows Phone app IDE: Microsoft XNA (an example) Programming language: C# Special feature: accelerometer simulator 10 Cross-platform Development Tool: cocos2d 11 Cross-platform Development Tool: cocos2d Link: http://cocos2d.org/ Cocos2d is an open source 2D game framework. The original Cocos2D framework is written in Python but has been ported to other languages and platforms. Derivative frameworks: Cocos2d-x (program in C++ and for multi-platform) Cocos2d-JS (program in JavaScript and for multi- platform, similar to Cocos2d-x) Cocos2d-XNA (program in C# and for XNA) Cocos2d-Swift (program with Xcode and Objective-C for iOS) Cocos2d (Python) (program in Python and for multi- platform, similar to Cocos2d-x) 12 Cross-platform Development IDE: Unity 13 Cross-platform Development IDE: Unity Link: http://unity3d.com/ Unity is a cross-platform game engine and IDE developed by Unity Technologies, targeting web plugins, desktop platforms and mobile devices. Programming language: C# 14 Cross-platform Development IDE: Unreal 15 Cross-platform Development IDE: Unreal Link: https://www.unrealengine.com/ Unreal Engine (UE) is a 3D computer graphics game engine developed by Epic Games. Initially developed for PC first-person shooters. Unreal Engine is written in C++ and features a high degree of portability, supporting a wide range of desktop, mobiles, console, and virtual reality platforms. Programming language: C++ 16 Cross-platform Development Tool: React Native 17 Cross-platform Development Tool: React Native Link: https://facebook.github.io/react- native/ React Native lets you build cross- platform mobile apps using only JavaScript. It uses the same design as React (for web applications), letting you compose a rich mobile UI from declarative components. You build a real mobile app that's indistinguishable from an app built using Objective-C / Swift / Java / Kotlin. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React. Thousands of apps are using React Native, from established Fortune 500 companies to hot new startups. 18 Cross-platform Development Tool: Flutter 19 Cross-platform Development Tool: Flutter Link: https://flutter.dev/ Flutter was introduced in May 2017 by Google. Flutter is an open-source mobile application development SDK created by Google. It is used to develop applications for Android and iOS. Flutter's engine, written primarily in C++, provides low-level rendering support using Google's Skia graphics library. Additionally, it interfaces with platform-specific SDKs such as those provided by Android and iOS. Flutter apps are written in the Dart language and make use of many of the language's more advanced features. 20 Cross-platform Development Tool: Apache Cordova 21 Cross-platform Development Tool: Apache Cordova Link: https://cordova.apache.org/ Apache Cordova is an open- source mobile development framework. It allows you to use standard web technologies - HTML5, CSS3, and JavaScript for cross- platform development. Applications execute within wrappers targeted to each platform, and rely on standards- compliant API bindings to access each device's capabilities such as sensors, data, network status, etc. 22 Mini Program After WeChat Mini Program was launched at the end of 2016, many similar lightweight programs become popular in China (e.g., Alipay Mini Program, Baidu Mini Program). Mini Program is different from traditional mobile applications. It can be obtained directly through a search in another application (e.g., WeChat). It can be obtained by scanning a QR code or via a link shared by another user It occupies very little memory and storage space. No installation is required. It can be opened quickly. It can achieve a user experience closer to the native APP. The set of core functions are nearly the same. 23 Mini Program Mini Program can be regarded as a hybrid APP. Let’s take WeChat Mini Program as an example. Layer 1: a container provided by Native Layer 2: WXML (WeChat Markup Language) & WXS (WeChat Script) & JS provided by WeChat for business development (WXML and WXS are developed from HTML and CSS). Very similar to a browser and server-side architecture 24 Mini Program Development tools are available for the development. An example is WeChat DevTools. 25  Chapter 3. End 2024-2025 COMP3330 Interactive Mobile Application Design and Programming Dr. T.W. Chim (E-mail: [email protected]) Department of Computer Science, The University of Hong Kong