Soyloco frontend

Using this project

0. Install Node.js and Cordova

First, install Node.js. Then, install the latest Cordova and Ionic command-line tools. Follow the Android and iOS platform guides to install required platform dependencies.

1. Install Cordova plugins

Before building and running or emulating the app, we need to install the

require Cordova plugins.

Enter the project

cd soyloco-frontend

Basic device information:

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

Network Connection and Battery Events:

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git

Device orientation:

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-orientation.git

File:

cordova plugin add org.apache.cordova.file

File transfer:

cordova plugin add org.apache.cordova.file-transfer

Geolocation:

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git

2. Install Ionic

Make sure the ionic utility is installed:

sudo npm install -g ionic

3. Install dependencies and add the Android platform

bower install

4. Add Phonegap Facebook plugin

IOS

ionic platform add ios

cordova plugin add https://github.com/Wizcorp/phonegap-facebook-plugin.git --variable APP_ID="738982816123885" --variable APP_NAME="Splash"

Android

ionic platform add android

Build and deploy

The folks over here wrote this life saver of a command line process that saved my day. So whatever goes forward is a repetition but specific to this project.

cordova -d plugin add https://github.com/phonegap/phonegap-facebook-plugin.git --variable APP_ID="738982816123885" --variable APP_NAME="Splash"

android update project --subprojects --path "platforms/android" --target android-19 --library "CordovaLib"

android update project --subprojects --path "platforms/android" --target android-19 --library "com.phonegap.plugins.facebookconnect/splash-FacebookLib"

android update project --path "platforms/android/com.phonegap.plugins.facebookconnect/splash-FacebookLib" --target android-19

cd platforms/android/

ant clean

cd com.phonegap.plugins.facebookconnect/splash-FacebookLib

ant clean

vim AndroidManifest.xml  (\<uses-sdk android:minSdkVersion="14" android:targetSdkVersion="17" /\>)

mkdir ant-build

ant release

cd ../../../.. (this should bring you back to the project root)

Keyhash

I used following steps to generate a Key Hash for my app in facebook: (I am using Mac OSX 10.8)

First open a terminal (open a command prompt in windows). Navigate in the terminal to the directory where your Android debug.keystore is stored. Mostly it will located under “/Users/user_name/.android/” (In Windows will be C:\Documents and Settings.android). Once you are in the “.android” directory, run the following command.

keytool -exportcert -alias androiddebugkey -keystore debug.keystore | openssl sha1 -binary | openssl base64

When it prompts you for a password, type android and hit Enter

Copy the value printed in the terminal that ends with an “=” and paste it in the Key Hash field in Facebook. Then click the Save Changes button.

5. Run/emulate Soyloco-frontend

Now we are ready to build and run/emulate Soyloco-frontend Ionic apps are based on Cordova, so we can use the Cordova utilities to build, test, and deploy our apps, but Ionic provides simple ways to do the same with the ionic utility (substitute android for ios to build for ios):

ionic build android
ionic run android

More info on this can be found on the Ionic Getting Started page.

6. Using Sass

This project makes it easy to use Sass (the SCSS syntax) in your projects. This enables you to override styles from Ionic, and benefit from Sass's great features.

Just update the ./scss/ionic.app.scss file, and run gulp or gulp watch to rebuild the CSS files for Ionic.

Note: if you choose to use the Sass method, make sure to remove the included ionic.css file in index.html, and then uncomment the include to your ionic.app.css file which now contains all your Sass code and Ionic itself:

<!-- IF using Sass (run gulp sass first), then remove the CSS include above
<link href="css/ionic.app.css" rel="stylesheet">
-->