XAMARIN MOBILE APP. User Guide NOP4YOU.COM 1

Size: px

Start display at page:

Download "XAMARIN MOBILE APP. User Guide NOP4YOU.COM 1"

Hillary Elliott
6 years ago
Views:

1 XAMARIN MOBILE APP User Guide NOP4YOU.COM 1

2 List of content: 1. About application Package Web.config modification Setting source... 4 Android... 5 IOS Firebase error... 6 Android... 6 ios Rebrand Android ios Facebook Topic NOP4YOU.COM 2

3 1. About application nopcommerce Mobile app is a customizable public store solution for our e-commerce software. You have profitable online store and you are wondering how can you gain more? It's simple. Go mobile. As statistics show, users spend twice as much time on mobile than on web. 2. Package With sources you will get 2 additional plugins and source for Xamarin. Both plugins, Grand.Plugin.Misc.Mobile and Nop.Plugin.Misc.MobileCart need to be compile, installed and need to be run on nopcommerce store. Plugins was developed in Visual Studio Xamarin solution in Visual Studio Web.config modification You need to modify your store Web.config file. Please find runallmanagedmodulesforallrequests and set it to true. Just like example below: <modules runallmanagedmodulesforallrequests="true">  </modules> NOP4YOU.COM 3

4. Setting source Steps you need to follow in order to rebrand default app: Shared project: In IniProperties class, replace Api_URL with your domain and Api_PublicKey/Api_SecretKey with keys

4 4. Setting source Steps you need to follow in order to rebrand default app: Shared project: In IniProperties class, replace Api_URL with your domain and Api_PublicKey/Api_SecretKey with keys generated via our WebApi plugin. WARNING: Generating new keys causes old ones being invalid. Feel free to experiment with //COLORS section, but keep in mind that there will still be some colors that have to be changed in Android project. Update OData client with your current metadata file location. In fact, readding Connected Service migth be required. Metadata location: NOP4YOU.COM 4

5 Android Change "Application name" field in Android Manifest. Replace all occurences of nopcommerceicon.png and nopcommercesplash.png found in Resources->drawable folders(you have to do it via VS, at least in VS 2015). In styles.xml change"#286893" with your desired colors hex. NOP4YOU.COM 5

6 In splash.axml change shape color to match your splash screen color, just a precaution for some weird resolution phones. In MainActivity.cs change ActivityAttributes Label property. IOS Change icons and splash images in Media Asset Catalog, sizes have to match as Apple is very strict about this. After that double check that Visual Assets are set to correct values in Info.plist Change itunes Artworks in Info.plist Change Application Name in Info.plist General note about icons: Icons are a tricky part, as they have to be optimized for various screen sizes. For example, we initially had 59.svg icons and ended up with 483.png ones. Coloring nearly 500 icons might be frustrating, so it will be easier for you to outsource it to us. We will only color.svg files and use our extension to generate those 500.png icons automatically for you. 5. Firebase error If you are getting error about Firebase - this is caused by Push Notification functionality. For now, easiest way to "fix" it is to comment those: FirebaseApp.InitializeApp(this); FirebaseMessaging.Instance.SubscribeToTopic("all"); 2 lines from MainApplication.cs in.droid project and delete google-services.json file. This error occurs because you are using credentials for our Firebase project. Android Go to and create new project: NOP4YOU.COM 6

7 Add android project: Make sure that package name you enter matches the one from your app's manifest. NOP4YOU.COM 7

8 Download google-services.json, add it to your android projects root directory with Build Action set to GoogleServicesJson: NOP4YOU.COM 8

plist Enable push notifications in Entitlements.plist General note: Key <key>aps-environment</key> in Entitlements.

9 ios Create new project same as in android section, make sure your bundle id matches one from Info.plist. Download GoogleService-Info.plist and add it to your ios projects root directory with Build Action set to BundleResource. Enable Remote notifications in Info.plist Enable push notifications in Entitlements.plist General note: Key <key>aps-environment</key> in Entitlements.plist must be set to "development" for debug and "production" for release builds. Generate two certificates as described in and upload them to Cloud Messaging tab in your firebase ios projects settings: NOP4YOU.COM 9

10 After that everything is configured properly. Admin panel: Go to admin panel, set PushApiKey to Server Key and Sender ID accordingly. 6. Rebrand Steps you need to follow in order to rebrand default app: Shared project: In IniProperties class, replace Api_URL with your domain and Api_PublicKey/Api_SecretKey with keys generated via our WebApi plugin. Feel free to experiment with //COLORS section, but keep in mind that there will still be some colors that have to be changed in Android project. NOP4YOU.COM 10

11 Update OData client with your current metadata file location. In fact, readding Connected Service migth be required Android Change "Application name" field in Android Manifest. NOP4YOU.COM 11

Replace all occurences of nopcommerceicon.png and nopcommercesplash.png found in Resources->drawable folders(you have to do it via VS, at least in VS 2015). In styles.

12 Replace all occurences of nopcommerceicon.png and nopcommercesplash.png found in Resources->drawable folders(you have to do it via VS, at least in VS 2015). In styles.xml change"#286893" with your desired colors hex. In splash.axml change shape color to match your splash screen color, just a precaution for some weird resolution phones. In MainActivity.cs change ActivityAttributes Label property. ios Change icons and splash images in Media Asset Catalog, sizes have to match as Apple is very strict about this. After that double check that Visual Assets are set to correct values in Info.plist Change itunes Artworks in Info.plist Change Application Name in Info.plist General note about icons: Icons are a tricky part, as they have to be optimized for various screen sizes. For example, we initially had 59.svg icons and ended up with 483.png ones. Coloring nearly 500 icons might be frustrating, so it will be easier for you to outsource it to us. We will only color.svg files and use our extension to generate those 500.png icons automatically for you. NOP4YOU.COM 12

13 7. Facebook Go to and create new app. Create new Android app and fill it with following information: Use your App Id and MainActivity namespace. Key Hashes can be generated on your pc, but the easiest way is to copy them from Facebook error which will occur when you will try to log in. There are 2 keystores, one for debug and one for release. Replace FacebookAppId property in IniProperties.cs with your own. Go to Info.plist in your ios project and in Advanced tab add following URL Type: fbyourappid NOP4YOU.COM 13

14 Add the following to your Info.plist file(open it with Notepad): <key>lsapplicationqueriesschemes</key> <array> <string>fbapi</string> <string>fb-messenger-api</string> <string>fbauth2</string> <string>fbshareextension</string> </array> 8. Topic      <a href="mynavigation;product;1;hades Gaming Keyboard">Product: HADES Gaming Keyboard</a> <a href="mynavigation;productlist;1;accessories">category products: Accessories</a> <a href="mynavigation;category;1;gift cards">categories: Gift cards</a> NOP4YOU.COM 14

15 <a href="mynavigation;manufacturer;1;apple">manufacturer products: Apple</a> <a href="mynavigation;product;asdasd;error">product: ERROR</a> <a href="mynavigation;productlist;sdasd;error">category products: ERROR</a> <a href="mynavigation;category;sadasd;error">categories: ERROR</a> <a href="mynavigation;manufacturer;asdasd">manufacturer products: ERROR</a> NOP4YOU.COM 15

Configuring Push Notifications For Xamarin Forms

Configuring Push Notifications For Xamarin Forms Push Notifications are one-way forms of communication offered to mobile users that some operation (like an update, deletion, or addition) has happened.