|
|
| (11 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==== |
| − | ==Cordova/PhoneGap== | |
| − | https://cordova.apache.org/
| |
| − | | |
| − | https://phonegap.com
| |
| − | | |
| − | Apache Cordova/PhoneGap 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. 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).
| |
| − | | |
| − | | |
| − | '''Is PhoneGap equal to Cordova?'''
| |
| − | https://www.businessofapps.com/news/apache-cordova-adobe-phonegap-know-real-differences/
| |
| − | | |
| − | PhoneGap is a distribution of Apache Cordova. So Apache Cordova serves as the engine to power PhoneGap just like WebKit is an engine that powers Chrome and Safari (iOS browser). Nonetheless, as an app developer or as an organization, you don't have to worry about the differences between these two. The story is like this:
| |
| − | | |
| − | * PhoneGap was previously a product of Adobe.
| |
| − | * To keep it open-source always and follow standards, PhoneGap codebase was handed over to Apache.
| |
| − | * At Apache, it got a name change as Cordova.
| |
| − | * And now it’s better known as Apache Cordova.
| |
| − | | |
| − | The most important to understand here is that PhoneGap is powered by apache Cordova. PhoneGap is Cordova plus some extra Adobe stuff. <span style="color:#FF0000">If you are developing a hybrid mobile app, you can either create it using proper Cordova or choose Adobe's ecosystem for using PhoneGap distribution of Cordova.</span>
| |
| − | | |
| − | The open-source Cordova/PhoneGap will be always free and delivered by Apache. Over time, Adobe may add values to this (current) codebase that consists of other Adobe services and that will be named as PhoneGap, which will be chargeable.
| |
| | | | |
| | | | |
| | <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>
| |
| − | 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.
| |
| − | </blockquote>
| |
| − | | |
| − | | |
| − | * '''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://cordova.apache.org/docs/en/latest/guide/cli/
| |
| | | | |
| | | | |
| | <br /> | | <br /> |
| − | ====Create the App - Project folder==== | + | ==Android Studio== |
| − | https://cordova.apache.org/docs/en/latest/guide/cli/ | + | https://developer.android.com/studio |
| | | | |
| − | Execute the below command to create an «Cordova application environment/Project folder»:
| + | Java version for Android Studio/Android SDK: https://android.tutorials24x7.com/blog/how-to-install-android-sdk-tools-on-ubuntu |
| − | cordova create myapp
| |
| | | | |
| − | or using the entire syntax:
| + | Note: Before I installed Android Studio, there were already in my home directory these two folders: |
| − | cordova create path [id [name [config]]] [options]
| + | .android |
| − | cordova create hello com.example.hello HelloWorld
| + | .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. |
| | | | |
| | | | |
| − | This creates the required directory structure for your cordova app. By default, the cordova create script generates a skeletal web-based application whose home page is the project's www/index.html file.
| + | 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 <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: |
| − | =====Add platforms=====
| + | ~./androidStudio/.androidSDK |
| − | 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
| |
| − | cordova platform add browser
| |
| − | | |
| − | <span style="color:#FF0000">If we want to test in the browser (using the command «cordova serve»), it is very important to add the browser platform. Otherwise, you will have some very annoying pop up messages (gap_init, for example) every time you refresh the browser.</span>
| |
| − | | |
| | | | |
| − | Use below command to list the installed and available platforms for Cordova application:
| + | 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: |
| − | cordova platform -ls
| + | * https://developer.android.com/studio/run/emulator-acceleration?utm_source=android-studio#vm-linux |
| | + | * https://help.ubuntu.com/community/KVM/Installation |
| | | | |
| − | | + | Then, we just need to add the paths to our ~/.bashrc: |
| − | If you accidentally added any platform which you no longer needs, just remove that using commands like below:
| |
| − | cordova platform remove ios
| |
| − | cordova platform remove android
| |
| | | | |
| | | | |
| | <br /> | | <br /> |
| − |
| |
| − | ====Preview your App====
| |
| − | https://cordova.apache.org/docs/en/latest/reference/cordova-cli/#cordova-serve-command
| |
| − |
| |
| − |
| |
| − |
| |
| − | At this point, you can just go to '''''«.../www/index.html»''''' to preview your App in the Web Browser.
| |
| − |
| |
| − |
| |
| − | You can also use the «cordova serve» command to run a local web server using specified port or default of 8000.
| |
| − |
| |
| − | cordova serve
| |
| − |
| |
| − | Then you can preview your App in the Web Browser at:
| |
| − | : http://localhost:PORT/
| |
| − | : http://localhost:8000/
| |
| − | :* Then, we have to choose the platform.
| |
| − |
| |
| − |
| |
| − | Or directly at:
| |
| − | : http://localhost:PORT/PLATFORM/www
| |
| − | : http://localhost:8000/android/www/
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | =====Preview on a Mobile Device using PhoneGap CLI=====
| |
| − | http://docs.phonegap.com/getting-started/4-preview-your-app/cli/
| |
| − |
| |
| − | You can use the PhoneGap CLI to immediately preview your app on a device without installing platform SDKs, registering devices, or compiling code. The PhoneGap CLI (using the command «phonegap serve») starts a small web server to host your project and returns the server address for you to pair with from the PhoneGap Developer App running on your mobile device.
| |
| − |
| |
| − | phonegap serve
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − |
| |
| − | ====Install pre-requisites for building====
| |
| − | To build and run apps, you need to install SDKs for each platform you wish to target. Alternatively, if you are using browser for development you can use browser platform which does not require any platform SDKs.
| |
| − |
| |
| − | To check if you satisfy requirements for building the platform:
| |
| − | cordova requirements
| |
| − |
| |
| − |
| |
| − | =====Android platform requirements=====
| |
| − | https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#requirements-and-support
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ======Java Development Kit - JDK======
| |
| − | See [[Java]]
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ======Gradle======
| |
| − | <syntaxhighlight lang="shell">
| |
| − | sudo apt install gradle
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − |
| |
| − | ======Android SDK======
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | <blockquote>
| |
| − | '''Installation:'''
| |
| − | :* Go to the Android Studio official page: https://developer.android.com/studio/index.html
| |
| − | :* Download and unzip the '''''sdk-tools-linux''''' zip file.
| |
| − | :* To complete the installation we need to add the paths of the ''bin'' folder to our PATH environment variable:
| |
| − | <blockquote>
| |
| − | .bashrc
| |
| − | <syntaxhighlight lang="shell">
| |
| − | PATH=/home/adelo/1-system/.1-conf-system/1-archivos_programas-ubuntu/android-sdk/tools:$PATH
| |
| − | PATH=/home/adelo/1-system/.1-conf-system/1-archivos_programas-ubuntu/android-sdk/tools/bin:$PATH
| |
| − | </syntaxhighlight>
| |
| − | </blockquote>
| |
| − |
| |
| − |
| |
| − | :* We can also do it using ''apt''. <span style="color:#FF0000">However, when I did id with apt, I was not able to find the '''''sdkmanager''''' command in my system. So I recommended to do it by downloading the zip file from the official page.</span>
| |
| − | <blockquote>
| |
| − | <syntaxhighlight lang="shell">
| |
| − | sudo apt install android-sdk
| |
| − | </syntaxhighlight>
| |
| − | </blockquote>
| |
| − |
| |
| − | </blockquote>
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | <blockquote>
| |
| − | '''Adding SDK Packages:'''
| |
| − | <blockquote>
| |
| − | After installing the Android SDK, you must also install the packages for whatever API level you wish to target. It is recommended that you install the highest SDK version that your version of cordova-android supports (see Requirements and Support).
| |
| − |
| |
| − | Open the Android SDK Manager (Tools > SDK Manager in Android Studio, or sdkmanager on the command line), and make sure the following are installed:
| |
| − | * Android Platform SDK for your targeted version of Android
| |
| − | * Android SDK build-tools version 19.1.0 or higher
| |
| − | * Android Support Repository (found under the "SDK Tools" tab)
| |
| − |
| |
| − | See Android's documentation on Installing SDK Packages for more details: https://developer.android.com/studio/command-line/sdkmanager
| |
| − |
| |
| − |
| |
| − | <span style="color:#FF0000">Esta fue la parte más complicada. Si no se instalan los package necesarios en esta parte, la ejecución del comando «'''''cordova requirements'''''» no encontrará la instalación e «Android target». Esto creo que lo solucioné de esta forma: </span>
| |
| − | <syntaxhighlight lang="shell">
| |
| − | sdkmanager "build-tools;29.0.0" "platform-tools" "platforms;android-28"
| |
| − | </syntaxhighlight>
| |
| − | </blockquote>
| |
| − |
| |
| − | </blockquote>
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − |
| |
| − | ======Setting environment variables======
| |
| − | https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#setting-environment-variables
| |
| − |
| |
| − | : Cordova's CLI tools require some environment variables to be set in order to function correctly. The CLI will attempt to set these variables for you, but in certain cases you may need to set them manually. The following variables should be updated:
| |
| − |
| |
| − | :* Set the '''JAVA_HOME''' environment variable to the location of your JDK installation: See [[Java]]
| |
| − |
| |
| − | :* Set the '''ANDROID_HOME''' environment variable to the location of your Android SDK installation:
| |
| − | <blockquote>
| |
| − | <syntaxhighlight lang="shell">
| |
| − | export ANDROID_HOME=/home/adelo/1-system/.1-conf-system/1-archivos_programas-ubuntu/android-sdk/
| |
| − | </syntaxhighlight>
| |
| − | </blockquote>
| |
| − |
| |
| − | :* It is also recommended that you add the Android SDK's tools, tools/bin, and platform-tools directories to your PATH:
| |
| − | :: <span style="color:#FF0000">Al instalar Android SDK, el zip file '''''sdk-tools-linux''''' descargado de la página oficial, sólo contiene el directorio '''''tools'''''. No contiene ningún directorio '''''platform-tools'''''. Es por eso que es muy importante «Adding SDK Packages» como se describió arriba. A través de «sdkmanager» se isntalan los paquetes y adicionan los directorios correspondientes («android-sdk/platform-tools» and «android-sdk/build-tools»)</span> (https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#setting-environment-variables):
| |
| − | <blockquote>
| |
| − | <syntaxhighlight lang="shell">
| |
| − | export PATH=${PATH}:/home/adelo/1-system/.1-conf-system/1-archivos_programas-ubuntu/android-sdk/platform-tools
| |
| − | export PATH=${PATH}:/home/adelo/1-system/.1-conf-system/1-archivos_programas-ubuntu/android-sdk/build-tools
| |
| − | export PATH=${PATH}:/home/adelo/1-system/.1-conf-system/1-archivos_programas-ubuntu/android-sdk/build-tools/29.0.0
| |
| − | </syntaxhighlight>
| |
| − | </blockquote>
| |
| − |
| |
| − |
| |
| − | <blockquote>
| |
| − | Luego de todas las configuraciones realizadas en esta parte, se adicionaron las siguientes líneas al «/home/adelo/.bashrc» y «/root/.bashrc». <span style="color:#FF0000">Es muy importante señalar que las configuraciones las he colocado también en «/root/.bashrc» porque he tenido que ejecutar algunos comandos como root por questiones de permisología («cordova build android», por ejemplo).</span>
| |
| − |
| |
| − | «/home/adelo/.bashrc» & «/root/.bashrc»:
| |
| − | <syntaxhighlight lang="shell">
| |
| − | # Android SDK:
| |
| − | PATH=/home/adelo/1-system/.1-conf-system/1-archivos_programas-ubuntu/android-sdk/tools:$PATH
| |
| − | PATH=/home/adelo/1-system/.1-conf-system/1-archivos_programas-ubuntu/android-sdk/tools/bin:$PATH
| |
| − |
| |
| − |
| |
| − | # Cordova - Android platform requirements:
| |
| − | #* Set the ANDROID_HOME environment variable to the location of your Android SDK installation:
| |
| − | export ANDROID_HOME=/home/adelo/1-system/.1-conf-system/1-archivos_programas-ubuntu/android-sdk/
| |
| − | #* It is also recommended that you add the Android SDK's tools, tools/bin, and platform-tools directories to your PATH:
| |
| − | export PATH=${PATH}:/home/adelo/1-system/.1-conf-system/1-archivos_programas-ubuntu/android-sdk/platform-tools
| |
| − | export PATH=${PATH}:/home/adelo/1-system/.1-conf-system/1-archivos_programas-ubuntu/android-sdk/build-tools
| |
| − | export PATH=${PATH}:/home/adelo/1-system/.1-conf-system/1-archivos_programas-ubuntu/android-sdk/build-tools/29.0.0
| |
| − | </syntaxhighlight>
| |
| − | </blockquote>
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − |
| |
| − | ====Build the Cordova Application====
| |
| − | <span style="color:green">On all requirements completed successfully</span>, run the build command to build your application:
| |
| − | <syntaxhighlight lang="shell">
| |
| − | cordova build ## Build all added platforms
| |
| − | cordova build android ## Build for specific platform
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − | This procedure will compile the code and build the executable file for the specific platform. In the case of an Android platform, it will build a '''''.apk''''' file.
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | =====Using Phonegap Build=====
| |
| − | https://build.phonegap.com/apps
| |
| − |
| |
| − | This is an online service that we can use to build the App. If we don't have all the requirements (packages installed) in or computer to be able to build (compile) the App, we can use https://build.phonegap.com/apps. In this Web site, we can upload our code and it will build the App and return the executable file ('''''.apk''''' file in case of Android app).
| |
| − |
| |
| − | We can also use Adobe® PhoneGap™ Build Web site to build our App. As is written in this Web Site, we just have to upload our HTML5, CSS, and JavaScript assets to the Adobe® PhoneGap™ Build cloud service and it do the work of compiling the code.
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | =====What is an APK File=====
| |
| − | An Android Package Kit (APK for short) is the package file format used by the Android operating system for distribution and installation of mobile apps. Just like Windows (PC) systems use an .exe file for installing software, the APK does the same for Android.
| |
| − |
| |
| − | ====Test the App====
| |
| − | https://cordova.apache.org/docs/en/latest/guide/cli/#test-the-app
| |
| − |
| |
| − | https://developer.android.com/studio/run/device
| |
| − |
| |
| − | https://developer.android.com/studio/command-line/adb.html#issuingcommands
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ====Project structure - Some important files====
| |
| − | * '''config.xml:'''
| |
| − | : Inside of the application code, there is a very simple file called config.xml that is used to tell your application which libraries it can use.
| |
| − |
| |
| − | * '''plugins folder:'''
| |
| − | : Here you can see a list of folders that each contain the tools for the different plugins.
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ====Plugins====
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | =====Vibration plugin=====
| |
| − | https://www.npmjs.com/package/cordova-plugin-vibration
| |
| − |
| |
| − |
| |
| − | '''Installation:'''
| |
| − | cordova plugin add cordova-plugin-vibration
| |
| − |
| |
| − |
| |
| − | This plugin defines global objects including navigator.vibrate.
| |
| − |
| |
| − | Although in the global scope, they are not available until after the '''''«deviceready»''''' event:
| |
| − | <syntaxhighlight lang="javascript">
| |
| − | document.addEventListener("deviceready", onDeviceReady, false);
| |
| − | function onDeviceReady() {
| |
| − | console.log(navigator.vibrate);
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − | '''Vibrates the device for a given amount of time:'''
| |
| − | navigator.vibrate(time);
| |
| − | navigator.vibrate(3000);
| |
| − | time: Milliseconds to vibrate the device. (Number)
| |
