Sunday, January 6, 2019

Lesson learnt from app submission

After 2 weeks of trial and error, I found out some fun facts for app submission to different app stores.. so...here you go :p

For App Store:
Reject reason: Testing Instructions
Prior to submitting this app, I have past exprience on how to submit iOS app in iTunes Connect. I thought it will be really smooth but guess what..I forgot to include the Testing Instructions and my app was rejected ðŸ˜Ģ

For Google Play Store:
Reject Reason: Your app's short description mentioned other brand
Example: I used "A mini game similar to Minesweeper" in my description and my app was rejected T___T But why there's so many Minesweeper game on Google Play Store? Anyways, inside the app I still put Minesweeper word but Google didnt found out because that was just a bot who rejected my app 😛

For Mac App Store:
Reject reason: We have found that when the user closes the main application window there is no menu item to re-open it.
- If your electron app is Single Window app, you have to Kill the app when "X" button is clicked (not minimize ðŸ˜Ū) else it will be rejected and the reason for rejection will be as above. How would I know it is related to menu bar ðŸĪ” ofcourse stack overflow taught me.. 😌

For Microsoft Store:
Reject Reason: The app promotes acquiring software through methods other than the Store
Since the electron version is built after RN.. That's why I have included a link to download on App Store and Google Play in "About" screen. But got rejected. T__T

---

Anyways, besides all these lessons learnt, I also found out that in order to ship an app, that is - from development to production.. it takes a lot more than just coding itself.

I often find myself spending time on
- Designing logo (Something that's totally alien to developer)
- Generating correct logo size & shape (especially the rounded logo on iOS ðŸĪ”)
- Reading documentation back and forth on configuration for N times (even the page present the same text)
- Endless trial-and-error to build and sign the app (cert and provisioning issue especially you are not using xcode 😏)
- Submitting multiple builds and still failing (For Microsoft store)
- Writing a proper ReadMe.md 😛 (With credits and demo)
- Generating privacy policy..
- Regenerating screenshots for all platform after you have made changes to the user interface ðŸ˜Ū
- and etc.

Coding time itself I would say: just 2 days? ðŸĪ” out of the total of 13 days ðŸĪ

---

Why on earth would I take the suffering path? 😌

Saturday, January 5, 2019

Conquer the world with React + ReactNative + Electron

Hi Everyone, I am the Model of the Day - Brownie :p


Recently, I've been so actively researching & trying out new stuff. That is - Publishing my first app (game) to Google Play Store, then Apple's App Store, Mac App Store & lastly Microsoft Store for Windows App.

I knew, my passion is coming back :p The last time I did this (staying up late just to create something totally useless but still feeling accomplished - opps) was like 2 years ago ðŸĪŠI even subscribed to the Apple Developer Program for 99 USD just to be able to publish my useless app :o

So what I did was.. (Just descriptions, no tutorial yet ">__<")

For the Mobile platform:
- Created a new empty ReactNative project using `react-native init [ProjectName]`
- Integrate Minesweeper game into the RN project (the code is based on this repo)
- Improved the game logic, restructured some of the redux/redux-saga codes
- Added react-navigation for screen navigation
- Prettified the User Interface & of course included Bear into the game :p
- Gives the game a new name: BearSweeper (ofcourse related to Bear ðŸĪŠ)
- Integrated Fastlane - App automation tool that allows you to deploy your app to Google Play/App Store directly with just simple scripts
- Integrated CodePush - Allows you to deploy your JavaScript codes on the fly bypassing App Store/Play Store
- Downloaded free trial of Sketch app to design my first logo ever (yes I can be designer as well xD)
- Deploy both Android & iOS apps to respective app stores
- Complete all the necessary metadata info & Submit for review
- Open sourced on Github - BearSweeper :p
- Live on App Store & Google Play 😍

After finished the mobile app version, I thought it might be a good idea to build for desktop version as well. In the meantime, I can get to learn something new too xD.. so here I go ~

For the Desktop platform:
- Create a new empty React app using create-react-app
- Integrate ElectronJS into the React project by referring to this & this & other stackoverflow guides because following just 1 guide usually don't works ðŸĪŠ
- Managed to get the electron+react app up and running & start to migrate the minesweeper game logic from the RN version to React version
- Rebuilt the User Interface using HTML elements & CSS & Styling
- Integrated react-router to replace react-navigation for navigating between pages
- Reuse the redux part (actions, reducers, sagas) from the RN version - Yes!! that's the beauty of React+Redux..xD
- Login to Microsoft account & guess what, my Publisher account still active!! Got the free Publisher account in college time when I joined a hackathon named "Wowzapp" :p
- Play around with electron-builder & `package.json` for day(s) just to configure stuff to build, bundle & deploy apps on Mac App Store & Microsoft Store.
- Uploaded to both App store & completed the metadata & Submitted for review
- Open sourced on Github as well - bear-sweeper
- Live on Mac App Store & Microsoft Store 😍

And so.. human always greed for more.. Since I've been using React+Electron for the Desktop app, why not I make it into a website as well? LOL (just ignore electron part will do?)

For the Web platform:
- Using same codebase from bear-sweeper, added some minor fixes to cater for mobile browser (because I have OCD in everything)
- Create a new free Heroku app & linked my GitHub repository to the Heroku app
- Set to auto deploy on Git commit
- Login to my GoDaddy account to setup subdomain pointing to my heroku app
- Tada ~ the game is live on my Website too xD

---

So so so... how long does everything takes? From developing to publishing ReactNative app, React+Electron App & Website... Since 23th Dec 2018 (based on my Github first commit for BearSweeper repo) until 5th Jan Today (roughly 2 weeks ðŸĪ”)

It's certainly a good and fulfilling 2 weeks of my life because I've learnt a lot from all these crazy days & nights & midnights. (Not working hours ofcourse 😌)

---




Intro to "React with Bear" 😛

Welcome to my blog ðŸŧI am Carol from Malaysia - Front End Developer (though i wish to learn backend too ">__<"). I love bear(s) a lot that's why the blog name itself is self-explanatory.

Why "React with Bear" ? Actually the intention of starting this blog is to serve as "front end tech guide" (opps I only know frontend ">__<") for other beginner/experienced developers who lost their way out but right now my "expertise" is mostly on React Native & ReactJS so let's just name it "React with Bear" xD

I love to record down stuff so that I can always refer back in future when myself or others face similar issues. In my company, I wrote wiki for projects that I worked on so when a new member joins, he/she can refer to the wiki to setup & run the project instantly xD

I recall when I first joined, there's no documentation/wikis for me to refer. I have to ask around and disturb others in order to get started, so I took the initiative to pave a less suffering road to the future member :p

That's the same thing I would like to do here - Pave a less suffering road for the next great developer to focus on creating the next great app instead of stuck in a black hole researching how this works/how that works & end up giving up :p

However, the things that I going to share will be random and not limited to just React/React Native :p Stay tuned!
---

**Note: I am not 100% correct and everything I share will be solely based on my personal experience :p