Giter Club home page Giter Club logo

phonegap-app-stockpile's Introduction

Stockpile

n. - A storage pile accumulated for future use

A PhoneGap example app using Vue.js, Framework7 (with Vue.js bindings) and the Adobe Stock API.

Stockpile Icon

Previewing the app

Hosted version of the Stockpile App.

Requirements

  • PhoneGap CLI: npm install -g phonegap
  • Adobe Stock API key
    • TODO: Add Adobe Stock registration instructions

Getting an Adobe Stock API key

  1. Start by visiting the Adobe I/O Console Integrations.
  2. Click "New Integration", then choose "Access an API" --Continue
  3. Next choose "Adobe Stock" and "OAuth Integration" below that -- Continue
  4. Choose "New integration" -- Continue
  5. Give your integration a name like "Stockpile" and a Description like "A test Adobe Stock integration with a PhoneGap app"
  6. Choose Web as the platform
  7. The Default redirect URI part is not used by this app, so put in any URL (preferably your own). I have used "https://phonegap.com" and "https://phonegap\.com" for the Redirect URI pattern.
  8. Prove you are not a robot, then click the Create integration button
  9. Your integration has been created. Click "Continue to integration details" to get your API key
  10. Your API key will be under "API Key (Client ID)" on the left. You'll need to use that instead of the dummy key in src/utils/config.js

Clone

git clone https://github.com/phonegap/phonegap-app-stockpile
cd phonegap-app-stockpile
npm install
npm run build
phonegap serve

Another option, for rapid developing in the browser, instead of npm run build and phonegap serve, you can also use

npm run dev

...which will run a hot reloading server and start up the browser at http://localhost:8080. This will also allow use of the Vue.js development extension in Chrome

View

You can now view the app either in a browser atlocalhost:3000, or using the PhoneGap Developer App on your device(s).

Of course, all the other PhoneGap CLI commands work as expected.

phonegap platform add ios
phonegap run ios
cordova platform add android
cordova run android --device

etc...

Build & Deploy to the Web

Build the app

npm run build

Deploying the App

Setup Firebase - these steps only need to be done the first time you deploy the app to Firebase

  1. run npm run login to link your local machine to your Firebase account

  2. run npm run init to initialize your project on Firebase (choose the options listed below)

  • choose Hosting
  • set public dir to www
  • configure as single-page app: no

Deploy the app

  1. run npm run deploy to upload your app to Firebase.

phonegap-app-stockpile's People

Contributors

devgeeks avatar hermwong avatar hollyschinsky avatar macdonst avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

phonegap-app-stockpile's Issues

npm run build not reading uncommited config.js on local repo

Discovered this issue when I was trying to set up the deployment of the Stockpile on Firebase.

I had modified src/utils/config.js file on my local repo with my Adobe Stock API key.

I did not commit the changes in src/utils/config.js because I did not want to my Adobe Stock API key to be stored in the repository.

When I used npm run build to create the production build of the App for deployment on Firebase, it did not use my uncommitted version of src/utils/config.js, the build script used the last committed version of src/utils/config.js which contains a placeholder value for the Adobe Stock API key.

To get around this issue, I had to create a local branch and commit my modified src/utils/config.js before running npm run build to get the production build of the App to use my Adobe Stock API key.

Splash screen image for Apple required

We should add the following tag to index.html:

<link  rel="apple-touch-startup-image"  href="img/Default-Portrait.png">

and create an image to go with it. This will be used when the app is started from the home screen of an ๐ŸŽ device

Archived TODO

Pasted from another project
From @hollyschinsky:

  • Review/merge 3 outstanding pull requests for Split Panel template
  • Implement any feedback from users of docs (Herm)
  • Update a couple screenshots due to side menu background color change PR
  • Add a blurb about the icons?
  • Determining best location for docs based on current docs structure/side menu
  • Blog post written
  • If we include all templates in the announcement, one additional to do is to ensure they're all updated with the latest changes we agreed on in yesterday's call
  • Add Adobe code headers to Stockpile

[Android] Navbar fails to reappear under certain circumstances

Repro steps:

  1. Search for 'cats'
  2. Tap on a cat pic in the results
  3. Tap on the cat pic in the details screen
  4. Tap on the cat pit to put the image in viewer mode (for pinch zooming, etc) -- this hides the navbar to display just the image
  5. Hit the Android back button to go back to the details screen
  6. The Material navbar will still be hidden

The navbar will only come back if you again tap on the cat pic in details, returning you to the image view screen, then tap on the image to show the navbar in view mode.

This seems to be a bug in F7, but I will confirm.

Service worker registration is inline

It would be a lot better if we could have that registration src as a file so that we could remove 'unsafe-inline' from the CSP to protect from XSS, etc.

Add absolute basic iPhoneX support

Add viewport-fit=cover to the viewport meta tag in index.html.

This won't allow full screen notch support, but it will at least eliminate the strange white borders.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.