Android app to browse Nasa's Astro Photo of the Day gallery. This app uses the free accessible NASA APOD API to fetch the daily astrophotography of the day in a stylish, minimalist and neat fashion.
- Open the app and instantly check the last Astro Photo Of the Day
- Navigate back in time and check the APOD for any given day since June 16 1995, the date the first APOD was released from NASA.
- Save your favorite days in your own APOD favorite gallery so you can easily reach them again in the future
- Download any image from the NASA server, built-in download function.
- Settings to change pages layouts.
- Support for most media featured in the NASA API, including videos, gifs and images.
The app primary page is Tabs which allows you to navigate between "Today" and "Past" published APOD images. There's a "Timemachine" page so you can check APOD images from the NASA library since the first published APOD image in the 90s.
- Orange/Yellow rectangles: pages
- Purple hexagons: providers
- Red parallelogram: Plugins/packages
- Pink circle: custom angular component
HttpProvider fetches the API for almost all pages, the DownloadProvider manages image downloads and the ToolsProvider offers some methods used from all across the pages and other providers. Finally, the SettingsProvider adds functionality to edit and access user-defined settings, such as pages layout etc.
Plugins:
DomSanitizer: When a youtube link is fetched we must sanitize the URL otherwise youtube won't allow the video to be played.
ImageLoader: Saves images downloaded in the device storage as cache, in case it's necessary again the plugin will load the cached image in no-time instead of fetching the NASA APOD API again.
photoViewer: This Ionic native plugin allows to easily visualize and open in full-screen a clicked image. Used in most pages for this exact reason.
File: Used in the download provider to manage downloaded files, moving and renaming them.
Custom components:
progress bar: custom component used with the Download Provider to show a dynamic progress bar whenever an user starts downloading a picture.
You can debug on browser or on a real device, I suggest the latter combined with Google's chrome remote developer tools because you'll be able to test Cordova and native plugins/features of your phone and also use the dev tools on the remotely connected browser on your computer to your phone.
-
Generally, to build an APK out of a Ionic project, just use the Ionic+Cordova CLI and then you can manually install and use the apk:
ionic cordova build android
This command will generate the APK file in the project folder \platforms\android\app\build\outputs\apk\debug\app-debug.apk
- Start an emulator
emulator -avd Nexus_5_API_27emulator @Nexus_5_API_27- Check the list of available emulators
adb devices- Use Ionic CLI + Cordova to build and push the apk in the emulator
ionic cordova run android --target [device-id]- Connect your android device to the computer through USB
- Accept pop-up on device prompting for data transfer
- Check the unique ID of your device
adb devices- Use Ionic CLI + Cordova to build and run the apk in the device
ionic cordova run android --target [device-id]Browser, cross platform(no cordova):
ionic serveIf you want to use the lab, which allows you to quickly see all of the different platforms (Android, iOS & Windows phone) at once, use the --lab flag:
ionic serve --labBy being logged in in the same Google account and visiting the page chrome://inspect/#devices, you can remotely use Google's development tools (F12 with chrome) on a remote location, such as a Ionic app running on a remote device. This allows you to both test Cordova native plugins and functionalities (such as using the real phone hardware characteristics) and your javascript console and network tools exactly as you would do with browser debugging.
Build an unsigned APK for release:
ionic cordova build --release androidThis will create an .apk file in the path ./platforms/android/app/bu ild/outputs/apk/release/app-release-unsigned.apk, this .apk is unsigned and still needs this last step before being ready for publishing in the play store.
Ionic official publishing guide (followed this one): https://ionicframework.com/docs/v1/guide/publishing.html Android official apk signing guide: https://developer.android.com/studio/publish/app-signing
- Generate keystore:
keytool -genkey -v -keystore nasa-apod.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000This will create a .keystore file, which we will use now to sign the apk file.
- Sign unsigned apk:
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore nasa-apod.keystore ./platforms/android/app/bu
ild/outputs/apk/release/app-release-unsigned.apk alias_name- optimize with zipalign (Bisogna aggiungere all path zipalign, che si trova sempre in una sottodirectory dell'sdk android, nel mio caso Users\fil\AppData\Local\Android\Sdk\build-tools\28.0.3\zipalign.exe)
zipalign -v 4 ./platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk NasaApod.apk- @ionic/[email protected]: Save key/data pairs in the device's storage. Used to store all of the app settings, such as chosen page's layout etc.
- @angular/[email protected] DomSanitizer: Used to safely load youtube videos in case the API is feeding one (the NASA APOD API occasionally feeds different media types such as YouTube links). Used in all the views which load the API: Home, Week, Result and Favorites.
- [email protected]: Allows the use of instead of
tags. The new tag will check if a given image has already been saved in the device storage before downloading and loads it from the device if positive, otherwise it just downloads the image. Just my first step towards reducing data usage.
- [email protected]: Cordova plugin to access and interact with the filesystem. (save, delete files)
Using Ionic 3 and not Ionic 4 because the app would need to be rewritten given the changes in the framework.