Docs
Everything You Need to Know
Hybrids
Use
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, chui can turn any web app into a hybrd. It does not have to be built with ChocolateChip-UI, it just needs to be HTML, CSS and JavaScript launched from and index.html file.
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: android or 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
When 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 index.html.
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 -i flag:
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.
For more information about what the chui tool can do, read the install docs and visit the NPM page.