andrevarandas / space-x-explorer Goto Github PK

View Code? Open in Web Editor NEW

2.0 3.0 1.0 157.73 MB

A simple app to consume space x data.

Home Page: https://andrevarandas.github.io/space-x-explorer/

License: GNU Lesser General Public License v3.0

TypeScript 55.52% HTML 31.73% JavaScript 1.23% SCSS 11.52%

spacex spacex-visualization spacex-launches ionic3

space-x-explorer's Introduction

SpaceX Explorer

The challenge is to create a simple Ionic application to consume data from the awesome SpaceX api in 7 days.

Day One

Created initial project.
Changed to dark theme.
Added interfaces to map to http responses.
Added a simple service that requests capsules, cores, dragons and launch data.
Added pages for capsule, core, dragon and launch data.
Added http request cache for launch data.

Day Two

Added support for travis CI. Travis CI should be used to build and manage apk's. (Unsigned)
Did some code cleanup. Removed all component.ts files. But in that way I would be unable to use lazy loading. See Ionic 3 Lazy-loading. Reverted all the changes, and removed imports from app.component.ts that referenced Pages that already had a module.ts. Now, all pages components are lazy loaded.
I also spent some time on how to manually zipalign and sign an apk. I'm writing the required steps below.

Day three

Finally finished automatic builds on travis CI. Travis CI is now able to successfully generate apk's from source.
Cleaned up .travis.yml file.
Created a new basic page to show upcoming launches, added a new method to space-x.ts provider.
Bumped app version to v0.0.2.
Added Historic events list.
Created an app and splash icon. This was easily done with ionic cordova resources. The cli will look for an icon and splash image in the assets folder and automatically generates resources for android and iOS.
Added caching for core, capsules and dragons.

Day Four

Added rocket and rocket detail and launchpad pages.
Improved styles for the future launches page.
Added pages deploy support to travis CI. Meaning that travis will now also build for the web and deploy it using the github pages, creating the webapp at https://andrevarandas.github.io/space-x-explorer/.
Did some minor improvements to core, capsules and corresponding details pages.

Day five

We got a new logo! Thanks to Candy Skull for the awesome work.
Working on custom cordova plugin to be able to set both the wallpaper and lock screen images, that should work at least for android - struggling with the current outdated docs and tutorials.

Day six

Finished the cordova plugin to manage home and lock Screen wallpapers. I am now able to set a home wallpaper/lock screen with a simple image url.
Reversed order from launches list (now shows the top most recent).
Minor style tweaks. (Home and launch-detail)

Current status - Day six

Added rocket details, improved future launches page.

Some Notes

Building apk

# apk is generated at platforms/android/app/build/outputs/apk/release

ionic cordova build android --minifyjs --minifycss --optimizejs --prod --release

Zipalign the unsigned apk

# Input app-relase-unsigned.apk and outputs app-relase-unsigned-aligned.apk

zipalign -f -p 4 app-release-unsigned.apk app-relase-unsigned-aligned.apk

Sign the aligned apk

# Note --ks points to the keystore file. You will be prompted for credentials.

apksigner sign --ks ~/Documents/spacexstore --out app-release.apk app-relase-unsigned-aligned.apk

zipalign and apksigner not found

# Just replace the 27.0.3 with the desired version

echo "export PATH=\$PATH:~/Library/Android/sdk/build-tools/27.0.3/" >> ~/.zshrc && . ~/.zshrc

Postmortem

Working with Nodejs 12.22.12

Build app bundle instead with: (APK's are no longer supported)

ionic cordova build android --ks path/to/keystore.jks --prod --release --minifyjs --minifycss --optimizejs -- -- --packageType=bundle

LICENSE - GPLv3 - André Varandas

space-x-explorer's People

Contributors

Stargazers

Watchers

Forkers

candyskull920

space-x-explorer's Issues

Status bar color

Describe the bug
The status bar is dark with dark color, almost impossible to read.

To Reproduce
Noticeable in any screen.

Expected behavior
The status bar should be black with white text.

Desktop Chrome:
Doesn't affect desktop.

Smartphone

Android

Web app builds

Add Travis ci support to automatic build and release via gh-pages for the web version.

Logo Proposal for space-x-explorer

Hello @AndreVarandas
I am an open source enthusiast and I am looking to expand my work portfolio.
I would like to collaborate with your project for free, I can provide a logo for your application

Good day
Skull C.

Splash screen

Implement a custom simple splashscreen.
I like this rocket png, could be used in a dark background.

Home Page

We should improve the home page (that presents past launches with media) layout.
It would also be nice to allow the user to set an image as background image.

Improve sidemenu

Sidemenu should looke more native like in the example below:

Missing rocket Page

The application should have a rocket and rocket detail page.
This can be done with the ionic cli, and adding the new pages to the app.module.ts.

Next Launch Page

A next launch page should be present, and added to the side menu. - Link to api

Working offline

User is able to navigate if data is cached (user had internet connection once).
We should find a way to inform the user that he is offline, if data for the page is not cached.

Could be a simple toast or a dialog. We should also make sure that we don't have any loading dialogs waiting for data.

Launch Pads Page

A page for launch pads.

Could be a list + a detail page.

Create Future Launches Page

There should be a page with the next launches list and another for the details of each launch.

Future Launches

Describe the bug
The future launches list style should fit the rest of the application look and feel.

To Reproduce
Navigate to upcoming launches screen. Notice the huge date at the end of each list item, and the trimmed description.

Expected behavior
The date should be "faded", and smaller. The description should also be 100% visible. We can solve this adding a custom element, instead of the current ion-item.