The goal of ChocolateChip-UI is to enable the easy creation of hybrid apps. But it is just a framework to create the web part of the app. The hybrid part requires using our NPM command line tool: chui. If you haven't installed it yet, open your terminal and run:
npm install -g chui
When that finishes, you're ready to turn your web app into a hybrid. Actually,
To create a hybrid app there are a couple of arguments you use. First off you need to use the
-h flag to tell
chui that you want to create a hybrid app. Next you need to provide a name for your project using the
-n flag. Make sure you leave a space between the flag and the project name. Next you need to tell
chui which platform you want to target using the
-o flag. You have two choices:
ios. Make sure you have a space between the flag and the name. You can also provide the path to your web app with the
-w flag. You can type
-w followed by a space and then just drag your web app's project folder onto the terminal and the path will be added automatically. If you don't provide a path for your web project, it will still create a hybrid app with a default webpage. You can replace this later.
chui -h -n myApp -o android chui -h -n myApp -o ios chui -h -n myApp -o android -w path/to/my/app
chui finishes creating your project, you will find it on your desktop. If you chose Android as your target, you will find an Android Studio project. You can start up Android Studio and then open the project. I will probably as you to update the gradle code and might as you to install sdk support depending on how you have Android Studio set up. Once the updates are done you can build and see your app running in the Android emulator on on a tethered device.
If you didn't provide the path to your web app when you created the your Android project, you can add it by copying and pasting it into the following folder in your Android project:
app/src/main/assets. The assets folder already has a default
index.html. Replace the contents of this folder with your web app. Make sure your app is also named
If you chose to make and iOS app, after running
chui you will find an Xcode project with your project's name on your desktop. Open it and double click the file with the
xcodeproj extension. That will open your project in Xcode. You should be able to build and see your hybrid app running on the iOS simulator or on a tethered device.
When you create a hybrid app, it provides default icons for your Android and iOS app. If you already have icons, etc., you can provide the path to them when you create your app with the
chui -h -n myApp -o android chui -h -n myApp -o ios -i path/to/app/icons
Be aware that the dimensions and names must match those provided by
chui. You might want to make a default hybrid app first to see what the requirements are for your icons. Or you can just add them in later by dragging them in to the projects to replace the existing ones.