Post Format

ionic Slack ( Template Version) (Mobile)

Last Updated on

Ionic template app built with HTML and CSS , its a slack clone without a backend yet

    <h3 id="item-description__-ionic-3-slack-app-e-messaging-app-app-documentation-v1-0">“ Ionic 3 Slack App (E-messaging app) App” Documentation ” v1.0</h3>

    <h1 id="item-description__-iontube-ionic-3-slack-app-messaging-app">“IonTube-  Ionic 3 slack App (Messaging app);</h1>

                By: somto achu
                Email: <a href="mailto:[email protected]">somto achu</a>

            Thank you for purchasing my app. If you have any questions that are beyond the scope of this help file, please feel free
                to email via my user page contact form <a href="">here</a>. Thanks so much!

    <h2 id="item-description__toc">Table of Contents</h2>
        <li>Environment Setup</li>
        <li>Build For Android</li>
        <li>Build For IOS</li>
        <li>Testing App</li>
        <li>QuickStart Guide</li>
        <li>Theming your Ionic App</li>

    <h3 id="item-description__Prerequisite"><strong>Prerequisite</strong> – top</h3>
    1. You must have basic programming knowledge/ JavaScript knowledge before going inside this project. You must familiar
        with Angular5, Ionicframework. Basic programming / JavaScript knowledge.
    2. Need to install the latest version of the Ionic CLI and Cordova. Verify that you are running at least node 6.9.x and
        npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions
        are fine.

    <h3 id="item-description__setup"><strong>Environment Setup</strong> – top</h3>
    Setup your OS environment to install the Ionic CLI and Cordova for native app development.
    <pre><code>npm install -g cordova ionic</code></pre>

    You may need to add “sudo” in front of these commands to install the utilities globally

    <h3 id="item-description__run"><strong>Run</strong> – top</h3>

        Unzip the downloaded IonTube project and open a terminal window `cd` into the project root directory and install dependent
        packages by running `npm install` and run the command `ionic serve`. The server will be up &amp; running on localhost 8100
        port. At browser window, open <a href="http://localhost:8100." rel="nofollow">http://localhost:8100.</a>

    Run Commands
        <pre><code>$ ionic serve
            $ ionic serve --lab</code></pre>

    <h3 id="item-description__BuildAndroid"><strong>Build For Android</strong> – top</h3>

        <li>Android Studio</li>
        <li>Updated Android SDK tools, platform and component dependencies. Available through Android Studio’s SDK Manager Add android
            platform with the CLI :</li>
        <pre><code>$ ionic platform add android
            $ ionic build android</code></pre>

    Android Production Builds (release.apk)/Publishing your app

        <pre><code>$ cordova plugin rm cordova-plugin-console
            $ cordova build --release android
            $ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
            $ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name
            $ zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk</code></pre>

    <h3 id="item-description__BuildIOS"><strong>Build For IOS</strong> – top</h3>
    You need the iOS SDK installed on your computer to build an iOS version of your application using the steps below.
        <li>On the command line, make sure you are in the ionic-tutorial/conference directory</li>
        <li>Add support for the iOS platform</li>
        <li>ionic platform add ios</li>
        <li>This step is not required with recent versions of the Ionic CLI because the ios platform is installed by default</li>
        <li>Build the project</li>
        <li>ionic build ios</li>
        <li>Open conference.xcodeproj in the conference/platforms/ios directory</li>
        <li>In Xcode, run the application on a device connected to your computer or in the iOS emulator</li>

    <h3 id="item-description__Testing"><strong>Testing App</strong> – top</h3>
    <b>Desktop Browser Testing</b>
        <pre><code>$ ionic serve</code></pre>
<b>Simulator testing</b>
        <pre><code>$ ionic build ios$ ionic emulate ios</code></pre>
    <b>Testing as a native app</b>
        <pre><code>$ ionic run android</code></pre>

    <h3 id="item-description__QuickStart"><strong>QuickStart- Step By Step Guide</strong> – top</h3>
    <h2 id="item-description__toc">Step One (Recommended)</h2>
    First, install Node.js. Then, install the latest Cordova and Ionic command-line tools in your terminal.
        <pre><code>npm install -g cordova ionic</code></pre>

    <h2 id="item-description__toc">Step Two (Download &amp; Install Dependencies)</h2>

                Unzip the downloaded IonTube project folder and open a terminal window.
                `cd` into the project root directory and install dependent packages by running `npm install`
            <pre><code>npm install</code></pre>

    <h2 id="item-description__toc">Step Three (Configuration)</h2>
        <strong>Open IonTube project in your code editor and go into the project root directory.</strong>

        At the root folder go into the `src/config`, here you can see two files, 1. admob.ts and 2. youtube.ts

        <strong>In admob.ts,</strong> you need to replace your admob config keys for Banner, Interstitial and Video for Android
        and Ios.

        <b>Admob Website</b> <a href="" rel="nofollow"></a> and <b>Admob Ionic Plugin</b>            <a href="" rel="nofollow"></a>

        <strong>In youtube.ts,</strong> you need to set your Google Api Key, Youtube Channel ID and Max Result of Videos per Page(By
        default we set 20/per page).

    <h2 id="item-description__toc">Step Four (Running)</h2>
    <h4 id="item-description__desktop-browser-testing">Desktop Browser Testing</h4>
        <pre><code>cd app

            Ionic serve</code></pre>

    <h4 id="item-description__simulator-testing">Simulator testing</h4>
        <pre><code>ionic build ios
            ionic emulate ios</code></pre>
    <h4 id="item-description__testing-as-a-native-app">Testing as a native app</h4>
        <pre><code>ionic run android

            ionic emulate ios</code></pre>

    <h3 id="item-description__theming"><strong>Theming your Ionic App</strong> – top</h3>
    Theme support is baked right into Ionic apps. Changing the theme is as easy as updating the $colors map in your src/theme/variables.scss

    The fastest way to change the theme of your Ionic app is to set a new value for default, since ThemesBuckets uses the default
        color by default to style most components.

    Our main default colors – <b>color1, color2</b>
    Read More Details from <a href="" rel="nofollow"></a>

    <h3 id="item-description__credits"><strong>Sources and Credits</strong> – top</h3>

    Once again, thank you so much for purchasing this theme. As I said at the beginning, I’d be glad to help you if you have
        any questions relating to this theme. No guarantees, but I’ll do my best to assist. If you have a more general question
        relating to the themes on Codecanyou, you might consider visiting the forums and asking your question in the “Item Discussion” 

    <strong>Somto Achu</strong>
    Go To Table of Contents

Leave a Reply