Difference between revisions of "Mobile Development"

From Sinfronteras
Jump to: navigation, search
(→‎PhoneGap/Cordova)
 
(65 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
 +
<br />
 
==Device Considerations==
 
==Device Considerations==
  
Line 31: Line 33:
  
 
<br />
 
<br />
−
 
 
===Form factor===
 
===Form factor===
 
* Most platforms/OSes run on multiple devices, some more than others
 
* Most platforms/OSes run on multiple devices, some more than others
Line 38: Line 39:
  
 
<br />
 
<br />
−
 
 
==Native vs Hybrid Frameworks==
 
==Native vs Hybrid Frameworks==
  
  
 
<br />
 
<br />
−
===Native Application Frameworks===
+
===Native Frameworks===
 
Native application frameworks allow developers to access the native platform/OS API directly through code and develop their applications directly to the platform standards and practices
 
Native application frameworks allow developers to access the native platform/OS API directly through code and develop their applications directly to the platform standards and practices
  
Line 58: Line 58:
  
 
<br />
 
<br />
 +
====[[Mobile_Development#Android Studio|Android Studio]]====
  
 +
 +
<br />
 
===Hybrid Frameworks===
 
===Hybrid Frameworks===
 
Web-based frameworks are essentially tools/processes/procedures that allow us to write an application as a website rather than using any native code (e.g. PhoneGap/Cordova)
 
Web-based frameworks are essentially tools/processes/procedures that allow us to write an application as a website rather than using any native code (e.g. PhoneGap/Cordova)
Line 76: Line 79:
  
 
<br />
 
<br />
−
 
+
====React Native====
−
==PhoneGap/Cordova==
 
−
https://phonegap.com
 
−
 
 
−
https://cordova.apache.org/
 
−
 
 
−
https://en.wikipedia.org/wiki/Apache_Cordova
 
−
 
 
−
Apache Cordova (formerly PhoneGap) is a mobile application development framework originally created by Nitobi. Adobe Systems purchased Nitobi in 2011, rebranded it as PhoneGap, and later released an open source version of the software called Apache Cordova.[8] Apache Cordova enables software programmers to build applications for mobile devices using CSS3, HTML5, and JavaScript instead of relying on platform-specific APIs like those in Android, iOS, or Windows Phone.[9] It enables wrapping up of CSS, HTML, and JavaScript code depending upon the platform of the device. It extends the features of HTML and JavaScript to work with the device. The resulting applications are hybrid, meaning that they are neither truly native mobile application (because all layout rendering is done via Web views instead of the platform's native UI framework) nor purely Web-based (because they are not just Web apps, but are packaged as apps for distribution and have access to native device APIs).
 
  
  
 
<br />
 
<br />
−
===Installing Cordova===
+
====[[Cordova - PhoneGap]]====
−
https://cordova.apache.org/docs/en/latest/guide/cli/
 
−
 
 
−
 
 
−
* '''Install Node.js and NPM:''' See [[HTTP REST APIs with Node.js - Express.js]]  
 
−
:: The Cordova command-line tool is distributed as an npm package.
 
−
 
 
−
 
 
−
* '''Install Cordova with NPM:'''
 
−
<blockquote>
 
−
<syntaxhighlight lang="shell">
 
−
sudo npm install -g cordova
 
−
</syntaxhighlight>
 
−
</blockquote>
 
−
 
 
−
The -g flag above tells npm to install cordova globally. Otherwise it will be installed in the node_modules subdirectory of the current working directory.
 
−
 
 
−
 
 
−
* '''Check Cordova Version:'''
 
−
<blockquote>
 
−
<syntaxhighlight lang="shell">
 
−
cordova --version
 
−
</syntaxhighlight>
 
−
</blockquote>
 
−
 
 
−
 
 
−
* '''(Optional) Download and install a git client:''' See [[Collaborative and Remote development#Git and GitHub]]
 
−
:: If you don't already have one. Following installation, you should be able to invoke git on your command line. The CLI uses it to download assets when they are referenced using a url to a git repo.
 
  
  
 
<br />
 
<br />
−
 
+
====[[Ionic and Capacitor]]====
−
===Using Cordova===
 
−
https://tecadmin.net/install-cordova-on-ubuntu/ :
 
  
  
 
<br />
 
<br />
−
====Create the Cordova application environment - Project folder====
+
==Android Studio==
−
Use the Cordova command to create your Application. Execute the below command to create an Cordova application environment with name myapp:
+
https://developer.android.com/studio
−
cordova create myapp
 
−
 
 
−
 
 
−
Now add the required platform in your application. This will create required files for the corresponding platform under the platforms/android and platforms/ios directories (may be necessary to use sudo):
 
−
cd myapp
 
−
cordova platform add ios
 
−
cordova platform add android
 
  
 +
Java version for Android Studio/Android SDK: https://android.tutorials24x7.com/blog/how-to-install-android-sdk-tools-on-ubuntu
  
−
Use below command to list the installed and available platforms for Cordova application:
+
Note: Before I installed Android Studio, there were already in my home directory these two folders:
−
cordova platform -ls
+
.android
 +
.AndroidStudio3.5
 +
I don't know why because I haven't installed Android Studio before. It is possible that they were added when I try to build my ionic project using <code>Capacitor</code>, which requires Android Studio I think so, but I'm not sure about it.
  
  
−
If you accidentally added any platform which you no longer needs, just remove that using commands like below:
+
To install Android studio just go to the official web site, download the package. After unzipping, you will have this folder:
−
  cordova platform remove ios
+
  android-studio
−
  cordova platform remove android
+
that already contain the bin files that can be just executed to open Android Studio. I have created a directory (./androidStudio) in my home and placed the above directory into it:
 +
  ./androidStudio/android-studio
  
 +
Then, we just need to execute the following file to open Android Studio:
 +
./androidStudio/android-studio/studio.sh
 +
The first time we execute <code>studi.sh</code>, we need to follow the setup wizard to configure, among other things, <code>android SDK</code>.
  
−
<br />
+
I have configured this path for android SDK:
−
 
+
~./androidStudio/.androidSDK
−
====Build the Cordova Application====
 
−
Before building a Cordova application, make sure that the system fulfills all the requirements for your build environment:
 
−
cordova requirements
 
  
 +
When I finished the setup wizard I got a message saying that my computer support hardware acceleration for the Android Emulator. To install and configure it you can follow:
 +
* https://developer.android.com/studio/run/emulator-acceleration?utm_source=android-studio#vm-linux
 +
* https://help.ubuntu.com/community/KVM/Installation
  
−
On all requirements completed successfully run the build command to build your application:
+
Then, we just need to add the paths to our ~/.bashrc:
−
cordova build              ## Build all added platforms
 
−
cordova build android      ## Build for specific platform
 
  
  
 
<br />
 
<br />

Latest revision as of 16:30, 21 June 2020


Device Considerations


Platform

Will you be developing for multiple platforms?

  • Android
  • iOS
  • Windows 10 Mobile
  • Blackberry 10
  • Firefox OS
  • Sailfish OS
  • Tizen
  • Ubuntu Touch
  • CynaogenOS



Hardware

  • Depending on the device, the specifications of hardware can be very different
  • Some devices may not have certain components
  • Vintage of components, such as processors and busses will make a difference to the chosen route



Language

  • What programming languages are supported natively by the device?
  • What language suits what you want to do best?
  • Do you need a combination of languages for collaborative tasks?



Form factor

  • Most platforms/OSes run on multiple devices, some more than others
  • Can your application be utilised on all form factors regardless of screen/size?



Native vs Hybrid Frameworks


Native Frameworks

Native application frameworks allow developers to access the native platform/OS API directly through code and develop their applications directly to the platform standards and practices


  • Pros:
  • Without other intermediate layers, this provides the best application per device in terms of performance
  • There is no third-party dependence on access to updates and bug fixes


  • Cons:
  • As a native application is written and compiled for a specific platform/OS, deployment on another platform typically requires the maintenance of a totally separate project for each of the supported platforms.
  • How the application is distributed can be different for each platform, requiring the maintenance of a separate distribution channel per platform



Hybrid Frameworks

Web-based frameworks are essentially tools/processes/procedures that allow us to write an application as a website rather than using any native code (e.g. PhoneGap/Cordova)


  • Pros:
  • Anyone with basic web-development skills (HTML, CSS, JS) can write a decent application.
  • There are several frameworks to choose from.
  • It is possible to wrap the content in an application or just access it with the built-in browser.
  • Applications can be accessible across multiple platforms.


  • Cons:
  • Going through so many higher-level languages and interpreters makes run-time much slower than a native application
  • Each platform has a unique style and mode of operation. This gets lost in a web-based application or, at least, requires a lot of work to make it seem intuitive for each platform.



Android Studio

https://developer.android.com/studio

Java version for Android Studio/Android SDK: https://android.tutorials24x7.com/blog/how-to-install-android-sdk-tools-on-ubuntu

Note: Before I installed Android Studio, there were already in my home directory these two folders: .android .AndroidStudio3.5 I don't know why because I haven't installed Android Studio before. It is possible that they were added when I try to build my ionic project using Capacitor, which requires Android Studio I think so, but I'm not sure about it.


To install Android studio just go to the official web site, download the package. After unzipping, you will have this folder: 

android-studio

that already contain the bin files that can be just executed to open Android Studio. I have created a directory (./androidStudio) in my home and placed the above directory into it: 

./androidStudio/android-studio

Then, we just need to execute the following file to open Android Studio: 

./androidStudio/android-studio/studio.sh

The first time we execute studi.sh, we need to follow the setup wizard to configure, among other things, android SDK.

I have configured this path for android SDK: ~./androidStudio/.androidSDK

When I finished the setup wizard I got a message saying that my computer support hardware acceleration for the Android Emulator. To install and configure it you can follow:

Then, we just need to add the paths to our ~/.bashrc:



Retrieved from "http://wiki.sinfronteras.ws/index.php?title=Mobile_Development&oldid=15537"